@miyagi/core/dist/js/main.build.js

miyagi is a component development tool for JavaScript template engines.

function e(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}document.addEventListener("DOMContentLoaded",(()=>{const t=document.querySelector(".GoTo");let n=!1;if(t){const a=t.dataset.urlPattern,i=t.querySelector(".GoTo-input"),o=t.querySelector("#goto-list");if(i&&o){const r=Array.from(o.querySelectorAll("option")).map((e=>e.value));i.addEventListener("input",(({target:e})=>{const t=e.value;r.includes(t)&&(document.location.href=a.replace("{{component}}",t))})),window.addEventListener("keyup",(a=>{const{path:o,originalTarget:r,target:l,key:c}=a;if(c){const a=o?o[0]:r||l,m=c.toLowerCase();((t,n)=>!e(t.tagName)&&"g"===n)(a,m)?s(t,i):n&&"escape"===m&&(d=i,t.classList.add("u-hiddenVisually"),d.value="",d.blur(),n=!1)}var d})),window.addEventListener("gotoTriggered",(()=>s(t,i)))}}function s(e,t){e.classList.remove("u-hiddenVisually"),t.focus(),n=!0}})),document.addEventListener("DOMContentLoaded",(()=>{const t=document.querySelector(".Menu-searchInput"),n=document.querySelector(".Menu-searchLabel"),s=document.querySelector(".Menu-searchClear"),a=Array.from(document.querySelectorAll(".Menu-component")).map((e=>({node:e,listItem:e.closest(".Menu-listItem"),label:e.textContent,lowercaseLabel:e.textContent.toLowerCase(),matchesQuery:!1,toggle:e.previousElementSibling||null,parentToggles:o(e),initiallyOpened:!!e.previousElementSibling&&"true"===e.previousElementSibling.getAttribute("aria-expanded")})));function i(){n.classList.remove("u-hiddenVisually"),s.hidden=!0,a.forEach((e=>{e.matchesQuery&&(e.node.textContent=e.label),e.matchesQuery=!1,e.toggle&&e.toggle.setAttribute("aria-expanded",e.initiallyOpened?"true":"false")})),document.querySelectorAll(".is-match, .is-no-match, .has-match, .has-no-match").forEach((e=>e.classList.remove("is-match","is-no-match","has-match","has-no-match")))}function o(e){const t=[];let n=e;for(;n.closest(".Menu-listItem").parentNode.closest(".Menu-listItem");){const e=n.closest(".Menu-listItem").parentNode.closest(".Menu-listItem").querySelector(".Menu-toggle");e&&t.push(e),n=n.closest(".Menu-listItem").parentNode.closest(".Menu-listItem")}return t}t&&(s&&s.addEventListener("click",(function(){t.value="",i()})),t.addEventListener("input",(function({target:e}){const t=e.value.toLowerCase();t.length>0?(o=t,n.classList.add("u-hiddenVisually"),s.hidden=!1,a.forEach((e=>{e.toggle&&e.toggle.setAttribute("aria-expanded","false"),e.parentToggles.forEach((e=>{e.parentNode.classList.remove("has-match")}))})),a.forEach((e=>{e.matchesQuery=e.lowercaseLabel.includes(o),e.listItem.classList.toggle("is-match",e.matchesQuery),e.listItem.classList.toggle("is-no-match",!e.matchesQuery),e.matchesQuery?(e.node.innerHTML=e.label.replace(new RegExp(o,"g"),`<mark>${o}</mark>`),e.parentToggles.forEach((e=>{e.parentNode.classList.add("has-match"),e.parentNode.classList.remove("has-no-match"),e.setAttribute("aria-expanded","true")}))):e.node.textContent=e.label})),a.forEach((e=>{e.listItem.classList.contains("has-match")||e.listItem.classList.add("has-no-match")}))):i();var o})),t.addEventListener("keyup",(function({target:e,key:t}){"escape"===t.toLowerCase()&&(e.value="",e.blur(),i())})),window.addEventListener("keyup",(n=>{const{path:s,originalTarget:a,target:i,key:o}=n;((t,n)=>!e(t.tagName)&&"f"===n)(s?s[0]:a||i,o)&&t.focus()})),window.addEventListener("searchTriggered",(()=>{t.focus()})))}));class t{constructor(e){this.form=e,this.inputs=Array.from(this.form.querySelectorAll('[type="radio"]')),this.options=this.inputs.map((e=>e.value)),this.name=this.inputs[0].name,this.normalizedTitle=document.title,this.inputs.forEach((e=>{e.addEventListener("change",this.onThemeChange.bind(this))}))}onThemeChange({target:e}){const{value:t}=e;this.saveTheme(t),this.renderTheme(t)}saveTheme(e){document.cookie=`miyagi_${document.title}_${this.name}=${e};`}renderTheme(e){this.form.querySelector(`[value="${e}"]`).checked=!0,this.iframe=window.frames.iframe.document.documentElement,this.iframes=Array.from(window.frames.iframe.frames)}}class n extends t{constructor(e){super(e),this.logoWrapper=document.querySelector(".Nav-projectLogo"),this.logoWrapper&&(this.logoImage=this.logoWrapper.querySelector("img"))}renderTheme(e){super.renderTheme(e),this.options.forEach((e=>{document.documentElement.classList.remove(`${this.name}-${e}`),this.iframe&&this.iframe.classList.remove(`MiyagiTheme--${e}`),this.iframes.forEach((t=>{t.document.documentElement.classList.remove(`MiyagiTheme--${e}`)}))})),document.documentElement.classList.add(`${this.name}-${e}`),this.iframe.classList.add(`MiyagiTheme--${e}`),this.iframes.forEach((t=>{t.document.documentElement.classList.add(`MiyagiTheme--${e}`)})),this.logoWrapper&&("auto"===e?this.options.forEach((e=>{if("auto"===e)return;const t=document.createElement("source");t.srcset=this.logoImage.dataset[e],t.media=`(prefers-color-scheme: ${e})`,this.logoWrapper.prepend(t)})):(this.logoWrapper.querySelectorAll("source").forEach((e=>e.remove())),this.logoImage.src=this.logoImage.dataset[e]))}}class s extends t{constructor(e){super(e)}renderTheme(e){super.renderTheme(e),this.iframe.querySelectorAll(".MiyagiComponent-html").forEach((t=>t.setAttribute("dir",e))),this.iframes.forEach((t=>{t.document.documentElement.setAttribute("dir",e)}))}}class a{constructor(){this.classes={content:"Content",iframe:"Frame",frameWrapper:"FrameWrapper",toggleMenu:"Nav-toggleMobileMenu",menu:{directory:"Menu-component",link:"Menu-link",list:"Menu-list",listContainer:"Menu-listContainer",listItem:"Menu-listItem",toggleComponent:"Menu-toggle"}},this.elements={content:document.querySelector(`.${this.classes.content}`),frameWrapper:document.querySelector(`.${this.classes.frameWrapper}`),iframe:document.querySelector(`.${this.classes.iframe}`),toggleMenu:document.querySelector(`.${this.classes.toggleMenu}`),links:Array.from(document.querySelectorAll(`.${this.classes.menu.link}`)),directories:Array.from(document.querySelectorAll(`.${this.classes.menu.directory}:not(${this.classes.menu.link})`)),componentToggles:Array.from(document.querySelectorAll(`.${this.classes.menu.toggleComponent}`))},this.addToggleMenuClickListener(),this.addDirectoriesClickListener(),this.addComponentTogglesClickListener(),this.addLinksClickListener(),this.addPopStateLisener(),this.addPageChangedListener(),new n(document.querySelector(".js-ThemeSwitcher")),new s(document.querySelector(".js-TextDirectionSwitcher"))}static toggleExpandedAttribute(e){e.setAttribute("aria-expanded","true"!==e.getAttribute("aria-expanded"))}updateIframe(e){this.elements.iframe.remove(),this.elements.iframe.src=e,this.elements.frameWrapper.appendChild(this.elements.iframe)}convertPathToMainPath(e){return e.replace(this.paths.embedded,this.paths.container).replace(this.embeddedParam,"")}closeOtherOpenedComponents(e){this.elements.componentToggles.forEach((t=>{"true"===t.getAttribute("aria-expanded")&&(t.closest(`.${this.classes.menu.listItem}`).contains(e)||t.setAttribute("aria-expanded",!1))}))}openParentComponent(e){if(e){const t=this.elements.componentToggles.find((t=>t.getAttribute("aria-controls")===e.id));t&&(t.setAttribute("aria-expanded",!0),this.openParentComponent(t.closest(`.${this.classes.menu.listContainer}`)))}}setActiveStateInNav(e){var t=this.elements.links.find((t=>t.getAttribute("href").includes(e.replace(this.paths.container,this.paths.embedded))));if(t){const e=t.previousElementSibling;var n=e&&e.classList.contains(this.classes.menu.toggleComponent)?e:null}const s=this.elements.links.find((e=>e.getAttribute("aria-current")));return s&&s.removeAttribute("aria-current"),t&&t.setAttribute("aria-current","page"),n&&n.setAttribute("aria-expanded",!0),t}openParentComponents(e){this.openParentComponent(e.closest(`.${this.classes.menu.listContainer}`))}closeToggleMenu(){window.innerWidth<=512&&this.elements.toggleMenu.setAttribute("aria-expanded",!1)}updateUrl(e){e===this.indexPath?history.pushState(null,e,document.querySelector("base").href):history.pushState(null,e,this.convertPathToMainPath(e))}onPageChanged({detail:e}){const t=this.setActiveStateInNav(e);t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t)),history.pushState(null,e,this.convertPathToMainPath(e))}onToggleMenuClick(e){a.toggleExpandedAttribute(e)}onDirectoryClick(e){const t=e.previousElementSibling;t&&t.classList.contains(this.classes.menu.toggleComponent)&&("true"===t.getAttribute("aria-expanded")?t.setAttribute("aria-expanded",!1):t.setAttribute("aria-expanded",!0))}onComponentToggleClick(e){a.toggleExpandedAttribute(e)}onLinkClick(e){const t=e.closest("a").getAttribute("href");this.setActiveStateInNav(t),this.updateIframe(t),this.closeToggleMenu(),this.updateUrl(t)}onPopState(e){const t=this.setActiveStateInNav(e);this.updateIframe(e),t&&(this.closeOtherOpenedComponents(t),this.openParentComponents(t))}addToggleMenuClickListener(){this.elements.toggleMenu&&(this.elements.toggleMenu.addEventListener("click",(e=>{e.preventDefault(),this.onToggleMenuClick(e.target)})),this.elements.toggleMenu.addEventListener("keyup",(e=>{23===e.keyCode&&(e.preventDefault(),this.onToggleMenuClick(e.target))})))}addDirectoriesClickListener(){this.elements.directories.forEach((e=>{e.addEventListener("click",(e=>{e.preventDefault(),this.onDirectoryClick(e.target)}))}))}addComponentTogglesClickListener(){this.elements.componentToggles.forEach((e=>{e.addEventListener("click",(e=>{e.preventDefault(),this.onComponentToggleClick(e.target)})),e.addEventListener("keyup",(e=>{32===e.keyCode&&(e.preventDefault(),this.onComponentToggleClick(e.target))}))}))}addLinksClickListener(){this.elements.links.forEach((e=>{e.addEventListener("click",(e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),this.onLinkClick(e.target))})),e.addEventListener("keyup",(e=>{32===e.keyCode&&(e.preventDefault(),this.onLinkClick(e.target))}))}))}addPopStateLisener(){window.addEventListener("popstate",this.onPopState.bind(this))}addPageChangedListener(){window.addEventListener("pageChanged",this.onPageChanged.bind(this))}}class i extends a{constructor(){super(),this.paths={embedded:"component-",container:"show-"},this.indexPath="component-all-embedded.html",this.embeddedParam="-embedded"}onPopState(){let e;e="/"!==document.location.pathname?document.location.pathname.replace(this.paths.container,this.paths.embedded).replace(".html",`${this.embeddedParam}.html`).slice(1):`${this.paths.embedded}all-embedded.html`,super.onPopState(e)}}document.addEventListener("DOMContentLoaded",(()=>new i));