Flair Page Enhancer

Flair_Page_Enhancer.user.js

// ==UserScript==
// @name            Flair Page Enhancer
// @description     Enhances the /flair page
// @version         0.0.3
// @match           https://tagpro.koalabeast.com/flair
// @grant           GM_addStyle
// @updateURL       https://gist.github.com/nabbynz/1c0a3c7fa2df8b15bf77cbd905460ca8/raw/Flair_Page_Enhancer.user.js
// @downloadURL     https://gist.github.com/nabbynz/1c0a3c7fa2df8b15bf77cbd905460ca8/raw/Flair_Page_Enhancer.user.js
// @author          nabby
// ==/UserScript==

console.log('START: ' + GM_info.script.name + ' (v' + GM_info.script.version + ' by ' + GM_info.script.author + '). Loaded: ' + new Date().toLocaleTimeString());

/* eslint-env jquery */
/* eslint-disable no-multi-spaces */
/* eslint-disable dot-notation */
/* globals tagpro */

'use strict';


let addStyles = function() {
    GM_addStyle('.table.table-stripped { width:80%; font-size:14px; margin:0 auto; }');
    GM_addStyle('.table.table-stripped td { padding:7px 3px; text-shadow:1px 1px 1px #070707; }');
    GM_addStyle('.table.table-stripped tbody tr:hover, .table.table-stripped tbody tr:nth-child(2n):hover { background:#131; }');

    GM_addStyle('#FE_Flair_Jumps { width:740px; margin:40px auto 0; padding:5px; text-align:center; background:#252525; border:1px outset #555; }');
    GM_addStyle('.FE_Flair { width:24px; height:24px; display:inline-block; border:1px solid transparent; opacity:0.8; }');
    GM_addStyle('.FE_Flair:hover { border:1px dotted #bbb; opacity:1 !important; transform:scale(1.15); }');
    GM_addStyle('#FE_FlairTypeTotals { margin:10px 0 40px; font-size:14px; color:#999; text-align:center; }');
    GM_addStyle('.FE_FlairTypeTotal { margin:0 10px; opacity:0.85; }');
    GM_addStyle('.FE_Row_Highlight { background-color: #550055 !important; transition: all 1.5s ease; }');
    GM_addStyle('.FE_Row_Highlight_Remove { background-color:revert; transition: all 0.8s ease; }');
    GM_addStyle('#FE_ReturnToTop { display:inline; position:sticky; top:250px; margin:-40px 40px 0 0; padding:6px; width:50px; height:30px; float:right; border:1px outset #444; border-radius:5px; font-size:18px; color:#bbf; text-align:center; cursor:pointer; }');
};

let enhanceTable = function() {
    let $rows = $('table.table').find('tbody').find('tr');
    let flairTypes = {};

    $('table.table').before('<div id="FE_Flair_Jumps"></div>');

    $rows.each(function(index) {
        let flairPos = $(this).find('span.flair').css('background-position');
        let flairClass = $(this).find('span.flair').attr('class').replace('flair ', '').trim();
        let flairTarget = flairClass; //flairPos.replace(' ', '');
        let flairType = flairClass.charAt(0).toUpperCase() + flairClass.substring(1, flairClass.indexOf('-'));
        //let flairKey = flairClass.substring(flairClass.indexOf('-') + 1);
        let flairName = $(this).find('td').eq(1).text().trim();
        let flairDesc = $(this).find('td').eq(2).text().trim();
        let flairInfo = $(this).find('td').eq(3).text().trim();

        $(this).attr('id', 'FE_' + flairTarget);

        $('#FE_Flair_Jumps').append('<span class="FE_Flair FE_Type_' + flairType + '" data-target="' + flairTarget + '"><span class="flair ' + flairClass + '" style="background-position:' + flairPos + ';" title="' + flairName + '\n' + flairDesc + '\n\n' + flairInfo + '"></span></span>');

        if (!flairTypes.hasOwnProperty(flairType)) {
            flairTypes[flairType] = [];
        }

        flairTypes[flairType].push({ name: flairName, position: flairPos });
    });


    $('#FE_Flair_Jumps').after('<div id="FE_FlairTypeTotals"></div>');

    for (let flairType in flairTypes) {
        $('#FE_FlairTypeTotals').append('<span class="FE_FlairTypeTotal" data-flairtype="' + flairType + '">' + flairType + ': ' + flairTypes[flairType].length + '</span>');
    }

    $('#FE_FlairTypeTotals').after('<div id="FE_ReturnToTop" title="Return To Top">^</div>');
};

let hideShowFlairsInFlairList = function(selectedFlairType) {
    if (selectedFlairType) { //show only this type
        $('.FE_Flair').css('opacity', '0.2');
        $('.FE_Type_' + selectedFlairType).css('opacity', '1');

        $('.FE_FlairTypeTotal').css('opacity', '0.6');
        $('.FE_FlairTypeTotal[data-flairtype^="' + selectedFlairType + '"]').css('opacity', '1');

    } else { //show all
        $('.FE_Flair').css('opacity', '0.8');
        $('.FE_FlairTypeTotal').css('opacity', '0.85');
    }
};

let addListeners = function() {
    $('.FE_Flair').on('click', function() {
        let $target = $('#FE_' + this.dataset.target);

        $target.addClass('FE_Row_Highlight');

        $('html, body').animate({ scrollTop: $target.offset().top - 250 }, 400, function() {
            setTimeout(function() {
                $target.addClass('FE_Row_Highlight_Remove').removeClass('FE_Row_Highlight');
                setTimeout(function() {
                    $target.removeClass('FE_Row_Highlight_Remove');
                }, 800);
            }, 1500);
        });
    });

    $('.FE_FlairTypeTotal').on('click', function() {
        if ($(this).css('opacity') < 1) { //show only this type
            hideShowFlairsInFlairList(this.dataset.flairtype);
        } else { //show all
            hideShowFlairsInFlairList(false);
        }
    });

    $('#FE_ReturnToTop').on('click', function() {
        $('html, body').animate({ scrollTop: 0 }, 400);
    });
};


tagpro.ready(function() {
    addStyles();
    enhanceTable();
    addListeners();
});