MFC enhancement

gistfile1.txt

// ==UserScript==
// @name         MFC restyle
// @namespace    http://tampermonkey.net/
// @version      0.99
// @description  Improves styling and UX of MyFigureCollection website
//               - Expands content to max
//               - Various styling tweaks
//               - Large thumbnails
//               - Keyboard arrows work in galleries
//               - Automatically expands 18+ content (configurable)
// @author       NoxArt
// @match        https://myfigurecollection.net/*
// @require      http://code.jquery.com/jquery.min.js
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';
    var $ = window.jQuery;

    var links = {
        largeThumbnail: [
            'https://static.myfigurecollection.net/upload/items/large/{itemId}.jpg',
            'https://static.myfigurecollection.net/upload/items/big/{itemId}.jpg'
        ]
    };

    var setting = {
        largeIcon: {
            width: 420,
            height: null,
            ratio: 1.5
        },
        expandNsfw: true
    };

    if( setting.largeIcon.width === null && setting.largeIcon.ratio ) {
        setting.largeIcon.width = setting.largeIcon.height / setting.largeIcon.ratio;
    }
    if( setting.largeIcon.height === null && setting.largeIcon.ratio ) {
        setting.largeIcon.height = setting.largeIcon.width * setting.largeIcon.ratio;
    }

    var styles = "";
    styles += "body { background: rgb(245,245,245); font-family: Roboto,Calibri,Arial,sans-serif;font-size: 14px; }";
    styles += "a#banner { background: rgb(50,50,50) !important; }";
    styles += "a#banner .wrapper { background: rgb(80,80,80) !important; padding: 0 50px; }";
    styles += ".side-menu { border: none !important; }";
    styles += "section.entryItems { border: none; }";
    styles += "section.entryItems h2 { padding: 5px 18px; }";
    if( setting.largeIcon.width ) {
        styles += ".large-icon { width: " + setting.largeIcon.width + "px; }";
    }
    if( setting.largeIcon.height ) {
        styles += ".large-icon { height: " + setting.largeIcon.height + "px; }";
    }
    if( setting.largeIcon.width && setting.largeIcon.height ) {
        styles += ".large-icon { background-size: contain }";
    }
    styles += ".mfcRestyleItemIcons { display: flex; flex-wrap: wrap; padding-top: 15px; }";
    styles += ".mfcRestyleItemIcons h3 { width: 100%; }";
    styles += ".large-icon { /*border: 3px solid transparent;*/ background-color: rgb(240,240,240); background-repeat: no-repeat; background-color: rgba(0,0,0,0.2); border-radius: 20px; }";
    styles += ".large-icon a { display: block; width: 100%; height: 100%; position: relative; }";
    styles += ".entry-items { border-top: none; }";
    styles += ".entry-items .large-icon, .section-content .large-icon, .mfcRestyleItemIcons .large-icon { margin-bottom: 20px; margin-left: 20px; }";
    styles += "#content .content-wrapper { max-width: 100%; }";
    styles += "#content { max-width: 10000px; display: flex; flex-direction: column; }";
    styles += "#wide, #inner > #main { width: calc(100% - 580px); margin-left: 100px; }";
    styles += "#wide > .wrapper > section, #side > .wrapper section { border: none }";
    styles += "#side { width: 250px; margin-right: 180px; }";
    styles += "#side .wrapper { width: 220px !important; margin-right: 180px; }";
    styles += "#inner { display: flex; flex-direction: row; }";
    styles += "#content #ariadne { width: 100%; padding-left: 180px; }";
    styles += "#content .xy-wide-top { display: none; }";
    styles += ".side-menu li.main { font-size: inherit; padding-bottom: 3px; margin-bottom: 8px; margin-top: 20px; border-bottom: 1px dashed rgb(230,230,230); color: rgb(105,105,105) !important; }";
    styles += ".side-menu li a { color: rgb(80,80,80) !important; padding: 3px 8px; border-radius: 8px; text-decoration: none; }";
    styles += "#content .side-menu li a:hover { color: rgb(240,240,240) !important; background-color: rgb(80,80,80); }";
    styles += ".side-menu li.main a { color: rgb(95,95,95) !important; }";
    styles += ".side-menu li.main:first-of-type { display: none }";
    styles += ".side-menu li { line-height: 1.45; }";
    styles += ".side-menu-left li { padding-left: 26px; }";
    styles += ".side-menu { padding: 20px 10px 10px 10px; }";
    styles += ".side-menu { padding-top: 85px; }";
    styles += ".side-menu-right li:first-of-type a { width: 130px; height: 130px; border-radius: 10px; }";
    styles += ".subtab li a { box-shadow: none; border-bottom: 1px solid rgb(220,220,220); border-radius: 0; }";
    styles += ".user-menu li.templates { display: none !important; }";
    styles += ".user-stats { border: none !important; }";
    styles += ".subtab li a { border: none !important; box-shadow: none !important; }";
    styles += "section .listing { border: none !important; }";
    styles += "div.partner { display: none; }";

    styles += ".large-icon .item-is-collected-as { position: absolute; display: block; bottom: 1px; left: 1px; height: 16px; padding: 0 4px; color: rgb(255, 255, 255); font-weight: normal; line-height: 16px; border-radius: 0 4px 0 0; }";
    styles += ".large-icon .item-is-collected-as-0 { background-color: rgba(255,128,0,.8); }";
    styles += ".large-icon .item-is-collected-as-1 { background-color: rgba(0,0,128,.8); }";
    styles += ".large-icon .item-is-collected-as-2 { background-color: rgba(0,128,0,.8); }";

    // highlight
    var highlightColor = "255, 128, 0";
    styles += [
        ".large-icon:hover { background-color: rgba(0,0,0,0.4); }  ",
        ".user-menu .count { background-color: rgb(" + highlightColor + ") !important;  }",
        ".user-menu .menu li a.checkbox.checked { color: rgb(" + highlightColor + ") !important; }",
        "#menu li.home a.handle:hover .icon, #menu li.home a.handle:hover strong  { color: rgb(" + highlightColor + ") !important; }",
        ".notification { color: rgb(" + highlightColor + ") }"
    ].join("\n");

    var $content = $("#content");

    $("<style type='text/css'>").text(styles).prependTo("body");

    // gallery controls
    if( $(".picture-object").length ) {
        $("body").on("keydown", function(e) {
            if( e.which === 39 ) {
                window.location.href = $("#content h1 .action.next").attr("href");
                return false;
            }
            if( e.which === 37 ) {
                window.location.href = $("#content h1 .action.prev").attr("href");
                return false;
            }
        });
    }

    $(window).load(function() {
        var thumbnailUrlCache = /*GM_getValue("mfcRestyleThumbnailUrlCache") ||*/ {};

        var processEntryItems = function() {
            var $iconsContainer = $(this);
            if( $iconsContainer.children(".item-group-by").length > 0) {
                $iconsContainer = $($iconsContainer.children(".item-group-by")[0]);
            }

            if( $iconsContainer.hasClass('mfcRestyleProcessed') ) {
                return;
            }

            $iconsContainer.addClass("mfcRestyleItemIcons");

            var $subContainer = $iconsContainer.closest(".entry-items");
            if( !$subContainer.length ) {
                $subContainer = $iconsContainer.closest(".section-content");
            }
            var $container = $subContainer.closest("section");
            $container.addClass("entryItems");

            var $icons = $iconsContainer.find(".item-icon");
            $icons.each(function() {
                var $icon = $(this);
                var $link = $icon.find("a");
                var link = $link.attr("href");
                var itemId = link.match(/\/(\d+)$/)[1];

                var $mark = $link.children("span");

                var $largeIcon = $("<div class='large-icon' />");
                var $largeLink = $("<a />").attr("href", link);
                $largeLink.appendTo($largeIcon);
                $mark.appendTo($largeLink);

                var thumbnailIndex = thumbnailUrlCache[itemId] || 0;

                var largeThumbnail = links.largeThumbnail[thumbnailIndex].replace('{itemId}', itemId);
                $largeIcon.css("backgroundImage", "url('" + largeThumbnail + "')");
                $largeIcon.data('thumbnail-url', 0);

                var $largeThumbnailLoad = $("<img src='" + largeThumbnail + "' style='display: none' />");
                $largeThumbnailLoad.appendTo($largeIcon);
                $largeThumbnailLoad.error(function() {
                    var urlIndex = $largeIcon.data('thumbnail-url');
                    var nextIndex = urlIndex + 1;
                    if( nextIndex >= links.largeThumbnail.length ) {
                        $largeThumbnailLoad.remove();
                        return;
                    }

                    var url = links.largeThumbnail[nextIndex].replace('{itemId}', itemId);
                    $largeIcon.css("backgroundImage", "url('" + url + "')");
                    $largeThumbnailLoad.attr("src", url);

                    thumbnailUrlCache[itemId] = nextIndex;
                    GM_setValue("mfcRestyleThumbnailUrlCache", thumbnailUrlCache);
                });

                $icon.replaceWith($largeIcon);
            });

            $iconsContainer.addClass('mfcRestyleProcessed');
        };

        var showNsfw = function() {
            if (setting.expandNsfw != true) {
                return;
            }

            $(".over18").each(function() {
                var $button = $(this);
                var $content = $button.next();
                if( !$content.is(":hidden") || $content.css("display") === "none" ) {
                    $content.show();
                }
            });
        };

        var displayLargeImages = function() {
            $(".item-icons").each(processEntryItems);
        };

        var processPage = function() {
            displayLargeImages();
            showNsfw();
        };

        // process right now
        processPage();

        // and also whenever page changes
        var observerConfig = { childList: true, subtree: true };
        var observer = new MutationObserver(processPage);
        observer.observe($content[0], observerConfig);
    });
})();