MediaWiki:Modules/categories-list-generator.js

Замечание. Возможно, после сохранения вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl-F5 или Ctrl-R (⌘-R на Mac)
• Google Chrome: Нажмите Ctrl-Shift-R (⌘-Shift-R на Mac)
• Internet Explorer: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl-F5
• Opera: Перейдите в Menu → Настройки (Opera → Настройки на Mac), а затем Безопасность → Очистить историю посещений → Кэшированные изображения и файлы

(() => {
    function buildUI() {
        $('#categories-table')
            .before(String.raw`<style>
        #categories-table a.generator::before {
            content: "";
            display: inline-block;
            padding-right: 0.2em;
            vertical-align: text-top;
            height: 1em;
            aspect-ratio: 1;
            background: url('/w/images/9/99/Plusminussprite.png');
            background-size: cover;
            background-clip: content-box;
        }
        
        #categories-table a.added::before {
            background-position-x: -16px;
        }
        
        a.generator {
            white-space: nowrap;
        }
        
        td > input[type="button"] {
            margin-top: 0.2em
        }
        </style>
        <link rel="prefetch" href="/w/images/9/99/Plusminussprite.png" as="image">
        <center>
            <input type="checkbox" id="generator-toggle" style="scale: 1.3;">
            <label for="generator-toggle" style="font-size: 140%; user-select: none;">Включить генератор списка категорий</label>
        </center>`);
        
        $('#categories-table > tbody').append(String.raw`
        <tr style="display: none;">
            <td colspan="2">
                <textarea style="resize: none;" rows="5" id="categories-markup-list" placeholder="Начните выбирать категории"></textarea>
                <input type="button" value="Очистить" id="reset-list">
                <input type="button" value="Скопировать" id="copy-list">
            </td>
        </tr>`);
    }
    
    function bindListeners() {
        let $anchors = $('#categories-table a');
        let pickedCategories = new Set();
        
        $('#categories-table').on('categories-changed', function() {
            let content = Array.from(pickedCategories)
                .sort()
                .map((category)=>`[[${category}]]`)
                .join('\n');
            
            $('#categories-markup-list')
                .val(content)
                .attr('rows', Math.max(5, pickedCategories.size));
        });
        
        $('#copy-list').click(async function() {
            let content = $('#categories-markup-list').val();
            await navigator.clipboard.writeText(content);
        });
    
        $('#reset-list').click(function() {
            $anchors.removeClass('added');
            pickedCategories.clear();
            $(this).trigger('categories-changed');
        });
        
        $('#generator-toggle').click(function() {
            $anchors.toggleClass('generator');
            $('#categories-table tr:last-child').toggle();
        
            if ($(this).is(':checked')) {
                $anchors.click(function(e) {
                    e.preventDefault();
        
                    let $anchor = $(e.target), entry = $anchor.attr('title');
                    $anchor.toggleClass('added');
        
                    if ($anchor.hasClass('added')) {
                        pickedCategories.add(entry);
                    } else {
                        pickedCategories.delete(entry);
                    }
        
                    $(this).trigger('categories-changed');
        
                });
        
            } else {
                $anchors.off('click');
            }
        });
    }
    
    function adjust() {
        if (window.location.hash === '#generator') {
          $('#generator-toggle').click();
        }
    }
    
    buildUI();
    bindListeners();
    adjust();
})();