<header class="n7-header border-b n7-border-gray-01" id="siteHeader" aria-label="Header del sito">
<!-- Main heading -->
<div class="n7-main-heading bg-white flex items-center py-5 xl:py-1">
<div class="container flex items-center flex-1">
<div class="flex items-center n7-branding site-branding xl:max-w-[35.7%]">
<a class="n7-site-logo site-logo flex h-[58px] xl:flex-1 xl:h-16 xl:h-20 xl:max-w-[248px]" href="#">
<img class="w-full h-full object-contain object-left-top" src="/images/iontoretina.svg" alt="Alt logo image" width="248" height="81" />
</a>
<span class="xl:hidden w-4 h-9 mx-1.5 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
<a class="n7-site-logo site-logo flex xl:hidden h-4 xl:flex-1 xl:max-w-[248px]" href="#">
<img class="w-full h-full object-contain object-left-top" src="/images/offhealth.svg" alt="Alt logo image" width="248" height="81" />
</a>
</div>
<!-- RP 240402 Minisite header - Changed classes -->
<div class="n7-main-heading__navigation flex flex-1 justify-end xl:ml-auto xl:justify-center">
<!-- RP 240403 Minisite header - Add 'n7-link--active' class to <a> tag when it is current page -->
<nav class="n7-primary-navigation flex xl:justify-center" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="n7-btn
n7-btn--only-text rounded-none xl:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
<svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--x-mark" />
</svg>
<span class="sr-only is-show-menu group-aria-expanded:hidden">
Menu
</span>
<span class="sr-only is-close-menu hidden group-aria-expanded:block">
Chiudi menu
</span>
</button>
<!-- Mobile panel -->
<div class="n7-primary-navigation__panel flex-col bg-white max-xl:shadow-[-6px_0px_4px_-1px_rgba(0,0,0,0.06)] transition-all invisible py-6 px-4 fixed xl:static xl:visible top-[--header-height] bottom-0 max-xl:w-[90%] max-xl:max-w-[350px] overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="n7-primary-navigation__module is-main xl:border-b-0" id="mainNavListContainer">
<ul class="n7-primary-navigation__list flex max-xl:flex-col gap-6 xl:gap-4 xl:justify-end has-dropdown-menu">
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<!-- RP 240404 Minisite Header - Changed classes -->
<!-- RP 240411 Minisite Header - Changed classes -->
<!-- RP 240416 Minisite Header - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start xl:items-center xl:text-center pb-3 pt-4 xl:px-3 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01 border-b-4 border-transparent">
Perchè Drusenoff
</a>
</li>
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<!-- RP 240404 Minisite Header - Changed classes -->
<!-- RP 240411 Minisite Header - Changed classes -->
<!-- RP 240416 Minisite Header - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start xl:items-center xl:text-center pb-3 pt-4 xl:px-3 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01 n7-link--active">
Guida alla prevenzione della DMLE
</a>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex xl:flex-col items-center justify-between py-3 xl:px-3 xl:pb-0 xl:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary" aria-expanded="false" aria-controls="submenuId03">
Area riservata ai Medici<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden xl:absolute xl:pt-2 xl:pb-4 xl:px-4 xl:rounded-lg xl:shadow-xl bg-white xl:w-80" id="submenuId03">
<li class="n7-dropdown-menu__item group is-active">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Panoramica e Risorse</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">La Iontoforesi sclerale</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Videoteca Informativa</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] xl:hidden"></div>
</nav>
<div class="n7-action-area__container flex gap-3 py-6 max-xl:hidden ">
<div class="n7-action-area fixed bottom-6 w-[calc(100%-32px)] xl:static xl:w-auto flex gap-3 items-center max-xl:flex-wrap max-xl:mt-8">
<a href="#" class="n7-btn
n7-btn--primary
max-xl:n7-btn--l max-xl:w-full max-xl:justify-center n7-btn--s">
Acquista
<svg class="inline-block align-middle fill-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--cursor-arrow-rays" />
</svg>
</a>
</div>
<div class="n7-user-menu">
<nav class="flex" aria-label="Utente">
<!-- RP 240416 Minisite user menu - changed classes -->
<ul class="n7-primary-navigation__list w-full xl:relative xl:w-auto xl:flex xl:justify-end gap-4 xl:gap-8 has-dropdown-menu">
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex xl:flex-col items-center justify-between py-3 xl:px-3 xl:pb-0 xl:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary" aria-expanded="false" aria-controls="usermenu">
Massimiliano Spinosa<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden xl:absolute xl:pt-2 xl:pb-4 xl:px-4 xl:rounded-lg xl:shadow-xl bg-white xl:w-80 xl:z-10 xl:right-0 border-r-0 border-l-0 " id="usermenu">
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">voce 1</span>
</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm xl:text-base group/clickarea group-first:rounded-t group-last:rounded-b p-3" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm xl:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">voce 2</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- RP 240402 03 Minisite header - removed wrong closing div -->
</div>
</div>
<!-- RP 240402 Minisite header - Added block -->
<!-- Language Selector component -->
<div class="n7-language-selector flex items-center xl:ml-8">
<div>ITA</div>
<span class="hidden xl:inline w-4 h-9 mr-2.5 ml-4 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
</div>
<!-- RP 240405 Minisite header - Changed classes -->
<a class="n7-site-logo site-logo flex hidden xl:inline h-12 xl:max-w-[248px]" href="#">
<img class="w-full h-full object-cover md:object-contain object-left-top" src="/images/logo.png" alt="Alt logo image" width="248" height="81" />
</a>
</div>
</div>
<!-- -->
</header>
<header class="n7-header{% if hasShadow %} shadow-md{% endif %}{% if hasBorder %} border-b n7-border-gray-01{% endif %}" id="siteHeader" aria-label="Header del sito">
<!-- Main heading -->
<div class="n7-main-heading bg-white flex items-center py-5 xl:py-1">
<div class="container flex items-center flex-1">
<div class="flex items-center n7-branding site-branding xl:max-w-[35.7%]">
{% render '@logo',{ path: logoPath, href: '#', size: logoSize, objectFit: 'object-contain'}, true %}
<span class="xl:hidden w-4 h-9 mx-1.5 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
{% render '@logo',{ path: '/images/offhealth.svg', href: '#', size: 'h-4 xl:flex-1 xl:max-w-[248px]', objectFit: 'object-contain', classes: 'xl:hidden'}, true %}
</div>
<!-- RP 240402 Minisite header - Changed classes -->
<div class="n7-main-heading__navigation flex flex-1 justify-end xl:ml-auto xl:justify-center">
{% if isUserLoggedIn %}
<!-- RP 240403 Minisite header - Add 'n7-link--active' class to <a> tag when it is current page -->
{% render '@primary-navigation--minisite', {classes: 'xl:justify-center', firstLevels: firstLevels}, true %}
{% else %}
<!-- RP 240403 Minisite header - Add 'n7-link--active' class to <a> tag when it is current page -->
{% render '@primary-navigation--minisite', {classes: 'xl:justify-center', firstLevels: [{label: 'Perchè Drusenoff', classes: 'flex flex-col items-start xl:items-center xl:text-center pb-3 pt-4 xl:px-3 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01'}, {label: 'Guida alla prevenzione della DMLE', classes: 'flex flex-col items-start xl:items-center xl:text-center pb-3 pt-4 xl:px-3 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01 n7-link--active'}]}, true %}
{% endif %}
<div class="n7-action-area__container flex gap-3 py-6 max-xl:hidden ">
<div class="n7-action-area fixed bottom-6 w-[calc(100%-32px)] xl:static xl:w-auto flex gap-3 items-center max-xl:flex-wrap max-xl:mt-8">
{% if isUserLoggedIn %}
{% render '@button--size-s', {label:'Acquista', href: '#', icon: 'outline--cursor-arrow-rays', classes: 'max-xl:n7-btn--l max-xl:w-full max-xl:justify-center'}, true %}
{% else %}
{% render '@button--size-s', {label:'Sono un medico', href: '#', icon: 'mini--arrow-right-start-on-rectangle', classes: 'n7-btn--outline max-xl:n7-btn--l max-xl:w-full max-xl:justify-center'}, true %}
{% endif %}
</div>
{% if isUserLoggedIn %}
<div class="n7-user-menu">
<nav class="flex" aria-label="Utente">
<!-- RP 240416 Minisite user menu - changed classes -->
<ul class="n7-primary-navigation__list w-full xl:relative xl:w-auto xl:flex xl:justify-end gap-4 xl:gap-8 has-dropdown-menu">
{% render '@dropdown-menu--minisite', { label: 'Massimiliano Spinosa',id: 'usermenu', classes: 'n7-primary-navigation__item',listClasses: 'xl:z-10 xl:right-0 border-r-0 border-l-0', items: [{label : 'voce 1', classes: 'p-3'}, { label : 'voce 2', classes: 'p-3'}] }, true %}
</ul>
</nav>
</div>
{% endif %}
<!-- RP 240402 03 Minisite header - removed wrong closing div -->
</div>
</div>
<!-- RP 240402 Minisite header - Added block -->
{% if hasLanguageSelector %}
<!-- Language Selector component -->
<div class="n7-language-selector flex items-center xl:ml-8">
<div>ITA</div>
<span class="hidden xl:inline w-4 h-9 mr-2.5 ml-4 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
</div>
{% endif %}
<!-- RP 240405 Minisite header - Changed classes -->
{% render '@logo',{ path: '/images/logo.png', href: '#', size: 'h-12 xl:max-w-[248px]', objectFit: 'object-cover md:object-contain', classes: 'hidden xl:inline'}, true %}
</div>
</div>
<!-- -->
</header>
{
"hasShadow": false,
"hasBorder": true,
"mainHidden": true,
"minisiteHidden": false,
"breakpoint": "xl",
"hasLanguageSelector": true,
"isUserLoggedIn": true,
"logoPath": "/images/iontoretina.svg",
"logoSize": "h-[58px] xl:flex-1 xl:h-16 xl:h-20 xl:max-w-[248px]",
"firstLevels": [
{
"label": "Perchè Drusenoff",
"classes": "flex flex-col items-start xl:items-center xl:text-center pb-3 pt-4 xl:px-3 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01 border-b-4 border-transparent"
},
{
"label": "Guida alla prevenzione della DMLE",
"classes": "flex flex-col items-start xl:items-center xl:text-center pb-3 pt-4 xl:px-3 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01 n7-link--active"
},
{
"label": "Area riservata ai Medici",
"hasSubItems": true,
"id": "submenuId03",
"items": [
{
"label": "Panoramica e Risorse",
"classes": "p-3",
"isActive": true
},
{
"label": "La Iontoforesi sclerale",
"classes": "p-3"
},
{
"label": "Videoteca Informativa",
"classes": "p-3"
}
]
}
]
}
/* HEADER SCRIPT - mobile management */
document.addEventListener('DOMContentLoaded', function () {
'use strict';
if (document.querySelector('.n7-header')) {
/* GLOBAL VARIABLES */
var rootElement = document.documentElement;
// RP 240403 Minisite header - Added breakpoint setting
var breakpointMobile = '1024'
var bodyElement = document.body;
if (bodyElement.classList.contains("theme-minisite")) {
breakpointMobile = '1280'
}
var siteHeader = document.querySelector('.n7-header');
// var breadcrumb = document.querySelector('.n7-breadcrumb');
var headerHeight;
// var breadcrumbHeight;
var mainMenuWrapper = document.getElementById('mainNavPanel');
// var headerMainArea = document.querySelector('.region-header-main-area');
var headerSecondaryNav = document.querySelector('.n7-top-bar__navigation');
var headerSocialLinks = document.querySelector('.n7-top-bar__utilities-area .n7-social-links');
var headerPrimaryNav = document.getElementById('mainNavListContainer');
var headerActionArea = document.querySelector('.n7-main-heading .n7-action-area');
var headerUserMenu = document.querySelector('.n7-main-heading .n7-user-menu');
// RP 240402 Minisite header - Added language selector
var headerLangSelector = document.querySelector('.n7-main-heading .n7-language-selector');
// var headerSearch = document.querySelector('.region-header-top-area-second');
var SiteMenuWrapper = document.getElementById('siteNavWrapper');
var mobileMenuBackdrop = document.querySelector('.n7-primary-navigation__backdrop')
/* FUNCTIONS */
function toggleIcon(icon) {
if (icon.classList.contains('is-hidden')) {
icon.classList.remove('is-hidden');
icon.classList.add('is-visible');
} else if (icon.classList.contains('is-visible')) {
icon.classList.remove('is-visible');
icon.classList.add('is-hidden');
}
}
function calculateSiteHeader(header) {
headerHeight = header.offsetHeight;
rootElement.style.setProperty('--header-height', headerHeight + 'px');
}
function calculateBreadcrumbHeader(breadcrumb) {
breadcrumbHeight = breadcrumb.offsetHeight;
rootElement.style.setProperty('--breadcrumb-height', breadcrumbHeight + 'px');
}
function ariaExpandedToggle(target) {
if (target.getAttribute('aria-expanded') === "false") {
target.setAttribute('aria-expanded', 'true');
} else {
target.setAttribute('aria-expanded', 'false');
}
}
function openOffCanvasMenu(button, targetMenu) {
button.classList.toggle('is-selected');
ariaExpandedToggle(button);
targetMenu.classList.toggle('is-open');
document.body.classList.toggle('overflow-hidden');
}
function closeMobileMenu() {
if (document.body.classList.contains('overflow-hidden')) {
document.body.classList.remove('overflow-hidden');
}
mainMenuWrapper.classList.remove('is-open');
document.getElementById('mobileNavToggle').setAttribute('aria-expanded', 'false');
document.getElementById('mobileNavToggle').classList.remove('is-selected');
}
function wrapAndPrepend(wrapperClass, elementToWrap, parentElement) {
if (!document.querySelector('.' + wrapperClass + ':not(.is-main)')) {
var wrapperDiv = document.createElement('div');
wrapperDiv.classList.add(wrapperClass);
wrapperDiv.appendChild(elementToWrap);
parentElement.prepend(wrapperDiv);
}
}
function wrapAndAppend(wrapperClass, elementsToWrap, parentElement) {
var wrapperDiv = [];
for (var i = 0; i < elementsToWrap.length; i++) {
wrapperDiv[i] = document.createElement('div');
wrapperDiv[i].classList.add(wrapperClass);
wrapperDiv[i].appendChild(elementsToWrap[i]);
parentElement.append(wrapperDiv[i]);
}
}
function unwrapAndRemove(wrapperDiv, elementToUnwrap, parentElement) {
parentElement.removeChild(wrapperDiv);
}
function handleResize() {
var elementsToMove = [];
// Push elements in the same top to bottom order as in the mobile design
if (headerSecondaryNav) {
elementsToMove.push(headerSecondaryNav)
}
if (headerSocialLinks) {
elementsToMove.push(headerSocialLinks)
}
// Mobile view
// RP 240403 Minisite header - Use of breakpoint setting
if (window.matchMedia("screen and (max-width: " + (breakpointMobile - 1) + "px)").matches && !movedToMobile) {
// Move specific elements to mobile navigation panel
if (headerUserMenu) {
wrapAndPrepend('n7-primary-navigation__module', headerUserMenu, mainMenuWrapper);
}
// RP 240402 Minisite header - Added language selector
if (headerLangSelector) {
headerPrimaryNav.classList.add("grid-rows-[min-content]");
headerLangSelector.classList.add("n7-primary-navigation__sub-module");
headerPrimaryNav.appendChild(headerLangSelector);
}
if (headerActionArea) {
headerPrimaryNav.appendChild(headerActionArea);
}
// Move all other elements to mobile navigation panel
wrapAndAppend('n7-primary-navigation__module', elementsToMove, mainMenuWrapper);
movedToMobile = true;
movedToDesktop = false;
calculateSiteHeader(siteHeader);
// Desktop view
// RP 240403 Minisite header - Use of breakpoint setting
} else if (window.matchMedia("screen and (min-width: " + breakpointMobile + "px)").matches && !movedToDesktop) {
// Move elements back to desktop position
if (headerSecondaryNav) {
document.querySelector('.n7-top-bar__container').prepend(headerSecondaryNav);
}
if (headerSocialLinks) {
document.querySelector('.n7-top-bar__utilities-area').prepend(headerSocialLinks);
}
if (headerUserMenu) {
document.querySelector('.n7-action-area__container').prepend(headerUserMenu);
}
if (headerActionArea) {
document.querySelector('.n7-action-area__container').prepend(headerActionArea);
}
// RP 240402 Minisite header - Added language selector
if (headerLangSelector) {
headerPrimaryNav.classList.remove("grid-rows-[min-content]");
headerLangSelector.classList.remove("n7-primary-navigation__sub-module");
document.querySelector('.n7-main-heading__navigation').after(headerLangSelector);
}
// Remove empty wrapper divs
var emptySecondaryNavModules = document.querySelectorAll('.n7-primary-navigation__module:not(.is-main):empty');
emptySecondaryNavModules.forEach(function (emptyNavModule) {
unwrapAndRemove(emptyNavModule, headerSecondaryNav, mainMenuWrapper);
});
movedToDesktop = true;
movedToMobile = false;
calculateSiteHeader(siteHeader);
}
}
var movedToMobile = false;
var movedToDesktop = false;
handleResize(); // Initialize on page load
window.addEventListener('resize', handleResize);
document.getElementById('mobileNavToggle').addEventListener('click', function (e) {
e.preventDefault();
openOffCanvasMenu(this, mainMenuWrapper);
});
document.addEventListener('keyup', function (e) {
// if (e.key === "Escape") {
// if (mainMenuWrapper.classList.contains('is-open')) {
// closeMobileMenu();
// if (window.getComputedStyle(document.getElementById('mobileNavToggle')).display !== 'none') {
// document.getElementById('mobileNavToggle').focus();
// }
// if (document.getElementById('mainMenuToggle')) {
// document.getElementById('mainMenuToggle').focus();
// }
// }
// }
if (e.key === "Escape") {
if (mainMenuWrapper.classList.contains('is-open')) {
// Verifica se il focus è all'interno del menu principale
const isFocusInsideMainMenu = SiteMenuWrapper.contains(document.activeElement) &&
!document.activeElement.closest('.n7-dropdown-menu__item');
if (isFocusInsideMainMenu) {
closeMobileMenu();
// Se disponibile, ripristina il focus sull'elemento principale di apertura menu
if (document.getElementById('mobileNavToggle')) {
document.getElementById('mobileNavToggle').focus();
}
}
}
}
if ((e.key === 'Tab' || e.keyCode === 9) && !mainMenuWrapper.contains(e.target)) {
closeMobileMenu();
}
});
document.body.addEventListener('click', function (e) {
if (!SiteMenuWrapper.contains(e.target) || mobileMenuBackdrop.contains(e.target)) {
closeMobileMenu();
}
});
}
});
/* SEARCH DIALOG */
const openModal = () => {
const modal = document.getElementById('searchModal');
const modalContent = modal.querySelector('.modal-content');
modal.style.display = 'flex';
modal.classList.add("z-50");
modal.setAttribute('aria-hidden', 'false');
// Get all the focusable elements inside the modal content
const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const firstFocusable = modalContent.querySelectorAll(focusableElements)[0];
const fallbackFocusable = modalContent.querySelector('.is-focusable-element'); // Adjust the selector if necessary
// If there's a focusable element, focus on it; otherwise, focus on the fallback element
if (firstFocusable) {
firstFocusable.focus();
} else if (fallbackFocusable) {
fallbackFocusable.setAttribute('tabindex', '-1');
fallbackFocusable.focus();
}
};
const closeModal = () => {
const modal = document.getElementById('searchModal');
const modalContent = modal.querySelector('.modal-content');
const previouslyFocusedElement = document.getElementById('searchModalTrigger');
// Remove tabindex from the fallback focusable element
const fallbackFocusable = modalContent.querySelector('.is-focusable-element');
if (fallbackFocusable) {
fallbackFocusable.removeAttribute('tabindex');
}
modal.style.display = 'none';
modal.setAttribute('aria-hidden', 'true');
modal.classList.remove("z-50");
previouslyFocusedElement.focus();
};
if (document.getElementById('searchModal')) {
document.getElementById('searchModalTrigger').addEventListener('click', openModal);
document.getElementById('closeModal').addEventListener('click', closeModal);
document.getElementById('searchModal').addEventListener('keydown', function (event) {
const modalContent = document.querySelector('.modal-content');
const focusableElements = modalContent.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
if (event.key === 'Tab') {
if (event.shiftKey && document.activeElement === firstFocusableElement) {
lastFocusableElement.focus();
event.preventDefault();
} else if (!event.shiftKey && document.activeElement === lastFocusableElement) {
firstFocusableElement.focus();
event.preventDefault();
}
}
if (event.key === 'Escape') {
closeModal();
}
});
window.addEventListener('click', function (event) {
const modal = document.getElementById('searchModal');
if (event.target === modal) {
closeModal();
}
});
}
Modular header component. Components:
Use hasShadow:true in configuration to add header box shadow