MediaWiki:Atlas Tools.js

/* Flash icons on hover. */
$('#UOLinksList').on('mouseover', 'span', function() {
        $('.pin a img').addClass('pin-not_circle');
        $('#' + $(this).data('pair') + ' a img').addClass('pin-circle').removeClass('pin-not_circle');
    })
    .on('mouseout', 'span', function() {
        $('.pin a img').removeClass('pin-not_circle');
        $('#' + $(this).data('pair') + ' a img').removeClass('pin-circle');
    });

/* Highlight map region on hover. */
document.removeHighlights = () => {
    $('.mapgrid').css('visibility', 'hidden');
    $('.roundTL,.roundTR,.roundBL,.roundBR').removeClass('roundTL roundTR roundBL roundBR');
};
$('body').on('mouseover', '.overlayhighlighter', function() {
        let getEles = (num) => [...$(this).find(`span:eq(${num})`).text().split(',')].map((x) => {
            return `.grid${x}`;
        }).join(', ');
        document.removeHighlights();
        $(getEles(0)).css('visibility', 'visible');
        $(getEles(1)).addClass('roundTL');
        $(getEles(2)).addClass('roundTR');
        $(getEles(3)).addClass('roundBL');
        $(getEles(4)).addClass('roundBR');
    })
    .on('mouseout', '.overlayhighlighter', function() {
        document.removeHighlights();
    });

/* Dev tool hotkeys for map highlighter. */
document.onkeydown = function(e) {
    if (e.ctrlKey) {
        switch (e.which) {
            case 38: // up
                $('.overlaygrid').css('fontSize', parseInt($('.overlaygrid').css('fontSize')) + 1 + 'px');
                break;

            case 40: // down
                $('.overlaygrid').css('fontSize', parseInt($('.overlaygrid').css('fontSize')) - 1 + 'px');
                break;

            case 66: // "b"
                $('.mapgrid').css({
                    background: 'red'
                });
                break;

            case 79: // "o"
                $('.mapgrid').css({
                    visibility: 'visible',
                });
                $('.hideoverlaytext').removeClass('hideoverlaytext');
                $('.overlaygrid').css({
                    opacity: '100%',
                    fontSize: '9px'
                });
                if (!$('#gridText').length) {
                    $('.mapOuterDiv').before(`
                        <input type="button" id="gridBtn" value="List" style="float: right;">
                        <textarea id="gridText" style="width:50%;float:right;height:10em;background:black;color:white;">
                        <label for="gridTL">TL <input type="radio" id="gridTL" name="gridcorners" value="TL"></label>
                        <label for="gridTR">TR <input type="radio" id="gridTR" name="gridcorners" value="TR"></label>
                        <br>
                        <label for="gridBL">BL <input type="radio" id="gridBL" name="gridcorners" value="BL"></label>
                        <label for="gridBR">BR <input type="radio" id="gridBR" name="gridcorners" value="BR"></label>
                        <br>
                        <label for="gridNone">None <input type="radio" id="gridNone" name="gridcorners" value="None" checked></label>
                    `);
                    $('.mapOuterDiv').on('click', '.mapgrid', function () {
                        switch ($('input[name=gridcorners]:checked').val()) {
                            case 'TL':
                                $(this).toggleClass('gridClickedTL');
                                break;
                            case 'TR':
                                $(this).toggleClass('gridClickedTR');
                                break;
                            case 'BL':
                                $(this).toggleClass('gridClickedBL');
                                break;
                            case 'BR':
                                $(this).toggleClass('gridClickedBR');
                                break;
                            default:
                                $(this).toggleClass('gridClicked');
                        }
                    });
                    $('#gridBtn').on('click', function () {
                        let list = [],
                            tl = [],
                            tr = [],
                            bl = [],
                            br = [];
                        $('.gridClicked').each(function () { list.push($(this).text()); });
                        $('.gridClickedTL').each(function () { tl.push($(this).text()); });
                        $('.gridClickedTR').each(function () { tr.push($(this).text()); });
                        $('.gridClickedBL').each(function () { bl.push($(this).text()); });
                        $('.gridClickedBR').each(function () { br.push($(this).text()); });
                        $('#gridText').val(`|highlight=${list}
|TL=${tl.join(',')}
|TR=${tr.join(',')}
|BL=${bl.join(',')}
|BR=${br.join(',')}`);
                    });
                }
                event.preventDefault();
                break;
            default:
                return; // exit this handler for other keys
        }
    }
};