@n8d/htwoo-core

Version:
hTWOo is a Fluent Design Framework purely in HTML and CSS
lab.n8d.studio/htwoo/
2 lines (1 loc) • 15.5 kB
JavaScript
"use strict";var e,t,o,i,r,l,s,n,a,c,d=function(e,t,o,i,r){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?r.call(e,o):r?r.value=o:t.set(e,o),o},u=function(e,t,o,i){if("a"===o&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?i:"a"===o?i.call(e):i?i.value:t.get(e)};exports.DialogType=void 0,(c=exports.DialogType||(exports.DialogType={})).DIALOG="dialog",c.MODAL="modal";class f{constructor(c,h,p=exports.DialogType.DIALOG,b=f.options){e.set(this,void 0),t.set(this,void 0),o.set(this,void 0),i.set(this,void 0),r.set(this,{closer:null,backdropCloser:!0,escCloser:!0}),l.set(this,(()=>{if(console.debug("-> Fired showDialog -- ",u(this,t,"f")),u(this,o,"f")===exports.DialogType.DIALOG)u(this,t,"f").show();else{if(u(this,o,"f")!==exports.DialogType.MODAL)throw new Error(`Invalid dialog type specified for ${u(this,t,"f")}`);u(this,t,"f").showModal(),u(this,t,"f").addEventListener("click",u(this,s,"f"))}u(this,i,"f")&&u(this,i,"f").addEventListener("click",u(this,a,"f"));u(this,t,"f").querySelector("[autofocus]")&&(console.debug("No Autofocus"),u(this,t,"f").focus()),u(this,t,"f").addEventListener("keydown",u(this,n,"f"))})),s.set(this,(e=>{const o=u(this,t,"f").getBoundingClientRect();o.top<=e.clientY&&e.clientY<=o.top+o.height&&o.left<=e.clientX&&e.clientX<=o.left+o.width||e.target!==u(this,t,"f")||u(this,t,"f").close()})),n.set(this,(e=>{27===e.keyCode&&u(this,t,"f").close()})),a.set(this,(e=>{console.debug("closing dialog"),u(this,t,"f").close()})),console.debug("Register dialog",p);const g=document.querySelector(c),m=document.querySelector(h);if(!g)throw new Error(`Launcher '${c}' Element cannot be found`);if(d(this,e,g,"f"),!m)throw new Error(`Dialog '${h}' Element not found`);if(d(this,t,m,"f"),u(this,e,"f").addEventListener("click",u(this,l,"f")),d(this,o,p,"f"),d(this,r,{closer:void 0===b.closer?null:b.closer,backdropCloser:void 0===b.backdropCloser||b.backdropCloser,escCloser:void 0===b.escCloser||b.escCloser},"f"),null!==b.closer){const e=m.querySelector(b.closer);u(this,r,"f").closer=b.closer,e&&d(this,i,e,"f")}console.debug("AFTER LAUNCH ::: ",u(this,o,"f"),u(this,e,"f"),u(this,t,"f"),u(this,i,"f"))}}e=new WeakMap,t=new WeakMap,o=new WeakMap,i=new WeakMap,r=new WeakMap,l=new WeakMap,s=new WeakMap,n=new WeakMap,a=new WeakMap,f.options={closer:null,backdropCloser:!0,escCloser:!0},f.dialogType=exports.DialogType;const h=e=>{console.debug("ariaSelect",e);const t=e;console.log("csSelector",t);const o=t.querySelector("input");if(!o)return void console.error("Input element not found within select component");const i=t.querySelector("ul");if(!i)return void console.error("List element not found within select component");const r=i.querySelectorAll("li.hoo-option");r&&0!==r.length||console.warn("No options found within select component"),t.querySelectorAll("svg");const l=document.querySelector("#custom-select-status");l||console.warn("Status element #custom-select-status not found");const s=Array.from(r);let n="initial";function a(e){"Open"===e?(i.classList.remove("hidden-all"),t.setAttribute("aria-expanded","true")):(i.classList.add("hidden-all"),t.setAttribute("aria-expanded","false"))}function c(){return document.activeElement}function d(e,t){const i=s.filter((e=>""===e.style.display));if(0!==i.length)if("input"!==t)switch(e){case o:"forward"===t?i[0].focus():"back"===t&&i[i.length-1].focus();break;case r[0]:"forward"===t?i[1]?.focus():"back"===t&&o.focus();break;case r[r.length-1]:"forward"===t?i[0].focus():"back"===t&&i[i.length-2]?.focus();break;default:const e=c(),l=i.indexOf(e);if("forward"===t){const e=i[l+1];e&&e.focus()}else if("back"===t&&l>0){const e=i[l-1];e&&e.focus()}else o.focus()}else o.focus()}function u(){const e=o.value,t=s.filter((t=>t.innerText.toUpperCase().startsWith(e.toUpperCase())));var i;console.debug(t),r.forEach((e=>e.style.display="none")),t.forEach((e=>{e.style.display=""})),h("filtered"),i=t.length,l&&(l.textContent=i+" options available.")}function f(e){const t=e.dataset.value;t&&(o.value=t),d(document.activeElement,"input")}function h(e){n=e}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"),i.setAttribute("role","listbox"),r.forEach((e=>{e.setAttribute("role","option"),e.setAttribute("tabindex","-1")})),l&&(l.textContent=r.length+" options available. Arrow down to browse or start typing to filter."),a("Shut"),t.addEventListener("click",(function(e){const t=c();switch(n){case"initial":a("Open"),h("opened");break;case"opened":t===o?(a("Shut"),h("initial")):"LI"===t.tagName&&(f(t),a("Shut"),h("closed"));break;case"filtered":"LI"===t.tagName&&(f(t),a("Shut"),h("closed"));break;case"closed":a("Open"),h("filtered")}})),t.addEventListener("keyup",(function(e){!function(e){const t=c();switch(e){case"Enter":"initial"===n?(a("Open"),h("opened")):"opened"===n&&"LI"===t.tagName?(f(t),a("Shut"),h("closed")):"opened"===n&&t===o?(a("Shut"),h("closed")):"filtered"===n&&"LI"===t.tagName?(f(t),a("Shut"),h("closed")):"filtered"===n&&t===o?(a("Open"),h("opened")):(a("Open"),h("filtered"));break;case"Escape":"opened"!==n&&"filtered"!==n||(a("Shut"),h("initial"));break;case"ArrowDown":"initial"===n||"closed"===n?(a("Open"),d(o,"forward"),h("opened")):(a("Open"),d(t,"forward"));break;case"ArrowUp":"initial"===n||"closed"===n?(a("Open"),d(o,"back"),h("opened")):d(t,"back");break;default:"initial"===n?(a("Open"),u(),h("filtered")):"opened"===n||"closed"===n?(u(),h("filtered")):u()}}(e.key)})),document.addEventListener("click",(function(e){e.target.closest(".hoo-select")||(a("Shut"),h("initial"))}))};function p(){document.querySelectorAll(".hoo-optgroup").forEach((e=>{const t=e.querySelectorAll(".hoo-option"),o=Array.from(t).some((e=>"none"!==e.style.display));e.style.display=o?"":"none"}))}p();const b=document.querySelector(".hoo-select-dropdown");if(b){new MutationObserver((()=>{p()})).observe(b,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]})}var g;!function(e){e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom"}(g||(g={}));const m=e=>{const t=e.target,o=t.closest("tr");if(!o)return;const i=t.closest("table");if(!i)return;const r=o.dataset.sectionheader;if(!r)return;let l;l="all"===r?"tr[data-section]":`tr[data-section=${r}]`;const s=i.querySelectorAll(l);for(let e=0;e<s.length;e++){const t=s[e];t.classList.contains("is-hidden")?(t.classList.remove("is-hidden"),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false"),o.setAttribute("aria-expanded","true")):(t.classList.add("is-hidden"),t.classList.remove("is-visible"),t.setAttribute("aria-hidden","true"),o.setAttribute("aria-expanded","false"))}if("all"===r){const e=document.querySelectorAll("tbody tr.collapsable");if("true"===o.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")}}};g.LEFT,g.RIGHT,g.TOP,g.BOTTOM;const v=(e,t,o)=>{const i=e.querySelectorAll(t);for(let e=0;e<i.length;e++){const t=i[e];o===g.LEFT&&(t.style[o]=t.offsetLeft+"px"),o===g.RIGHT&&(t.style[o]=t.offsetRight+"px"),o===g.TOP&&(t.style[o]=t.offsetTop+"px"),o===g.BOTTOM&&(t.style[o]=t.offsetBottom+"px")}},y=()=>{document.querySelectorAll(".hoo-table.is-collapsable").forEach((e=>{e.querySelectorAll(".collapsable").forEach((e=>{e.addEventListener("click",m)}))})),(()=>{const e=document.querySelectorAll("table.sticky");for(let t=0;t<e.length;t++){const o=e[t];v(o,"tr td.is-sticky.left",g.LEFT),v(o,"tr th.is-sticky.left",g.LEFT)}})()},w=".hoo-pivotbar",E=".hoo-button-pivot",L=".hoo-navitem-text",A="is-active",S=e=>{e.preventDefault();const t=e.target;let o;if(console.log(t),o=t.classList.contains(E.substr(1))?t:t.closest(E),o||(o=t.classList.contains(L.substr(1))?t:t.closest(L)),!o)return;const i=t.closest(w);if(!i)return;i.querySelectorAll(E).forEach((e=>{e.classList.remove(A)})),o.classList.add(A)},k=()=>{document.querySelectorAll(`${w} ${E}`).forEach((e=>{const t=e;t.dataset.ref=t.textContent?.trim()||"",t.addEventListener("click",S)}))},C=e=>{let t=e.target;if(!t.classList.contains("hoo-buttonitem")&&!t.classList.contains("hoo-icon")){const e=t.closest(".hoo-navitem");if(e){const o=t.closest(".hoo-nav");if(!o)return;(e=>{e.forEach((e=>{e.removeAttribute("aria-current")}))})(o.querySelectorAll("* .hoo-navitem")),e.setAttribute("aria-current","true")}}},T=e=>{const t=e.target.closest(".hoo-navitem");t&&("true"===t.getAttribute("aria-expanded")?t.setAttribute("aria-expanded","false"):t.setAttribute("aria-expanded","true"))},x=()=>{document.querySelectorAll(".hoo-nav").forEach((e=>{e.querySelectorAll(".hoo-navitem").forEach((e=>{e.addEventListener("click",C)}));e.querySelectorAll(".hoo-buttonicon").forEach((e=>{e.addEventListener("click",T)}))}))};class O{constructor(e){if(this._files=[],this.dragOver=e=>{e.preventDefault(),this._fileLabel.classList.add("drag-over")},this.dragLeave=e=>{e.preventDefault(),this._fileLabel.classList.remove("drag-over")},this.dragDrop=e=>{e.preventDefault(),this._fileLabel.classList.remove("drag-over");const t=e.dataTransfer?.files;t&&t.length>0&&(console.log("Files dropped:",t),this.fileChangedEvent({target:{files:t}}))},this.fileChangedEvent=e=>{let t;console.debug("FileUploadHandler.fileChanged",e);const o=e.target;if(!o.files||0===o.files.length)return void(this._infileOutput.innerHTML="");t=Array.from(o.files);const i=document.createElement("ul");i.classList.add("hoo-infile-list"),console.debug("FileUploadHandler",t),t.forEach((e=>{const t=document.createElement("li");t.innerText=e.name,i.appendChild(t)})),this._infileOutput.innerHTML=`<div class='hoo-infile-selection'>${this._infileOutput.title||"Files Selected"}</div>${i.outerHTML}`},this._fileControl=e,console.debug("FileUploadHandler",this._fileControl),this._fileLabel=e.querySelector(".hoo-infile-label"),!this._fileLabel)throw new Error("File label element not found (.hoo-infile-label)");if(this._fileLabel.addEventListener("dragover",this.dragOver),this._fileLabel.addEventListener("dragleave",this.dragLeave),this._fileLabel.addEventListener("drop",this.dragDrop),this._originalFileControl=this._fileControl.querySelector(".hoo-infile-context"),!this._originalFileControl)throw new Error("File input element not found (.hoo-infile-context)");console.debug("FileUploadHandler",this._originalFileControl,this._originalFileControl.getAttribute("aria-describedby")),this._originalFileControl.addEventListener("change",this.fileChangedEvent);const t=this._originalFileControl.getAttribute("aria-describedby");if(!t)throw new Error("File input is missing aria-describedby attribute");if(console.debug("FileUploadHandler",t,this._infileOutput,`#${t.trim()}`),this._infileOutput=document.querySelector(`#${t.trim()}`),!this._infileOutput)throw new Error(`Element with id "${t.trim()}" not found`);console.debug("Infile Output:",this._infileOutput)}}const q=[],D=(e,t)=>{const o=e.target.parentElement;if(!o)return;const i=Array.from(o.querySelectorAll(".hoo-overflow > *"));i.length>0&&((e,t,o,i)=>{let r=q[i].filter((t=>t.overallWidth>e-40)),l=q[i].filter((t=>t.overallWidth<e-40));const s=o.querySelector(".hoo-buttonicon-overflow .hoo-buttonflyout");if(s){if(s&&s.children.length<r.length)for(let e=0;e<r.length;e++){const t=r[e].ref,i=o.querySelector(`[data-ref="${t}"]`);if(i){let e=document.createElement("li");e.appendChild(i),s.appendChild(e)}}if(0!==s.children.length){const e=s.closest(".hoo-buttonicon-overflow");e&&e.classList.add("is-active")}else{const e=s.closest(".hoo-buttonicon-overflow");e&&e.classList.remove("is-active")}if(s&&s.children.length>r.length)for(let e=0;e<l.length;e++){const t=l[e].ref,i=s.querySelector(`[data-ref="${t}"]`);i&&o.appendChild(i)}for(let e=0;e<s.children.length;e++)0===s.children[e].children.length&&s.children[e].remove()}})(o.clientWidth,0,e.target,t)},_=e=>{e.forEach(((e,t)=>{e.target.children&&(F(e.target.children,t),D(e,t))}))},F=(e,t)=>{let o=0;if(q.length<=t){q[t]=[];for(let i=0;i<e.length;i++){const r=e[i];if(o+=r.clientWidth,!r.classList.contains("hoo-buttonicon-overflow")){const e={chlld:r,ref:"ref-"+t+"-"+i,width:r.clientWidth,overallWidth:o};r.dataset.ref=e.ref,q[t].push(e)}}}},M=()=>{const e=document.querySelectorAll(".hoo-overflow");if(0!==e.length){const t=new ResizeObserver(_);e.forEach((e=>{t.observe(e)}))}};var W=Object.freeze({__proto__:null,init:M});const H=(e,t)=>{document.querySelectorAll(e).forEach((e=>{e.addEventListener("click",(e=>{t(e)}))}))},I=(e,t)=>{let o=e.getAttribute("aria-pressed");null===o?e.setAttribute("aria-pressed","true"):e.setAttribute("aria-pressed","true"===o?"false":"true"),t.classList.toggle("show-flyout")},$=e=>{const t=e.target,o=t.parentElement;I(t,o)},N=e=>{console.log("\nEVENT: splitButtonClick");const t=e.target,o=t.parentElement;I(t,o)},P=e=>{const t=e.target;if(!t.parentElement?.dataset.animation)return;const o=t.parentElement.dataset.animation;t.classList.add(o);const i=window.getComputedStyle(t),r=1e3*parseFloat(i.getPropertyValue("animation-duration"));console.log(i,i.getPropertyValue("animation-duration"),r),setTimeout((()=>{t.remove()}),r)},U=e=>{const t=e.target;if(!t.parentElement?.dataset.animation)return;const o=t.parentElement.dataset.animation;t.classList.add(o);const i=document.importNode(t,!0);i.classList.add(o);const r=window.getComputedStyle(i),l=1e3*parseFloat(r.getPropertyValue("animation-duration"));t.parentElement.appendChild(i),i.addEventListener("click",U),console.log(r,r.getPropertyValue("animation-duration"),l),setTimeout((()=>{i.classList.remove("anim-add-slide")}),l)},R=(e,t)=>{document.querySelectorAll(`${e} > .sg-anim-block`).forEach((e=>{e.addEventListener("click",t)}))};window.onload=()=>{var e;(()=>{try{new f("#btn-dialog","#myDialog",exports.DialogType.DIALOG,{closer:"#closer-dlg",backdropCloser:!0,escCloser:!0}),new f("#btn-modal-dialog","#myDialog-1",exports.DialogType.MODAL,{closer:"#closer-mdl",backdropCloser:!0,escCloser:!0})}catch(e){}})(),H(".hoo-buttonsplit > .hoo-buttonsplit-carret",N),H(".hoo-buttonsplit-primary > .hoo-buttonsplit-carret",N),H("button.hoo-buttonicon-overflow",$),H("button.hoo-buttoncmd",$),H("button.hoo-buttoncmdbar",$),H("button.hoo-buttonicon-flyout",$),H("button.hoo-buttoncontext",$),R(".anim-deleteNslide",P),R(".anim-addNslide",U),e=".hoo-input-file",document.querySelectorAll(e).forEach((e=>{new O(e)})),(()=>{const e=document.querySelectorAll(".hoo-select");console.debug("ALL SELECTED",e),e&&e.forEach((e=>{console.debug(e),h(e)}))})(),y(),k(),x(),M(),setTimeout((()=>{const 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)},exports.FileUploadHandler=O,exports.HOODialog=f,exports.ariaSelect=h,exports.initMenu=x,exports.initPivot=k,exports.initTables=y,exports.overflow=W;