@schalkneethling/miyagi-core 4.0.2

package/frontend/assets/js/_search.js

@@ -0,0 +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;
+	}
+});

package/frontend/assets/js/_socket.js

@@ -0,0 +1,9 @@
+const ws = new WebSocket(`ws://${document.location.host}`);
+
+ws.onmessage = async (message) => {
+	if (message.data === "reloadParent") {
+		parent.window.location.reload();
+	} else {
+		window.location.reload();
+	}
+};

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

@@ -0,0 +1,49 @@
+import ConfigSwitcher from "./index.js";
+
+class DevelopmentModeConfigSwitcher extends ConfigSwitcher {
+	/**
+	 * @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);
+				}
+			});
+		}
+	}
+
+	/**
+	 * @param {Event} event
+	 * @param {HTMLInputElement} event.target
+	 */
+	onThemeChange({ target }) {
+		const value = target.checked ? "dev" : "presentation";
+
+		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
+	 */
+	renderTheme(value) {
+		window.frames.iframe.document.documentElement.dataset.mode = value;
+	}
+}
+
+export default DevelopmentModeConfigSwitcher;

package/frontend/assets/js/config-switcher/index.js

@@ -0,0 +1,63 @@
+/**
+ * @typedef {"auto" | "light" | "dark"} Theme
+ */
+
+class ConfigSwitcher {
+	/**
+	 * @param {HTMLElement} form
+	 */
+	constructor(form) {
+		this.form = form;
+		this.inputs = Array.from(
+			this.form.querySelectorAll('[type="radio"], [type="checkbox"]'),
+		);
+		this.options = this.inputs.map((el) => el.value);
+		this.name = this.inputs[0].name;
+		this.cookieName = `miyagi_${document.title.replaceAll(" ", "-")}_${this.name}`;
+		this.cookieValue = this.#getCookie(this.cookieName);
+
+		this.inputs.forEach((input) => {
+			input.addEventListener("change", this.onThemeChange.bind(this));
+		});
+
+		this.renderSwitcher();
+	}
+
+	/**
+	 * @param {Event} event
+	 * @param {HTMLInputElement} event.target
+	 */
+	onThemeChange({ target }) {
+		const { value } = target;
+
+		this.saveTheme(value);
+		this.renderTheme(value);
+	}
+
+	/**
+	 * @param {string} value
+	 */
+	saveTheme(value) {
+		document.cookie = `${this.cookieName}=${value};`;
+	}
+
+	/**
+	 * @param {Theme} value
+	 */
+	renderSwitcher() {
+		const input = this.form.querySelector(`[value="${this.cookieValue}"]`);
+
+		if (input) {
+			input.checked = true;
+		}
+	}
+
+	#getCookie(name) {
+		return document.cookie.split("; ").reduce((r, v) => {
+			const parts = v.split("=");
+			return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+		}, "");
+	}
+}
+
+export default ConfigSwitcher;

package/frontend/assets/js/config-switcher/text-direction.js

@@ -0,0 +1,30 @@
+import ConfigSwitcher from "./index.js";
+
+class TextDirectionConfigSwitcher extends ConfigSwitcher {
+	/**
+	 * @param {HTMLFormElement} form
+	 * @memberof TextDirectionConfigSwitcher
+	 */
+	constructor(form) {
+		super(form);
+
+		if (window.frames.iframe) {
+			window.frames.iframe.addEventListener("load", () => {
+				if (this.cookieValue) {
+					this.renderTheme(this.cookieValue);
+				}
+			});
+		}
+	}
+
+	/**
+	 * @param {string} value
+	 */
+	renderTheme(value) {
+		Array.from(window.frames.iframe.frames).forEach((frame) => {
+			frame.document.documentElement.setAttribute("dir", value);
+		});
+	}
+}
+
+export default TextDirectionConfigSwitcher;

package/frontend/assets/js/config-switcher/theme.js

