Difference between revisions of "MediaWiki:Atlas Tools.js"

m
 
(14 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
         $('#' + $(this).data('pair') + ' a img').removeClass('pin-circle');
 
         $('#' + $(this).data('pair') + ' a img').removeClass('pin-circle');
 
     });
 
     });
 +
 
/* Highlight map region on hover. */
 
/* 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() {
 
$('body').on('mouseover', '.overlayhighlighter', function() {
         $('.mapgrid').css('visibility', 'hidden');
+
         let getEles = (num) => [...$(this).find(`span:eq(${num})`).text().split(',')].map((x) => {
        $([...$(this).find('span:first').text().split(',')].map((x) => {
+
             return `.grid${x}`;
             return `.grid${x}`
+
         }).join(', ');
         }).join(', ')).css('visibility', 'visible');
+
        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() {
 
     .on('mouseout', '.overlayhighlighter', function() {
         $('.mapgrid').css('visibility', 'hidden');
+
         document.removeHighlights();
 
     });
 
     });
  
 +
/* Dev tool hotkeys for map highlighter. */
 
document.onkeydown = function(e) {
 
document.onkeydown = function(e) {
 
     if (e.ctrlKey) {
 
     if (e.ctrlKey) {
Line 37: Line 48:
  
 
             case 79: // "o"
 
             case 79: // "o"
 +
                $('.mapInnerDiv:eq(2)').css('z-index', 1000);
 
                 $('.mapgrid').css({
 
                 $('.mapgrid').css({
 
                     visibility: 'visible',
 
                     visibility: 'visible',
                    borderLeft: '1px solid white',
 
                    borderTop: '1px solid white',
 
                    background: 'inherit'
 
 
                 });
 
                 });
 
                 $('.hideoverlaytext').removeClass('hideoverlaytext');
 
                 $('.hideoverlaytext').removeClass('hideoverlaytext');
Line 48: Line 57:
 
                     fontSize: '9px'
 
                     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;"></textarea>
 +
                        <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;
 
                 break;
 
 
             default:
 
             default:
 
                 return; // exit this handler for other keys
 
                 return; // exit this handler for other keys
 
         }
 
         }
 
     }
 
     }
    e.preventDefault(); // prevent the default action
 
 
};
 
};

Latest revision as of 21:55, 20 October 2020

/* 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"
                $('.mapInnerDiv:eq(2)').css('z-index', 1000);
                $('.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;"></textarea>
                        <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
        }
    }
};