@schalkneethling/miyagi-core 4.4.1 → 4.4.3

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

@@ -3,61 +3,61 @@
  */
 
 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;
-		}, "");
-	}
+  /**
+   * @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

@@ -1,30 +1,30 @@
 import ConfigSwitcher from "./index.js";
 
 class TextDirectionConfigSwitcher extends ConfigSwitcher {
-	/**
-	 * @param {HTMLFormElement} form
-	 * @memberof TextDirectionConfigSwitcher
-	 */
-	constructor(form) {
-		super(form);
+  /**
+   * @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);
-				}
-			});
-		}
-	}
+    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);
-		});
-	}
+  /**
+   * @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

@@ -1,87 +1,87 @@
 import ConfigSwitcher from "./index.js";
 
 class ThemeConfigSwitcher extends ConfigSwitcher {
-	/**
-	 * @param {HTMLFormElement} form
-	 * @memberof ThemeConfigSwitcher
-	 */
-	constructor(form) {
-		super(form);
+  /**
+   * @param {HTMLFormElement} form
+   * @memberof ThemeConfigSwitcher
+   */
+  constructor(form) {
+    super(form);
 
-		this.logoWrapper = document.querySelector(".Title-logo");
-		if (this.logoWrapper) {
-			this.logoImage = this.logoWrapper.querySelector("img");
-		}
+    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);
-			}
+    if (window.frames.iframe) {
+      if (this.cookieValue) {
+        this.render(this.cookieValue);
+      }
 
-			window.frames.iframe.addEventListener("load", () => {
-				if (this.cookieValue) {
-					this.renderTheme(this.cookieValue);
-				}
-			});
-		}
-	}
+      window.frames.iframe.addEventListener("load", () => {
+        if (this.cookieValue) {
+          this.renderTheme(this.cookieValue);
+        }
+      });
+    }
+  }
 
-	onThemeChange({ target }) {
-		super.onThemeChange({ target });
+  onThemeChange({ target }) {
+    super.onThemeChange({ target });
 
-		this.render(target.value);
-	}
+    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}`,
-				);
-			}
+  /**
+   * @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}`);
-			});
-		});
+      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}`);
-		});
-	}
+    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}`);
-		});
+  render(value) {
+    this.options.forEach((option) => {
+      document.documentElement.classList.remove(`${this.name}-${option}`);
+    });
 
-		document.documentElement.classList.add(`${this.name}-${value}`);
+    document.documentElement.classList.add(`${this.name}-${value}`);
 
-		if (this.logoWrapper) {
-			if (value === "auto") {
-				this.options.forEach((option) => {
-					if (option === "auto") return;
+    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})`;
+          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];
-			}
-		}
-	}
+          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

@@ -2,42 +2,42 @@ import "./_accordion-tabs.js";
 import "./_prism.js";
 import "./_iframe-links.js";
 import {
-	goto as gotoIsTriggered,
-	search as searchIsTriggered,
+  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.pathname.startsWith("/component-") &&
+  window.location.href.endsWith("-embedded.html") &&
+  window.self === window.top
 ) {
-	window.location = new URL(window.location).replace(
-		/-embedded\.html$/,
-		".html",
-	);
+  window.location = new URL(window.location).replace(
+    /-embedded\.html$/,
+    ".html",
+  );
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-	const styleguide = document.querySelector(".Styleguide");
+  const styleguide = document.querySelector(".Styleguide");
 
-	if (styleguide) {
-		import("./styleguide/index.js")
-			.then((Styleguide) => new Styleguide.default(styleguide))
-			.catch((err) => console.error(err));
-	}
+  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");
-	}
+  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;
+  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"));
-	}
+  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

@@ -1,52 +1,52 @@
 import "./_accordion-tabs.js";
 import "./_socket.js";
 import {
-	goto as gotoIsTriggered,
-	search as searchIsTriggered,
+  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.pathname.startsWith("/component?") &&
+  window.location.href.indexOf("&embedded=true") >= 0 &&
+  window.self === window.top
 ) {
-	window.location = new URL(window.location).replace("&embedded=true", "");
+  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");
-	}
+  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"));
-	}
+  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"));
+  }
 });