@@ -0,0 +1,87 @@
+import ConfigSwitcher from "./index.js";
+
+class ThemeConfigSwitcher extends ConfigSwitcher {
+	/**
+	 * @param {HTMLFormElement} form
+	 * @memberof ThemeConfigSwitcher
+	 */
+	constructor(form) {
+		super(form);
+
+		this.logoWrapper = document.querySelector(".Title-logo");
+		if (this.logoWrapper) {
+			this.logoImage = this.logoWrapper.querySelector("img");
+		}
+
+		if (window.frames.iframe) {
+			if (this.cookieValue) {
+				this.render(this.cookieValue);
+			}
+
+			window.frames.iframe.addEventListener("load", () => {
+				if (this.cookieValue) {
+					this.renderTheme(this.cookieValue);
+				}
+			});
+		}
+	}
+
+	onThemeChange({ target }) {
+		super.onThemeChange({ target });
+
+		this.render(target.value);
+	}
+
+	/**
+	 * @param {string} value
+	 */
+	renderTheme(value) {
+		this.options.forEach((option) => {
+			if (window.frames.iframe.document.documentElement) {
+				window.frames.iframe.document.documentElement.classList.remove(
+					`theme-${option}`,
+				);
+			}
+
+			Array.from(window.frames.iframe.frames).forEach((frame) => {
+				frame.document.documentElement.classList.remove(`theme-${option}`);
+			});
+		});
+
+		window.frames.iframe.document.documentElement.classList.add(
+			`theme-${value}`,
+		);
+		Array.from(window.frames.iframe.frames).forEach((frame) => {
+			frame.document.documentElement.classList.add(`theme-${value}`);
+		});
+	}
+
+	render(value) {
+		this.options.forEach((option) => {
+			document.documentElement.classList.remove(`${this.name}-${option}`);
+		});
+
+		document.documentElement.classList.add(`${this.name}-${value}`);
+
+		if (this.logoWrapper) {
+			if (value === "auto") {
+				this.options.forEach((option) => {
+					if (option === "auto") return;
+
+					const source = document.createElement("source");
+					source.srcset = this.logoImage.dataset[option];
+					source.media = `(prefers-color-scheme: ${option})`;
+
+					this.logoWrapper.prepend(source);
+				});
+			} else {
+				this.logoWrapper
+					.querySelectorAll("source")
+					.forEach((source) => source.remove());
+				this.logoImage.src = this.logoImage.dataset[value];
+			}
+		}
+	}
+}
+
+export default ThemeConfigSwitcher;

package/frontend/assets/js/iframe.build.js

@@ -0,0 +1,43 @@
+import "./_accordion-tabs.js";
+import "./_prism.js";
+import "./_iframe-links.js";
+import {
+	goto as gotoIsTriggered,
+	search as searchIsTriggered,
+} from "./_is-triggered.js";
+
+if (
+	window.location.pathname.startsWith("/component-") &&
+	window.location.href.endsWith("-embedded.html") &&
+	window.self === window.top
+) {
+	window.location = new URL(window.location).replace(
+		/-embedded\.html$/,
+		".html",
+	);
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+	const styleguide = document.querySelector(".Styleguide");
+
+	if (styleguide) {
+		import("./styleguide/index.js")
+			.then((Styleguide) => new Styleguide.default(styleguide))
+			.catch((err) => console.error(err));
+	}
+
+	if (document.querySelector(".js-openMockData")) {
+		import("./_mock-data.js");
+	}
+});
+
+document.addEventListener("keyup", (e) => {
+	const { path, originalTarget, target, key } = e;
+	const el = path ? path[0] : originalTarget || target;
+
+	if (searchIsTriggered(el, key)) {
+		parent.window.dispatchEvent(new CustomEvent("searchTriggered"));
+	} else if (gotoIsTriggered(el, key)) {
+		parent.window.dispatchEvent(new CustomEvent("gotoTriggered"));
+	}
+});

package/frontend/assets/js/iframe.js

@@ -0,0 +1,52 @@
+import "./_accordion-tabs.js";
+import "./_socket.js";
+import {
+	goto as gotoIsTriggered,
+	search as searchIsTriggered,
+} from "./_is-triggered.js";
+
+if (
+	window.location.pathname.startsWith("/component?") &&
+	window.location.href.indexOf("&embedded=true") >= 0 &&
+	window.self === window.top
+) {
+	window.location = new URL(window.location).replace("&embedded=true", "");
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+	const links = Array.from(document.querySelectorAll(".Component-file"));
+	const styleguide = document.querySelector(".Styleguide");
+
+	if (links.length > 0) {
+		import("./_iframe-links.js")
+			.then((module) => {
+				module.default(links);
+			})
+			.catch((err) => console.error(err));
+	}
+
+	if (document.querySelector(".Code")) {
+		import("./_prism.js");
+	}
+
+	if (styleguide) {
+		import("./styleguide/index.js")
+			.then((Styleguide) => new Styleguide.default(styleguide))
+			.catch((err) => console.error(err));
+	}
+
+	if (document.querySelector(".js-openMockData")) {
+		import("./_mock-data.js");
+	}
+});
+
+document.addEventListener("keyup", (e) => {
+	const { path, originalTarget, target, key } = e;
+	const el = path ? path[0] : originalTarget || target;
+
+	if (searchIsTriggered(el, key)) {
+		parent.window.dispatchEvent(new CustomEvent("searchTriggered"));
+	} else if (gotoIsTriggered(el, key)) {
+		parent.window.dispatchEvent(new CustomEvent("gotoTriggered"));
+	}
+});