Malayala Kit

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

Bu script direkt olarak kurulamaz. Başka scriptler için bir kütüphanedir ve meta yönergeleri içerir // @require https://update.greasyfork.org/scripts/482771/1323949/Malayala%20Kit.js

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

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

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Zateb bir user-style yöneticim var, yükleyeyim!)

Yazar
garticio
Versiyon
0.0.1.20240206140623
Oluşturulma
20.12.2023
Güncellenme
06.02.2024
Boyut
80,4 KB
Lisans
N/A

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