View source for User:Polygnotus/Scripts/WikiEditorToolbarHelperConfigurator.js

/**
 * WikiEditor Button Configuration Tool
 * @version 2025-06-07
 * @author Your Username
 * 
 * Usage: Add ?wikieditorconfig=1 to any Wikipedia URL to open the configuration tool
 * Or add mw.loader.load('//en.wikipedia.org/w/index.php?title=User:YourUsername/wikieditor-config.js&action=raw&ctype=text/javascript');
 * to your common.js
 */
/*jshint browser: true */
/*global jQuery, mediaWiki, OO */
(function ($, mw) {
    "use strict";

    // Only load if the configuration parameter is present
    var urlParams = new URLSearchParams(window.___location.search);
    if (urlParams.get('wikieditorconfig') !== '1' && !window.forceWikiEditorConfig) {
        return;
    }

    var buttons = [];
    var editingIndex = -1;

    function createConfigInterface() {
        // Create the modal overlay
        var $overlay = $('<div>').css({
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            backgroundColor: 'rgba(0,0,0,0.8)',
            zIndex: 10000,
            overflow: 'auto'
        });

        var $container = $('<div>').css({
            maxWidth: '1200px',
            margin: '20px auto',
            backgroundColor: '#fff',
            borderRadius: '8px',
            boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
            position: 'relative'
        });

        var $header = $('<div>').css({
            backgroundColor: '#0645ad',
            color: '#fff',
            padding: '20px',
            borderRadius: '8px 8px 0 0',
            textAlign: 'center'
        });
        
        var $title = $('<h1>').css({
            margin: '0',
            fontSize: '24px'
        }).text('WikiEditor Button Configuration Tool');
        
        var $subtitle = $('<p>').css({
            margin: '10px 0 0 0',
            opacity: '0.9'
        }).text('Create custom buttons for your WikiEditor toolbar');
        
        $header.append($title, $subtitle);

        var $closeBtn = $('<button>').text('×').css({
            position: 'absolute',
            top: '10px',
            right: '15px',
            background: 'none',
            border: 'none',
            color: '#fff',
            fontSize: '24px',
            cursor: 'pointer',
            padding: '5px 10px'
        }).click(function() {
            $overlay.remove();
        });

        $header.append($closeBtn);

        var $content = $('<div>').css({
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: '20px',
            padding: '20px'
        });

        var $leftPanel = createLeftPanel();
        var $rightPanel = createRightPanel();

        $content.append($leftPanel, $rightPanel);

        var $jsonSection = $('<div>').css({
            padding: '20px',
            borderTop: '1px solid #ccc'
        });

        var $jsonTitle = $('<h3>').text('Generated JSON Configuration').css({
            marginBottom: '15px'
        });

        var $jsonOutput = $('<textarea>').attr('id', 'json-output').css({
            width: '100%',
            height: '200px',
            fontFamily: 'monospace',
            fontSize: '12px',
            padding: '10px',
            border: '1px solid #ccc',
            borderRadius: '4px',
            backgroundColor: '#f9f9f9'
        }).val('Click "Generate JSON" to see your configuration');

        var $jsonButtons = $('<div>').css({
            marginTop: '10px',
            textAlign: 'center'
        });

        var $generateBtn = createButton('Generate JSON', function() {
            generateJSON();
        });

        var $copyBtn = createButton('Copy to Clipboard', function() {
            copyJSON();
        });

        var $saveBtn = createButton('Save to User Page', function() {
            saveToUserPage();
        });

        $jsonButtons.append($generateBtn, ' ', $copyBtn, ' ', $saveBtn);
        $jsonSection.append($jsonTitle, $jsonOutput, $jsonButtons);

        $container.append($header, $content, $jsonSection);
        $overlay.append($container);
        $('body').append($overlay);

        // Load existing configuration if it exists
        loadExistingConfig();
    }

    function createLeftPanel() {
        var $panel = $('<div>').css({
            backgroundColor: '#f8f9fa',
            padding: '20px',
            borderRadius: '8px',
            border: '1px solid #ddd'
        });

        var $title = $('<h3>').text('Button Configuration').css({
            marginBottom: '20px',
            color: '#333'
        });

        var $form = $('<div>');

        // Basic fields
        $form.append(
            createFormGroup('Button ID', 'text', 'button-id', 'unique-button-id', true),
            createFormGroup('Label', 'text', 'button-label', 'Button Label', true),
            createFormGroup('Tooltip', 'text', 'button-tooltip', 'Button tooltip (optional)'),
            createSelectGroup('Button Type', 'button-type', [
                {value: 'traditional', text: 'Traditional'},
                {value: 'ooui', text: 'OOUI'},
                {value: 'element', text: 'Element'}
            ]),
            createFormGroup('Icon', 'text', 'button-icon', 'Icon URL or OOUI icon name')
        );

        // Collapsible sections
        $form.append(
            createCollapsibleSection('Text Insertion', [
                createFormGroup('Insert Before', 'textarea', 'insert-before', 'Text to insert before cursor'),
                createFormGroup('Sample Text', 'textarea', 'sample-text', 'Text to select/replace'),
                createFormGroup('Insert After', 'textarea', 'insert-after', 'Text to insert after cursor'),
                createFormGroup('Placeholder Pattern', 'text', 'placeholder-pattern', '{input}', false, '{input}')
            ]),
            createCollapsibleSection('Prompt Configuration', [
                createCheckboxGroup('Enable Prompt', 'has-prompt'),
                createSelectGroup('Prompt Type', 'prompt-type', [
                    {value: 'simple', text: 'Simple (browser prompt)'},
                    {value: 'ooui', text: 'OOUI Dialog'}
                ]),
                createFormGroup('Prompt Message', 'text', 'prompt-message', 'Enter your input:'),
                createFormGroup('Dialog Title', 'text', 'prompt-title', 'Input Required'),
                createFormGroup('Default Value', 'text', 'prompt-default', 'Default input value')
            ]),
            createCollapsibleSection('Auto Summary', [
                createCheckboxGroup('Enable Auto Summary', 'has-auto-summary'),
                createFormGroup('Summary Text', 'text', 'summary-text', 'Edit summary'),
                createSelectGroup('Position', 'summary-position', [
                    {value: 'append', text: 'Append'},
                    {value: 'prepend', text: 'Prepend'},
                    {value: 'replace', text: 'Replace'}
                ]),
                createFormGroup('Delimiter', 'text', 'summary-delimiter', '; ', false, '; '),
                createCheckboxGroup('Use Placeholder in Summary', 'summary-use-placeholder')
            ]),
            createCollapsibleSection('Filters & Namespaces', [
                createNamespaceSelector(),
                createFormGroup('Page Filters', 'textarea', 'page-filters', 'CSS selectors, one per line')
            ])
        );

        var $buttonRow = $('<div>').css({
            marginTop: '20px',
            textAlign: 'center'
        });

        var $addBtn = createButton('Add Button', function() {
            addButton();
        }, 'primary');

        var $clearBtn = createButton('Clear Form', function() {
            clearForm();
        });

        var $exampleBtn = createButton('Load Example', function() {
            loadExample();
        });

        $buttonRow.append($addBtn, ' ', $clearBtn, ' ', $exampleBtn);
        $form.append($buttonRow);

        $panel.append($title, $form);
        return $panel;
    }

    function createRightPanel() {
        var $panel = $('<div>').css({
            backgroundColor: '#f8f9fa',
            padding: '20px',
            borderRadius: '8px',
            border: '1px solid #ddd'
        });

        var $title = $('<h3>').text('Buttons List').css({
            marginBottom: '20px',
            color: '#333'
        });

        var $buttonsList = $('<div>').attr('id', 'buttons-list').css({
            maxHeight: '300px',
            overflowY: 'auto',
            border: '1px solid #ddd',
            borderRadius: '4px',
            padding: '10px',
            backgroundColor: '#fff',
            marginBottom: '20px'
        }).html('<p style="text-align: center; color: #666; font-style: italic;">No buttons added yet</p>');

        var $defaultsTitle = $('<h3>').text('Global Defaults').css({
            marginBottom: '15px',
            color: '#333'
        });

        var $defaults = $('<div>').append(
            createSelectGroup('Default Section', 'default-section', [
                {value: 'main', text: 'Main'},
                {value: 'advanced', text: 'Advanced'},
                {value: 'format', text: 'Format'},
                {value: 'insert', text: 'Insert'}
            ]),
            createSelectGroup('Default Group', 'default-group', [
                {value: 'insert', text: 'Insert'},
                {value: 'format', text: 'Format'},
                {value: 'reference', text: 'Reference'},
                {value: 'special', text: 'Special'}
            ])
        );

        var $clearAllBtn = createButton('Clear All Buttons', function() {
            if (confirm('Are you sure you want to clear all buttons?')) {
                buttons = [];
                updateButtonsList();
            }
        }, 'danger');

        $panel.append($title, $buttonsList, $defaultsTitle, $defaults, $('<div>').css({marginTop: '15px'}).append($clearAllBtn));
        return $panel;
    }

    function createFormGroup(label, type, id, placeholder, required, defaultValue) {
        var $group = $('<div>').css({marginBottom: '15px'});
        var $label = $('<label>').attr('for', id).text(label + (required ? ' *' : '')).css({
            display: 'block',
            marginBottom: '5px',
            fontWeight: 'bold'
        });

        var $input;
        if (type === 'textarea') {
            $input = $('<textarea>').attr({
                id: id,
                placeholder: placeholder,
                rows: 3
            });
        } else {
            $input = $('<input>').attr({
                type: type,
                id: id,
                placeholder: placeholder
            });
        }

        if (defaultValue) {
            $input.val(defaultValue);
        }

        $input.css({
            width: '100%',
            padding: '8px',
            border: '1px solid #ccc',
            borderRadius: '4px',
            fontSize: '14px'
        });

        $group.append($label, $input);
        return $group;
    }

    function createSelectGroup(label, id, options) {
        var $group = $('<div>').css({marginBottom: '15px'});
        var $label = $('<label>').attr('for', id).text(label).css({
            display: 'block',
            marginBottom: '5px',
            fontWeight: 'bold'
        });

        var $select = $('<select>').attr('id', id).css({
            width: '100%',
            padding: '8px',
            border: '1px solid #ccc',
            borderRadius: '4px',
            fontSize: '14px'
        });

        options.forEach(function(option) {
            $select.append($('<option>').val(option.value).text(option.text));
        });

        $group.append($label, $select);
        return $group;
    }

    function createCheckboxGroup(label, id) {
        var $group = $('<div>').css({marginBottom: '15px'});
        var $wrapper = $('<div>').css({
            display: 'flex',
            alignItems: 'center',
            gap: '8px'
        });

        var $checkbox = $('<input>').attr({
            type: 'checkbox',
            id: id
        });

        var $label = $('<label>').attr('for', id).text(label).css({
            fontWeight: 'bold'
        });

        $wrapper.append($checkbox, $label);
        $group.append($wrapper);
        return $group;
    }

    function createCollapsibleSection(title, content) {
        var $section = $('<div>').css({
            border: '1px solid #ddd',
            borderRadius: '4px',
            marginBottom: '15px'
        });

        var $header = $('<div>').css({
            padding: '10px 15px',
            backgroundColor: '#e9ecef',
            cursor: 'pointer',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
        }).text(title);

        var $toggle = $('<span>').text('▼').css({
            transition: 'transform 0.3s'
        });

        $header.append($toggle);

        var $content = $('<div>').css({
            padding: '15px',
            display: 'none'
        });

        content.forEach(function(item) {
            $content.append(item);
        });

        $header.click(function() {
            $content.toggle();
            $toggle.css('transform', $content.is(':visible') ? 'rotate(180deg)' : 'rotate(0deg)');
        });

        $section.append($header, $content);
        return $section;
    }

    function createNamespaceSelector() {
        var $group = $('<div>').css({marginBottom: '15px'});
        var $label = $('<label>').text('Namespaces').css({
            display: 'block',
            marginBottom: '10px',
            fontWeight: 'bold'
        });

        var $grid = $('<div>').css({
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
            gap: '8px'
        });

        var namespaces = [
            {value: 0, text: 'Main (0)'},
            {value: 1, text: 'Talk (1)'},
            {value: 2, text: 'User (2)'},
            {value: 3, text: 'User talk (3)'},
            {value: 4, text: 'Project (4)'},
            {value: 5, text: 'Project talk (5)'},
            {value: 6, text: 'File (6)'},
            {value: 100, text: 'Portal (100)'}
        ];

        namespaces.forEach(function(ns) {
            var $item = $('<div>').css({
                display: 'flex',
                alignItems: 'center',
                gap: '5px',
                padding: '5px',
                backgroundColor: '#f8f9fa',
                borderRadius: '3px'
            });

            var $checkbox = $('<input>').attr({
                type: 'checkbox',
                id: 'ns-' + ns.value,
                value: ns.value
            });

            var $itemLabel = $('<label>').attr('for', 'ns-' + ns.value).text(ns.text).css({
                fontSize: '12px'
            });

            $item.append($checkbox, $itemLabel);
            $grid.append($item);
        });

        $group.append($label, $grid);
        return $group;
    }

    function createButton(text, onclick, type) {
        var colors = {
            primary: {bg: '#0645ad', color: '#fff'},
            danger: {bg: '#d33', color: '#fff'},
            default: {bg: '#f8f9fa', color: '#333'}
        };

        var style = colors[type] || colors.default;

        return $('<button>').text(text).css({
            backgroundColor: style.bg,
            color: style.color,
            border: '1px solid ' + (type === 'default' ? '#ccc' : style.bg),
            padding: '8px 16px',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '14px',
            margin: '0 5px'
        }).click(onclick);
    }

    function addButton() {
        var buttonData = getFormData();
        if (!buttonData.id || !buttonData.label) {
            alert('Button ID and Label are required!');
            return;
        }

        // Check for duplicate IDs
        if (editingIndex === -1 && buttons.some(function(b) { return b.id === buttonData.id; })) {
            alert('Button ID must be unique!');
            return;
        }

        if (editingIndex >= 0) {
            buttons[editingIndex] = buttonData;
            editingIndex = -1;
        } else {
            buttons.push(buttonData);
        }

        updateButtonsList();
        clearForm();
    }

    function getFormData() {
        var data = {
            id: $('#button-id').val(),
            label: $('#button-label').val(),
            type: $('#button-type').val()
        };

        // Optional fields
        var tooltip = $('#button-tooltip').val();
        if (tooltip) data.tooltip = tooltip;

        var icon = $('#button-icon').val();
        if (icon) data.icon = icon;

        // Text insertion
        var insertBefore = $('#insert-before').val();
        if (insertBefore) data.insertBefore = insertBefore;

        var sampleText = $('#sample-text').val();
        if (sampleText) data.sampleText = sampleText;

        var insertAfter = $('#insert-after').val();
        if (insertAfter) data.insertAfter = insertAfter;

        var placeholderPattern = $('#placeholder-pattern').val();
        if (placeholderPattern && placeholderPattern !== '{input}') {
            data.placeholderPattern = placeholderPattern;
        }

        // Prompt configuration
        if ($('#has-prompt').is(':checked')) {
            data.prompt = {
                type: $('#prompt-type').val(),
                message: $('#prompt-message').val() || 'Enter your input:'
            };

            var promptTitle = $('#prompt-title').val();
            if (promptTitle) data.prompt.title = promptTitle;

            var promptDefault = $('#prompt-default').val();
            if (promptDefault) data.prompt.defaultValue = promptDefault;
        }

        // Auto summary
        if ($('#has-auto-summary').is(':checked')) {
            data.autoSummary = {
                summary: $('#summary-text').val() || 'Auto summary',
                position: $('#summary-position').val(),
                delimiter: $('#summary-delimiter').val() || '; '
            };

            if ($('#summary-use-placeholder').is(':checked')) {
                data.autoSummary.usePlaceholder = true;
                data.autoSummary.placeholderPattern = placeholderPattern || '{input}';
            }
        }

        // Namespaces
        var namespaces = [];
        $('input[id^="ns-"]:checked').each(function() {
            namespaces.push(parseInt($(this).val()));
        });
        if (namespaces.length > 0) data.namespaces = namespaces;

        // Page filters
        var pageFilters = $('#page-filters').val()
            .split('\n')
            .map(function(f) { return f.trim(); })
            .filter(function(f) { return f; });
        if (pageFilters.length > 0) data.pageFilters = pageFilters;

        return data;
    }

    function updateButtonsList() {
        var $list = $('#buttons-list');
        if (buttons.length === 0) {
            $list.html('<p style="text-align: center; color: #666; font-style: italic;">No buttons added yet</p>');
            return;
        }

        var html = buttons.map(function(button, index) {
            var safeLabel = $('<div>').text(button.label).html();
            var safeId = $('<div>').text(button.id).html();
            var safeTooltip = button.tooltip ? $('<div>').text(button.tooltip).html() : '';
            
            return '<div style="background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 10px; margin-bottom: 8px;">' +
                '<h4 style="margin: 0 0 5px 0; color: #333;">' + safeLabel + ' (' + safeId + ')</h4>' +
                '<p style="margin: 0 0 10px 0; color: #666; font-size: 12px;">Type: ' + button.type + (safeTooltip ? ' • ' + safeTooltip : '') + '</p>' +
                '<button onclick="editButton(' + index + ')" style="background: #0645ad; color: #fff; border: none; padding: 4px 8px; border-radius: 3px; margin-right: 5px; cursor: pointer;">Edit</button>' +
                '<button onclick="deleteButton(' + index + ')" style="background: #d33; color: #fff; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer;">Delete</button>' +
                '</div>';
        }).join('');

        $list.html(html);
    }

    function clearForm() {
        $('input, select, textarea').each(function() {
            if ($(this).attr('type') === 'checkbox') {
                $(this).prop('checked', false);
            } else {
                $(this).val('');
            }
        });
        $('#placeholder-pattern').val('{input}');
        $('#summary-delimiter').val('; ');
        editingIndex = -1;
    }

    function generateJSON() {
        var config = {
            defaults: {
                section: $('#default-section').val(),
                group: $('#default-group').val(),
                type: "ooui",
                autoSummary: {
                    position: "append",
                    delimiter: "; "
                }
            },
            buttons: buttons
        };

        var json = JSON.stringify(config, null, 2);
        $('#json-output').val(json);
    }

    function copyJSON() {
        var $jsonOutput = $('#json-output');
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText($jsonOutput.val()).then(function() {
                alert('JSON copied to clipboard!');
            }).catch(function() {
                // Fallback to older method
                $jsonOutput.select();
                document.execCommand('copy');
                alert('JSON copied to clipboard!');
            });
        } else {
            // Fallback for older browsers
            $jsonOutput.select();
            document.execCommand('copy');
            alert('JSON copied to clipboard!');
        }
    }

    function saveToUserPage() {
        var username = mw.config.get('wgUserName');
        if (!username) {
            alert('You must be logged in to save to your user page.');
            return;
        }

        var json = $('#json-output').val();
        if (!json || json === 'Click "Generate JSON" to see your configuration') {
            alert('Please generate JSON first!');
            return;
        }

        var pageName = 'User:' + username + '/Data/WikiEditorButtons.json';
        var api = new mw.Api();

        api.postWithToken('csrf', {
            action: 'edit',
            title: pageName,
            text: json,
            summary: 'Updated WikiEditor button configuration',
            contentmodel: 'json'
        }).done(function() {
            alert('Configuration saved to ' + pageName + '!');
        }).fail(function(error) {
            alert('Error saving configuration: ' + error);
        });
    }

    function loadExistingConfig() {
        var username = mw.config.get('wgUserName');
        if (!username) return;

        var pageName = 'User:' + username + '/Data/WikiEditorButtons.json';
        var api = new mw.Api();

        api.get({
            action: 'query',
            titles: pageName,
            prop: 'revisions',
            rvprop: 'content',
            rvslots: 'main',
            formatversion: 2
        }).done(function(data) {
            if (data.query && data.query.pages && data.query.pages[0] && !data.query.pages[0].missing) {
                try {
                    var content = data.query.pages[0].revisions[0].slots.main.content;
                    var config = JSON.parse(content);
                    
                    if (config.buttons && Array.isArray(config.buttons)) {
                        buttons = config.buttons;
                        updateButtonsList();
                    }

                    if (config.defaults) {
                        if (config.defaults.section) $('#default-section').val(config.defaults.section);
                        if (config.defaults.group) $('#default-group').val(config.defaults.group);
                    }
                } catch (e) {
                    console.warn('Could not parse existing configuration:', e);
                }
            }
        });
    }

    function loadExample() {
        buttons = [
            {
                "id": "welcome-template",
                "label": "Welcome",
                "tooltip": "Welcome new user",
                "icon": "userAvatar",
                "type": "ooui",
                "insertBefore": "== Welcome! ==

Hi Polygnotus/Scripts! I noticed [[Special:Contributions/Polygnotus/Scripts|your contributions]] and wanted to welcome you to the Wikipedia community. I hope you like it here and decide to stay.

As you get started, you may find this short tutorial helpful:

{{Clickable button|Help:Introduction|Learn more about editing|class=mw-ui-progressive|style=margin-left: 1.6em;}}

Alternatively, the  [[Wikipedia:Contributing to Wikipedia|contributing to Wikipedia]] page covers the same topics.

If you have any questions, we have a friendly space where experienced editors can help you here:

{{Clickable button|Wikipedia:Teahouse|Get help at the Teahouse|style=margin-left: 1.6em;}}

If you are not sure where to help out, you can find a task here:

{{Clickable button|Wikipedia:Task Center|Volunteer at the Task Center|style=margin-left: 1.6em;}}

Happy editing! <!-- Template:Welcome--> [[User:Polygnotus|Polygnotus]] ([[User talk:Polygnotus|talk]]) 06:50, 7 June 2025 (UTC)",
                "autoSummary": {
                    "summary": "Welcome new user",
                    "position": "replace"
                },
                "namespaces": [3]
            },
            {
                "id": "wp-policy-ref",
                "label": "WP Policy",
                "tooltip": "Reference Wikipedia policy",
                "icon": "articles",
                "type": "ooui",
                "prompt": {
                    "type": "simple",
                    "message": "Enter policy abbreviation (e.g., NPOV, V, RS):",
                    "defaultValue": "NPOV"
                },
                "insertBefore": "== [[WP:{input}]] ==\nPlease read [[WP:{input}]], thanks! [[User:Polygnotus|Polygnotus]] ([[User talk:Polygnotus|talk]]) 06:50, 7 June 2025 (UTC)",
                "placeholderPattern": "{input}",
                "autoSummary": {
                    "summary": "Referenced [[WP:{input}]]",
                    "usePlaceholder": true,
                    "placeholderPattern": "{input}"
                },
                "namespaces": [3]
            }
        ];
        updateButtonsList();
        alert('Example configuration loaded!');
    }

    // Global functions for button actions
    window.editButton = function(index) {
        var button = buttons[index];
        editingIndex = index;

        // Fill form with button data
        $('#button-id').val(button.id || '');
        $('#button-label').val(button.label || '');
        $('#button-tooltip').val(button.tooltip || '');
        $('#button-type').val(button.type || 'traditional');
        $('#button-icon').val(button.icon || '');
        $('#insert-before').val(button.insertBefore || '');
        $('#sample-text').val(button.sampleText || '');
        $('#insert-after').val(button.insertAfter || '');
        $('#placeholder-pattern').val(button.placeholderPattern || '{input}');

        // Prompt
        $('#has-prompt').prop('checked', !!button.prompt);
        if (button.prompt) {
            $('#prompt-type').val(button.prompt.type || 'simple');
            $('#prompt-message').val(button.prompt.message || '');
            $('#prompt-title').val(button.prompt.title || '');
            $('#prompt-default').val(button.prompt.defaultValue || '');
        }

        // Auto summary
        $('#has-auto-summary').prop('checked', !!button.autoSummary);
        if (button.autoSummary) {
            $('#summary-text').val(button.autoSummary.summary || '');
            $('#summary-position').val(button.autoSummary.position || 'append');
            $('#summary-delimiter').val(button.autoSummary.delimiter || '; ');
            $('#summary-use-placeholder').prop('checked', !!button.autoSummary.usePlaceholder);
        }

        // Namespaces
        $('input[id^="ns-"]').prop('checked', false);
        if (button.namespaces) {
            button.namespaces.forEach(function(ns) {
                $('#ns-' + ns).prop('checked', true);
            });
        }

        // Page filters
        $('#page-filters').val(button.pageFilters ? button.pageFilters.join('\n') : '');
    };

    window.deleteButton = function(index) {
        if (confirm('Are you sure you want to delete this button?')) {
            buttons.splice(index, 1);
            updateButtonsList();
        }
    };

    // Initialize when DOM is ready
    $(function() {
        createConfigInterface();
    });

}(jQuery, mediaWiki));