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();