Skip to content

Instantly share code, notes, and snippets.

@NoxArt
Last active October 29, 2022 14:44
Show Gist options
  • Save NoxArt/ceb4a9dc256c8658beccffaf998528f6 to your computer and use it in GitHub Desktop.
Save NoxArt/ceb4a9dc256c8658beccffaf998528f6 to your computer and use it in GitHub Desktop.
MFC enhancement
// ==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);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment