esomap.uesp.net Filter by Key

/** esomap.uesp.net Filter by Key **/
/*
    Author: Nocenti
    Date: 2017
*/

/** jquery-cookie **/
/*
    Appending jquery-cookie to set cookie for filter.
    This protects the filter against dragging/map changes.
*/
var jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
/** END jquery-cookie **/

/** Instantiation **/
/*
    Toggle Map Key to instantiate
    Map Key Items (.gmMapKeyImageImage)
*/

    g_GameMap.showMapKey();
    g_GameMap.hideMapKey();

/** END Instantiation **/

/** UI Tweaks **/
    $('.gmMapKeyItem').css({
        'cursor'        : 'pointer',
        'padding-right' : '5px',
        'width'         : '100%',
    });

    // Custom Styles
    $("<style>")
    .attr("type", "text/css")
    .html("\
    .clearFilter {\
        position: absolute;\
        right: 5px;\
        top: 35px;\
    }\
    .itemNotFound {\
        background: #ddd;\
        display: none;\
        font-family: 'Arial', sans-serif;\
        font-size: 13px;\
        font-weight: bold;\
        height: 20px;\
        left: 38%;\
        padding: 10px;\
        position: absolute;\
        text-align: center;\
        top: 29px;\
        width: 120px;\
        z-index: 999;\
    }\
    .red { color: red; }\
    .green { color: #00aa00; }")
    .appendTo("head");


    $('.gmMapKeyCloseButton').after('<button class="clearFilter">Remove Filter</button>');
    $('body').append('<div class="itemNotFound">Item Not Found</div>');
/** END UI Tweaks **/

/** Map Key Icon/Label Handler **/
    $('.gmMapKeyItemLabel').on('click', function() { $(this).prev().find('img').click(); });
    $('.gmMapKeyImageImage img').on('click', function() {

        // Clear selected styling
        $('.gmMapKeyItem').css('background', '');

        // Style the selected item
        $(this).parent().parent().css('background', '#aacc00');

        // Store the clicked icon's path
        var src = $(this).attr('src');


        /** Mismatch Collection **/
        /*
            Not all Map Key icon filenames
            match the Map icon filenames.
            Let's fix that.

            Pushing the paths of the clicked icon
            and the path of any known mismatches.

            This ensures that should the mismatches be
            resolved, the filter will continue to work.

            Should mismatches be resolved, the Mismatch Collection
            segment of this file should be removed in its entireity.
        */

            var matches = [];
            switch(src) {

                // Alchemist
                case 'icons/29.png':
                    matches.push(src, 'icons/22.png');
                break;

                // Brewer/Inn
                case 'icons/23.png':
                    matches.push(src, 'icons/11.png');
                break;

                // Crafting Site
                case 'icons/56.png':
                    matches.push(src, 'icons/16.png');
                break;

                // Thieves Guild
                case 'icons/145.png':
                case 'icons/165.png':
                    matches.push(src, 'icons/133.png');
                break;

                default:
                    matches.push(src);

            }
        /** END Mismatch Collection **/


        // Call Filter
        filterByKey(matches, src);

        // Close the Map Key
        $('.gmMapKeyCloseButton').click();

    });
/** END Map Key Icon Handler **/

/** Window Click Handler **/
$(window).on('mouseup click mousewheel', function() {
    if($.cookie('filterKey') !== undefined) {
        setTimeout(function() {
            // Style the selected item
            $('.gmMapKeyImageImage img[src="' + $.cookie('filterKey').split(',')[0] + '"]').parent().parent().css('background', '#aacc00');

            // Run Filter
            filterByKey($.cookie('filterKey').split(','));
        }, 400);
    }
});
/** END Mouse Up handler **/

/** clearFilter Click Handler **/
$('.clearFilter').on('click', function() {
    if($.cookie('filterKey') !== undefined) {
        // Clear the filterKey cookie
        $.removeCookie('filterKey');

        // Hide "Item Not Found"
        $('.itemNotFound').hide();

        // Show all Icons, Labels and Tooltips
        $('.gmMapLocIcon, .gmMapLoc, .gmLocToolTip').show().css('visibility', 'visible');

        // Clear selected styling
        $('.gmMapKeyItem').css('background', '');
    }
});

/** Filter **/
function filterByKey(matches, src) {
    // Hide all Icons, Labels and Tooltips
    $('.gmMapLocIcon, .gmMapLoc, .gmLocToolTip').hide().css('visibility', 'hidden');

    var found = false;
    $('.gmMapLocIcon').each(function() {
        // Check for a matching icon
        if(matches.indexOf($(this).attr('src')) !== -1) {

            $(this).show().css('visibility', 'visible');                    // Show Matched Icon
            $(this).parent().next().show().css('visibility', 'visible');    // Show Matched Label

            found = true;
        }
    });

    if(!found) {
        // Show all Icons, Labels and Tooltips
        $('.gmMapLocIcon, .gmMapLoc, .gmLocToolTip').show().css('visibility', 'visible');

        // Show "Item Not Found" notification
        $('.itemNotFound').removeClass('green').addClass('red').html('Item Not Found').show();
    } else {
        // Show "Item Found!" notification
        $('.itemNotFound').removeClass('red').addClass('green').html('Item Found!').delay('1000').fadeOut('fast');
    }

    // Store the filter
    if(src !== undefined) {
        $.cookie('filterKey', matches.join(','));
    }
}
/** END Filter **/