@schalkneethling/miyagi-core 4.4.2 → 4.4.3

package/frontend/assets/js/_search.js

@@ -1,190 +1,190 @@
 import { search as searchIsTriggered } from "./_is-triggered.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-	const SEARCH_INPUT = document.querySelector(".Search-input");
-	const SEARCH_CLEAR = document.querySelector(".Search-clear");
-
-	const COMPONENTS = Array.from(document.querySelectorAll(".Nav-item")).map(
-		(node) => {
-			return {
-				node,
-				listItem: node.closest(".Nav-entry"),
-				label: node.textContent,
-				lowercaseLabel: node.textContent.toLowerCase(),
-				matchesQuery: false,
-				toggle: node.previousElementSibling || null,
-				parentToggles: getParentToggles(node),
-				initiallyOpened: node.previousElementSibling
-					? node.previousElementSibling.getAttribute("aria-expanded") === "true"
-						? true
-						: false
-					: false,
-			};
-		},
-	);
-
-	if (SEARCH_INPUT) {
-		if (SEARCH_CLEAR) {
-			SEARCH_CLEAR.addEventListener("click", onClearSearch);
-		}
-
-		SEARCH_INPUT.addEventListener("input", onInputSearch);
-		SEARCH_INPUT.addEventListener("keyup", onInputKeyup);
-
-		window.addEventListener("keyup", (e) => {
-			const { path, originalTarget, target, key } = e;
-			const el = path ? path[0] : originalTarget || target;
-
-			if (searchIsTriggered(el, key)) {
-				SEARCH_INPUT.focus();
-			}
-		});
-		window.addEventListener("searchTriggered", () => {
-			SEARCH_INPUT.focus();
-		});
-	}
-
-	/**
-	 * @returns {void}
-	 */
-	function onClearSearch() {
-		SEARCH_INPUT.value = "";
-		resetMenu();
-	}
-
-	/**
-	 * @param {object} event
-	 * @param {HTMLInputElement} event.target
-	 */
-	function onInputSearch({ target }) {
-		const QUERY = target.value.toLowerCase();
-
-		if (QUERY.length > 0) {
-			updateMenu(QUERY);
-		} else {
-			resetMenu();
-		}
-	}
-
-	/**
-	 * @param {object} root0
-	 * @param {HTMLInputElement} root0.target
-	 * @param {string} root0.key
-	 */
-	function onInputKeyup({ target, key }) {
-		if (key.toLowerCase() === "escape") {
-			target.value = "";
-			target.blur();
-			resetMenu();
-		}
-	}
-
-	/**
-	 * @param {string} query
-	 */
-	function updateMenu(query) {
-		SEARCH_CLEAR.hidden = false;
-
-		COMPONENTS.forEach((component) => {
-			if (component.toggle) {
-				document.getElementById(
-					component.toggle.getAttribute("aria-controls"),
-				).hidden = true;
-				component.toggle.setAttribute("aria-expanded", "false");
-			}
-			component.parentToggles.forEach((toggle) => {
-				toggle.parentNode.classList.remove("has-match");
-			});
-		});
-
-		COMPONENTS.forEach((component) => {
-			component.matchesQuery = component.lowercaseLabel.includes(query);
-			component.listItem.classList.toggle("is-match", component.matchesQuery);
-			component.listItem.classList.toggle(
-				"is-no-match",
-				!component.matchesQuery,
-			);
-
-			if (component.matchesQuery) {
-				component.node.innerHTML = component.label.replace(
-					new RegExp(query, "g"),
-					`<mark>${query}</mark>`,
-				);
-				component.parentToggles.forEach((toggle) => {
-					toggle.parentNode.classList.add("has-match");
-					toggle.parentNode.classList.remove("has-no-match");
-					document.getElementById(toggle.getAttribute("aria-controls")).hidden =
-						false;
-					toggle.setAttribute("aria-expanded", "true");
-				});
-			} else {
-				component.node.textContent = component.label;
-			}
-		});
-
-		COMPONENTS.forEach((component) => {
-			if (!component.listItem.classList.contains("has-match")) {
-				component.listItem.classList.add("has-no-match");
-			}
-		});
-	}
-
-	/**
-	 * @returns {void}
-	 */
-	function resetMenu() {
-		SEARCH_CLEAR.hidden = true;
-
-		COMPONENTS.forEach((component) => {
-			if (component.matchesQuery) {
-				component.node.textContent = component.label;
-			}
-
-			component.matchesQuery = false;
-
-			if (component.toggle) {
-				document.getElementById(
-					component.toggle.getAttribute("aria-controls"),
-				).hidden = !component.initiallyOpened;
-				component.toggle.setAttribute(
-					"aria-expanded",
-					component.initiallyOpened ? "true" : "false",
-				);
-			}
-		});
-
-		document
-			.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match")
-			.forEach((el) =>
-				el.classList.remove(
-					"is-match",
-					"is-no-match",
-					"has-match",
-					"has-no-match",
-				),
-			);
-	}
-
-	/**
-	 * @param {HTMLElement} node
-	 * @returns {Array}
-	 */
-	function getParentToggles(node) {
-		const parentToggles = [];
-		let element = node;
-
-		while (element.closest(".Nav-entry").parentNode.closest(".Nav-entry")) {
-			const toggle = element
-				.closest(".Nav-entry")
-				.parentNode.closest(".Nav-entry")
-				.querySelector(".Nav-toggle");
-
-			if (toggle) {
-				parentToggles.push(toggle);
-			}
-			element = element.closest(".Nav-entry").parentNode.closest(".Nav-entry");
-		}
-
-		return parentToggles;
-	}
+  const SEARCH_INPUT = document.querySelector(".Search-input");
+  const SEARCH_CLEAR = document.querySelector(".Search-clear");
+
+  const COMPONENTS = Array.from(document.querySelectorAll(".Nav-item")).map(
+    (node) => {
+      return {
+        node,
+        listItem: node.closest(".Nav-entry"),
+        label: node.textContent,
+        lowercaseLabel: node.textContent.toLowerCase(),
+        matchesQuery: false,
+        toggle: node.previousElementSibling || null,
+        parentToggles: getParentToggles(node),
+        initiallyOpened: node.previousElementSibling
+          ? node.previousElementSibling.getAttribute("aria-expanded") === "true"
+            ? true
+            : false
+          : false,
+      };
+    },
+  );
+
+  if (SEARCH_INPUT) {
+    if (SEARCH_CLEAR) {
+      SEARCH_CLEAR.addEventListener("click", onClearSearch);
+    }
+
+    SEARCH_INPUT.addEventListener("input", onInputSearch);
+    SEARCH_INPUT.addEventListener("keyup", onInputKeyup);
+
+    window.addEventListener("keyup", (e) => {
+      const { path, originalTarget, target, key } = e;
+      const el = path ? path[0] : originalTarget || target;
+
+      if (searchIsTriggered(el, key)) {
+        SEARCH_INPUT.focus();
+      }
+    });
+    window.addEventListener("searchTriggered", () => {
+      SEARCH_INPUT.focus();
+    });
+  }
+
+  /**
+   * @returns {void}
+   */
+  function onClearSearch() {
+    SEARCH_INPUT.value = "";
+    resetMenu();
+  }
+
+  /**
+   * @param {object} event
+   * @param {HTMLInputElement} event.target
+   */
+  function onInputSearch({ target }) {
+    const QUERY = target.value.toLowerCase();
+
+    if (QUERY.length > 0) {
+      updateMenu(QUERY);
+    } else {
+      resetMenu();
+    }
+  }
+
+  /**
+   * @param {object} root0
+   * @param {HTMLInputElement} root0.target
+   * @param {string} root0.key
+   */
+  function onInputKeyup({ target, key }) {
+    if (key.toLowerCase() === "escape") {
+      target.value = "";
+      target.blur();
+      resetMenu();
+    }
+  }
+
+  /**
+   * @param {string} query
+   */
+  function updateMenu(query) {
+    SEARCH_CLEAR.hidden = false;
+
+    COMPONENTS.forEach((component) => {
+      if (component.toggle) {
+        document.getElementById(
+          component.toggle.getAttribute("aria-controls"),
+        ).hidden = true;
+        component.toggle.setAttribute("aria-expanded", "false");
+      }
+      component.parentToggles.forEach((toggle) => {
+        toggle.parentNode.classList.remove("has-match");
+      });
+    });
+
+    COMPONENTS.forEach((component) => {
+      component.matchesQuery = component.lowercaseLabel.includes(query);
+      component.listItem.classList.toggle("is-match", component.matchesQuery);
+      component.listItem.classList.toggle(
+        "is-no-match",
+        !component.matchesQuery,
+      );
+
+      if (component.matchesQuery) {
+        component.node.innerHTML = component.label.replace(
+          new RegExp(query, "g"),
+          `<mark>${query}</mark>`,
+        );
+        component.parentToggles.forEach((toggle) => {
+          toggle.parentNode.classList.add("has-match");
+          toggle.parentNode.classList.remove("has-no-match");
+          document.getElementById(toggle.getAttribute("aria-controls")).hidden =
+            false;
+          toggle.setAttribute("aria-expanded", "true");
+        });
+      } else {
+        component.node.textContent = component.label;
+      }
+    });
+
+    COMPONENTS.forEach((component) => {
+      if (!component.listItem.classList.contains("has-match")) {
+        component.listItem.classList.add("has-no-match");
+      }
+    });
+  }
+
+  /**
+   * @returns {void}
+   */
+  function resetMenu() {
+    SEARCH_CLEAR.hidden = true;
+
+    COMPONENTS.forEach((component) => {
+      if (component.matchesQuery) {
+        component.node.textContent = component.label;
+      }
+
+      component.matchesQuery = false;
+
+      if (component.toggle) {
+        document.getElementById(
+          component.toggle.getAttribute("aria-controls"),
+        ).hidden = !component.initiallyOpened;
+        component.toggle.setAttribute(
+          "aria-expanded",
+          component.initiallyOpened ? "true" : "false",
+        );
+      }
+    });
+
+    document
+      .querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match")
+      .forEach((el) =>
+        el.classList.remove(
+          "is-match",
+          "is-no-match",
+          "has-match",
+          "has-no-match",
+        ),
+      );
+  }
+
+  /**
+   * @param {HTMLElement} node
+   * @returns {Array}
+   */
+  function getParentToggles(node) {
+    const parentToggles = [];
+    let element = node;
+
+    while (element.closest(".Nav-entry").parentNode.closest(".Nav-entry")) {
+      const toggle = element
+        .closest(".Nav-entry")
+        .parentNode.closest(".Nav-entry")
+        .querySelector(".Nav-toggle");
+
+      if (toggle) {
+        parentToggles.push(toggle);
+      }
+      element = element.closest(".Nav-entry").parentNode.closest(".Nav-entry");
+    }
+
+    return parentToggles;
+  }
 });

