@codegouvfr/react-dsfr
Version:
French State Design System React integration library
4 lines (3 loc) • 2.62 kB
JavaScript
/*! DSFR v1.10.0 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */
const e=window.dsfr,s={HEADER:e.internals.ns.selector("header"),TOOLS_LINKS:e.internals.ns.selector("header__tools-links"),MENU_LINKS:e.internals.ns.selector("header__menu-links"),BUTTONS:`${e.internals.ns.selector("header__tools-links")} ${e.internals.ns.selector("btns-group")}, ${e.internals.ns.selector("header__tools-links")} ${e.internals.ns.selector("links-group")}`,MODALS:`${e.internals.ns.selector("header__search")}${e.internals.ns.selector("modal")}, ${e.internals.ns.selector("header__menu")}${e.internals.ns.selector("modal")}`};class t extends e.core.Instance{static get instanceClassName(){return"HeaderLinks"}init(){const t=this.queryParentSelector(s.HEADER);this.toolsLinks=t.querySelector(s.TOOLS_LINKS),this.menuLinks=t.querySelector(s.MENU_LINKS);const n="-mobile",a=this.toolsLinks.innerHTML.replace(/ +/g," "),r=this.menuLinks.innerHTML.replace(/ +/g," ");let i=a.replace(/id="(.*?)"/gm,'id="$1'+n+'"');if(i=i.replace(/(<nav[.\s\S]*-translate [.\s\S]*) aria-controls="(.*?)"([.\s\S]*<\/nav>)/gm,'$1 aria-controls="$2'+n+'"$3'),i!==r)switch(e.mode){case e.Modes.ANGULAR:case e.Modes.REACT:case e.Modes.VUE:this.warn(`header__tools-links content is different from header__menu-links content.\nAs you're using a dynamic framework, you should handle duplication of this content yourself, please refer to documentation:\n${e.header.doc}`);break;default:this.menuLinks.innerHTML=i}}}class n extends e.core.Instance{constructor(){super(),this._clickHandling=this.clickHandler.bind(this)}static get instanceClassName(){return"HeaderModal"}init(){this.isResizing=!0}resize(){this.isBreakpoint(e.core.Breakpoints.LG)?this.deactivateModal():this.activateModal()}activateModal(){const e=this.element.getInstance("Modal");e&&(e.isEnabled=!0,this.listen("click",this._clickHandling,{capture:!0}))}deactivateModal(){const e=this.element.getInstance("Modal");e&&(e.conceal(),e.isEnabled=!1,this.unlisten("click",this._clickHandling,{capture:!0}))}clickHandler(s){if(s.target.matches("a, button")&&!s.target.matches("[aria-controls]")&&!s.target.matches(e.core.DisclosureSelector.PREVENT_CONCEAL)){this.element.getInstance("Modal").conceal()}}}e.header={HeaderLinks:t,HeaderModal:n,HeaderSelector:s,doc:"https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete"},e.internals.register(e.header.HeaderSelector.TOOLS_LINKS,e.header.HeaderLinks),e.internals.register(e.header.HeaderSelector.MODALS,e.header.HeaderModal);
//# sourceMappingURL=header.module.min.js.map