Munzee Map Filters

New way of catagorized filters

目前为 2021-10-25 提交的版本,查看 最新版本

// ==UserScript==
// @name         Munzee Map Filters
// @namespace    http://tampermonkey.net/
// @version      21.10.25.001
// @description  New way of catagorized filters
// @author       CzPeet
// @match        https://www.munzee.com/specials*
// @icon         https://www.google.com/s2/favicons?domain=munzee.com
// @update       https://greasyfork.org/en/scripts/433078-munzee-map-filters
// @grant        none
// ==/UserScript==

var isMapLoading = false;
var imgPrefix = "https://munzee.global.ssl.fastly.net/images/pins/";
var filterImgsContainer = null;
var filterIMGS = [];

var categoryMainImages = ["frankeinstein", "theunicorn", "retiredunicorn", "icedragon", "poseidon", "beachflatrob", "phantomflatrob", "tuli", "zombietuli", "nomad", "vikerkaar", "spyderbot", "gardengnome", "skyland10", "boxjellyfish", "fire", "quizvirtual"];
var categorizedFilterOrder = ["Seasonals", "Mythologicals", "RetiredMyths", "AlternaMyths", "ModernMyths", "FancyFlats", "PhantomFlats", "PouchCreations", "ZombiePouchs", "Nomads", "FunfinityStones", "MechZBouncers", "GardenGnomes", "Destinations", "EvoBouncers", "Scatters", "UnCategorized"];
var categorizedFilterObject = {};

