image loading indicators, prevent headers from being sticky
// ==UserScript== // @name manga sites tweaks // @namespace Itsnotlupus Industries // @match https://1stkissmanga.io/* // @match https://manga-tx.com/* // @match https://isekaiscan.com/* // @match https://manhuaplus.com/* // @grant none // @version 1.5 // @author - // @description image loading indicators, prevent headers from being sticky // @license MIT // ==/UserScript== // TODO: Add applicable manga domains as needed. // TODO: maybe try to auto-reload broken images? // utilities const crel = (e, attrs) => Object.assign(document.createElement(e), attrs); const observe = (fn, e = document.body, config = { attributes: 1, childList: 1, subtree: 1 }) => { const observer = new MutationObserver(fn); observer.observe(e, config); return () => observer.disconnect(); }; // yin yang SVG derived from https://icons8.com/preloaders/en/filtered-search/all/free;svg/ const loading_svg = 'data:image/svg+xml;base64,'+btoa` <svg xmlns="http://www.w3.org/2000/svg" width="64" height="128" viewBox="0 -128 128 256"> <circle cx="64" cy="64" r="63.31" fill="#fff"/> <g> <path d="M3.13 44.22a64 64 0 1 0 80.65-41.1 64 64 0 0 0-80.65 41.1zm34.15-4.83a10.63 10.63 0 1 1-13.4 6.8 10.63 10.63 0 0 1 13.4-6.8zm7.85 82.66A61.06 61.06 0 0 1 5.7 45.86 30.53 30.53 0 0 0 64 64a30.53 30.53 0 0 1 58.3 18.12l.35-1.14-.58 1.9a61.06 61.06 0 0 1-76.94 39.2zM106.9 73.2A10.63 10.63 0 1 0 93.5 80a10.63 10.63 0 0 0 13.4-6.8z"/> <animateTransform attributeName="transform" dur="1200ms" from="0 64 64" repeatCount="indefinite" to="-360 64 64" type="rotate"/> </g> </svg>`; // show a clear loading state when a page is missing document.head.append(crel('style', { type: 'text/css', textContent: `img.wp-manga-chapter-img,img[class^="wp-image-"] { min-height: 300px; background: fixed repeat-y center #777 url('${loading_svg}'); } .c-blog-post .entry-content .entry-content_wrap { line-height: 1em; } `})); observe(() => { // don't bring up a distracting sticky header on every scroll up document.querySelectorAll('.sticky').forEach(e => e.classList.remove('sticky')); // unset min-height on loaded images, to render thin slices correctly document.querySelectorAll(`img.wp-manga-chapter-img:not([style*='min-height']),img[class^="wp-image-"]:not([style*='min-height'])`).forEach(img => { if (img.naturalWidth) img.style.minHeight=0; }); });