Highlight Pokemon species in PokeMontpellier.fr

pokemon-species-highlight.js

// ==UserScript==
// @name         Highlight Pokemon in PokeMontpellier.fr
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Add a bouncing animation to the Pokemon species you want
// @author       Err0r404
// @match        https://www.pokemontpellier.fr/
// @grant        none
// @downloadURL  https://gist.githubusercontent.com/Err0r404/7799395b3c34e4d55e64fd33b0342c36/raw/
// @updateURL    https://gist.githubusercontent.com/Err0r404/71c5f4882a4a518e85a1b6ce8b613e67/raw/
// ==/UserScript==

(function() {
    'use strict';

    // Vars
    var pokemonId;
    var timeInterval = 5000; // 5 seconds
    var pokemonToHighlight = [];

    // Button to enable highlight
    var $highlightBtn = $("<a/>", {href: "#!", class:"btn btn-default btn-highlight", dataToggle:"button", ariaPressed:"false", autocomplete:"off"}).html("Highlight");

    // Add animation library
    $("head").append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">');

    // Loop trough all Pokemon in modal's settings
    $("div.panel.panel-default.settings-panel[data-panel=filters]>div.panel-body>div.text-center").each(function(){
        // Get Pokemon id from img src
        pokemonId = $(this).find("img").first().attr("src").replace(/^.*[\\\/]/, "");
        pokemonId = pokemonId.split(".").shift();

        // Add button to modal's settings
        var tmpHighlightBtn = $highlightBtn.clone().attr("data-id", pokemonId).appendTo($(this));

        // Pre-toggle button if needed
        if(localStorage.getItem("highlight-"+pokemonId)){
            tmpHighlightBtn.addClass("active").attr("ariaPressed", true);
            pokemonToHighlight.push(pokemonId);
        }
    });

    // Use local storage to know if we have to highlight or not a Pokemon
    function rememberHighlight(element){
        // Get Pokemon id
        var pokemonId = $(element).data("id");

        // Update button
        $(element).toggleClass("active");

        // Update local storage
        if(localStorage.getItem("highlight-"+pokemonId)){
            // Remove from local storage
            localStorage.removeItem("highlight-"+pokemonId);

            // Update button
            $(element).attr("ariaPressed", false);

            // Remove Pokemon from array
            var index = pokemonToHighlight.indexOf(pokemonId);
            if (index > -1) {
                pokemonToHighlight.splice(index, 1);
            }

            // Remove animation from Pokemon images
            $(".pokemarker img[src='/static/monocle-icons/icons/"+pokemonId+".png'].highlight").removeClass("animated infinite bounce highlight");
        }
        else{
            // Add Pokemon to local storage
            localStorage.setItem("highlight-"+pokemonId, "true");

            // Update button
            $(element).attr("ariaPressed", true);

            // Add pokemon to array
            pokemonToHighlight.push(pokemonId);

            // Animation Pokemon images
            $(".pokemarker img[src='/static/monocle-icons/icons/"+pokemonId+".png'].highlight").addClass("animated infinite bounce highlight");
        }
    }

    $(".btn-highlight").click(function(){
        rememberHighlight($(this));
    });

    // Check Pokemon regulary
    var checkInterval = setInterval(function(){
        var pokemonId;
        var $img;

        // Remove all animations (useless ?)
        $(".pokemarker img.highlight").removeClass("animated infinite bounce highlight");

        // Loop trough all the Pokemon to highlight
        for(var i = 0; i < pokemonToHighlight.length; i++){
            pokemonId = pokemonToHighlight[i];
            $img = $(".pokemarker img[src='/static/monocle-icons/icons/"+pokemonId+".png']");

            if($img.length > 0){
                $img.addClass("animated infinite bounce highlight");
                //console.info($img.length+" Pokemon#"+pokemonId+" found :D");
            }
        }
    },timeInterval);
})();