package/frontend/assets/js/_socket.js

@@ -6,77 +6,77 @@ let retryDelay = INITIAL_RETRY_DELAY_MS;
 let websocket;
 
 function getWebSocketUrl() {
-	const protocol = window.location.protocol === "https:" ? "wss" : "ws";
-	return `${protocol}://${window.location.host}${SOCKET_PATH}`;
+  const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+  return `${protocol}://${window.location.host}${SOCKET_PATH}`;
 }
 
 function triggerReload(scope) {
-	if (scope === "parent") {
-		parent.window.location.reload();
-		return;
-	}
+  if (scope === "parent") {
+    parent.window.location.reload();
+    return;
+  }
 
-	window.location.reload();
+  window.location.reload();
 }
 
 function parseLegacyScope(messageData) {
-	if (messageData === "reloadParent") {
-		return "parent";
-	}
+  if (messageData === "reloadParent") {
+    return "parent";
+  }
 
-	if (typeof messageData === "string" && messageData.length === 0) {
-		return "iframe";
-	}
+  if (typeof messageData === "string" && messageData.length === 0) {
+    return "iframe";
+  }
 
-	return null;
+  return null;
 }
 
 function parseJsonScope(messageData) {
-	try {
-		const parsed = JSON.parse(messageData);
-		return parsed.scope || "iframe";
-	} catch {
-		return "iframe";
-	}
+  try {
+    const parsed = JSON.parse(messageData);
+    return parsed.scope || "iframe";
+  } catch {
+    return "iframe";
+  }
 }
 
 function parseScope(messageData) {
-	const legacyScope = parseLegacyScope(messageData);
-	if (legacyScope) {
-		return legacyScope;
-	}
+  const legacyScope = parseLegacyScope(messageData);
+  if (legacyScope) {
+    return legacyScope;
+  }
 
-	return parseJsonScope(messageData);
+  return parseJsonScope(messageData);
 }
 
 function scheduleReconnect() {
-	const jitter = Math.floor(Math.random() * 100);
-	const delay = Math.min(retryDelay + jitter, MAX_RETRY_DELAY_MS);
-	retryDelay = Math.min(retryDelay * 2, MAX_RETRY_DELAY_MS);
+  const jitter = Math.floor(Math.random() * 100);
+  const delay = Math.min(retryDelay + jitter, MAX_RETRY_DELAY_MS);
+  retryDelay = Math.min(retryDelay * 2, MAX_RETRY_DELAY_MS);
 
-	window.setTimeout(() => {
-		connect();
-	}, delay);
+  window.setTimeout(() => {
+    connect();
+  }, delay);
 }
 
 function connect() {
-	websocket = new WebSocket(getWebSocketUrl());
+  websocket = new WebSocket(getWebSocketUrl());
 
-	websocket.onopen = () => {
-		retryDelay = INITIAL_RETRY_DELAY_MS;
-	};
+  websocket.onopen = () => {
+    retryDelay = INITIAL_RETRY_DELAY_MS;
+  };
 
-	websocket.onmessage = (message) => {
-		triggerReload(parseScope(message.data));
-	};
+  websocket.onmessage = (message) => {
+    triggerReload(parseScope(message.data));
+  };
 
-	websocket.onerror = () => {
-		websocket.close();
-	};
+  websocket.onerror = () => {
+    websocket.close();
+  };
 
-	websocket.onclose = () => {
-		scheduleReconnect();
-	};
+  websocket.onclose = () => {
+    scheduleReconnect();
+  };
 }
 
 connect();

