Bruger:SimmeD/Scripts/quick-template.js

// Load the OOjs UI library
mw.loader.using('oojs-ui').done(function () {

    // Function to append text with a defined summary to the current page
    const appendText = (text, summary) => {
        new mw.Api()
            .edit(mw.config.get("wgPageName"), revision => ({
                text: revision.content + text,
                summary: summary,
                minor: false
            }))
            .then(() => { location.reload(); }); // Refresh the page after editing
    }

    // Custom Dialog class
    const MyDialog = function(config) {
        MyDialog.super.call(this, config);
    }
    
    // Inherit properties of OO.ui.Dialog 
    OO.inheritClass(MyDialog, OO.ui.Dialog);

    // Static name property
    MyDialog.static.name = 'myDialog';

    // Initialize function to setup dialog UI
    MyDialog.prototype.initialize = function () {
        MyDialog.super.prototype.initialize.call(this); // Call parent initialize function

        // Create menuItems for the DropdownWidget
        const menuItems = ["Velkommen", "Test", "Test2"].map((label, index) => new OO.ui.MenuOptionWidget({
            data: `{{${label.toLowerCase()}|~~}}`, // set data
            label, // set label
        }));

        // Create a DropdownWidget
        const templateDropDown = new OO.ui.DropdownWidget({
            label: 'Vælg skabelon:',
            $overlay: this.$overlay,
            menu: { items: menuItems } // setting menu items
        });

        // Create a ButtonInputWidget
        const saveButton = new OO.ui.ButtonInputWidget({
            label: 'Gem',
            icon: 'check',
            value: 'check',
            onClick: () => appendText(templateDropDown.getMenu().items.find(item => item.selected)?.data)
        });

        // Create a PanelLayout
        const contentPanel = new OO.ui.PanelLayout({ padded: true, expanded: false });

        // Add HTML and above created widgets to the PanelLayout
        contentPanel.$element.append('<h1>Hurtig skabelon</h1>', templateDropDown.$element, '<hr/>', saveButton.$element);
        
        // Append PanelLayout to the dialog body
        this.$body.append(contentPanel.$element);
    };

    // Overriding getBodyHeight function to make dialog auto-sizing
    MyDialog.prototype.getBodyHeight = function () {
        return this.content.$element.outerHeight(true);
    };

    // Create a new instance of MyDialog class
    const myDialog = new MyDialog({ size: 'medium' });

    // Create a WindowManager
    const windowManager = new OO.ui.WindowManager();

    // Append WindowManager to the body
    $(document.body).append(windowManager.$element);

    // Add created dialog to WindowManager
    windowManager.addWindows([myDialog]);

    // Add Portlet link to the MediaWiki sidebar
    mw.util.addPortletLink('p-cactions', '#', 'Patruljant Menu', 'ca-welcome-isnot', 'Patruljant Menu', '', '');

    // Add click event handling
    $('body').on('click', '#ca-welcome-isnot', () => {
        windowManager.openWindow(myDialog);
    });
});