chuijs 4.0.2 → 4.0.4

package/framework/modules/chui_animations/animations.js

@@ -1,114 +1,175 @@
-// transition: all var(--transition_time);
+/** Виды движения: имя кадра даёт JS, а длительность и кривую — класс движения в styles.css */
+const MOTION = {
+    ENTER: "enter",
+    EXIT: "exit",
+    POP: "pop",
+};
+
+/** Кадр появления всплывающей панели у триггера — общий кадр оболочки */
+const PANEL_FRAME = "chui_panel_in";
 
 class Animation {
     #element = undefined;
 
     constructor(element) {
-        require('../chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Animations");
+        require("../chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Animations");
         if (element !== undefined) this.#element = element;
     }
 
+    /**
+     * Запустить кадры `name` как движение вида `kind`. Длительность и кривая — в `styles.css`
+     * по классу `data-motion`: вход базовый, выход короче, отклик с лёгким перелётом. Прежде
+     * время приходило из общего `animation-duration` на `*`, и все движения шли одним временем.
+     */
+    #play(name = String(), kind = String()) {
+        this.#element.dataset.motion = kind;
+        this.#element.style.animationName = name;
+    }
+
     /**
      * Отменить незавершённое скрытие: его `animationend` (removeEvents) снимает у слоя
      * `animation-name` и `display`. Если слой открыли заново раньше, чем анимация закрытия
      * доиграла, этот обработчик прятал уже открытый слой — вид расходился с состоянием.
      */
     #cancelHide() {
-        this.#element.removeEventListener('animationend', removeEvents);
-        this.#element.style.removeProperty('animation-name');
+        this.#element.removeEventListener("animationend", removeEvents);
+        this.#element.style.removeProperty("animation-name");
+    }
+
+    /**
+     * Кадр появления доигран — вид движения снимается, а имя кадра остаётся. По имени видно,
+     * что слой уже открыт (повторный показ не перезапускает кадр), а само оно без вида ничего
+     * не держит. Вид держит конечное состояние (`animation-fill-mode: both` в styles.css),
+     * и на слое оставался бы вычисленный `transform` — пусть и единичный: элемент с `transform`
+     * становится собственным «backdrop root», и размытие подложки перестаёт видеть содержимое
+     * под слоем (замер: меню контекста с блюром и без — картинка не менялась, пока вид стоял).
+     *
+     * Стрелочное поле, а не метод: у метода в слушателе нет `this`, и он падал бы на первом
+     * же конце кадра.
+     */
+    #entranceEnd = (event) => {
+        if (event.target !== this.#element) return;
+        this.#element.removeEventListener("animationend", this.#entranceEnd);
+        this.#element.removeAttribute("data-motion");
+    };
+
+    /** Показать слой кадром появления и снять вид по концу кадра */
+    #enter(name = String(), kind = String()) {
+        this.#play(name, kind);
+        this.#element.addEventListener("animationend", this.#entranceEnd);
     }
 
     fadeIn() {
         this.#cancelHide();
-        if (window.getComputedStyle(this.#element, null).display === 'none') {
-            if (this.#element.tagName !== "TABLE") this.#element.style.display = 'flex';
+        if (window.getComputedStyle(this.#element, null).display === "none") {
+            if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
         }
-        this.#element.style.transition = "transform .0s"
-        this.#element.style.animationName = 'fade-in';
+        this.#enter("fade-in", MOTION.ENTER);
     }
 
     fadeOut() {
-        this.#element.style.transition = "transform .0s"
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = 'fade-out';
-            this.#element.addEventListener('animationend', removeEvents);
+            this.#play("fade-out", MOTION.EXIT);
+            this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
+    /**
+     * Появление всплывающей панели у триггера (список, меню, поповер): панель приходит
+     * сверху вниз и чуть вырастает. Вид `pop` — кривая с лёгким перелётом, поэтому
+     * открытие читается откликом, а не вспышкой: прежний `fadeIn` менял только прозрачность.
+     *
+     * Повторный показ уже открытой панели кадр не запускает: поле открывают и `focus`,
+     * и `click` — одно действие приходило сюда дважды, а `#cancelHide` перед кадром снимает
+     * имя кадра, поэтому второй вызов начинал его заново и панель мигала на открытии.
+     */
+    panelIn() {
+        const open =
+            this.#element.style.animationName === PANEL_FRAME &&
+            window.getComputedStyle(this.#element, null).display !== "none";
+        if (open) return;
+        this.#cancelHide();
+        if (window.getComputedStyle(this.#element, null).display === "none") {
+            if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
+        }
+        this.#play(PANEL_FRAME, MOTION.POP);
+        this.#element.addEventListener("animationend", this.#entranceEnd);
+    }
+
     // SCALE
     scaleIn() {
         this.#cancelHide();
-        if (window.getComputedStyle(this.#element, null).display === 'none') {
-            if (this.#element.tagName !== "TABLE") this.#element.style.display = 'flex';
+        if (window.getComputedStyle(this.#element, null).display === "none") {
+            if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
         }
-        this.#element.style.animationName = 'scale-in';
+        this.#enter("scale-in", MOTION.POP);
     }
 
     scaleOut() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = 'scale-out';
-            this.#element.addEventListener('animationend', removeEvents);
+            this.#play("scale-out", MOTION.EXIT);
+            this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
     // SLIDE RIGHT
     slideRightIn() {
         this.#cancelHide();
-        if (window.getComputedStyle(this.#element, null).display === 'none') {
-            if (this.#element.tagName !== "TABLE") this.#element.style.display = 'flex';
+        if (window.getComputedStyle(this.#element, null).display === "none") {
+            if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
         }
-        this.#element.style.animationName = 'slide-right-in';
+        this.#enter("slide-right-in", MOTION.ENTER);
     }
 
     slideRightOut() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = 'slide-right-out';
-            this.#element.addEventListener('animationend', removeEvents);
+            this.#play("slide-right-out", MOTION.EXIT);
+            this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
     // SLIDE BOTTOM
     slideBottomIn() {
         this.#cancelHide();
-        if (window.getComputedStyle(this.#element, null).display === 'none') {
-            if (this.#element.tagName !== "TABLE") this.#element.style.display = 'flex';
+        if (window.getComputedStyle(this.#element, null).display === "none") {
+            if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
         }
-        this.#element.style.animationName = 'slide-bottom-in';
+        this.#enter("slide-bottom-in", MOTION.ENTER);
     }
 
     slideBottomOut() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = 'slide-bottom-out';
-            this.#element.addEventListener('animationend', removeEvents);
+            this.#play("slide-bottom-out", MOTION.EXIT);
+            this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
     // REMOVE
     slideBottomOutAndRemove() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = 'slide-bottom-out';
-            this.#element.addEventListener('animationend', removeEvents);
+            this.#play("slide-bottom-out", MOTION.EXIT);
+            this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
     slideRightOutAndRemove() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = 'slide-right-out';
-            this.#element.addEventListener('animationend', removeEvents);
+            this.#play("slide-right-out", MOTION.EXIT);
+            this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
     scaleOutAndRemove() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = 'scale-out';
-            this.#element.addEventListener('animationend', removeEvents2);
+            this.#play("scale-out", MOTION.EXIT);
+            this.#element.addEventListener("animationend", removeEvents2);
         }
     }
 
     fadeOutAndRemove() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = 'fade-out';
-            this.#element.addEventListener('animationend', removeEvents2);
+            this.#play("fade-out", MOTION.EXIT);
+            this.#element.addEventListener("animationend", removeEvents2);
         }
     }
 
@@ -118,19 +179,20 @@ class Animation {
     }
 
     removeStyles() {
-        this.#element.removeAttribute("style")
+        this.#element.removeAttribute("data-motion");
+        this.#element.removeAttribute("style");
     }
 }
 
 const removeEvents2 = (event) => {
-    event.target.remove()
-    event.target.removeEventListener('animationend', removeEvents2);
-}
+    event.target.remove();
+    event.target.removeEventListener("animationend", removeEvents2);
+};
 
 const removeEvents = (event) => {
-    event.target.style.removeProperty('animation-name');
-    event.target.style.removeProperty('display');
-    event.target.removeEventListener('animationend', removeEvents);
-}
+    event.target.style.removeProperty("animation-name");
+    event.target.style.removeProperty("display");
+    event.target.removeEventListener("animationend", removeEvents);
+};
 
-exports.Animation = Animation
+exports.Animation = Animation;

package/framework/modules/chui_animations/motion.js

@@ -0,0 +1,120 @@
+/**
+ * Общий ритм для тех, кто считает кадры сам: построение диаграмм, догоняющее значение,
+ * счётчики. Время и кривую берём из темы — те же токены, что у переходов и кадров CSS,
+ * поэтому движение на канвасе и в стилях читается одним ритмом, а не двумя.
+ *
+ * ```javascript
+ * const { animate } = require("../../modules/chui_animations/motion");
+ * animate((growth) => this.#draw(growth));   // рисуем полотно по мере роста
+ * ```
+ */
+
+/** Уменьшенное движение: движение не запускаем, результат ставим сразу */
+function reducedMotion() {
+    return (
+        typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    );
+}
+
+/**
+ * Время токена движения в миллисекундах: `--motion_base` → 250. Своё число здесь не годится —
+ * время живёт в теме, и его правка должна менять всё движение сразу.
+ */
+function tokenTime(name = "--motion_base") {
+    const source =
+        typeof window !== "undefined" && typeof window.getComputedStyle === "function"
+            ? window.getComputedStyle(document.documentElement).getPropertyValue(name)
+            : "";
+    const seconds = Number.parseFloat(source);
+    return Number.isFinite(seconds) && seconds > 0 ? seconds * 1000 : 250;
+}
+
+/** Торможение к покою — приближение кривой `--motion_ease`: движение заканчивается мягко */
+function easeOut(t) {
+    return 1 - Math.pow(1 - t, 3);
+}
+
+/**
+ * Кадры движения: `step(0…1)` вызывается на каждом кадре до конца времени, затем один раз
+ * с единицей — так последний кадр всегда полный. Возвращает остановку: её зовут, когда
+ * началось новое движение по тому же значению (иначе два кадра спорили бы за результат).
+ * При уменьшенном движении и там, где кадров нет (jsdom без `pretendToBeVisual`), шаг
+ * выполняется сразу с единицей.
+ */
+function animate(step, options = {}) {
+    const duration = options.duration === undefined ? tokenTime() : options.duration;
+    if (typeof requestAnimationFrame !== "function" || reducedMotion() || !(duration > 0)) {
+        step(1);
+        return () => {};
+    }
+    const now = () => (typeof performance === "undefined" ? Date.now() : performance.now());
+    const start = now();
+    let stopped = false;
+    const frame = (time) => {
+        if (stopped) return;
+        const t = Math.min(1, (time - start) / duration);
+        step(options.linear === true ? t : easeOut(t));
+        if (t < 1) requestAnimationFrame(frame);
+    };
+    requestAnimationFrame(frame);
+    return () => {
+        stopped = true;
+    };
+}
+
+/** Ждём, пока запрос сменит значение: событие приходит асинхронно, кадров на это не хватает */
+function waitForFlip(media, before) {
+    if (media.matches !== before) return Promise.resolve();
+    return new Promise((resolve) => {
+        const done = () => {
+            if (media.matches === before) return;
+            media.removeEventListener("change", done);
+            resolve();
+        };
+        media.addEventListener("change", done);
+        // Страховка: если смена не дошла, работа всё равно завершается, а не висит
+        setTimeout(() => {
+            media.removeEventListener("change", done);
+            resolve();
+        }, 1000);
+    });
+}
+
+/**
+ * Работа с общим кроссфейдом: браузер снимает страницу до и после неё и переводит один кадр
+ * в другой. Нужен там, где мгновенное переносит не CSS-переход, а перерисовка, — смена темы:
+ * она приходит сменой `prefers-color-scheme`, и переходы на такое изменение браузер не
+ * запускает (проверено замером: цвет подложки меняется кадром, хотя класс с временем перехода
+ * на корне уже стоит).
+ *
+ * `waitFor` — имя запроса, значение которого должно смениться внутри работы до снимка
+ * «после»: без ожидания снимок может быть взят до перекраски, и кроссфейд пойдёт из старой
+ * схемы в старую. Возвращает то же, что вернула работа.
+ */
+async function crossFade(work, options = {}) {
+    if (reducedMotion() || typeof document === "undefined" || typeof document.startViewTransition !== "function") {
+        return work();
+    }
+    const media = options.waitFor === undefined ? undefined : window.matchMedia(options.waitFor);
+    const before = media === undefined ? undefined : media.matches;
+    let value;
+    const transition = document.startViewTransition(async () => {
+        value = await work();
+        // Ждём саму смену запроса: без этого снимок «после» может быть взят до перекраски,
+        // и кроссфейд пойдёт из старой схемы в старую. Кадров здесь нет намеренно:
+        // на время обработчика браузер останавливает отрисовку, и `requestAnimationFrame`
+        // не срабатывает вовсе (проверено — обработчик из-за этого зависал) —
+        // снимок новый браузер делает сам, когда обработчик завершится
+        if (media !== undefined) await waitForFlip(media, before);
+    });
+    await transition.updateCallbackDone;
+    return value;
+}
+
+exports.reducedMotion = reducedMotion;
+exports.tokenTime = tokenTime;
+exports.easeOut = easeOut;
+exports.animate = animate;
+exports.crossFade = crossFade;

package/framework/modules/chui_animations/styles.css

@@ -1,3 +1,36 @@
+/*
+ * Виды движения. Имя кадра даёт JS (`Animation`), а длительность и кривая живут здесь:
+ * так у одного вида одно время на всё приложение, а не у каждого вызова своё.
+ * Вход базовый (0.25s) с торможением к покою, выход короче (0.15s) — уход не задерживает
+ * следующий экран, отклик чуть перелетает (пружина) — так читаются всплывающие меню и диалог.
+ * Значения — из темы (`--motion_*` в global_style.css).
+ */
+[data-motion="enter"] {
+    animation-duration: var(--motion_base);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
+[data-motion="exit"] {
+    animation-duration: var(--motion_fast);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
+[data-motion="pop"] {
+    animation-duration: var(--motion_base);
+    animation-timing-function: var(--motion_spring);
+    animation-fill-mode: both;
+}
+
+/* Кадром владеет слой, а не переход: после выходного вида заполненный `transform` остаётся
+   на месте, а следующий кадр его не объявляет — переход вернул бы слой на место отдельным
+   движением, поверх проигрываемого. Поэтому у слоя выключен только `transform`, остальные
+   свойства живут по общему правилу `* { transition }` */
+[data-motion] {
+    transition-property: background-color, color, border-color, box-shadow, filter, opacity;
+}
+
 /* FADE */
 @keyframes fade-in {
     from {
@@ -16,11 +49,11 @@
         opacity: 0;
     }
 }
-/* SCALE */
+/* SCALE. Масштаб появления небольшой (0.92 вместо прежних 0.63): крупный «наезд» камеры выделял сам эффект, а не появление слоя */
 @keyframes scale-in {
     from {
         opacity: 0;
-        transform: scale(0.63);
+        transform: scale(0.92);
     }
     to {
         opacity: 1;
@@ -34,7 +67,7 @@
     }
     to {
         opacity: 0;
-        transform: scale(0.63);
+        transform: scale(0.96);
     }
 }
 /* SLIDE */
@@ -77,4 +110,4 @@
         opacity: 0;
         transform: translateY(100%);
     }
-}
+}

package/framework/modules/chui_bridge/preload.js

@@ -1,8 +1,14 @@
-const {contextBridge, ipcRenderer} = require("electron");
-const {SERVICES_CHANNELS, SERVICES_CALLS, SERVICES_SYNC_CALLS, BRIDGE_CHANNELS, BRIDGE_ARGS} = require("../chui_services/chui_channels");
+const { contextBridge, ipcRenderer } = require("electron");
+const {
+    SERVICES_CHANNELS,
+    SERVICES_CALLS,
+    SERVICES_SYNC_CALLS,
+    BRIDGE_CHANNELS,
+    BRIDGE_ARGS,
+} = require("../chui_services/chui_channels");
 // Мост переиспользует ту же обёртку сервисов, что и страница: разница только в транспорте
 // (`Desktop` в preload'е сам вызовет ipcRenderer, потому что `window.chui` ему не виден)
-const {Desktop} = require("../chui_services/desktop");
+const { Desktop } = require("../chui_services/desktop");
 
 /**
  * Preload безопасного режима (`Main({security: {contextIsolation: true}})`).
@@ -32,7 +38,10 @@ function argValue(prefix = String()) {
 
 const renderPath = argValue(BRIDGE_ARGS.RENDER);
 const csp = argValue(BRIDGE_ARGS.CSP);
-const channels = (argValue(BRIDGE_ARGS.CHANNELS) ?? "").split(",").map((channel) => channel.trim()).filter(Boolean);
+const channels = (argValue(BRIDGE_ARGS.CHANNELS) ?? "")
+    .split(",")
+    .map((channel) => channel.trim())
+    .filter(Boolean);
 
 /**
  * Content-Security-Policy вставляется в документ до его скриптов: preload выполняется раньше
@@ -50,7 +59,7 @@ function applyCsp() {
     return true;
 }
 
-if (!applyCsp()) document.addEventListener("readystatechange", () => applyCsp(), {once: true});
+if (!applyCsp()) document.addEventListener("readystatechange", () => applyCsp(), { once: true });
 
 const call = (method = String(), ...args) => {
     const channel = SERVICES_CALLS[method];
@@ -100,7 +109,7 @@ contextBridge.exposeInMainWorld("chui", {
     versions: {
         node: process.versions.node,
         chrome: process.versions.chrome,
-        electron: process.versions.electron
+        electron: process.versions.electron,
     },
     platform: process.platform,
     /** Путь к странице окна (как он задан в опции `render`) */
@@ -120,20 +129,20 @@ contextBridge.exposeInMainWorld("chui", {
                 copy: (text = String()) => Desktop.clipboard.history.copy(text),
                 remove: (target = undefined) => Desktop.clipboard.history.remove(target),
                 clear: () => Desktop.clipboard.history.clear(),
-                onChange: (listener = () => {}) => services.onClipboardHistory(listener)
-            }
+                onChange: (listener = () => {}) => services.onClipboardHistory(listener),
+            },
         },
         recent: {
             add: (path = String(), name = undefined) => Desktop.recent.add(path, name),
             clear: () => Desktop.recent.clear(),
-            list: () => Desktop.recent.list()
+            list: () => Desktop.recent.list(),
         },
         progress: {
             set: (value = Number(), mode = "normal") => Desktop.progress.set(value, mode),
-            clear: () => Desktop.progress.clear()
+            clear: () => Desktop.progress.clear(),
         },
         shell: {
-            openExternal: (url = String()) => Desktop.shell.openExternal(url)
+            openExternal: (url = String()) => Desktop.shell.openExternal(url),
         },
         app: {
             // Путь приходит значением, без промиса (синхронный канал), а `Desktop` в preload'е
@@ -148,36 +157,36 @@ contextBridge.exposeInMainWorld("chui", {
             // Закрытие и перезапуск — как у `Desktop` из пакета: те же шаги, что у пункта меню.
             // Отвечают значением, а не промисом (синхронный канал), поэтому `await` не нужен
             quit: () => Desktop.app.quit(),
-            restart: () => Desktop.app.restart()
+            restart: () => Desktop.app.restart(),
         },
         dialog: {
             open: (options = {}) => Desktop.dialog.open(options),
             save: (options = {}) => Desktop.dialog.save(options),
-            message: (options = {}) => Desktop.dialog.message(options)
+            message: (options = {}) => Desktop.dialog.message(options),
         },
         session: {
             getCacheSize: () => Desktop.session.getCacheSize(),
             clearCache: () => Desktop.session.clearCache(),
-            clearStorageData: (options = {}) => Desktop.session.clearStorageData(options)
+            clearStorageData: (options = {}) => Desktop.session.clearStorageData(options),
         },
         print: {
             page: (options = {}) => Desktop.print.page(options),
             html: (html = String(), options = {}) => Desktop.print.html(html, options),
-            pdf: (html = String(), options = {}) => Desktop.print.pdf(html, options)
+            pdf: (html = String(), options = {}) => Desktop.print.pdf(html, options),
         },
         shortcuts: {
             on: (accelerator = String(), handler = () => {}) => Desktop.shortcuts.on(accelerator, handler),
             off: (accelerator = String(), handler = () => {}) => Desktop.shortcuts.off(accelerator, handler),
             offAll: () => Desktop.shortcuts.offAll(),
-            get: () => Desktop.shortcuts.get()
-        }
+            get: () => Desktop.shortcuts.get(),
+        },
     },
     window: {
         minimize: () => windowAction("minimize"),
         toggleMaximize: () => windowAction("toggle-maximize"),
         restore: () => windowAction("restore"),
         close: () => windowAction("close"),
-        getState: () => ipcRenderer.invoke(BRIDGE_CHANNELS.WINDOW_STATE)
+        getState: () => ipcRenderer.invoke(BRIDGE_CHANNELS.WINDOW_STATE),
     },
     theme: {
         get: () => ipcRenderer.invoke(BRIDGE_CHANNELS.THEME_GET),
@@ -187,7 +196,7 @@ contextBridge.exposeInMainWorld("chui", {
         onChange: (listener = () => {}) => {
             themeListeners.add(listener);
             return () => themeListeners.delete(listener);
-        }
+        },
     },
     locale: {
         get: () => ipcRenderer.invoke(BRIDGE_CHANNELS.LOCALE_GET),
@@ -196,17 +205,19 @@ contextBridge.exposeInMainWorld("chui", {
         onChange: (listener = () => {}) => {
             localeListeners.add(listener);
             return () => localeListeners.delete(listener);
-        }
+        },
     },
     messaging: {
         /** Каналы задаёт приложение: `security: {channels: ['preview:update']}` */
         channels: [...channels],
         send: (channel = String(), ...args) => {
-            if (!channels.includes(channel)) throw new Error(`chui: канал «${channel}» не разрешён в security.channels`);
+            if (!channels.includes(channel))
+                throw new Error(`chui: канал «${channel}» не разрешён в security.channels`);
             return ipcRenderer.invoke(BRIDGE_CHANNELS.MESSAGE, channel, ...args);
         },
         on: (channel = String(), listener = () => {}) => {
-            if (!channels.includes(channel)) throw new Error(`chui: канал «${channel}» не разрешён в security.channels`);
+            if (!channels.includes(channel))
+                throw new Error(`chui: канал «${channel}» не разрешён в security.channels`);
             const listeners = messageListeners.get(channel) ?? new Set();
             listeners.add(listener);
             messageListeners.set(channel, listeners);
@@ -214,8 +225,8 @@ contextBridge.exposeInMainWorld("chui", {
                 listeners.delete(listener);
                 if (listeners.size === 0) messageListeners.delete(channel);
             };
-        }
-    }
+        },
+    },
 });
 
 // Скрипт страницы подключается здесь: в безопасном режиме `render` — это скрипт документа,
@@ -227,6 +238,6 @@ if (renderPath !== undefined) {
         script.defer = true;
         document.head.appendChild(script);
     };
-    if (document.readyState === "loading") window.addEventListener("DOMContentLoaded", addPageScript, {once: true});
+    if (document.readyState === "loading") window.addEventListener("DOMContentLoaded", addPageScript, { once: true });
     else addPageScript();
 }