package/frontend/assets/js/config-switcher/development-mode.js

@@ -1,49 +1,49 @@
 import ConfigSwitcher from "./index.js";
 
 class DevelopmentModeConfigSwitcher extends ConfigSwitcher {
-	/**
-	 * @param {HTMLFormElement} form
-	 * @memberof DevelopmentModeConfigSwitcher
-	 */
-	constructor(form) {
-		super(form);
+  /**
+   * @param {HTMLFormElement} form
+   * @memberof DevelopmentModeConfigSwitcher
+   */
+  constructor(form) {
+    super(form);
 
-		if (window.frames.iframe) {
-			window.frames.iframe.addEventListener("load", () => {
-				if (this.cookieValue) {
-					this.renderTheme(this.cookieValue);
-				}
-			});
-		}
-	}
+    if (window.frames.iframe) {
+      window.frames.iframe.addEventListener("load", () => {
+        if (this.cookieValue) {
+          this.renderTheme(this.cookieValue);
+        }
+      });
+    }
+  }
 
-	/**
-	 * @param {Event} event
-	 * @param {HTMLInputElement} event.target
-	 */
-	onThemeChange({ target }) {
-		const value = target.checked ? "dev" : "presentation";
+  /**
+   * @param {Event} event
+   * @param {HTMLInputElement} event.target
+   */
+  onThemeChange({ target }) {
+    const value = target.checked ? "dev" : "presentation";
 
-		this.saveTheme(value);
-		this.renderTheme(value);
-	}
+    this.saveTheme(value);
+    this.renderTheme(value);
+  }
 
-	/**
-	 * @param {string} value
-	 */
-	renderSwitcher() {
-		if (this.cookieValue) {
-			this.form.querySelector('[type="checkbox"]').checked =
-				this.cookieValue == "dev";
-		}
-	}
+  /**
+   * @param {string} value
+   */
+  renderSwitcher() {
+    if (this.cookieValue) {
+      this.form.querySelector('[type="checkbox"]').checked =
+        this.cookieValue == "dev";
+    }
+  }
 
-	/**
-	 * @param {string} value
-	 */
-	renderTheme(value) {
-		window.frames.iframe.document.documentElement.dataset.mode = value;
-	}
+  /**
+   * @param {string} value
+   */
+  renderTheme(value) {
+    window.frames.iframe.document.documentElement.dataset.mode = value;
+  }
 }
 
 export default DevelopmentModeConfigSwitcher;