@paroicms/public-menu-plugin 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/public-menu-plugin",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Public menu plugin for ParoiCMS",
   "keywords": [
     "paroicms",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@paroicms/public-anywhere-lib": "0.8.3",
-    "@paroicms/public-server-lib": "0.16.3",
+    "@paroicms/public-server-lib": "0.16.4",
     "@types/node": "~20.14.8",
     "@types/micromodal": "~0.3.5",
     "micromodal": "~0.4.10",

package/public-front/dist/public-front-plugin.mjs

@@ -1 +1 @@
-import{delegateEvents as q,insert as P,template as L}from"https://esm.sh/solid-js@1.9.3/web";function K(n){const t=n.dataset.activateMenuItems?.trim();if(!t)return;const{id:i,parents:e}=JSON.parse(t),o=new Set(e);o.add(i);const a=n.querySelectorAll("[data-menu-item-id]");for(const r of a){const l=r.dataset.menuItemId;l!==void 0&&o.has(l)&&r.classList.add("active")}}function D(n,t){for(var i=0;i<t.length;i++){var e=t[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(n,e.key,e)}}function m(n){return function(t){if(Array.isArray(t))return f(t)}(n)||function(t){if(typeof Symbol<"u"&&Symbol.iterator in Object(t))return Array.from(t)}(n)||function(t,i){if(t){if(typeof t=="string")return f(t,i);var e=Object.prototype.toString.call(t).slice(8,-1);if(e==="Object"&&t.constructor&&(e=t.constructor.name),e==="Map"||e==="Set")return Array.from(t);if(e==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return f(t,i)}}(n)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function f(n,t){(t==null||t>n.length)&&(t=n.length);for(var i=0,e=new Array(t);i<t;i++)e[i]=n[i];return e}var A,h,u,v,S,g=(A=["a[href]","area[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],h=function(){function n(e){var o=e.targetModal,a=e.triggers,r=a===void 0?[]:a,l=e.onShow,s=l===void 0?function(){}:l,d=e.onClose,c=d===void 0?function(){}:d,b=e.openTrigger,I=b===void 0?"data-micromodal-trigger":b,y=e.closeTrigger,T=y===void 0?"data-micromodal-close":y,p=e.openClass,B=p===void 0?"is-open":p,w=e.disableScroll,F=w!==void 0&&w,M=e.disableFocus,O=M!==void 0&&M,E=e.awaitCloseAnimation,x=E!==void 0&&E,k=e.awaitOpenAnimation,_=k!==void 0&&k,C=e.debugMode,j=C!==void 0&&C;(function(N,$){if(!(N instanceof $))throw new TypeError("Cannot call a class as a function")})(this,n),this.modal=document.getElementById(o),this.config={debugMode:j,disableScroll:F,openTrigger:I,closeTrigger:T,openClass:B,onShow:s,onClose:c,awaitCloseAnimation:x,awaitOpenAnimation:_,disableFocus:O},r.length>0&&this.registerTriggers.apply(this,m(r)),this.onClick=this.onClick.bind(this),this.onKeydown=this.onKeydown.bind(this)}var t,i;return t=n,(i=[{key:"registerTriggers",value:function(){for(var e=this,o=arguments.length,a=new Array(o),r=0;r<o;r++)a[r]=arguments[r];a.filter(Boolean).forEach((function(l){l.addEventListener("click",(function(s){return e.showModal(s)}))}))}},{key:"showModal",value:function(){var e=this,o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:null;if(this.activeElement=document.activeElement,this.modal.setAttribute("aria-hidden","false"),this.modal.classList.add(this.config.openClass),this.scrollBehaviour("disable"),this.addEventListeners(),this.config.awaitOpenAnimation){var a=function r(){e.modal.removeEventListener("animationend",r,!1),e.setFocusToFirstNode()};this.modal.addEventListener("animationend",a,!1)}else this.setFocusToFirstNode();this.config.onShow(this.modal,this.activeElement,o)}},{key:"closeModal",value:function(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:null,o=this.modal;if(this.modal.setAttribute("aria-hidden","true"),this.removeEventListeners(),this.scrollBehaviour("enable"),this.activeElement&&this.activeElement.focus&&this.activeElement.focus(),this.config.onClose(this.modal,this.activeElement,e),this.config.awaitCloseAnimation){var a=this.config.openClass;this.modal.addEventListener("animationend",(function r(){o.classList.remove(a),o.removeEventListener("animationend",r,!1)}),!1)}else o.classList.remove(this.config.openClass)}},{key:"closeModalById",value:function(e){this.modal=document.getElementById(e),this.modal&&this.closeModal()}},{key:"scrollBehaviour",value:function(e){if(this.config.disableScroll){var o=document.querySelector("body");switch(e){case"enable":Object.assign(o.style,{overflow:""});break;case"disable":Object.assign(o.style,{overflow:"hidden"})}}}},{key:"addEventListeners",value:function(){this.modal.addEventListener("touchstart",this.onClick),this.modal.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeydown)}},{key:"removeEventListeners",value:function(){this.modal.removeEventListener("touchstart",this.onClick),this.modal.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeydown)}},{key:"onClick",value:function(e){(e.target.hasAttribute(this.config.closeTrigger)||e.target.parentNode.hasAttribute(this.config.closeTrigger))&&(e.preventDefault(),e.stopPropagation(),this.closeModal(e))}},{key:"onKeydown",value:function(e){e.keyCode===27&&this.closeModal(e),e.keyCode===9&&this.retainFocus(e)}},{key:"getFocusableNodes",value:function(){var e=this.modal.querySelectorAll(A);return Array.apply(void 0,m(e))}},{key:"setFocusToFirstNode",value:function(){var e=this;if(!this.config.disableFocus){var o=this.getFocusableNodes();if(o.length!==0){var a=o.filter((function(r){return!r.hasAttribute(e.config.closeTrigger)}));a.length>0&&a[0].focus(),a.length===0&&o[0].focus()}}}},{key:"retainFocus",value:function(e){var o=this.getFocusableNodes();if(o.length!==0)if(o=o.filter((function(r){return r.offsetParent!==null})),this.modal.contains(document.activeElement)){var a=o.indexOf(document.activeElement);e.shiftKey&&a===0&&(o[o.length-1].focus(),e.preventDefault()),!e.shiftKey&&o.length>0&&a===o.length-1&&(o[0].focus(),e.preventDefault())}else o[0].focus()}}])&&D(t.prototype,i),n}(),u=null,v=function(n){if(!document.getElementById(n))return console.warn("MicroModal: ❗Seems like you have missed %c'".concat(n,"'"),"background-color: #f8f9fa;color: #50596c;font-weight: bold;","ID somewhere in your code. Refer example below to resolve it."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",'<div class="modal" id="'.concat(n,'"></div>')),!1},S=function(n,t){if(function(e){e.length<=0&&(console.warn("MicroModal: ❗Please specify at least one %c'micromodal-trigger'","background-color: #f8f9fa;color: #50596c;font-weight: bold;","data attribute."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",'<a href="#" data-micromodal-trigger="my-modal"></a>'))}(n),!t)return!0;for(var i in t)v(i);return!0},{init:function(n){var t=Object.assign({},{openTrigger:"data-micromodal-trigger"},n),i=m(document.querySelectorAll("[".concat(t.openTrigger,"]"))),e=function(r,l){var s=[];return r.forEach((function(d){var c=d.attributes[l].value;s[c]===void 0&&(s[c]=[]),s[c].push(d)})),s}(i,t.openTrigger);if(t.debugMode!==!0||S(i,e)!==!1)for(var o in e){var a=e[o];t.targetModal=o,t.triggers=m(a),u=new h(t)}},show:function(n,t){var i=t||{};i.targetModal=n,i.debugMode===!0&&v(n)===!1||(u&&u.removeEventListeners(),(u=new h(i)).showModal())},close:function(n){n?u.closeModalById(n):u.closeModal()}});typeof window<"u"&&(window.MicroModal=g);var H=L('<div class="modal micromodal-slide"id=mobileMenu><div class=modal__overlay tabindex=-1 data-micromodal-close><div class="modal__container MobileMenu"role=dialog><button type=button class="modal__close MobileMenu-closeBtn"data-micromodal-close>&times;'),z=L('<button class=MobileMenuBtn type=button><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor data-testid=IconBurger width=35 height=35><title>IconBurger</title><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z">');function W(n,t){const e=window.getComputedStyle(n).getPropertyValue("--siteAppMobileMenuMaxWidth");if(!window.matchMedia(`(max-width: ${e})`).matches)return;const a=document.querySelector('[data-mobile-menu="button"]');if(!a)return;g.init(),R(n);const r=(()=>{var s=H(),d=s.firstChild,c=d.firstChild;return c.firstChild,P(c,n,null),s})();n.style.display==="none"&&n.style.removeProperty("display"),document.body.appendChild(r);const l=(()=>{var s=z();return s.$$click=J,s})();a.appendChild(l)}function J(){g.show("mobileMenu")}function R(n){const t=document.querySelectorAll("[data-mobile-menu-part]");for(const i of t){const e=i.dataset.mobileMenuPart,o=i.dataset.mobileMenuAction!=="move",a=n.querySelector(`[data-inject="${e}"]`);a&&a.appendChild(o?i.cloneNode(!0):i)}}q(["click"]);document.addEventListener("DOMContentLoaded",(()=>{const n=document.documentElement.lang,t={mobileMenu:W},i=document.querySelectorAll("[data-effect]");for(const o of i){const a=o.dataset.effect;if(!a)continue;const r=t[a];r&&r(o,{language:n})}const e=document.querySelectorAll("[data-activate-menu-items]");for(const o of e)K(o)}));
+import{delegateEvents as q,template as L,insert as P}from"https://esm.sh/solid-js@1.9.3/web";function K(n){const t=n.dataset.activateMenuItems?.trim();if(!t)return;const{id:i,parents:e}=JSON.parse(t),o=new Set(e);o.add(i);const a=n.querySelectorAll("[data-menu-item-id]");for(const r of a){const l=r.dataset.menuItemId;l!==void 0&&o.has(l)&&r.classList.add("active")}}function D(n,t){for(var i=0;i<t.length;i++){var e=t[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(n,e.key,e)}}function m(n){return function(t){if(Array.isArray(t))return h(t)}(n)||function(t){if(typeof Symbol<"u"&&Symbol.iterator in Object(t))return Array.from(t)}(n)||function(t,i){if(t){if(typeof t=="string")return h(t,i);var e=Object.prototype.toString.call(t).slice(8,-1);if(e==="Object"&&t.constructor&&(e=t.constructor.name),e==="Map"||e==="Set")return Array.from(t);if(e==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return h(t,i)}}(n)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function h(n,t){(t==null||t>n.length)&&(t=n.length);for(var i=0,e=new Array(t);i<t;i++)e[i]=n[i];return e}var A,v,u,g,S,f=(A=["a[href]","area[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],v=function(){function n(e){var o=e.targetModal,a=e.triggers,r=a===void 0?[]:a,l=e.onShow,s=l===void 0?function(){}:l,d=e.onClose,c=d===void 0?function(){}:d,b=e.openTrigger,I=b===void 0?"data-micromodal-trigger":b,y=e.closeTrigger,T=y===void 0?"data-micromodal-close":y,p=e.openClass,B=p===void 0?"is-open":p,w=e.disableScroll,F=w!==void 0&&w,M=e.disableFocus,O=M!==void 0&&M,E=e.awaitCloseAnimation,x=E!==void 0&&E,k=e.awaitOpenAnimation,_=k!==void 0&&k,C=e.debugMode,j=C!==void 0&&C;(function(N,$){if(!(N instanceof $))throw new TypeError("Cannot call a class as a function")})(this,n),this.modal=document.getElementById(o),this.config={debugMode:j,disableScroll:F,openTrigger:I,closeTrigger:T,openClass:B,onShow:s,onClose:c,awaitCloseAnimation:x,awaitOpenAnimation:_,disableFocus:O},r.length>0&&this.registerTriggers.apply(this,m(r)),this.onClick=this.onClick.bind(this),this.onKeydown=this.onKeydown.bind(this)}var t,i;return t=n,(i=[{key:"registerTriggers",value:function(){for(var e=this,o=arguments.length,a=new Array(o),r=0;r<o;r++)a[r]=arguments[r];a.filter(Boolean).forEach((function(l){l.addEventListener("click",(function(s){return e.showModal(s)}))}))}},{key:"showModal",value:function(){var e=this,o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:null;if(this.activeElement=document.activeElement,this.modal.setAttribute("aria-hidden","false"),this.modal.classList.add(this.config.openClass),this.scrollBehaviour("disable"),this.addEventListeners(),this.config.awaitOpenAnimation){var a=function r(){e.modal.removeEventListener("animationend",r,!1),e.setFocusToFirstNode()};this.modal.addEventListener("animationend",a,!1)}else this.setFocusToFirstNode();this.config.onShow(this.modal,this.activeElement,o)}},{key:"closeModal",value:function(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:null,o=this.modal;if(this.modal.setAttribute("aria-hidden","true"),this.removeEventListeners(),this.scrollBehaviour("enable"),this.activeElement&&this.activeElement.focus&&this.activeElement.focus(),this.config.onClose(this.modal,this.activeElement,e),this.config.awaitCloseAnimation){var a=this.config.openClass;this.modal.addEventListener("animationend",(function r(){o.classList.remove(a),o.removeEventListener("animationend",r,!1)}),!1)}else o.classList.remove(this.config.openClass)}},{key:"closeModalById",value:function(e){this.modal=document.getElementById(e),this.modal&&this.closeModal()}},{key:"scrollBehaviour",value:function(e){if(this.config.disableScroll){var o=document.querySelector("body");switch(e){case"enable":Object.assign(o.style,{overflow:""});break;case"disable":Object.assign(o.style,{overflow:"hidden"})}}}},{key:"addEventListeners",value:function(){this.modal.addEventListener("touchstart",this.onClick),this.modal.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeydown)}},{key:"removeEventListeners",value:function(){this.modal.removeEventListener("touchstart",this.onClick),this.modal.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeydown)}},{key:"onClick",value:function(e){(e.target.hasAttribute(this.config.closeTrigger)||e.target.parentNode.hasAttribute(this.config.closeTrigger))&&(e.preventDefault(),e.stopPropagation(),this.closeModal(e))}},{key:"onKeydown",value:function(e){e.keyCode===27&&this.closeModal(e),e.keyCode===9&&this.retainFocus(e)}},{key:"getFocusableNodes",value:function(){var e=this.modal.querySelectorAll(A);return Array.apply(void 0,m(e))}},{key:"setFocusToFirstNode",value:function(){var e=this;if(!this.config.disableFocus){var o=this.getFocusableNodes();if(o.length!==0){var a=o.filter((function(r){return!r.hasAttribute(e.config.closeTrigger)}));a.length>0&&a[0].focus(),a.length===0&&o[0].focus()}}}},{key:"retainFocus",value:function(e){var o=this.getFocusableNodes();if(o.length!==0)if(o=o.filter((function(r){return r.offsetParent!==null})),this.modal.contains(document.activeElement)){var a=o.indexOf(document.activeElement);e.shiftKey&&a===0&&(o[o.length-1].focus(),e.preventDefault()),!e.shiftKey&&o.length>0&&a===o.length-1&&(o[0].focus(),e.preventDefault())}else o[0].focus()}}])&&D(t.prototype,i),n}(),u=null,g=function(n){if(!document.getElementById(n))return console.warn("MicroModal: ❗Seems like you have missed %c'".concat(n,"'"),"background-color: #f8f9fa;color: #50596c;font-weight: bold;","ID somewhere in your code. Refer example below to resolve it."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",'<div class="modal" id="'.concat(n,'"></div>')),!1},S=function(n,t){if(function(e){e.length<=0&&(console.warn("MicroModal: ❗Please specify at least one %c'micromodal-trigger'","background-color: #f8f9fa;color: #50596c;font-weight: bold;","data attribute."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",'<a href="#" data-micromodal-trigger="my-modal"></a>'))}(n),!t)return!0;for(var i in t)g(i);return!0},{init:function(n){var t=Object.assign({},{openTrigger:"data-micromodal-trigger"},n),i=m(document.querySelectorAll("[".concat(t.openTrigger,"]"))),e=function(r,l){var s=[];return r.forEach((function(d){var c=d.attributes[l].value;s[c]===void 0&&(s[c]=[]),s[c].push(d)})),s}(i,t.openTrigger);if(t.debugMode!==!0||S(i,e)!==!1)for(var o in e){var a=e[o];t.targetModal=o,t.triggers=m(a),u=new v(t)}},show:function(n,t){var i=t||{};i.targetModal=n,i.debugMode===!0&&g(n)===!1||(u&&u.removeEventListeners(),(u=new v(i)).showModal())},close:function(n){n?u.closeModalById(n):u.closeModal()}});typeof window<"u"&&(window.MicroModal=f);var H=L('<div class="modal micromodal-slide"id=mobileMenu><div class=modal__overlay tabindex=-1 data-micromodal-close><div class="modal__container MobileMenu"role=dialog><button type=button class="modal__close MobileMenu-closeBtn"data-micromodal-close>&times;'),z=L('<button class=MobileMenuBtn type=button><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor data-testid=IconBurger width=35 height=35><title>IconBurger</title><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z">');function W(n,t){const e=window.getComputedStyle(n).getPropertyValue("--siteAppMobileMenuMaxWidth");if(!window.matchMedia(`(max-width: ${e})`).matches)return;const a=document.querySelector('[data-mobile-menu="button"]');if(!a)return;f.init(),R(n);const r=(()=>{var s=H(),d=s.firstChild,c=d.firstChild;return c.firstChild,P(c,n,null),s})();n.style.display==="none"&&n.style.removeProperty("display"),document.body.appendChild(r);const l=(()=>{var s=z();return s.$$click=J,s})();a.appendChild(l),window.mobileMenuHandler={closeMenu:()=>f.close("mobileMenu")}}function J(){f.show("mobileMenu")}function R(n){const t=document.querySelectorAll("[data-mobile-menu-part]");for(const i of t){const e=i.dataset.mobileMenuPart,o=i.dataset.mobileMenuAction!=="move",a=n.querySelector(`[data-inject="${e}"]`);a&&a.appendChild(o?i.cloneNode(!0):i)}}q(["click"]);document.addEventListener("DOMContentLoaded",(()=>{const n=document.documentElement.lang,t={mobileMenu:W},i=document.querySelectorAll("[data-effect]");for(const o of i){const a=o.dataset.effect;if(!a)continue;const r=t[a];r&&r(o,{language:n})}const e=document.querySelectorAll("[data-activate-menu-items]");for(const o of e)K(o)}));