@codegouvfr/react-dsfr
Version:
French State Design System React integration library
4 lines (3 loc) • 3.34 kB
JavaScript
/*! DSFR v1.13.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */
const e=window.dsfr,t={HEADER:e.internals.ns.selector("header"),BRAND_LINK:e.internals.ns.selector("header__brand a"),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 a extends e.core.Instance{static get instanceClassName(){return"HeaderLinks"}init(){const a=this.queryParentSelector(t.HEADER);this.toolsLinks=a.querySelector(t.TOOLS_LINKS),this.menuLinks=a.querySelector(t.MENU_LINKS);const s="-mobile",i=this.toolsLinks.innerHTML.replace(/ +/g," "),r=this.menuLinks.innerHTML.replace(/ +/g," ");let n=i.match(/id="(.*?)"/gm)||[];n=n.map((e=>e.replace('id="',"").replace('"',"")));const l=["aria-controls","aria-describedby","aria-labelledby"];let o=i.replace(/id="(.*?)"/gm,`id="$1${s}"`);for(const e of l){const t=i.match(new RegExp(`${e}="(.*?)"`,"gm"));if(t)for(const a of t){const t=a.replace(`${e}="`,"").replace('"',"");n.includes(t)&&(o=o.replace(`${e}="${t}"`,`${e}="${t+s}"`))}}if(o!==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=o}}}class s extends e.core.Instance{static get instanceClassName(){return"HeaderModal"}init(){this.storeAria(),this.isResizing=!0}resize(){this.isBreakpoint(e.core.Breakpoints.LG)?this.deactivateModal():this.activateModal()}activateModal(){const e=this.element.getInstance("Modal");e?(this.restoreAria(),e.isActive=!0,this.listenClick({capture:!0})):this.request(this.activateModal.bind(this))}deactivateModal(){const e=this.element.getInstance("Modal");e?(e.conceal(),e.isActive=!1,this.storeAria(),this.unlistenClick({capture:!0})):this.request(this.deactivateModal.bind(this))}storeAria(){this.hasAttribute("aria-labelledby")&&(this._ariaLabelledby=this.getAttribute("aria-labelledby")),this.hasAttribute("aria-label")&&(this._ariaLabel=this.getAttribute("aria-label")),this.removeAttribute("aria-labelledby"),this.removeAttribute("aria-label")}restoreAria(){this._ariaLabelledby&&this.setAttribute("aria-labelledby",this._ariaLabelledby),this._ariaLabel&&this.setAttribute("aria-label",this._ariaLabel)}handleClick(t){if(t.target.matches("a, button")&&!t.target.matches("[aria-controls]")&&!t.target.matches(e.core.DisclosureSelector.PREVENT_CONCEAL)){this.element.getInstance("Modal").conceal()}}}e.header={HeaderLinks:a,HeaderModal:s,HeaderSelector:t,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