User:Ieditrandomarticles/autobox.js

/*
autobox gadget - One-click maintenance templates for Wikipedia
Updated: 2025-04-10
*/

(function () {
    const availableTags = {
        'noref': { template: 'noref', placement: 'top' },
        'onesource': { template: 'onesource', placement: 'top' },
        'copyedit': { template: 'copyedit', placement: 'top' },
        'wikify': { template: 'wikify', placement: 'top' },
        'POV': { template: 'POV', placement: 'top' },
        'update': { template: 'update', placement: 'top' },
        'refimprove': { template: 'refimprove', placement: 'top' },
        'citation needed': { template: 'cn', placement: 'inline' },
        'dubious': { template: 'dubious', placement: 'inline' },
        'clarify': { template: 'clarify', placement: 'inline' },
        'who': { template: 'who', placement: 'inline' },
        'when': { template: 'when', placement: 'inline' }
    };

    function getCurrentDate() {
        const months = ['January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December'];
        const now = new Date();
        return `${months[now.getMonth()]} ${now.getFullYear()}`;
    }

    function showToast(message = '✅ Tag copied!') {
        const toast = document.getElementById('autobox-toast');
        toast.textContent = message;
        toast.style.display = 'block';
        setTimeout(() => {
            toast.style.display = 'none';
        }, 2000);
    }

    function createTagButton(name, config) {
        const btn = document.createElement('button');
        btn.textContent = name;
        Object.assign(btn.style, {
            display: 'block',
            width: '100%',
            margin: '4px 0',
            padding: '6px 8px',
            textAlign: 'left',
            backgroundColor: 'white',
            border: '1px solid #a2a9b1',
            borderRadius: '3px',
            cursor: 'pointer',
            fontSize: '13px'
        });

        btn.addEventListener('mouseover', () => btn.style.backgroundColor = '#eaf3ff');
        btn.addEventListener('mouseout', () => btn.style.backgroundColor = 'white');
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            addTag(name, config);
        });

        return btn;
    }

    function addTag(tagName, config) {
        const date = getCurrentDate();
        const template = config.template;
        const tagText = `{{${template}|date=${date}}}`;
        const title = mw.config.get('wgPageName');
        const editSummary = `added ${tagName} using autobox`;

        navigator.clipboard.writeText(tagText).then(() => {
            showToast();

            const url = new URL('/w/index.php', window.location.origin);
            url.searchParams.set('title', title);
            url.searchParams.set('action', 'edit');
            url.searchParams.set('summary', editSummary);

            if (config.placement !== 'top') {
                url.searchParams.set('section', '0');
            }

            setTimeout(() => {
                window.location.href = url.toString();
            }, 800);
        }).catch(() => {
            alert(`Copy this tag manually:\n\n${tagText}`);
        });
    }

    function initUI() {
        if (mw.config.get('wgNamespaceNumber') !== 0 || document.getElementById('autobox-button')) return;

        const button = document.createElement('div');
        button.id = 'autobox-button';
        button.title = 'Quick maintenance tags';
        button.innerHTML = '📦 autobox';
        Object.assign(button.style, {
            position: 'fixed',
            bottom: '20px',
            right: '20px',
            zIndex: '9999',
            cursor: 'pointer',
            padding: '8px 12px',
            backgroundColor: '#2a4b8d',
            color: 'white',
            borderRadius: '6px',
            boxShadow: '0 2px 5px rgba(0,0,0,0.3)',
            fontFamily: 'sans-serif',
            fontSize: '14px'
        });

        const panel = document.createElement('div');
        panel.id = 'autobox-panel';
        Object.assign(panel.style, {
            display: 'none',
            position: 'fixed',
            bottom: '60px',
            right: '20px',
            zIndex: '9998',
            backgroundColor: '#f8f9fa',
            padding: '10px',
            borderRadius: '6px',
            boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
            width: '220px',
            maxHeight: '60vh',
            overflowY: 'auto',
            border: '1px solid #a2a9b1'
        });

        const toast = document.createElement('div');
        toast.id = 'autobox-toast';
        toast.textContent = '✅ Tag copied!';
        Object.assign(toast.style, {
            position: 'fixed',
            bottom: '90px',
            right: '20px',
            backgroundColor: '#2a4b8d',
            color: 'white',
            padding: '8px 12px',
            borderRadius: '4px',
            fontSize: '13px',
            display: 'none',
            zIndex: '10000'
        });

        const topHeading = document.createElement('h4');
        topHeading.textContent = 'Article-wide tags';
        Object.assign(topHeading.style, {
            margin: '5px 0 10px 0',
            fontSize: '13px',
            color: '#54595d'
        });
        panel.appendChild(topHeading);

        for (const [name, config] of Object.entries(availableTags)) {
            if (config.placement === 'top') {
                panel.appendChild(createTagButton(name, config));
            }
        }

        const inlineHeading = document.createElement('h4');
        inlineHeading.textContent = 'Inline tags';
        Object.assign(inlineHeading.style, {
            margin: '15px 0 10px 0',
            fontSize: '13px',
            color: '#54595d'
        });
        panel.appendChild(inlineHeading);

        for (const [name, config] of Object.entries(availableTags)) {
            if (config.placement === 'inline') {
                panel.appendChild(createTagButton(name, config));
            }
        }

        document.body.appendChild(button);
        document.body.appendChild(panel);
        document.body.appendChild(toast);

        button.addEventListener('click', (e) => {
            e.stopPropagation();
            panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
        });

        document.addEventListener('click', () => panel.style.display = 'none');
        panel.addEventListener('click', (e) => e.stopPropagation());
    }

    mw.loader.using('mediawiki.util').then(() => {
        $(initUI);
    });
})();