Benutzer:Wiegels/js/keys.js

// Tastenkombinationen anzeigen
(function() {
    if ($('#jw-keys').length==0) {
        var hotkey = 'Alt+Umschalt';

        // add stylesheet, overlay and tab
        $('head').append(
            '<link href="/w/index.php?title=Benutzer:Wiegels/css/keys.css&action=raw&ctype=text/css" rel="stylesheet" type="text/css"/>');
        $('#content').append('<div id="jw-keys"></div>');
        $('#p-cactions, #left-navigation').find('li').first().before('<li id="jw-help"><a href="#">?</a></li>');

        // add some access keys
        [
            ['?', '#jw-help a', 'Tastenkombinationen anzeigen'],
            ['d', '#t-contributions a'],
            ['d', '#wpTemplateSandboxPage input', 'Vorschau der Seite mit dieser Vorlage anzeigen'],
            ['d', '#wpUploadFile', 'Nach Quelldatei durchsuchen'],
            ['i', '#t-info a'],
            ['v', '#mw-diffPage-inline-toggle-switch-layout label']
        ].
        forEach(function([key, element, title]) {
            $(element).attr('accesskey', key).attr('title', (title ?? $(element).attr('title'))+' ['+hotkey+'+'+key+']');
        });

        // add methods for sorting, highlighting, executing and closing the overlay
        $('#jw-keys').
            on('click', '.sorter span', function() {
                $('#jw-keys').find('.sorted').eq($(this).index()).show().siblings('.sorted').hide(); // sort list
            }).
            on('click mouseenter mouseleave', 'div.sorted div', function(event) {
                var target = $('[accesskey="'+$(this).find('span').text()+'"]');
                if (event.type=='click') {
                    (target.focus())[0].click(); // remote click
                } else {
                    target.toggleClass('jw-key', event.type=='mouseenter'); // highlight target
                }
            });
        $('#jw-help a').on('click', function(event) {
            event.preventDefault();
            $('body').toggleClass('jw-keys-shown', !$('#jw-keys').is(':visible'));
            $('#jw-keys').slideToggle('fast');
        });
        $(document).on('click keydown', 'body.jw-keys-shown', function(event) {
            if ($(event.target).closest('#jw-keys').length==0 && // click outside dialog and
                !$(event.target).is('[accesskey]') || // not on element having accesskey or
                event.which==27) // hit esc key
            {
                $('#jw-help a').triggerHandler('click'); // close dialog
            }
        });

        // fill overlay with collected access keys
        setTimeout(function() {
            var key = function(text) {
                    return text.substr(21).replace(/<[^>]*>/g, '').normalize('NFD').replace(/[\u0300-\u036f]/g, '');
                },
                lines = $('[accesskey][title]').
                    map((index, element) => $(element).attr('title').
                        replace(/^(.*) \[.+(.)\]$/, '$2 | $1').
                        replace(/^(.)( \| .*?)(\1)(.*?)$/i, '$1$2<u>$3</u>$4').
                        replace(/^(.)(.*)$/, '<div><span>$1</span>$2</div>')).
                    get();
            $('#jw-keys').append(
                '<h2>Tastenkombinationen</h2>'+
                '<p>Aufruf: <code>['+hotkey+'+…]</code></p>'+
                '<div class="sorter">'+
                '<span title="Nach Taste sortieren">…</span> | '+
                '<span title="Nach Funktion sortieren">Funktion</span>'+
                '</div><hr>'+
                '<div class="sorted">'+lines.sort().join('')+'</div>'+
                '<div class="sorted">'+lines.sort((a, b) => key(a)>key(b)).join('')+'</div>');
        }, 1000);
    }
})();