categorizedFilterObject.Seasonals = ["backstitchsisters", "dr.acula", "frankeinstein", "fabiooooooo", "h3adl3ssh0rs3man"];
categorizedFilterObject.Mythologicals = ["theunicorn","hippocampunicorn","battleunicorn","candycornunicorn","leprechaun","dwarfleprechaun","goblinleprechaun","leprecorn","dragon","chinesedragon","wyverndragon","midnightdragon","yeti","reptoidyeti","lycanthropeyeti","monsteryeti","faun","centaurfaun","krampusfaun","hydra","cerberushydra","cthulhuhydra","pegasus","alicornpegasus","griffinpegasus","nightmarepegasus","cyclops","balorcyclops","minotaurcyclops","mermaid","hotspringmermaid","melusinemermaid","fairy","dryadfairy","wildfirefairy","banshee","harpybanshee","witchbanshee","nymph","elfnymph","vampirenymph"];
categorizedFilterObject.RetiredMyths = ["retiredunicorn","retiredleprechaun","retireddragon","retiredyeti","retiredfaun","retiredhydra","retiredpegasus","retiredcyclops","retiredmermaid","retiredfairy","retiredbanshee","retirednymph"];
categorizedFilterObject.AlternaMyths = ["cherub","chimera","fairygodmother","firepegasus","gnomeleprechaun","gorgon","icedragon","motherearth","ogre","rainbowunicorn","sasquatchyeti","siren"];
categorizedFilterObject.ModernMyths = ["aphrodite","glasses","shell-phone","poseidon","trident","lifebuoy","hades","bident","firestarter"];
categorizedFilterObject.FancyFlats = ["beachflatrob","coldflatrob","tuxflatrob","face-offflatmatt","footyflatmatt","matt'erupflatmatt","internationellesflatlou","polkadotflatlou","teamgbflatlou"];
categorizedFilterObject.PhantomFlats = ["phantomflatrob", "phantomflatmatt", "phantomflatlou"];
categorizedFilterObject.PouchCreations = ["tuli","tuliferno","tulimber","gleamingtuli","gleamingtuliferno","gleamingtulimber","vesi","vesial","vesisaur","gleamingvesi","gleamingvesial","gleamingvesisaur","muru","muruchi","murutain","gleamingmuru","gleamingmuruchi","gleamingmurutain","mitmegu","jootmegu","lokemegu","rohimegu","murinmegu","ohkmegu","urgasmegu","koobas","kartus","kabuhirm","pimedus","puffle","puflawn","pufrain","magnetus","elekjoud","elekter","elektrivool","hadavale"];
categorizedFilterObject.ZombiePouchs = ["zombietuli","zombievesi","zombiemuru","zombiepimedus","zombiepuffle","zombiemagnetus","zombieelekter"];
categorizedFilterObject.Nomads = ["nomad","nomadvirtual","nomadmystery","jewelthiefnomad","bellhopnomad","piratenomad","warriornomad","travelernomad","seasonalnomad","virtualflatnomad","coupechampionnomad","virtualzeecretagentnomad","zeecretagentnomad","virtualgamingnomad","gamingnomad","virtualjewelthiefnomad","virtualwarriornomad","virtualbellhopnomad","jason4zeesnomad","killermask"];
categorizedFilterObject.FunfinityStones = ["akvamariin","ametust","oniks","roosa","rubiin","safiir","smaragd","teemant","topaas","tsitriin","vikerkaar"];
categorizedFilterObject.MechZBouncers = ["spyderbot","arcticlasershark","botwurst","carafeborg","cybersaurusrex","cyborgsanta","dronut","fr057y","geologgersrumbot","gingermechman","goldenlasershark","goldncoinsrumbot","kingc0g","lasershark","mechanic4k3","monk3y","mumm33","negsrumbot","prim8","rud01ph","s4rc0ph4gus","sc4rab","scgsrumbot","steinbot","krampbot","31f","reindroid"];
categorizedFilterObject.GardenGnomes = ["gardengnome","archerygardengnome","gnomearcheryhood","astronautgardengnome","gnomeastronauthelmet","aussieexplorergardengnome","gnomeexplorerhat","awardshowgardengnome","10thmunzeebirthdayhat","baseballgardengnome","gnomecatcherscap","basketballgardengnome","gnomenogginnet","cricketgardengnome","gnomeclubcap","footballgardengnome","gnometouchdowntopper","goldminergardengnome","gnomeminerhat","icehockeygardengnome","gnomehockeyhelmet","queen'sguardsmangardengnome","gnomebearskinhat","runninggardengnome","gnomeheadphones","skateboardinggardengnome","gnomeheelfliphat","soccergardengnome","gnomeheaderhat","cyclinggardengnome","cyclingcasquette"];
categorizedFilterObject.Destinations = ["skyland1","skyland2","skyland3","skyland4","skyland5","skyland6","skyland7","skyland8","skyland9","skyland10","treehouse1","treehouse2","treehouse3","treehouse4","treehouse5","treehouse6","treehouse7","treehouse8","treehouse9","treehouse10"];
categorizedFilterObject.EvoBouncers = ["boxjellyfish","goldenjellyfish","pb&jellyfish","limebutterfly","monarchbutterfly","morphobutterfly","poisondartfrog","tomatofrog","treefrog","seaturtle","snappingturtle","taekwondotortoise","honeybee","queenbee","wallabee"];
categorizedFilterObject.Scatters = ["fire","frozengreenie","waterdroplet","feather","goldenfeather","charge","tree","redapple","cherryblossom","peach","pear","pecan","acorn","deadbranch","cardinalfeather","blackhole","planet","spaceship","lostkey","lostsock","meteor","satellite","scattered","boulder","flamingarrow","sc4rab","ankhartifact","ouroborosartifact","djedartifact","scarabartifact","eyeofraartifact","shenartifact","canopicjarartifact","sesenartifact","wasscepterartifact","sistrumartifact","sistrumartifact","tyetartifact","eyeofhorusartifact","sweettreats","scgsresellerpackage","geologgersresellerpackage","gold'ncoinsresellerpackage","negsresellerpackage","cloverleaf","goldenclover","snowball","dossier","infraredvirtual","lasertrail1","lasertrail2","lasertrail3","pixelpresent","undercoveragent","liaisonagent","maplepawn","mapleknight","maplebishop","maplerook","maplequeen","mapleking","walnutpawn","walnutknight","walnutbishop","walnutrook","walnutqueen","walnutking","leapfrog","munch-man","runzeerob","goldcoin","fly","ghostzee","1stroll","bowling-1stroll","2ndroll","bowling-2ndroll","trickortreat","flamingpumpkin"];
categorizedFilterObject.UnCategorized = [];

