Malayala Kit

MalayalaKit: JavaScript library for creating customizable web menus with tabs, buttons, switches, and input elements.

Questo script non dovrebbe essere installato direttamente. È una libreria per altri script da includere con la chiave // @require https://update.greasyfork.org/scripts/482771/1323949/Malayala%20Kit.js

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

Autore
garticio
Versione
0.0.1.20240206140623
Creato il
20/12/2023
Aggiornato il
06/02/2024
Dimensione
80,4 KB
Licenza
Non disponibile

Key Features:

  1. Tabs: Efficiently organize content into tabs for a structured user interface.
  2. Buttons: Incorporate interactive buttons with customizable labels and actions.
  3. Switches: Integrate toggle switches for binary options.
  4. Input Elements: Develop input fields with various types and customizable attributes.
  5. Slider: Integrate sliders with customizable labels, minimum and maximum values, and onchange events.
  6. Color Picker: Add color pickers with customizable labels and onchange events.

The name MalayalaKit is derived from the Malayalam language. Malayalam is spoken in the Indian state of Kerala, and people from Kerala are often referred to as Malayalis. The name holds personal significance, originating from memories associated with a cherished Christian girl. She used to express her affection, and though she is currently missing, the name MalayalaKit serves as a reminder of those moments.

The library's design empowers developers to swiftly integrate and configure menus within their web projects. It includes built-in styling for a visually appealing experience, yet developers can also customize the appearance to match their application's design.

To use MalayalaKit, developers can instantiate a menu, add tabs with associated content, and include buttons, switches, input elements, sliders, and color pickers within each tab. The library streamlines the process of creating dynamic and responsive menus for web applications.

Example

var toastManager = new MalayalaKit.ToastManager({position: 'top-center'}); // Supported Positions: top-left, top-right, bottom-left, bottom-right top-center, bottom-center - Defult is bottom-right.

var kit = new MalayalaKit.CreateMenu({
    title: "MalayalaKit",
    icon: "",
    size: { width: 500, height: 400 },
    position: { top: 50, left: 50 },
    hotkey: { keyCode: 77, ctrlKey: true, altKey: false, shiftKey: false },
    pointerLock: true
});

var general = new MalayalaKit.Tab("General");
general.addButton({ label: "Show All Toasts", buttonLabel: "Show Toasts", onclick: function () {
        toastManager.showToast({ message: 'Toast Message!', duration: 5000, showProgress: true });
        toastManager.showToast({ message: 'Toast Message!', showProgress: true });
        toastManager.showToast({ message: 'Toast Message!', type: 'info', showProgress: true });
        toastManager.showToast({ message: 'Toast Message!', type: 'warning', showProgress: true });
        toastManager.showToast({ message: 'Toast Message!', type: 'error', showProgress: true });
        // define 'toast' at the beginning of the toast and then use 'toast' toastManager.removeToast(toast); to delete the toast
    }
});
general.addButton({ label: "Button Label", style: "border", buttonLabel: "Buton Text", onclick: function () {
        toastManager.showToast({ message: 'Clicked', type: 'info' });
    }
});
general.addSwitch({ label: "Switch Label", value: true, onchange: function (value) {
        toastManager.showToast({ message: 'Switch value: ' + value, type: 'info' });
    }
});
general.addInput({ label: "Number Input", placeholder: "Enter a Number", type: "number", value: 0, onchange: function (value) {
    toastManager.showToast({ message: 'Number input value: ' + value, type: 'info' });
}
});
general.addHotkey({
    label: "Hotkey",
    value: { keyCode: 77, ctrlKey: true, altKey: false, shiftKey: false },
    onlistener: function (event) {
        toastManager.showToast({ message: 'Hotkey value: ' + event, type: 'info' });
    }
});
kit.addTab(general);

var tab2 = new MalayalaKit.Tab("Tab 2");
tab2.addButton({ buttonLabel: "Hide", onclick: function () {
        kit.toggleMenu();
    }
});
tab2.addSlider({ label: 'Slider Label', min: 0, max: 100, value: 50, onchange: function (value) {
        toastManager.showToast({ message: 'Slider Value:  ' + value, type: 'info' });
    }
});
tab2.addColorPicker({ label: 'Color Picker Label', value: '#ff0000', onchange: function (color) {
        toastManager.showToast({ message: 'Selected Color: ' + color, type: 'info' });
    }
});
kit.addTab(tab2);

MalayalaKit.setLanguage('ml'); // Supported languages: en, tr, ml, ta, hi, ko, ja, it, ar, fr

kit.render();