@codegouvfr/react-dsfr
Version:
French State Design System React integration library
4 lines (3 loc) • 2.46 kB
JavaScript
/*! DSFR v1.8.5 | 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=this.toolsLinks.innerHTML.replace(/ +/g," "),r=this.menuLinks.innerHTML.replace(/ +/g," ");let a=n.replace(/(<nav[.\s\S]*-translate [.\s\S]*) id="(.*?)"([.\s\S]*<\/nav>)/gm,'$1 id="$2-mobile"$3');if(a=a.replace(/(<nav[.\s\S]*-translate [.\s\S]*) aria-controls="(.*?)"([.\s\S]*<\/nav>)/gm,'$1 aria-controls="$2-mobile"$3'),a!==r)switch(e.mode){case e.Modes.ANGULAR:case e.Modes.REACT:case e.Modes.VUE:e.inspector.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=a}}}class n extends e.core.Instance{static get instanceClassName(){return"HeaderModal"}init(){this.isResizing=!0}resize(){this.isBreakpoint(e.core.Breakpoints.LG)?this.unqualify():this.qualify()}qualify(){this.setAttribute("role","dialog");const e=this.element.getInstance("Modal");if(!e)return;const s=e.buttons;let t="";for(const e of s)if(t=e.id||t,e.isPrimary&&t)break;this.setAttribute("aria-labelledby",t)}unqualify(){const e=this.element.getInstance("Modal");e&&e.conceal(),this.removeAttribute("role"),this.removeAttribute("aria-labelledby")}}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.BUTTONS,e.header.HeaderLinks),e.internals.register(e.header.HeaderSelector.MODALS,e.header.HeaderModal);
//# sourceMappingURL=header.module.min.js.map