var disabledFilterImgs = [];

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function restructureImages() {

    //Wait until the progressbar is hidden
    if ($("#map-box-special-loading").is(':visible'))
    {
        return;
    }

    //remove original filter_all button
    $('#filter_all').remove();

    filterImgsContainer = $('#filterimgs');
    filterImgsContainer[0].addEventListener('mouseleave', deactivateFilterImages);

    //Filters label removed
    filterImgsContainer.prev().remove();

    //Collect original filter images
    filterIMGS = filterImgsContainer[0].getElementsByClassName('filterimg');

    //Sort into Categories
    var filterHelper = CreateCategories();

    //Reload the new layout
    filterImgsContainer.empty();
    filterImgsContainer.html(filterHelper);
    filterHelper = null;

    //mainImages update needed after map action
    Array.from(document.getElementsByClassName('categoryDIV')).forEach(function(categDIV){
        updateMainImage(categDIV);
    });

    //Add to all img the click eventListener
    Array.from(filterImgsContainer[0].getElementsByClassName('filterimg')).forEach(function(img) {
      img.addEventListener('click', FilterImgClick);
      img.setAttribute("style", "cursor:pointer");
      img.setAttribute("title", img.currentSrc.substring(img.currentSrc.lastIndexOf("/")+1,img.currentSrc.lastIndexOf(".")));
    });

    //all mainImages stuffs
    Array.from(filterImgsContainer[0].getElementsByClassName('mainImage')).forEach(function(mainIMG){
        mainIMG.setAttribute("style", "border: solid grey 1px; width:63px; padding-right:3px; padding-top:3px; cursor:pointer");
        mainIMG.addEventListener('mouseover', activateFilterImages);
        mainIMG.addEventListener('click', mainImageClick);
    });

    //all categoryDIVs stuff
    Array.from(filterImgsContainer[0].getElementsByClassName('categoryDIV')).forEach(function(cDIV){
        cDIV.setAttribute("style", "display: none; border: solid grey 1px; padding-top: 5px; padding-bottom: 5px; width: 100%");
        cDIV.addEventListener('mouseleave', deactivateFilterImages);
    });

    //refresh
    refreshMap();
}

function CreateCategories()
{
    //Div
    var mainImageDIV = document.createElement('DIV');
    mainImageDIV.setAttribute("id", "mainImageDIV");

    var categName = "" ;
    var filterStructure = "";
    for (var o = 0; o<categorizedFilterOrder.length; o++)
    {
        categName = categorizedFilterOrder[o];
        var array = categorizedFilterObject[categName];

        //Div
        var categDIV = document.createElement('DIV');
        categDIV.setAttribute("id", categName+"_Category");
        categDIV.setAttribute("class", "categoryDIV");

        var addedAtLeatOne = false;

        if (array.length > 0)
        {
            for (let a = 0; a < array.length; a++)
            {
                for (let i = 0; i < filterIMGS.length; i++)
                {
                    if (filterIMGS[i].src == imgPrefix + array[a] + ".png")
                    {
                        categDIV.appendChild(filterIMGS[i]);
                        addedAtLeatOne = true;
                    }
                }
            }
        }
        else
        {
            for (let i = filterIMGS.length-1; i >= 0; i--)
            {
                categDIV.appendChild(filterIMGS[i]);
                addedAtLeatOne = true;
            }
        }

        if (addedAtLeatOne)
        {
            filterStructure += categDIV.outerHTML;

            //main image
            var categMainIMG = document.createElement('IMG');
            categMainIMG.setAttribute("id", categName+'_MainIMG');
            categMainIMG.setAttribute("title", categName);
            categMainIMG.setAttribute("class", "mainImage");
            categMainIMG.src = imgPrefix + categoryMainImages[o] + ".png";

            mainImageDIV.appendChild(categMainIMG);
        }
    }

    //Show/Hide all main image
    var allOrnothingIMG = document.createElement('IMG');
    allOrnothingIMG.setAttribute("id", 'ALL_MainIMG');
    allOrnothingIMG.setAttribute("title", 'Show/Hide All Category');
    allOrnothingIMG.setAttribute("class", "mainImage");
    allOrnothingIMG.src = imgPrefix + "premium.png";
    mainImageDIV.appendChild(allOrnothingIMG);

    filterStructure = mainImageDIV.outerHTML + filterStructure;

    return filterStructure;
}

