@govbr-ds/core
Version:
Padrão Digital de Governo
2 lines • 8.97 kB
JavaScript
!function e(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("core",[],n):"object"==typeof exports?exports.core=n():t.core=n()}(self,(()=>(()=>{var e=()=>{},t,n=()=>{};(()=>{class e{constructor(e,t){this.name=e,this.component=t,this.id=this.component.id,this.breakpoints=this.component.dataset.breakpoints?this.component.dataset.breakpoints.split(" "):["col-sm-4","col-lg-3"],this.pushShadow="shadow-lg-right",this.trigger=document.querySelector(`[data-target="#${this.id}"]`),this.contextual=this.component.querySelector('[data-toggle="contextual"]'),this.dismiss=this.component.querySelectorAll('[data-dismiss="menu"]'),this.scrim=this.component.querySelector(".menu-scrim"),this.componentFolders=this.component.querySelectorAll(".menu-folder"),this.componentSiders=this.component.querySelectorAll(".side-menu"),this.componentItems=this.component.querySelectorAll(".menu-item"),this.elementOpenMenu=HTMLElement,this.inSubmenu=!1,this.triggerParent=HTMLElement,this._setBehavior()}_setBehavior(){this._toggleMenu(),this._setDropMenu(),this._setSideMenu(),this._setKeyboardBehaviors(),this._setBreakpoints(),this._setView(),this._addARIAAttributes(),window.addEventListener("resize",(()=>{this._setView()}))}_setView(){const e=document.querySelector("body"),t=undefined;document.querySelector(".menu-trigger")&&window.innerWidth<992?e.classList.add("mb-5"):e.classList.remove("mb-5")}_setBreakpoints(){this.component.classList.contains("push")||this.contextual||this.component.querySelector(".menu-panel").classList.add(...this.breakpoints)}_setKeyboardBehaviors(){this.component.addEventListener("keydown",(e=>{const t=undefined;switch(e.code){case"Escape":e.preventDefault(),this.trigger&&this._closeMenu();break;case"ArrowDown":e.preventDefault(),this._navigateToNextElment(e.target,1);break;case"ArrowUp":e.preventDefault(),this._navigateToNextElment(e.target,-1)}})),this.scrim}_navigateToNextElment(e,t){const n=e.parentNode.closest(".side-menu.active")?e.parentNode.closest(".side-menu.active"):e.closest(".br-menu"),s=n.classList.contains("br-menu")||n.classList.contains("menu-body")?n.querySelectorAll(".menu-body > .menu-item, .menu-body > .menu-folder > .menu-item,.menu-body > .menu-folder.active > .side-menu.active, .menu-body > .menu-folder.active > ul > li > .menu-item"):n.querySelectorAll(".side-menu.active > .menu-item,.side-menu.active > ul > li > .menu-item"),i=undefined,o=Array.from(s).findIndex((t=>t===e))+t;if(o>=0&&o<s.length){const e=s[o];if("group"===e.getAttribute("role")||"tree"===e.getAttribute("role")){const e=undefined;s[o+t].focus()}else e.focus()}else{const e=s.length-1,n=undefined,i=undefined;s[1===t?0:e].focus()}}_toggleMenu(){const e=this.contextual?this.contextual:this.trigger;e&&(e.addEventListener("keydown",(e=>{"Enter"!==e.code&&"Space"!==e.code||(e.preventDefault(),this.component.classList.contains("active")?this._closeMenu():(this._openMenu(),this._focusOnFirstVisibleItem()))})),e.addEventListener("click",(()=>{this.component.classList.contains("active")?this._closeMenu():(this._openMenu(),this._focusOnFirstVisibleItem())})));for(const e of this.dismiss)e.addEventListener("click",(()=>this._closeMenu()))}_focusOnFirstVisibleItem(){const e=this.component.querySelector(".menu-body .menu-item:not([hidden]):not(.inactive)");if(e)return e.focus(),void e.scrollIntoView({block:"nearest"});const t=this.component.querySelector(".menu-body > .menu-item:not([hidden]):not(.inactive)");t&&(t.focus(),t.scrollIntoView({block:"nearest"}))}_openMenu(){this.elementOpenMenu=document.activeElement,this.component.classList.add("active"),this.component.setAttribute("aria-expanded","true"),this.component.classList.contains("push")&&this.component.classList.add(...this.breakpoints,"px-0")}_closeMenu(){this.component.classList.remove("active"),this.component.classList.contains("push")&&this.component.classList.remove(...this.breakpoints,"px-0")}_setDropMenu(){for(const e of this.component.querySelectorAll(".menu-folder > a.menu-item"))this._createIcon(e,"fa-chevron-down"),e.parentNode.classList.add("drop-menu"),e.setAttribute("aria-expanded","false"),this._handleMenuInteraction(e)}_focusNextElement(){const e='a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';if(document.activeElement){const t=Array.prototype.filter.call(this.component.querySelectorAll(e),(e=>e.offsetWidth>0||e.offsetHeight>0||e===document.activeElement)),n=t.indexOf(document.activeElement),s=undefined;(t[n+1]||t[0]).focus()}}_setSideMenu(){for(const e of this.component.querySelectorAll("a.menu-item + ul"))e.parentNode.classList.contains("menu-folder")||(this._createIcon(e.previousElementSibling,"fa-angle-right"),e.parentNode.classList.add("side-menu"),e.parentNode.setAttribute("role","none"),this._handleSideMenuInteraction(e.previousElementSibling))}_handleMenuInteraction(e){e.hasAttribute("data-click-listener")||(e.addEventListener("click",(()=>{this._toggleDropMenu(e)})),e.addEventListener("keydown",(t=>{const n=e.closest(".menu-folder"),s=n.querySelector("a.menu-item");n&&(" "!==t.key&&"Spacebar"!==t.key||s&&s.classList.contains("focus-visible")&&(t.preventDefault(),this._toggleDropMenu(e)),"2"===t.key&&this._toggleDropMenu(e))})),e.setAttribute("data-click-listener","true"))}_toggleDropMenu(e){e.parentNode.classList.contains("active")?this._closeMenuElement(e):(e.parentNode.classList.add("active"),e.setAttribute("aria-expanded","true"),this.inSubmenu=!0,e.parentElement.querySelectorAll("ul li ul a").forEach((e=>{this.triggerParent=e.parentElement,e.addEventListener("keydown",(t=>{const{parentElement:n}=e.parentElement,s=undefined;switch(t.code){case"Escape":case"Backspace":case"ArrowLeft":t.preventDefault(),this._backMenu(n)}}))})))}_backMenu(e){e.parentElement.querySelector("[data-click-listener]").click()}_closeMenuElement(e){e.parentNode.classList.remove("active"),e.setAttribute("aria-expanded","false")}_handleSideMenuInteraction(e){e.hasAttribute("data-click-listener")||(e.addEventListener("click",(()=>{this.inSubmenu=!1,this._toggleSideMenu(e)})),e.addEventListener("keydown",(t=>{const n=e.closest(".side-menu"),s=n.querySelector("a.menu-item");n&&(" "!==t.key&&"Spacebar"!==t.key||s&&s.classList.contains("focus-visible")&&(t.preventDefault(),this._toggleSideMenu(e)))})),e.setAttribute("data-click-listener","true"))}_toggleSideMenu(e){if(this._hideItems(e),e.setAttribute("aria-expanded","true"),this._showItems(e.parentNode),e.parentNode.classList.contains("active"))return this._closeSideMenu(e),void e.focus();e.parentNode.classList.add("active");const t=e.nextElementSibling;if(t){const e=t.querySelector(".menu-item");e&&e.focus()}}_closeSideMenu(e){e.parentNode.classList.remove("active"),e.setAttribute("aria-expanded","false");const t=e.parentNode.closest(".side-menu.active")?e.parentNode.closest(".side-menu.active"):e.closest(".menu-body");this._showItems(t)}_hideItems(e){for(const t of e.closest(".menu-body").querySelectorAll(".menu-item"))t.setAttribute("hidden","")}_showItems(e){for(const t of e.querySelectorAll(".menu-item"))t.removeAttribute("hidden")}_createIcon(e,t){if(!e.querySelectorAll("span.support").length){const n=document.createElement("span");n.classList.add("support");const s=document.createElement("i");s.classList.add("fas"),s.classList.add(t),s.setAttribute("aria-hidden","true"),n.appendChild(s),e.appendChild(n)}}_addARIAAttributes(){const e=this.component.querySelector(".menu-body");e.setAttribute("role","tree"),this.contextual&&e.setAttribute("role","menubar");const t=undefined;this.component.querySelectorAll(".menu-folder:not(.drop-menu) > .menu-item").forEach((e=>{e.setAttribute("role","tree"),this.contextual&&e.setAttribute("role","menubar")}));const n=undefined;this.component.querySelectorAll(".menu-folder.drop-menu > a.menu-item, li > a.menu-item").forEach((e=>{e.setAttribute("role","treeitem"),this.contextual&&e.setAttribute("role","menuitem")}));const s=undefined;this.component.querySelectorAll(".side-menu > ul").forEach((e=>{const t=undefined,n=e.parentNode.querySelector(".menu-item .content").textContent.trim();e.setAttribute("role","group"),e.setAttribute("aria-label",n)}));const i=undefined;this.component.querySelectorAll(".menu-folder > ul").forEach((e=>{const t=undefined,n=e.parentNode.querySelector(".menu-item .content").textContent.trim();e.setAttribute("role","tree"),this.contextual&&e.setAttribute("role","menubar"),e.setAttribute("aria-label",n)}));const o=this.component.querySelectorAll("li.side-menu > .menu-item");for(const e of o)e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-expanded","false");const r=this.component.querySelectorAll(".menu-folder.drop-menu > .menu-item");for(const e of r)e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-expanded","false")}}var t=null})(),e();var s={};return n(),s})()));
//# sourceMappingURL=menu.min.js.map