@sv443-network/userutils 7.0.0 → 7.1.0

package/dist/index.global.js

@@ -8,7 +8,7 @@
 // ==UserLibrary==
 // @name         UserUtils
 // @description  Library with various utilities for userscripts - register listeners for when CSS selectors exist, intercept events, create persistent & synchronous data stores, modify the DOM more easily and more
-// @version      7.0.0
+// @version      7.1.0
 // @license      MIT
 // @copyright    Sv443 (https://github.com/Sv443)
 
@@ -552,6 +552,495 @@ Has: ${checksum}`);
     return [];
   }
 
+  // node_modules/nanoevents/index.js
+  var createNanoEvents = () => ({
+    emit(event, ...args) {
+      for (let i = 0, callbacks = this.events[event] || [], length = callbacks.length; i < length; i++) {
+        callbacks[i](...args);
+      }
+    },
+    events: {},
+    on(event, cb) {
+      var _a;
+      ((_a = this.events)[event] || (_a[event] = [])).push(cb);
+      return () => {
+        var _a2;
+        this.events[event] = (_a2 = this.events[event]) == null ? void 0 : _a2.filter((i) => cb !== i);
+      };
+    }
+  });
+
+  // lib/NanoEmitter.ts
+  var NanoEmitter = class {
+    constructor(options = {}) {
+      __publicField(this, "events", createNanoEvents());
+      __publicField(this, "eventUnsubscribes", []);
+      __publicField(this, "emitterOptions");
+      this.emitterOptions = __spreadValues({
+        publicEmit: false
+      }, options);
+    }
+    /** Subscribes to an event - returns a function that unsubscribes the event listener */
+    on(event, cb) {
+      let unsub;
+      const unsubProxy = () => {
+        if (!unsub)
+          return;
+        unsub();
+        this.eventUnsubscribes = this.eventUnsubscribes.filter((u) => u !== unsub);
+      };
+      unsub = this.events.on(event, cb);
+      this.eventUnsubscribes.push(unsub);
+      return unsubProxy;
+    }
+    /** Subscribes to an event and calls the callback or resolves the Promise only once */
+    once(event, cb) {
+      return new Promise((resolve) => {
+        let unsub;
+        const onceProxy = (...args) => {
+          unsub();
+          cb == null ? void 0 : cb(...args);
+          resolve(args);
+        };
+        unsub = this.on(event, onceProxy);
+      });
+    }
+    /** Emits an event on this instance - Needs `publicEmit` to be set to true in the constructor! */
+    emit(event, ...args) {
+      if (this.emitterOptions.publicEmit) {
+        this.events.emit(event, ...args);
+        return true;
+      }
+      return false;
+    }
+    /** Unsubscribes all event listeners */
+    unsubscribeAll() {
+      for (const unsub of this.eventUnsubscribes)
+        unsub();
+      this.eventUnsubscribes = [];
+    }
+  };
+
+  // lib/Dialog.ts
+  var defaultDialogCss = `.uu-no-select {
+  user-select: none;
+}
+
+.uu-dialog-bg {
+  --uu-dialog-bg: #333333;
+  --uu-dialog-bg-highlight: #252525;
+  --uu-scroll-indicator-bg: rgba(10, 10, 10, 0.7);
+  --uu-dialog-separator-color: #797979;
+  --uu-dialog-border-radius: 10px;
+}
+
+.uu-dialog-bg {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.uu-dialog {
+  --uu-calc-dialog-height: calc(min(100vh - 40px, var(--uu-dialog-height-max)));
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: calc(min(100% - 60px, var(--uu-dialog-width-max)));
+  border-radius: var(--uu-dialog-border-radius);
+  height: auto;
+  max-height: var(--uu-calc-dialog-height);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 6;
+  color: #fff;
+  background-color: var(--uu-dialog-bg);
+}
+
+.uu-dialog.align-top {
+  top: 0;
+  transform: translate(-50%, 40px);
+}
+
+.uu-dialog.align-bottom {
+  top: 100%;
+  transform: translate(-50%, -100%);
+}
+
+.uu-dialog-body {
+  font-size: 1.5rem;
+  padding: 20px;
+}
+
+.uu-dialog-body.small {
+  padding: 15px;
+}
+
+#uu-dialog-opts {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 30px 0px;
+  overflow-y: auto;
+}
+
+.uu-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+  padding: 15px 20px 15px 20px;
+  background-color: var(--uu-dialog-bg);
+  border: 2px solid var(--uu-dialog-separator-color);
+  border-style: none none solid none !important;
+  border-radius: var(--uu-dialog-border-radius) var(--uu-dialog-border-radius) 0px 0px;
+}
+
+.uu-dialog-header.small {
+  padding: 10px 15px;
+  border-style: none none solid none !important;
+}
+
+.uu-dialog-header-pad {
+  content: " ";
+  min-height: 32px;
+}
+
+.uu-dialog-header-pad.small {
+  min-height: 24px;
+}
+
+.uu-dialog-titlecont {
+  display: flex;
+  align-items: center;
+}
+
+.uu-dialog-titlecont-no-title {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.uu-dialog-title {
+  position: relative;
+  display: inline-block;
+  font-size: 22px;
+}
+
+.uu-dialog-close {
+  cursor: pointer;
+}
+
+.uu-dialog-header-img,
+.uu-dialog-close
+{
+  width: 32px;
+  height: 32px;
+}
+
+.uu-dialog-header-img.small,
+.uu-dialog-close.small
+{
+  width: 24px;
+  height: 24px;
+}
+
+.uu-dialog-footer {
+  font-size: 17px;
+  text-decoration: underline;
+}
+
+.uu-dialog-footer.hidden {
+  display: none;
+}
+
+.uu-dialog-footer-cont {
+  margin-top: 6px;
+  padding: 15px 20px;
+  background: var(--uu-dialog-bg);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--uu-dialog-bg) 30%, var(--uu-dialog-bg) 100%);
+  border: 2px solid var(--uu-dialog-separator-color);
+  border-style: solid none none none !important;
+  border-radius: 0px 0px var(--uu-dialog-border-radius) var(--uu-dialog-border-radius);
+}
+
+.uu-dialog-footer-buttons-cont button:not(:last-of-type) {
+  margin-right: 15px;
+}`;
+  exports.currentDialogId = null;
+  var openDialogs = [];
+  var defaultStrings = {
+    closeDialogTooltip: "Click to close the dialog"
+  };
+  var Dialog = class _Dialog extends NanoEmitter {
+    constructor(options) {
+      super();
+      /** Options passed to the dialog in the constructor */
+      __publicField(this, "options");
+      /** ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! */
+      __publicField(this, "id");
+      /** Strings used in the dialog (used for translations) */
+      __publicField(this, "strings");
+      __publicField(this, "dialogOpen", false);
+      __publicField(this, "dialogMounted", false);
+      const _a = options, { strings } = _a, opts = __objRest(_a, ["strings"]);
+      this.strings = __spreadValues(__spreadValues({}, defaultStrings), strings != null ? strings : {});
+      this.options = __spreadValues({
+        closeOnBgClick: true,
+        closeOnEscPress: true,
+        destroyOnClose: false,
+        unmountOnClose: true,
+        removeListenersOnDestroy: true,
+        smallHeader: false,
+        verticalAlign: "center",
+        dialogCss: defaultDialogCss
+      }, opts);
+      this.id = opts.id;
+    }
+    //#region public
+    /** Call after DOMContentLoaded to pre-render the dialog and invisibly mount it in the DOM */
+    mount() {
+      return __async(this, null, function* () {
+        if (this.dialogMounted)
+          return;
+        this.dialogMounted = true;
+        if (!document.querySelector("style.uu-dialog-css"))
+          addGlobalStyle(this.options.dialogCss).classList.add("uu-dialog-css");
+        const bgElem = document.createElement("div");
+        bgElem.id = `uu-${this.id}-dialog-bg`;
+        bgElem.classList.add("uu-dialog-bg");
+        if (this.options.closeOnBgClick)
+          bgElem.ariaLabel = bgElem.title = this.getString("closeDialogTooltip");
+        bgElem.style.setProperty("--uu-dialog-width-max", `${this.options.width}px`);
+        bgElem.style.setProperty("--uu-dialog-height-max", `${this.options.height}px`);
+        bgElem.style.visibility = "hidden";
+        bgElem.style.display = "none";
+        bgElem.inert = true;
+        bgElem.appendChild(yield this.getDialogContent());
+        document.body.appendChild(bgElem);
+        this.attachListeners(bgElem);
+        this.events.emit("render");
+        return bgElem;
+      });
+    }
+    /** Closes the dialog and clears all its contents (unmounts elements from the DOM) in preparation for a new rendering call */
+    unmount() {
+      var _a;
+      this.close();
+      this.dialogMounted = false;
+      const clearSelectors = [
+        `#uu-${this.id}-dialog-bg`,
+        `#uu-style-dialog-${this.id}`
+      ];
+      for (const sel of clearSelectors)
+        (_a = document.querySelector(sel)) == null ? void 0 : _a.remove();
+      this.events.emit("clear");
+    }
+    /** Clears the DOM of the dialog and then renders it again */
+    remount() {
+      return __async(this, null, function* () {
+        this.unmount();
+        yield this.mount();
+      });
+    }
+    /**
+     * Opens the dialog - also mounts it if it hasn't been mounted yet  
+     * Prevents default action and immediate propagation of the passed event
+     */
+    open(e) {
+      return __async(this, null, function* () {
+        var _a;
+        e == null ? void 0 : e.preventDefault();
+        e == null ? void 0 : e.stopImmediatePropagation();
+        if (this.isOpen())
+          return;
+        this.dialogOpen = true;
+        if (openDialogs.includes(this.id))
+          throw new Error(`A dialog with the same ID of '${this.id}' already exists and is open!`);
+        if (!this.isMounted())
+          yield this.mount();
+        const dialogBg = document.querySelector(`#uu-${this.id}-dialog-bg`);
+        if (!dialogBg)
+          return console.warn(`Couldn't find background element for dialog with ID '${this.id}'`);
+        dialogBg.style.visibility = "visible";
+        dialogBg.style.display = "block";
+        dialogBg.inert = false;
+        exports.currentDialogId = this.id;
+        openDialogs.unshift(this.id);
+        for (const dialogId of openDialogs)
+          if (dialogId !== this.id)
+            (_a = document.querySelector(`#uu-${dialogId}-dialog-bg`)) == null ? void 0 : _a.setAttribute("inert", "true");
+        document.body.classList.remove("uu-no-select");
+        document.body.setAttribute("inert", "true");
+        this.events.emit("open");
+        return dialogBg;
+      });
+    }
+    /** Closes the dialog - prevents default action and immediate propagation of the passed event */
+    close(e) {
+      var _a, _b;
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopImmediatePropagation();
+      if (!this.isOpen())
+        return;
+      this.dialogOpen = false;
+      const dialogBg = document.querySelector(`#uu-${this.id}-dialog-bg`);
+      if (!dialogBg)
+        return console.warn(`Couldn't find background element for dialog with ID '${this.id}'`);
+      dialogBg.style.visibility = "hidden";
+      dialogBg.style.display = "none";
+      dialogBg.inert = true;
+      openDialogs.splice(openDialogs.indexOf(this.id), 1);
+      exports.currentDialogId = (_a = openDialogs[0]) != null ? _a : null;
+      if (exports.currentDialogId)
+        (_b = document.querySelector(`#uu-${exports.currentDialogId}-dialog-bg`)) == null ? void 0 : _b.removeAttribute("inert");
+      if (openDialogs.length === 0) {
+        document.body.classList.add("uu-no-select");
+        document.body.removeAttribute("inert");
+      }
+      this.events.emit("close");
+      if (this.options.destroyOnClose)
+        this.destroy();
+      else if (this.options.unmountOnClose)
+        this.unmount();
+    }
+    /** Returns true if the dialog is currently open */
+    isOpen() {
+      return this.dialogOpen;
+    }
+    /** Returns true if the dialog is currently mounted */
+    isMounted() {
+      return this.dialogMounted;
+    }
+    /** Clears the DOM of the dialog and removes all event listeners */
+    destroy() {
+      this.unmount();
+      this.events.emit("destroy");
+      this.options.removeListenersOnDestroy && this.unsubscribeAll();
+    }
+    //#region static
+    /** Returns the ID of the top-most dialog (the dialog that has been opened last) */
+    static getCurrentDialogId() {
+      return exports.currentDialogId;
+    }
+    /** Returns the IDs of all currently open dialogs, top-most first */
+    static getOpenDialogs() {
+      return openDialogs;
+    }
+    //#region protected
+    getString(key) {
+      var _a;
+      return (_a = this.strings[key]) != null ? _a : defaultStrings[key];
+    }
+    /** Called once to attach all generic event listeners */
+    attachListeners(bgElem) {
+      if (this.options.closeOnBgClick) {
+        bgElem.addEventListener("click", (e) => {
+          var _a;
+          if (this.isOpen() && ((_a = e.target) == null ? void 0 : _a.id) === `uu-${this.id}-dialog-bg`)
+            this.close(e);
+        });
+      }
+      if (this.options.closeOnEscPress) {
+        document.body.addEventListener("keydown", (e) => {
+          if (e.key === "Escape" && this.isOpen() && _Dialog.getCurrentDialogId() === this.id)
+            this.close(e);
+        });
+      }
+    }
+    //#region protected
+    /**
+     * Adds generic, accessible interaction listeners to the passed element.  
+     * All listeners have the default behavior prevented and stop propagation (for keyboard events only as long as the captured key is valid).
+     * @param listenerOptions Provide a {@linkcode listenerOptions} object to configure the listeners
+     */
+    onInteraction(elem, listener, listenerOptions) {
+      const _a = listenerOptions != null ? listenerOptions : {}, { preventDefault = true, stopPropagation = true } = _a, listenerOpts = __objRest(_a, ["preventDefault", "stopPropagation"]);
+      const interactionKeys = ["Enter", " ", "Space"];
+      const proxListener = (e) => {
+        if (e instanceof KeyboardEvent) {
+          if (interactionKeys.includes(e.key)) {
+            preventDefault && e.preventDefault();
+            stopPropagation && e.stopPropagation();
+          } else
+            return;
+        } else if (e instanceof MouseEvent) {
+          preventDefault && e.preventDefault();
+          stopPropagation && e.stopPropagation();
+        }
+        (listenerOpts == null ? void 0 : listenerOpts.once) && e.type === "keydown" && elem.removeEventListener("click", proxListener, listenerOpts);
+        (listenerOpts == null ? void 0 : listenerOpts.once) && e.type === "click" && elem.removeEventListener("keydown", proxListener, listenerOpts);
+        listener(e);
+      };
+      elem.addEventListener("click", proxListener, listenerOpts);
+      elem.addEventListener("keydown", proxListener, listenerOpts);
+    }
+    /** Returns the dialog content element and all its children */
+    getDialogContent() {
+      return __async(this, null, function* () {
+        var _a, _b, _c, _d;
+        const header = (_b = (_a = this.options).renderHeader) == null ? void 0 : _b.call(_a);
+        const footer = (_d = (_c = this.options).renderFooter) == null ? void 0 : _d.call(_c);
+        const dialogWrapperEl = document.createElement("div");
+        dialogWrapperEl.id = `uu-${this.id}-dialog`;
+        dialogWrapperEl.classList.add("uu-dialog");
+        dialogWrapperEl.ariaLabel = dialogWrapperEl.title = "";
+        dialogWrapperEl.role = "dialog";
+        dialogWrapperEl.setAttribute("aria-labelledby", `uu-${this.id}-dialog-title`);
+        dialogWrapperEl.setAttribute("aria-describedby", `uu-${this.id}-dialog-body`);
+        if (this.options.verticalAlign !== "center")
+          dialogWrapperEl.classList.add(`align-${this.options.verticalAlign}`);
+        const headerWrapperEl = document.createElement("div");
+        headerWrapperEl.classList.add("uu-dialog-header");
+        this.options.small && headerWrapperEl.classList.add("small");
+        if (header) {
+          const headerTitleWrapperEl = document.createElement("div");
+          headerTitleWrapperEl.id = `uu-${this.id}-dialog-title`;
+          headerTitleWrapperEl.classList.add("uu-dialog-title-wrapper");
+          headerTitleWrapperEl.role = "heading";
+          headerTitleWrapperEl.ariaLevel = "1";
+          headerTitleWrapperEl.appendChild(header instanceof Promise ? yield header : header);
+          headerWrapperEl.appendChild(headerTitleWrapperEl);
+        } else {
+          const padEl = document.createElement("div");
+          padEl.classList.add("uu-dialog-header-pad", this.options.small ? "small" : "");
+          headerWrapperEl.appendChild(padEl);
+        }
+        if (this.options.renderCloseBtn) {
+          const closeBtnEl = yield this.options.renderCloseBtn();
+          closeBtnEl.classList.add("uu-dialog-close");
+          this.options.small && closeBtnEl.classList.add("small");
+          closeBtnEl.tabIndex = 0;
+          if (closeBtnEl.hasAttribute("alt"))
+            closeBtnEl.setAttribute("alt", this.getString("closeDialogTooltip"));
+          closeBtnEl.title = closeBtnEl.ariaLabel = this.getString("closeDialogTooltip");
+          this.onInteraction(closeBtnEl, () => this.close());
+          headerWrapperEl.appendChild(closeBtnEl);
+        }
+        dialogWrapperEl.appendChild(headerWrapperEl);
+        const dialogBodyElem = document.createElement("div");
+        dialogBodyElem.id = `uu-${this.id}-dialog-body`;
+        dialogBodyElem.classList.add("uu-dialog-body");
+        this.options.small && dialogBodyElem.classList.add("small");
+        const body = this.options.renderBody();
+        dialogBodyElem.appendChild(body instanceof Promise ? yield body : body);
+        dialogWrapperEl.appendChild(dialogBodyElem);
+        if (footer) {
+          const footerWrapper = document.createElement("div");
+          footerWrapper.classList.add("uu-dialog-footer-cont");
+          dialogWrapperEl.appendChild(footerWrapper);
+          footerWrapper.appendChild(footer instanceof Promise ? yield footer : footer);
+        }
+        return dialogWrapperEl;
+      });
+    }
+  };
+
   // lib/misc.ts
   function autoPlural(word, num) {
     if (Array.isArray(num) || num instanceof NodeList)
@@ -865,6 +1354,8 @@ Has: ${checksum}`);
 
   exports.DataStore = DataStore;
   exports.DataStoreSerializer = DataStoreSerializer;
+  exports.Dialog = Dialog;
+  exports.NanoEmitter = NanoEmitter;
   exports.SelectorObserver = SelectorObserver;
   exports.addGlobalStyle = addGlobalStyle;
   exports.addParent = addParent;
@@ -874,6 +1365,8 @@ Has: ${checksum}`);
   exports.computeHash = computeHash;
   exports.debounce = debounce;
   exports.decompress = decompress;
+  exports.defaultDialogCss = defaultDialogCss;
+  exports.defaultStrings = defaultStrings;
   exports.fetchAdvanced = fetchAdvanced;
   exports.getSiblingsFrame = getSiblingsFrame;
   exports.getUnsafeWindow = getUnsafeWindow;
@@ -883,6 +1376,7 @@ Has: ${checksum}`);
   exports.isScrollable = isScrollable;
   exports.mapRange = mapRange;
   exports.observeElementProp = observeElementProp;
+  exports.openDialogs = openDialogs;
   exports.openInNewTab = openInNewTab;
   exports.pauseFor = pauseFor;
   exports.preloadImages = preloadImages;