From 501d8e2105808c0a32192984facafddb49ad7475 Mon Sep 17 00:00:00 2001 From: Anna Lonka Date: Wed, 18 Dec 2024 13:07:16 +0200 Subject: [PATCH 1/2] UHF-9699: Added possibility to close menu toggle with esc --- dist/js/desktop-menu-toggle.min.js | 2 +- src/js/desktop-menu-toggle.js | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/dist/js/desktop-menu-toggle.min.js b/dist/js/desktop-menu-toggle.min.js index aece9b006..9c839f564 100644 --- a/dist/js/desktop-menu-toggle.min.js +++ b/dist/js/desktop-menu-toggle.min.js @@ -1 +1 @@ -!function(){const e="menu__item--open",t="menu__item--hover";function n(n){let o="false";(n.classList.contains(e)||n.classList.contains(t))&&(o="true");const s=n.querySelector(":first-child .menu__toggle-button");s&&s.setAttribute("aria-expanded",o)}function o(t){const o=document.querySelectorAll(`.desktop-menu .${e}`);if(o)for(const s of o){if(s===t)return;s.classList.remove(e),n(s)}}function s(t){const o=t.querySelector(".menu__toggle-button");null!==o&&o.addEventListener("click",(function(){t.classList.toggle(e),n(t)}))}function i(){o(this.closest(".menu__item--children"));const e=this.closest(".menu__item--children");e.classList.add(t),n(e)}function c(){this.classList.remove(t),n(this)}function l(){o(this.closest(".menu__item--children"));const e=this.closest(".menu__item--children");e.classList.remove(t),n(e)}document.addEventListener("DOMContentLoaded",(function(){const e=document.querySelectorAll(".desktop-menu .menu--level-0 > .menu__item--item-below");for(const t of e)if(t){const e=t.querySelector(".menu--level-0 > .menu__item--item-below > .menu__link-wrapper > a"),n=t.querySelector(".menu--level-0 > .menu__item--item-below > .menu__link-wrapper > .menu__toggle-button");s(t),e.addEventListener("mouseover",i,!1),n.addEventListener("mouseover",l,!1),t.addEventListener("mouseleave",c,!1)}})),window.addEventListener("click",(function(t){if(document.querySelector('[data-hdbt-selector="main-navigation"]').contains(t.target)){let o=t.target;if(o.classList.contains("menu__toggle-button-icon")&&(o=o.parentElement),o.classList.contains("menu__toggle-button")){const t=o.parentElement.closest(".menu__item--children"),i=function(e,t){const n=[];for(;e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}((s=t).parentNode.firstChild,s);for(let t=0;t .menu__item--item-below");for(const t of e)if(t){const e=t.querySelector(".menu--level-0 > .menu__item--item-below > .menu__link-wrapper > a"),n=t.querySelector(".menu--level-0 > .menu__item--item-below > .menu__link-wrapper > .menu__toggle-button");s(t),e.addEventListener("mouseover",i,!1),n.addEventListener("mouseover",l,!1),t.addEventListener("mouseleave",c,!1)}document.addEventListener("keydown",u)})),window.addEventListener("click",(function(t){if(document.querySelector('[data-hdbt-selector="main-navigation"]').contains(t.target)){let o=t.target;if(o.classList.contains("menu__toggle-button-icon")&&(o=o.parentElement),o.classList.contains("menu__toggle-button")){const t=o.parentElement.closest(".menu__item--children"),i=function(e,t){const n=[];for(;e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}((s=t).parentNode.firstChild,s);for(let t=0;t .menu__item--item-below'); @@ -91,6 +97,9 @@ document.addEventListener('DOMContentLoaded', function startDesktopMenu() { item.addEventListener('mouseleave', mouseLeave, false); } } + + // Add keydown event listener to handle 'Esc' key + document.addEventListener('keydown', handleEscKey); }); // Functionality when other menu item is clicked while one is open or From 318f92ce557871f295b73f5bf87f88a67d1f3e33 Mon Sep 17 00:00:00 2001 From: Anna Lonka Date: Wed, 18 Dec 2024 15:06:36 +0200 Subject: [PATCH 2/2] UHF-9699: Changed other escape key events to be in same format --- dist/js/nav-toggle-dropdown.min.js | 2 +- dist/js/nav-toggle.min.js | 2 +- src/js/nav-global/menu.js | 2 +- src/js/nav-toggle/nav-toggle-dropdown.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/dist/js/nav-toggle-dropdown.min.js b/dist/js/nav-toggle-dropdown.min.js index f66009411..0fc0174d9 100644 --- a/dist/js/nav-toggle-dropdown.min.js +++ b/dist/js/nav-toggle-dropdown.min.js @@ -1 +1 @@ -!function(){var t={9296:function(t){class e{constructor(){this.HASH_ID=null,this.buttonSelector=null,this.buttonInstance=null,this.running=!1,this.targetNode=null,this.onOpen=null}isOpen(){return window.location.hash===this.HASH_ID||"true"===this.targetNode.dataset.target}close(){this.running&&(this.buttonInstance.setAttribute("aria-expanded","false"),this.targetNode.dataset.target="false",this.onClose&&this.onClose())}open(){this.running&&(this.buttonInstance.setAttribute("aria-expanded","true"),this.targetNode.dataset.target="true",this.onOpen&&this.onOpen())}toggle(){this.isOpen()?this.close():this.open(),this.buttonInstance.focus()}addListeners(){document.addEventListener("keydown",(t=>{"Escape"!==t.key&&"Esc"!==t.key&&27!==t.keyCode||!this.isOpen()||(this.close(),this.buttonInstance.focus())})),this.buttonInstance.addEventListener("click",(()=>{this.toggle()}))}init({name:t,buttonSelector:e,targetSelector:n,onOpen:s,onClose:i}){if(this.name=t,this.buttonSelector=e,this.buttonInstance=document.querySelector(this.buttonSelector),!this.buttonInstance)return this.running=!1,void console.warn(`${t} button missing. Looking for ${this.buttonSelector}`);if(this.running)console.warn(`${t} already initiated. Is it included more than once?`);else{if(this.HASH_ID=n,this.onOpen=s,this.onClose=i,this.targetNode=document.querySelector(this.HASH_ID),!this.targetNode)throw new Error(`${t} target node missing. Looking for ${this.HASH_ID}`);this.targetNode.dataset.js=!0,this.addListeners(),this.running=!0}}}t.exports=()=>new e}},e={};(function n(s){var i=e[s];if(void 0!==i)return i.exports;var o=e[s]={exports:{}};return t[s](o,o.exports,n),o.exports})(9296)}(); \ No newline at end of file +!function(){var t={9296:function(t){class e{constructor(){this.HASH_ID=null,this.buttonSelector=null,this.buttonInstance=null,this.running=!1,this.targetNode=null,this.onOpen=null}isOpen(){return window.location.hash===this.HASH_ID||"true"===this.targetNode.dataset.target}close(){this.running&&(this.buttonInstance.setAttribute("aria-expanded","false"),this.targetNode.dataset.target="false",this.onClose&&this.onClose())}open(){this.running&&(this.buttonInstance.setAttribute("aria-expanded","true"),this.targetNode.dataset.target="true",this.onOpen&&this.onOpen())}toggle(){this.isOpen()?this.close():this.open(),this.buttonInstance.focus()}addListeners(){document.addEventListener("keydown",(t=>{"Escape"===t.key&&this.isOpen()&&(this.close(),this.buttonInstance.focus())})),this.buttonInstance.addEventListener("click",(()=>{this.toggle()}))}init({name:t,buttonSelector:e,targetSelector:n,onOpen:s,onClose:i}){if(this.name=t,this.buttonSelector=e,this.buttonInstance=document.querySelector(this.buttonSelector),!this.buttonInstance)return this.running=!1,void console.warn(`${t} button missing. Looking for ${this.buttonSelector}`);if(this.running)console.warn(`${t} already initiated. Is it included more than once?`);else{if(this.HASH_ID=n,this.onOpen=s,this.onClose=i,this.targetNode=document.querySelector(this.HASH_ID),!this.targetNode)throw new Error(`${t} target node missing. Looking for ${this.HASH_ID}`);this.targetNode.dataset.js=!0,this.addListeners(),this.running=!0}}}t.exports=()=>new e}},e={};(function n(s){var i=e[s];if(void 0!==i)return i.exports;var o=e[s]={exports:{}};return t[s](o,o.exports,n),o.exports})(9296)}(); \ No newline at end of file diff --git a/dist/js/nav-toggle.min.js b/dist/js/nav-toggle.min.js index 5cf1bac8b..e321ccf26 100644 --- a/dist/js/nav-toggle.min.js +++ b/dist/js/nav-toggle.min.js @@ -1 +1 @@ -!function(){var t={2858:function(t,e,n){"use strict";n.d(e,{A:function(){return H}});var r=Object.prototype.toString,s=Array.isArray||function(t){return"[object Array]"===r.call(t)};function i(t){return"function"==typeof t}function a(t){return t.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function o(t,e){return null!=t&&"object"==typeof t&&e in t}var l=RegExp.prototype.test;var c=/\S/;function u(t){return!function(t,e){return l.call(t,e)}(c,t)}var h={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="};var p=/\s*/,d=/\s+/,f=/\s*=/,g=/\s*\}/,m=/#|\^|\/|>|\{|&|=|!/;function v(t){this.string=t,this.tail=t,this.pos=0}function b(t,e){this.view=t,this.cache={".":this.view},this.parent=e}function _(){this.templateCache={_cache:{},set:function(t,e){this._cache[t]=e},get:function(t){return this._cache[t]},clear:function(){this._cache={}}}}v.prototype.eos=function(){return""===this.tail},v.prototype.scan=function(t){var e=this.tail.match(t);if(!e||0!==e.index)return"";var n=e[0];return this.tail=this.tail.substring(n.length),this.pos+=n.length,n},v.prototype.scanUntil=function(t){var e,n=this.tail.search(t);switch(n){case-1:e=this.tail,this.tail="";break;case 0:e="";break;default:e=this.tail.substring(0,n),this.tail=this.tail.substring(n)}return this.pos+=e.length,e},b.prototype.push=function(t){return new b(t,this)},b.prototype.lookup=function(t){var e,n,r,s=this.cache;if(s.hasOwnProperty(t))e=s[t];else{for(var a,l,c,u=this,h=!1;u;){if(t.indexOf(".")>0)for(a=u.view,l=t.split("."),c=0;null!=a&&c0?s[s.length-1][4]:n;break;default:r.push(e)}return n}(function(t){for(var e,n,r=[],s=0,i=t.length;s"===a?o=this.renderPartial(i,e,n,s):"&"===a?o=this.unescapedValue(i,e):"name"===a?o=this.escapedValue(i,e,s):"text"===a&&(o=this.rawValue(i)),void 0!==o&&(l+=o);return l},_.prototype.renderSection=function(t,e,n,r,a){var o=this,l="",c=e.lookup(t[1]);if(c){if(s(c))for(var u=0,h=c.length;u0||!n)&&(s[i]=r+s[i]);return s.join("\n")},_.prototype.renderPartial=function(t,e,n,r){if(n){var s=this.getConfigTags(r),a=i(n)?n(t[1]):n[t[1]];if(null!=a){var o=t[6],l=t[5],c=t[4],u=a;0==l&&c&&(u=this.indentPartial(a,c,o));var h=this.parse(u,s);return this.renderTokens(h,e,n,u,r)}}},_.prototype.unescapedValue=function(t,e){var n=e.lookup(t[1]);if(null!=n)return n},_.prototype.escapedValue=function(t,e,n){var r=this.getConfigEscape(n)||w.escape,s=e.lookup(t[1]);if(null!=s)return"number"==typeof s&&r===w.escape?String(s):r(s)},_.prototype.rawValue=function(t){return t[1]},_.prototype.getConfigTags=function(t){return s(t)?t:t&&"object"==typeof t?t.tags:void 0},_.prototype.getConfigEscape=function(t){return t&&"object"==typeof t&&!s(t)?t.escape:void 0};var w={name:"mustache.js",version:"4.2.0",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(t){x.templateCache=t},get templateCache(){return x.templateCache}},x=new _;w.clearCache=function(){return x.clearCache()},w.parse=function(t,e){return x.parse(t,e)},w.render=function(t,e,n,r){if("string"!=typeof t)throw new TypeError('Invalid template! Template should be a "string" but "'+((s(i=t)?"array":typeof i)+'" was given as the first argument for mustache#render(template, view, partials)'));var i;return x.render(t,e,n,r)},w.escape=function(t){return String(t).replace(/[&<>"'`=\/]/g,(function(t){return h[t]}))},w.Scanner=v,w.Context=b,w.Writer=_;var y=w,k=n(2485),I=n.n(k);const L=Drupal.t("Frontpage",{},{context:"Global navigation mobile menu top level"}),S=Drupal.t("Open submenu:",{},{context:"Mobile navigation menu prefix"}),E=Drupal.t("Open parent menu:",{},{context:"Mobile navigation menu prefix"});function A(){return this.sub_tree?.length>0}function O(){let t;try{t=new URL(this.url).pathname}catch(e){t=this.url}return!this.external&&this.url&&t===window.location.pathname}function C(){return!!this.active}function P(){return!!this.inPath}function j(){return!!this.is_injected}function T(){return{external:this.attributes["data-external"]||this.external||!1,protocol:this.attributes["data-protocol"]||!1}}function D(){return!!this.attributes?.lang}function R(){return!!this.external&&(R.ICONS[this.attributes["data-protocol"]]||R.ICONS.external)}Array.prototype.findRecursive=function(t,e){if(!e)throw new Error("findRecursive requires parameter `childrenPropertyName`");let n=[];n=this;const r=this.find(t),s=this.filter((t=>t[e]));if(r)return r;if(s.length){const n=[];return s.forEach((t=>{n.push(...t[e])})),n.findRecursive(t,e)}},R.ICONS={mailto:{class:"link__type link__type--mailto",text:Drupal.t("Link opens default mail program",{},{context:"Explanation for screen-reader software that the icon visible next to this link means that the link opens default mail program."})},tel:{class:"link__type link__type--tel",text:Drupal.t("Link starts a phone call",{},{context:"Explanation for screen-reader software that the icon visible next to this link means that the link starts a phone call."})},external:{class:"link__type link__type--external",text:Drupal.t("Link leads to external service",{},{context:"Explanation for screen-reader software that the icon visible next to this link means that the link leads to an external service."})}};var H={compileTemplates(){this.templates={panel:`\n {{#panels}}\n
\n
\n {{#back}}\n \n {{/back}}\n {{name}}{{#externalLinkIcon}} {{/externalLinkIcon}}\n {{>sub_tree}}\n
\n ${document.querySelector(".js-mmenu__footer")?.outerHTML}\n
\n {{/panels}}\n\n {{^panels}}\n
\n \n
\n {{/panels}}\n `,list:'\n \n '}},menu:null,templates:null,SCROLL_TRESHOLD:100,size:10,running:!1,data:null,currentIndex:0,cacheKey:"hdbt-mobile-menu",enableCache:!1,selectors:{container:"#mmenu",rootId:"mmenu__panels",forward:"mmenu__forward",back:"mmenu__back"},getAPIUrl(){const t=new URL(drupalSettings?.helfi_navigation?.links?.api);return t.searchParams.set("_format","json"),t.searchParams.set("max-depth",drupalSettings?.menu_depth),t.toString()},getRoot(){return document.getElementById(this.selectors.rootId)},sortPanelsByPath(){const t=[],e=this.data,n=e.findRecursive((t=>O.call(t)),"sub_tree");let r=n?.sub_tree?.length?n.id:n?.parentId;for(;r;){e.findRecursive((({id:e,url:n,name:s,sub_tree:i,parentId:a,inPath:o,active:l})=>e===r&&(t.push({sub_tree:i,name:s,url:n,parentId:a,inPath:o,active:l}),r=a,!0)),"sub_tree")||(r=void 0)}t.push({sub_tree:e,inPath:!0}),t.reverse(),this.currentIndex=t.length-1,this.content=[...t]},content:[],getView(t){return this.content.map(((e,n)=>({...e,name:e?.name||L,url:e.url||drupalSettings.helfi_navigation.links.canonical,button:A,isActive:C,isInPath:P,isInjected:j,externalLinkAttributes:T,hasLang:D,externalLinkIcon:R,back:n>0&&(this.content.at(n-1)?.name??L),openSubMenuTranslation:S,openParentMenuTranslation:E,panel_class:I()({mmenu__panel:!0,"mmenu__panel--visible":!0,"mmenu__panel--current":n===this.currentIndex,"mmenu__panel--visible-right":"start"===t&&n>this.currentIndex||"up"===t&&n>=this.currentIndex||"down"===t&&n>this.currentIndex+1,"mmenu__panel--visible-left":"up"===t&&ne===t));if(!e)throw new Error(`ID mismatch in menu items${t}`);this.currentIndex=this.currentIndex+1=0?this.currentIndex-1:this.currentIndex,this.render("down"))},render(t){const e=this.getRoot();if(e.innerHTML=y.render(this.templates.panel,{panels:this.getView(t)},{sub_tree:this.templates.list}),"load"===t)return;const n=[...e.querySelectorAll(".mmenu__panel")],r=n.at(this.currentIndex);e.parentElement.scrollTop>this.SCROLL_TRESHOLD&&this.currentIndex>0&&r.querySelector(".mmenu__back").scrollIntoView({block:"start",behaviour:"smooth"}),setTimeout((()=>{switch(r.classList.remove("mmenu__panel--visible-right","mmenu__panel--visible-left"),t){case"up":n.at(this.currentIndex-1).classList.add("mmenu__panel--visible-left");break;case"down":n.at(this.currentIndex+1).classList.add("mmenu__panel--visible-right")}setTimeout((()=>{n.forEach((t=>{t.classList.contains("mmenu__panel--current")||(t.style.visibility="hidden")}))}),200)}),10)},async load(){const t=await fetch(this.getAPIUrl()),e=await t.json(),n=Object.getOwnPropertyNames(e);if(!n.length)throw new Error("No instances found in data",e);const r=n.map((t=>{const n=e[t].menu_tree[0];return n.parentId="",n})),s=r.findRecursive((t=>O.call(t)),"sub_tree");s&&(s.active=!0,s.inPath=!0);let i=s?.parentId;for(;i;){r.findRecursive((t=>t.id===i&&(i=t.parentId,t.inPath=!0,!0)),"sub_tree")||(i=void 0)}this.data=r},async start(){const t=document.querySelector(this.selectors.container);if(!this.getRoot()||!t)throw new Error("Panel root not found");t.classList.add("mmenu--visible"),this.render("load");try{await this.load()}catch(t){return console.error("Unable to load menu API, using fallback menu instead",t),void this.enableFallback()}this.sortPanelsByPath(),this.render("start"),this.getRoot().addEventListener("click",(t=>{const{target:{classList:e,value:n,parentElement:r}}=t;t.stopImmediatePropagation(),e&&e.contains(this.selectors.forward)?this.up(n):(e&&e.contains(this.selectors.back)||r?.classList&&r?.classList.contains(this.selectors.back))&&this.down()}))},isOpen(){return"#menu"===window.location.hash||"true"===this.toggleButton.getAttribute("aria-expanded")},disableFallback(){this.menu.dataset.js=!0},enableFallback(){this.menu.dataset.target="false",this.getRoot().innerHTML="",delete this.menu.dataset.js,window.location.hash="#menu"},close(){this.toggleButton.setAttribute("aria-expanded","false"),this.menu.dataset.target="false",this.onClose&&this.onClose()},open(){this.menu.dataset.target="true",this.toggleButton.setAttribute("aria-expanded","true"),this.onOpen&&this.onOpen()},toggle(){this.isOpen()?this.close():this.open(),this.toggleButton.focus()},init({onOpen:t,onClose:e}){if(this.running)return void console.warn("MobilePanel already initiated. Is it include more than once?");if(this.onOpen=t,this.onClose=e,this.toggleButton=document.querySelector(".js-menu-toggle-button"),!this.toggleButton)throw new Error("No toggle button for JS menu.");if(this.menu=document.querySelector("#menu"),!this.menu)return void console.error("Panel not present in DOM. Cannot start JS mobile menu");this.disableFallback(),document.addEventListener("keydown",(t=>{"Escape"!==t.key&&"Esc"!==t.key&&27!==t.keyCode||!this.isOpen()||(this.close(),this.toggleButton.focus())}));const n=()=>{this.compileTemplates(),this.toggleButton.removeEventListener("click",n),this.start()};this.toggleButton.addEventListener("click",n),this.toggleButton.addEventListener("click",(()=>this.toggle())),this.isOpen()&&(window.location.hash="",n(),this.open()),this.running=!0}}},9296:function(t){class e{constructor(){this.HASH_ID=null,this.buttonSelector=null,this.buttonInstance=null,this.running=!1,this.targetNode=null,this.onOpen=null}isOpen(){return window.location.hash===this.HASH_ID||"true"===this.targetNode.dataset.target}close(){this.running&&(this.buttonInstance.setAttribute("aria-expanded","false"),this.targetNode.dataset.target="false",this.onClose&&this.onClose())}open(){this.running&&(this.buttonInstance.setAttribute("aria-expanded","true"),this.targetNode.dataset.target="true",this.onOpen&&this.onOpen())}toggle(){this.isOpen()?this.close():this.open(),this.buttonInstance.focus()}addListeners(){document.addEventListener("keydown",(t=>{"Escape"!==t.key&&"Esc"!==t.key&&27!==t.keyCode||!this.isOpen()||(this.close(),this.buttonInstance.focus())})),this.buttonInstance.addEventListener("click",(()=>{this.toggle()}))}init({name:t,buttonSelector:e,targetSelector:n,onOpen:r,onClose:s}){if(this.name=t,this.buttonSelector=e,this.buttonInstance=document.querySelector(this.buttonSelector),!this.buttonInstance)return this.running=!1,void console.warn(`${t} button missing. Looking for ${this.buttonSelector}`);if(this.running)console.warn(`${t} already initiated. Is it included more than once?`);else{if(this.HASH_ID=n,this.onOpen=r,this.onClose=s,this.targetNode=document.querySelector(this.HASH_ID),!this.targetNode)throw new Error(`${t} target node missing. Looking for ${this.HASH_ID}`);this.targetNode.dataset.js=!0,this.addListeners(),this.running=!0}}}t.exports=()=>new e},3628:function(t){const e=["#chat-leijuke-wrapper",".si-toggle-container",".cx-theme-helsinki-blue",".aca--button--desktop, .aca--button--mobile, .aca--widget--mobile, .aca--widget--desktop, #aca--widget-button-close","#telia-ace-leijuke",".humany-trigger, .humany-widget","#ed11y-panel","#sliding-popup"],n=()=>{document.querySelectorAll(e.join(",")).forEach((t=>{t.dataset.cssmenuHide=!0}))},r=()=>{document.querySelectorAll(e.join(",")).forEach((t=>{delete t.dataset.cssmenuHide}))};t.exports={setHide:t=>{(!0===t?n:r)()},close:n,open:r,HIDE_SELECTORS:e}},2485:function(t,e){var n;!function(){"use strict";var r={}.hasOwnProperty;function s(){for(var t=[],e=0;e{const e={},n=drupalSettings.hdbt.global_menu?s.A:void 0;drupalSettings.hdbt.profile_dropdown&&(e.ProfileDropdown="profile"),drupalSettings.hdbt.search_dropdown&&(e.SearchDropdown="search"),drupalSettings.hdbt.otherlangs_dropdown&&(e.OtherLangsDropdown="otherlangs"),n||(e.CssMenuDropdownDropdown="cssmenu");const i=e,a=Object.keys(i);a.forEach((e=>{const n=i[e];i[e]=r()(),i[e].init({name:`${n} dropdown`,buttonSelector:`.js-${n}-button`,targetSelector:`#${n}`,onOpen:()=>{a.forEach((t=>{t!==e&&i[t].close()})),Object.keys(s.A).length&&s.A.close(),(0,t.close)(),"SearchDropdown"===e&&window.setTimeout((()=>document.querySelector('.header-search-wrapper input[type="search"]')?.focus()),10)},onClose:t.open})})),Object.keys(s.A).length&&s.A.init({onOpen:()=>{a.forEach((t=>{i[t].close()})),(0,t.close)()},onClose:t.open});const o=t=>{if(t.touches?.length>1)return!0;const e=t.target.closest(".mmenu__panel--current, .nav-toggle-dropdown__content");var n;return window.matchMedia("(max-width: 768px)").matches&&(a.some((t=>i[t].dataset&&i[t].isOpen()))||Object.keys(s.A).length&&s.A.isOpen())&&(!t.target.closest(".nav-toggle-dropdown")||e&&!((n=e).scrollWidth>n.clientWidth||n.scrollHeight>n.clientHeight))?(t.preventDefault(),t.stopPropagation(),!1):void 0};document.addEventListener("click",(({target:e})=>{!e.closest(".desktop-menu, .header-top")&&e.closest(".header")||(a.forEach((t=>{i[t].close()})),Object.keys(s.A).length&&s.A.close(),(0,t.open)())}));const l=document.querySelector("body");l.addEventListener("wheel",o,{passive:!1}),l.addEventListener("scroll",o,{passive:!1}),l.addEventListener("touchmove",o,{passive:!1})})()}()}(); \ No newline at end of file +!function(){var t={2858:function(t,e,n){"use strict";n.d(e,{A:function(){return H}});var r=Object.prototype.toString,i=Array.isArray||function(t){return"[object Array]"===r.call(t)};function s(t){return"function"==typeof t}function a(t){return t.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function o(t,e){return null!=t&&"object"==typeof t&&e in t}var l=RegExp.prototype.test;var c=/\S/;function u(t){return!function(t,e){return l.call(t,e)}(c,t)}var h={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="};var p=/\s*/,d=/\s+/,f=/\s*=/,g=/\s*\}/,m=/#|\^|\/|>|\{|&|=|!/;function v(t){this.string=t,this.tail=t,this.pos=0}function b(t,e){this.view=t,this.cache={".":this.view},this.parent=e}function _(){this.templateCache={_cache:{},set:function(t,e){this._cache[t]=e},get:function(t){return this._cache[t]},clear:function(){this._cache={}}}}v.prototype.eos=function(){return""===this.tail},v.prototype.scan=function(t){var e=this.tail.match(t);if(!e||0!==e.index)return"";var n=e[0];return this.tail=this.tail.substring(n.length),this.pos+=n.length,n},v.prototype.scanUntil=function(t){var e,n=this.tail.search(t);switch(n){case-1:e=this.tail,this.tail="";break;case 0:e="";break;default:e=this.tail.substring(0,n),this.tail=this.tail.substring(n)}return this.pos+=e.length,e},b.prototype.push=function(t){return new b(t,this)},b.prototype.lookup=function(t){var e,n,r,i=this.cache;if(i.hasOwnProperty(t))e=i[t];else{for(var a,l,c,u=this,h=!1;u;){if(t.indexOf(".")>0)for(a=u.view,l=t.split("."),c=0;null!=a&&c0?i[i.length-1][4]:n;break;default:r.push(e)}return n}(function(t){for(var e,n,r=[],i=0,s=t.length;i"===a?o=this.renderPartial(s,e,n,i):"&"===a?o=this.unescapedValue(s,e):"name"===a?o=this.escapedValue(s,e,i):"text"===a&&(o=this.rawValue(s)),void 0!==o&&(l+=o);return l},_.prototype.renderSection=function(t,e,n,r,a){var o=this,l="",c=e.lookup(t[1]);if(c){if(i(c))for(var u=0,h=c.length;u0||!n)&&(i[s]=r+i[s]);return i.join("\n")},_.prototype.renderPartial=function(t,e,n,r){if(n){var i=this.getConfigTags(r),a=s(n)?n(t[1]):n[t[1]];if(null!=a){var o=t[6],l=t[5],c=t[4],u=a;0==l&&c&&(u=this.indentPartial(a,c,o));var h=this.parse(u,i);return this.renderTokens(h,e,n,u,r)}}},_.prototype.unescapedValue=function(t,e){var n=e.lookup(t[1]);if(null!=n)return n},_.prototype.escapedValue=function(t,e,n){var r=this.getConfigEscape(n)||w.escape,i=e.lookup(t[1]);if(null!=i)return"number"==typeof i&&r===w.escape?String(i):r(i)},_.prototype.rawValue=function(t){return t[1]},_.prototype.getConfigTags=function(t){return i(t)?t:t&&"object"==typeof t?t.tags:void 0},_.prototype.getConfigEscape=function(t){return t&&"object"==typeof t&&!i(t)?t.escape:void 0};var w={name:"mustache.js",version:"4.2.0",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(t){x.templateCache=t},get templateCache(){return x.templateCache}},x=new _;w.clearCache=function(){return x.clearCache()},w.parse=function(t,e){return x.parse(t,e)},w.render=function(t,e,n,r){if("string"!=typeof t)throw new TypeError('Invalid template! Template should be a "string" but "'+((i(s=t)?"array":typeof s)+'" was given as the first argument for mustache#render(template, view, partials)'));var s;return x.render(t,e,n,r)},w.escape=function(t){return String(t).replace(/[&<>"'`=\/]/g,(function(t){return h[t]}))},w.Scanner=v,w.Context=b,w.Writer=_;var y=w,k=n(2485),I=n.n(k);const L=Drupal.t("Frontpage",{},{context:"Global navigation mobile menu top level"}),S=Drupal.t("Open submenu:",{},{context:"Mobile navigation menu prefix"}),E=Drupal.t("Open parent menu:",{},{context:"Mobile navigation menu prefix"});function A(){return this.sub_tree?.length>0}function O(){let t;try{t=new URL(this.url).pathname}catch(e){t=this.url}return!this.external&&this.url&&t===window.location.pathname}function P(){return!!this.active}function C(){return!!this.inPath}function j(){return!!this.is_injected}function T(){return{external:this.attributes["data-external"]||this.external||!1,protocol:this.attributes["data-protocol"]||!1}}function D(){return!!this.attributes?.lang}function R(){return!!this.external&&(R.ICONS[this.attributes["data-protocol"]]||R.ICONS.external)}Array.prototype.findRecursive=function(t,e){if(!e)throw new Error("findRecursive requires parameter `childrenPropertyName`");let n=[];n=this;const r=this.find(t),i=this.filter((t=>t[e]));if(r)return r;if(i.length){const n=[];return i.forEach((t=>{n.push(...t[e])})),n.findRecursive(t,e)}},R.ICONS={mailto:{class:"link__type link__type--mailto",text:Drupal.t("Link opens default mail program",{},{context:"Explanation for screen-reader software that the icon visible next to this link means that the link opens default mail program."})},tel:{class:"link__type link__type--tel",text:Drupal.t("Link starts a phone call",{},{context:"Explanation for screen-reader software that the icon visible next to this link means that the link starts a phone call."})},external:{class:"link__type link__type--external",text:Drupal.t("Link leads to external service",{},{context:"Explanation for screen-reader software that the icon visible next to this link means that the link leads to an external service."})}};var H={compileTemplates(){this.templates={panel:`\n {{#panels}}\n
\n
\n {{#back}}\n \n {{/back}}\n {{name}}{{#externalLinkIcon}} {{/externalLinkIcon}}\n {{>sub_tree}}\n
\n ${document.querySelector(".js-mmenu__footer")?.outerHTML}\n
\n {{/panels}}\n\n {{^panels}}\n
\n \n
\n {{/panels}}\n `,list:'\n \n '}},menu:null,templates:null,SCROLL_TRESHOLD:100,size:10,running:!1,data:null,currentIndex:0,cacheKey:"hdbt-mobile-menu",enableCache:!1,selectors:{container:"#mmenu",rootId:"mmenu__panels",forward:"mmenu__forward",back:"mmenu__back"},getAPIUrl(){const t=new URL(drupalSettings?.helfi_navigation?.links?.api);return t.searchParams.set("_format","json"),t.searchParams.set("max-depth",drupalSettings?.menu_depth),t.toString()},getRoot(){return document.getElementById(this.selectors.rootId)},sortPanelsByPath(){const t=[],e=this.data,n=e.findRecursive((t=>O.call(t)),"sub_tree");let r=n?.sub_tree?.length?n.id:n?.parentId;for(;r;){e.findRecursive((({id:e,url:n,name:i,sub_tree:s,parentId:a,inPath:o,active:l})=>e===r&&(t.push({sub_tree:s,name:i,url:n,parentId:a,inPath:o,active:l}),r=a,!0)),"sub_tree")||(r=void 0)}t.push({sub_tree:e,inPath:!0}),t.reverse(),this.currentIndex=t.length-1,this.content=[...t]},content:[],getView(t){return this.content.map(((e,n)=>({...e,name:e?.name||L,url:e.url||drupalSettings.helfi_navigation.links.canonical,button:A,isActive:P,isInPath:C,isInjected:j,externalLinkAttributes:T,hasLang:D,externalLinkIcon:R,back:n>0&&(this.content.at(n-1)?.name??L),openSubMenuTranslation:S,openParentMenuTranslation:E,panel_class:I()({mmenu__panel:!0,"mmenu__panel--visible":!0,"mmenu__panel--current":n===this.currentIndex,"mmenu__panel--visible-right":"start"===t&&n>this.currentIndex||"up"===t&&n>=this.currentIndex||"down"===t&&n>this.currentIndex+1,"mmenu__panel--visible-left":"up"===t&&ne===t));if(!e)throw new Error(`ID mismatch in menu items${t}`);this.currentIndex=this.currentIndex+1=0?this.currentIndex-1:this.currentIndex,this.render("down"))},render(t){const e=this.getRoot();if(e.innerHTML=y.render(this.templates.panel,{panels:this.getView(t)},{sub_tree:this.templates.list}),"load"===t)return;const n=[...e.querySelectorAll(".mmenu__panel")],r=n.at(this.currentIndex);e.parentElement.scrollTop>this.SCROLL_TRESHOLD&&this.currentIndex>0&&r.querySelector(".mmenu__back").scrollIntoView({block:"start",behaviour:"smooth"}),setTimeout((()=>{switch(r.classList.remove("mmenu__panel--visible-right","mmenu__panel--visible-left"),t){case"up":n.at(this.currentIndex-1).classList.add("mmenu__panel--visible-left");break;case"down":n.at(this.currentIndex+1).classList.add("mmenu__panel--visible-right")}setTimeout((()=>{n.forEach((t=>{t.classList.contains("mmenu__panel--current")||(t.style.visibility="hidden")}))}),200)}),10)},async load(){const t=await fetch(this.getAPIUrl()),e=await t.json(),n=Object.getOwnPropertyNames(e);if(!n.length)throw new Error("No instances found in data",e);const r=n.map((t=>{const n=e[t].menu_tree[0];return n.parentId="",n})),i=r.findRecursive((t=>O.call(t)),"sub_tree");i&&(i.active=!0,i.inPath=!0);let s=i?.parentId;for(;s;){r.findRecursive((t=>t.id===s&&(s=t.parentId,t.inPath=!0,!0)),"sub_tree")||(s=void 0)}this.data=r},async start(){const t=document.querySelector(this.selectors.container);if(!this.getRoot()||!t)throw new Error("Panel root not found");t.classList.add("mmenu--visible"),this.render("load");try{await this.load()}catch(t){return console.error("Unable to load menu API, using fallback menu instead",t),void this.enableFallback()}this.sortPanelsByPath(),this.render("start"),this.getRoot().addEventListener("click",(t=>{const{target:{classList:e,value:n,parentElement:r}}=t;t.stopImmediatePropagation(),e&&e.contains(this.selectors.forward)?this.up(n):(e&&e.contains(this.selectors.back)||r?.classList&&r?.classList.contains(this.selectors.back))&&this.down()}))},isOpen(){return"#menu"===window.location.hash||"true"===this.toggleButton.getAttribute("aria-expanded")},disableFallback(){this.menu.dataset.js=!0},enableFallback(){this.menu.dataset.target="false",this.getRoot().innerHTML="",delete this.menu.dataset.js,window.location.hash="#menu"},close(){this.toggleButton.setAttribute("aria-expanded","false"),this.menu.dataset.target="false",this.onClose&&this.onClose()},open(){this.menu.dataset.target="true",this.toggleButton.setAttribute("aria-expanded","true"),this.onOpen&&this.onOpen()},toggle(){this.isOpen()?this.close():this.open(),this.toggleButton.focus()},init({onOpen:t,onClose:e}){if(this.running)return void console.warn("MobilePanel already initiated. Is it include more than once?");if(this.onOpen=t,this.onClose=e,this.toggleButton=document.querySelector(".js-menu-toggle-button"),!this.toggleButton)throw new Error("No toggle button for JS menu.");if(this.menu=document.querySelector("#menu"),!this.menu)return void console.error("Panel not present in DOM. Cannot start JS mobile menu");this.disableFallback(),document.addEventListener("keydown",(t=>{"Escape"===t.key&&this.isOpen()&&(this.close(),this.toggleButton.focus())}));const n=()=>{this.compileTemplates(),this.toggleButton.removeEventListener("click",n),this.start()};this.toggleButton.addEventListener("click",n),this.toggleButton.addEventListener("click",(()=>this.toggle())),this.isOpen()&&(window.location.hash="",n(),this.open()),this.running=!0}}},9296:function(t){class e{constructor(){this.HASH_ID=null,this.buttonSelector=null,this.buttonInstance=null,this.running=!1,this.targetNode=null,this.onOpen=null}isOpen(){return window.location.hash===this.HASH_ID||"true"===this.targetNode.dataset.target}close(){this.running&&(this.buttonInstance.setAttribute("aria-expanded","false"),this.targetNode.dataset.target="false",this.onClose&&this.onClose())}open(){this.running&&(this.buttonInstance.setAttribute("aria-expanded","true"),this.targetNode.dataset.target="true",this.onOpen&&this.onOpen())}toggle(){this.isOpen()?this.close():this.open(),this.buttonInstance.focus()}addListeners(){document.addEventListener("keydown",(t=>{"Escape"===t.key&&this.isOpen()&&(this.close(),this.buttonInstance.focus())})),this.buttonInstance.addEventListener("click",(()=>{this.toggle()}))}init({name:t,buttonSelector:e,targetSelector:n,onOpen:r,onClose:i}){if(this.name=t,this.buttonSelector=e,this.buttonInstance=document.querySelector(this.buttonSelector),!this.buttonInstance)return this.running=!1,void console.warn(`${t} button missing. Looking for ${this.buttonSelector}`);if(this.running)console.warn(`${t} already initiated. Is it included more than once?`);else{if(this.HASH_ID=n,this.onOpen=r,this.onClose=i,this.targetNode=document.querySelector(this.HASH_ID),!this.targetNode)throw new Error(`${t} target node missing. Looking for ${this.HASH_ID}`);this.targetNode.dataset.js=!0,this.addListeners(),this.running=!0}}}t.exports=()=>new e},3628:function(t){const e=["#chat-leijuke-wrapper",".si-toggle-container",".cx-theme-helsinki-blue",".aca--button--desktop, .aca--button--mobile, .aca--widget--mobile, .aca--widget--desktop, #aca--widget-button-close","#telia-ace-leijuke",".humany-trigger, .humany-widget","#ed11y-panel","#sliding-popup"],n=()=>{document.querySelectorAll(e.join(",")).forEach((t=>{t.dataset.cssmenuHide=!0}))},r=()=>{document.querySelectorAll(e.join(",")).forEach((t=>{delete t.dataset.cssmenuHide}))};t.exports={setHide:t=>{(!0===t?n:r)()},close:n,open:r,HIDE_SELECTORS:e}},2485:function(t,e){var n;!function(){"use strict";var r={}.hasOwnProperty;function i(){for(var t=[],e=0;e{const e={},n=drupalSettings.hdbt.global_menu?i.A:void 0;drupalSettings.hdbt.profile_dropdown&&(e.ProfileDropdown="profile"),drupalSettings.hdbt.search_dropdown&&(e.SearchDropdown="search"),drupalSettings.hdbt.otherlangs_dropdown&&(e.OtherLangsDropdown="otherlangs"),n||(e.CssMenuDropdownDropdown="cssmenu");const s=e,a=Object.keys(s);a.forEach((e=>{const n=s[e];s[e]=r()(),s[e].init({name:`${n} dropdown`,buttonSelector:`.js-${n}-button`,targetSelector:`#${n}`,onOpen:()=>{a.forEach((t=>{t!==e&&s[t].close()})),Object.keys(i.A).length&&i.A.close(),(0,t.close)(),"SearchDropdown"===e&&window.setTimeout((()=>document.querySelector('.header-search-wrapper input[type="search"]')?.focus()),10)},onClose:t.open})})),Object.keys(i.A).length&&i.A.init({onOpen:()=>{a.forEach((t=>{s[t].close()})),(0,t.close)()},onClose:t.open});const o=t=>{if(t.touches?.length>1)return!0;const e=t.target.closest(".mmenu__panel--current, .nav-toggle-dropdown__content");var n;return window.matchMedia("(max-width: 768px)").matches&&(a.some((t=>s[t].dataset&&s[t].isOpen()))||Object.keys(i.A).length&&i.A.isOpen())&&(!t.target.closest(".nav-toggle-dropdown")||e&&!((n=e).scrollWidth>n.clientWidth||n.scrollHeight>n.clientHeight))?(t.preventDefault(),t.stopPropagation(),!1):void 0};document.addEventListener("click",(({target:e})=>{!e.closest(".desktop-menu, .header-top")&&e.closest(".header")||(a.forEach((t=>{s[t].close()})),Object.keys(i.A).length&&i.A.close(),(0,t.open)())}));const l=document.querySelector("body");l.addEventListener("wheel",o,{passive:!1}),l.addEventListener("scroll",o,{passive:!1}),l.addEventListener("touchmove",o,{passive:!1})})()}()}(); \ No newline at end of file diff --git a/src/js/nav-global/menu.js b/src/js/nav-global/menu.js index 5280a4d86..914bcb429 100644 --- a/src/js/nav-global/menu.js +++ b/src/js/nav-global/menu.js @@ -563,7 +563,7 @@ const MobilePanel = { * Close menu on Escape button click if it is open. */ document.addEventListener('keydown', (e) => { - if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) && this.isOpen()) { + if (e.key === 'Escape' && this.isOpen()) { this.close(); this.toggleButton.focus(); } diff --git a/src/js/nav-toggle/nav-toggle-dropdown.js b/src/js/nav-toggle/nav-toggle-dropdown.js index 87b1f8341..1dbb13c57 100644 --- a/src/js/nav-toggle/nav-toggle-dropdown.js +++ b/src/js/nav-toggle/nav-toggle-dropdown.js @@ -44,7 +44,7 @@ class NavToggleDropdown { addListeners() { // Close menu on ESC document.addEventListener('keydown', (e) => { - if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) && this.isOpen()) { + if (e.key === 'Escape' && this.isOpen()) { this.close(); this.buttonInstance.focus(); }