@n8d/htwoo-core/dist/js/amd/htwoo.min.js

hTWOo is a Fluent Design Framework purely in HTML and CSS

define((function(){"use strict";class e{#e;#t;#o;#l;#i={closer:null,backdropCloser:!0,escCloser:!0};static options={closer:null,backdropCloser:!0,escCloser:!0};static dialogType={DIALOG:"dialog",MODAL:"modal"};#s=()=>{if(console.debug("-> Fired showDialog -- ",this.#t),this.#o===e.dialogType.DIALOG)this.#t.show();else{if(this.#o!==e.dialogType.MODAL)throw new Error(`Invalid dialog type specified for ${this.#t}`);this.#t.showModal(),this.#t.addEventListener("click",this.#a)}this.#l&&this.#l.addEventListener("click",this.#r);this.#t.querySelector("[autofocus]")&&(console.debug("No Autofocus"),dialogElement.focus()),this.#t.addEventListener("keydown",this.#n)};#a=e=>{var t=this.#t.getBoundingClientRect();t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||e.target!==this.#t||this.#t.close()};#n=e=>{27===e.keyCode&&this.#t.close()};#r=e=>{console.debug("closing dialog"),this.#t.close()};constructor(t,o,l=e.dialogType.DIALOG,i=e.options){console.debug("Register dialog",l);const s=document.querySelector(t),a=document.querySelector(o);if(!s)throw new Error(`Launcher '${t}' Element cannot be found`);if(this.#e=s,!a)throw new Error(`Dialog '${o}' Element not found`);if(this.#t=a,this.#e.addEventListener("click",this.#s),this.#o=l,void 0===i.closer?this.#i.closer=null:i.closer,void 0===i.backdropCloser?this.#i.backdropCloser=!0:i.backdropCloser,void 0===i.escCloser?this.#i.escCloser=!0:i.escCloser,this.#i=i,null!==i.closer){const e=a.querySelector(i.closer);this.#i.closer=i.closer,e&&(this.#l=e)}console.debug("AFTER LAUNCH ::: ",this.#o,this.#e,this.#t,this.#l)}}const t=e=>{const t=e;console.log("csSelector",t);const o=t.querySelector("input"),l=t.querySelector("ul"),i=l.querySelectorAll("li");t.querySelectorAll("svg");const s=document.querySelector("#custom-select-status"),a=Array.from(i);let r="initial";function n(e){"Open"===e?(l.classList.remove("hidden-all"),t.setAttribute("aria-expanded","true")):(l.classList.add("hidden-all"),t.setAttribute("aria-expanded","false"))}function c(){return document.activeElement}function d(e,t){const l=a.filter((function(e){if(""===e.style.display)return!0}));if(0!==l.length)switch("input"===t&&o.focus(),e){case o:"forward"===t?l[0].focus():"back"===t&&l[l.length-1].focus();break;case i[0]:"forward"===t?l[1].focus():"back"===t&&o.focus();break;case i[i.length-1]:"forward"===t?l[0].focus():"back"===t&&l[l.length-2].focus();break;default:const e=c(),s=l.indexOf(e);if("forward"===t){l[s+1].focus()}else if("back"===t&&s>0){l[s-1].focus()}else o.focus()}}function u(){const e=o.value,t=a.filter((function(t){if(t.innerText.toUpperCase().startsWith(e.toUpperCase()))return!0}));var l;i.forEach((e=>e.style.display="none")),t.forEach((function(e){e.style.display=""})),f("filtered"),l=t.length,s.textContent=l+" options available."}function h(e){const t=e.dataset.value;o.value=t,d(document.activeElement,"input")}function f(e){switch(e){case"initial":r="initial";break;case"opened":r="opened";break;case"filtered":r="filtered";break;case"closed":r="closed"}}t.setAttribute("role","combobox"),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("aria-owns","custom-select-list"),o.setAttribute("aria-autocomplete","both"),o.setAttribute("aria-controls","custom-select-list"),l.setAttribute("role","listbox"),i.forEach((e=>{e.setAttribute("role","option"),e.setAttribute("tabindex","-1")})),s.textContent=i.length+" options available. Arrow down to browse or start typing to filter.",t.addEventListener("click",(function(e){const t=c();switch(r){case"initial":n("Open"),f("opened");break;case"opened":t===o?(n("Shut"),f("initial")):"LI"===t.tagName&&(h(t),n("Shut"),f("closed"));break;case"filtered":"LI"===t.tagName&&(h(t),n("Shut"),f("closed"));break;case"closed":n("Open"),f("filtered")}})),t.addEventListener("keyup",(function(e){!function(e){const t=c();switch(e){case"Enter":"initial"===r?(n("Open"),f("opened")):"opened"===r&&"LI"===t.tagName?(h(t),n("Shut"),f("closed")):"opened"===r&&t===o?(n("Shut"),f("closed")):"filtered"===r&&"LI"===t.tagName?(h(t),n("Shut"),f("closed")):"filtered"===r&&t===o?(n("Open"),f("opened")):(n("Open"),f("filtered"));break;case"Escape":"opened"!==r&&"filtered"!==r||(n("Shut"),f("initial"));break;case"ArrowDown":"initial"===r||"closed"===r?(n("Open"),d(o,"forward"),f("opened")):(n("Open"),d(t,"forward"));break;case"ArrowUp":"initial"===r||"closed"===r?(n("Open"),d(o,"back"),f("opened")):d(t,"back");break;default:"initial"===r?(n("Open"),u(),f("filtered")):"opened"===r||"closed"===r?(u(),f("filtered")):u()}}(e.key)})),document.addEventListener("click",(function(e){e.target.closest(".hoo-select")||(n("Shut"),f("initial"))}))},o=e=>{const t=e.target.closest("tr"),o=e.target.closest("table"),l=t.dataset.sectionheader;let i=null;i="all"===l?"tr[data-section]":"tr[data-section="+l+"]";const s=o.querySelectorAll(i);for(let e=0;e<s.length;e++){const o=s[e];o.classList.contains("is-hidden")?(o.classList.remove("is-hidden"),o.classList.add("is-visible"),o.setAttribute("aria-hidden","false"),t.setAttribute("aria-expanded","true")):(o.classList.add("is-hidden"),o.classList.remove("is-visible"),o.setAttribute("aria-hidden","true"),t.setAttribute("aria-expanded","false"))}if("all"===l){let e=document.querySelectorAll("tbody tr.collapsable");if("true"===t.getAttribute("aria-expanded"))for(let t=0;t<e.length;t++){const o=e[t];o.setAttribute("aria-hidden","false"),o.setAttribute("aria-expanded","true")}else for(let t=0;t<e.length;t++){const o=e[t];o.setAttribute("aria-hidden","true"),o.setAttribute("aria-expanded","false")}}},l="left",i="right",s="top",a="bottom",r=(e,t,o)=>{const r=e.querySelectorAll(t);for(let e=0;e<r.length;e++){const t=r[e];o===l&&(t.style[o]=t.offsetLeft+"px"),o===i&&(t.style[o]=t.offsetRight+"px"),o===s&&(t.style[o]=t.offsetTop+"px"),o===a&&(t.style[o]=t.offsetBottom+"px")}},n=()=>{document.querySelectorAll(".hoo-table.is-collapsable").forEach((e=>{e.querySelectorAll(".collapsable").forEach((e=>{e.addEventListener("click",o)}))})),(()=>{const e=document.querySelectorAll("table.sticky");for(let t=0;t<e.length;t++){const o=e[t];r(o,"tr td.is-sticky.left",l),r(o,"tr th.is-sticky.left",l)}})()},c=".hoo-pivotbar",d=".hoo-button-pivot",u=".hoo-navitem-text",h="is-active",f=e=>{e.preventDefault(),console.log(e.target);let t=e.target.classList.contains(d.substr(1))?e.target:e.target.closest(d);t||(t=e.target.classList.contains(u.substr(1))?e.target:e.target.closest(u));e.target.closest(c).querySelectorAll(d).forEach((e=>{e.classList.remove(h)})),t.classList.add(h)},p=e=>{let t=e.target.closest(".hoo-navitem");"false"===t.getAttribute("aria-expanded")?t.setAttribute("aria-expanded",!0):t.setAttribute("aria-expanded",!1)},g=[],b=(e,t)=>{e.target.parentElement.querySelectorAll(".hoo-overflow > *");((e,t,o,l)=>{let i=g[l].filter((t=>t.overallWidth>e-40)),s=g[l].filter((t=>t.overallWidth<e-40)),a=o.querySelector(".hoo-buttonicon-overflow .hoo-buttonflyout");if(a&&a.children.length<i.length)for(let e=0;e<i.length;e++)if(null!==o.querySelector("[data-ref="+i[e].ref+"]")){let t=document.createElement("li");t.appendChild(o.querySelector("[data-ref="+i[e].ref+"]")),a.appendChild(t)}var r;if(0!==a.children.length?(r=a.closest(".hoo-buttonicon-overflow"))&&r.classList.add("is-active"):(r=a.closest(".hoo-buttonicon-overflow"))&&r.classList.remove("is-active"),a&&a.children.length>i.length)for(let e=0;e<s.length;e++)if(null!==a.querySelector("[data-ref="+s[e].ref+"]")){let t=a.querySelector("[data-ref="+s[e].ref+"]");o.appendChild(t)}for(let e=0;e<a.children.length;e++)0===a.children[e].children.length&&a.children[e].remove()})(e.target.parentElement.clientWidth,0,e.target,t)},m=(e,t)=>{e.forEach(((e,t)=>{y(e.target.children,t),b(e,t)}))},y=(e,t)=>{let o=0;if(g.length<=t){g[t]=[];for(let l=0;l<e.length;l++)if(o+=e[l].clientWidth,!e[l].classList.contains("hoo-buttonicon-overflow")){let i={chlld:e[l],ref:"ref-"+t+"-"+l,width:e[l].clientWidth,overallWidth:o};e[l].dataset.ref=i.ref,g[t].push(i)}}},v=(e,t)=>{document.querySelectorAll(e).forEach((e=>{e.addEventListener("click",(e=>{t(e)}))}))},A=(e,t)=>{let o=e.getAttribute("aria-pressed");void 0===o?e.setAttribute("aria-pressed",!0):e.setAttribute("aria-pressed",!o),t.classList.toggle("show-flyout")},k=e=>{let t=e.target,o=t.parentElement;A(t,o)},E=e=>{console.log("\nEVENT: splitButtonClick");let t=e.target,o=t.parentElement;A(t,o)},w=e=>{let t=e.target,o=t.parentElement.dataset.animation;t.classList.add(o);let l=window.getComputedStyle(t),i=1e3*parseFloat(l.getPropertyValue("animation-duration"));console.log(l,l.getPropertyValue("animation-duration"),i),setTimeout((()=>{t.remove()}),i)},L=e=>{let t=e.target,o=t.parentElement.dataset.animation;t.classList.add(o);let l=document.importNode(t,!0);l.classList.add(o);let i=window.getComputedStyle(l),s=1e3*parseFloat(i.getPropertyValue("animation-duration"));e.target.parentElement.appendChild(l),l.addEventListener("click",L),console.log(i,i.getPropertyValue("animation-duration"),s),setTimeout((()=>{l.classList.remove("anim-add-slide")}),s)},S=(e,t)=>{document.querySelectorAll(e+" > .sg-anim-block").forEach((e=>{e.addEventListener("click",t)}))};window.onload=((()=>{try{new e("#btn-dialog","#myDialog",e.dialogType.DIALOG,{closer:"#closer-dlg"}),new e("#btn-modal-dialog","#myDialog-1",e.dialogType.MODAL,{closer:"#closer-mdl"})}catch(e){}})(),v(".hoo-buttonsplit > .hoo-buttonsplit-carret",E),v(".hoo-buttonsplit-primary > .hoo-buttonsplit-carret",E),v("button.hoo-buttonicon-overflow",k),v("button.hoo-buttoncmd",k),v("button.hoo-buttoncmdbar",k),v("button.hoo-buttonicon-flyout",k),v("button.hoo-buttoncontext",k),S(".anim-deleteNslide",w),S(".anim-addNslide",L),(()=>{let e=document.querySelectorAll(".hoo-select");e&&e.forEach(((e,o)=>{t(e)}))})(),n(),document.querySelectorAll(`${c} ${d}`).forEach((e=>{e.dataset.ref=e.textContent.trim(),e.addEventListener("click",f)})),document.querySelectorAll(".hoo-navitem[aria-expanded]").forEach((e=>{e.addEventListener("click",p)})),(()=>{let e=document.querySelectorAll(".hoo-overflow");if(0!==e.length){const t=new ResizeObserver(m);e.forEach((e=>{t.observe(e)}))}})(),void setTimeout((()=>{let e=document.querySelectorAll(".tmp-hidden");console.log(e),e.forEach((t=>{t.addEventListener("focus",(t=>{t.target.classList.remove(".tmp-hidden"),console.log(e)}))}))}),1e3))}));