manga sites tweaks

image loading indicators, prevent headers from being sticky
安裝腳本 ?
Wrap lines
// ==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;
  });
});
欢迎访问Greasy Fork镜像