function mainImageClick(sender)
{
    //find related filterimgs
    var categDIV = document.getElementById(sender.target.getAttribute("title")+"_Category");

    if (categDIV != null)
    {
        let imgs = categDIV.getElementsByTagName('img');

        if (sender.target.classList.contains("filterdisabled"))
        {
            //Set own state
            sender.target.classList.remove("filterdisabled");

            //Set the related filterimg states
            Array.from(imgs).forEach(function(img) {
                if (img.classList.contains("filterdisabled"))
                {
                    enableFilter(img);
                }
            });
        }
        else
        {
            //Set own state
            sender.target.classList.add("filterdisabled");

            //Set the related filterimg states
            Array.from(imgs).forEach(function(img) {
                if (!img.classList.contains("filterdisabled"))
                {
                    disableFilter(img);
                }
            });
        }
    }
    else
    {
        let mimgs = document.getElementsByClassName('mainImage');
        let imgs = document.getElementsByClassName('filterimg');
        //Clicked on ALL button
        if (sender.target.classList.contains("filterdisabled"))
        {
            //Set own state
            sender.target.classList.remove("filterdisabled");

            //Set all category states
            Array.from(mimgs).forEach(function(mimg) {
                mimg.classList.remove("filterdisabled");
            });

            //Set all filterimg states
            Array.from(imgs).forEach(function(img) {
                if (img.classList.contains("filterdisabled"))
                {
                    enableFilter(img);
                }
            });
        }
        else
        {
            //Set own state
            sender.target.classList.add("filterdisabled");

            //Set all category states
            Array.from(mimgs).forEach(function(mimg) {
                mimg.classList.add("filterdisabled");
            });

            //Set all filterimg states
            Array.from(imgs).forEach(function(img) {
                if (!img.classList.contains("filterdisabled"))
                {
                    disableFilter(img);
                }
            });
        }
    }

    refreshMap();
}

function activateFilterImages(sender)
{
    //1st - Hide all
    Array.from(filterImgsContainer[0].getElementsByClassName('categoryDIV')).forEach(function(cDIV){
        $(cDIV).hide();
    });

    //2nd - Show the related
    $(document.getElementById(sender.target.getAttribute("title")+"_Category")).show();
}

function deactivateFilterImages(sender)
{
    Array.from(filterImgsContainer[0].getElementsByClassName('categoryDIV')).forEach(function(cDIV){
        $(cDIV).hide();
    });
}

function FilterImgClick(sender)
{
    if (sender.target.classList.contains("filterdisabled"))
    {
        enableFilter(sender.target);
    }
    else
    {
        disableFilter(sender.target);
    }

    updateMainImage(sender.target.parentNode);

    refreshMap();
}

function updateMainImage(containerDIV)
{
    var hide = true;
    var relatedMainImage = document.getElementById(containerDIV.id.replace('Category', 'MainIMG'));
    Array.from(containerDIV.getElementsByClassName('filterimg')).forEach(function(img){
        hide &= img.classList.contains("filterdisabled");
    });

    if (hide)
    {
        relatedMainImage.classList.add("filterdisabled");
    }
    else
    {
        relatedMainImage.classList.remove("filterdisabled");
    }
}

//Enable 1 filterimg
function enableFilter(target)
{
    target.classList.remove("filterdisabled");

    var pos = disabledFilterImgs.indexOf(target.src);
    if (pos >= 0)
    {
        disabledFilterImgs.splice(pos, 1);
    }
}

//Disable 1 filterimg
function disableFilter(target)
{
    target.classList.add("filterdisabled");

    if (disabledFilterImgs.indexOf(target.src) < 0)
    {
        disabledFilterImgs.push(target.src);
    }
}

function refreshMap()
{
    for (var mID in mapMarkers)
    {
        if (disabledFilterImgs.indexOf(mapMarkers[mID].munzee_logo) == -1)
        {
            $( "[data-index='" + mID + "']" ).show();
        }
        else
        {
            $( "[data-index='" + mID + "']" ).hide();
        }
    }
}

$(document).ajaxSuccess(restructureImages);