Itsnotlupus' Tiny Utilities

small utilities that I'm tired of digging from old scripts to put in new ones.

目前為 2023-07-09 提交的版本，檢視最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/468394/1217726/Itsnotlupus%27%20Tiny%20Utilities.js

發表問題、評論、或檢舉該腳本。

Wrap lines

// ==UserScript==
// @name         Itsnotlupus' Tiny Utilities
// @namespace    Itsnotlupus Industries
// @version      1.4
// @description  small utilities that I'm tired of digging from old scripts to put in new ones.
// @author       Itsnotlupus
// ==/UserScript==

/* jshint esversion:11 */
/* jshint -W138 */

/** calls a function whenever the DOM changes */
const observeDOM = (fn, e = document.documentElement, config = { attributes: 1, childList: 1, subtree: 1 }, o = new MutationObserver(fn)) => (o.observe(e,config),()=>o.disconnect());

/** check a condition on every DOM change until true */
const untilDOM = (v, doc=document,f=typeof v==='string'?()=>doc.querySelector(v):v) => new Promise((r,_,d = observeDOM(() => (_=f()) && d() | r(_), doc.documentElement)) => 0);

/** basic async primitives */
const sleep = (w = 100) => new Promise(r=>setTimeout(r, w));
const until = async (v, w, f=typeof v==='string'?()=>document.querySelector(v):v) => { while (!f()) await sleep(w); return f(); };

/** slightly less painful syntax to create DOM trees */
const crel = (name, attrs, ...children) => ((e = Object.assign(document.createElement(name), attrs)) => (e.append(...children), e))();

/** same, for SVG content. golf me. */
const svg = (name, attrs, ...children) =>  {
  const e = document.createElementNS('http://www.w3.org/2000/svg', name);
  Object.entries(attrs).forEach(([key,val]) => e.setAttribute(key, val));
  e.append(...children);
  return e;
};

/** create a shadow dom with an isolated stylesheet */
const custom = (name, css, dom, e = crel(name), ss = e.attachShadow({mode:'closed'})) => (ss.adoptedStyleSheets = [ (s = new CSSStyleSheet(), s.replaceSync(css),s) ], ss.append(...dom), e);

/** add a stylesheet */
const addStyles = css => document.head.append(crel('style', { type: 'text/css', textContent: css }));

/** stolen from https://gist.github.com/nmsdvid/8807205 */
const slowDebounce = (a,b=250,c=0)=>(...d)=>clearTimeout(c,c=setTimeout(a,b,...d));

/** microtask debounce */
const fastDebounce = (f, l, s=0) => async (...a) => (l = a, !s && (await (s=1), s = 0, f(...l)));

/** DOM queries - CSS selectors and XPath */
const $ = q=>document.querySelector(q);
const $$ = q=>document.querySelectorAll(q);
const $$$ = (q,d=document,x=d.evaluate(q,d),a=[],n=x.iterateNext()) => n ? (a.push(n), $$$(q,d,x,a)) : a;

/** requestAnimationFrame wrapper that allows a callback to request another run without referencing itself */
const rAF = (f, n=t=>f(t,r), r=_=>requestAnimationFrame(n)) => r();

/** define a few event listeners in one shot */
const events = (o, t=window, opts) => Object.keys(o).forEach(e=>t.addEventListener(e,o[e],opts));

// Things to add later:
// - React/redux injection/inspection
// - localization micro-framework thingy
// - maybe a wrapper for moduleraid?

欢迎访问Greasy Fork镜像