@paroicms/public-menu-plugin 0.6.1 → 0.7.0

package/backend/dist/plugin.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const node_path_1 = require("node:path");
 const data_formatters_lib_1 = require("@paroi/data-formatters-lib");
 const public_server_lib_1 = require("@paroicms/public-server-lib");
+const node_path_1 = require("node:path");
 const projectDir = (0, node_path_1.dirname)(__dirname);
 const packageDir = (0, node_path_1.dirname)(projectDir);
 const version = (0, data_formatters_lib_1.strVal)(require((0, node_path_1.join)(packageDir, "package.json")).version);
@@ -11,7 +11,7 @@ const plugin = {
     slug: "public-menu",
     async siteInit(service) {
         service.setPublicAssetsDirectory((0, node_path_1.join)(packageDir, "public-front", "dist"));
-        service.addHeadTag(`<link rel="stylesheet" href="${(0, public_server_lib_1.escapeHtml)(`${service.pluginAssetsUrl}/style.css`)}">`, `<script type="module" src="${(0, public_server_lib_1.escapeHtml)(`${service.pluginAssetsUrl}/public-front-plugin.mjs`)}"></script>`);
+        service.addHeadTag(`<link rel="stylesheet" href="${(0, public_server_lib_1.escapeHtml)(`${service.pluginAssetsUrl}/public-front-plugin.css`)}">`, `<script type="module" src="${(0, public_server_lib_1.escapeHtml)(`${service.pluginAssetsUrl}/public-front-plugin.mjs`)}"></script>`);
     },
 };
 exports.default = plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/public-menu-plugin",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Public menu plugin for ParoiCMS",
   "keywords": [
     "paroicms",
@@ -34,9 +34,8 @@
   "devDependencies": {
     "@paroicms/public-anywhere-lib": "0.14.0",
     "@paroicms/public-server-lib": "0.22.1",
+    "@paroicms/tiny-modal": "0.1.0",
     "@types/node": "~22.10.7",
-    "@types/micromodal": "~0.3.5",
-    "micromodal": "~0.4.10",
     "rimraf": "~6.0.1",
     "sass": "~1.83.4",
     "solid-devtools": "~0.33.0",

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

@@ -0,0 +1 @@
+@charset "UTF-8";.TinyModal{background:transparent;border:none;margin:0;max-width:none;padding:0}.TinyModal::backdrop{background-color:transparent}.TinyModal-closeBtn{align-items:center;background-color:#bbb;border-radius:50%;cursor:pointer;display:flex;font-size:30px;font-weight:700;height:40px;justify-content:center;line-height:1;position:absolute;right:50px;top:10px;width:40px;z-index:2}.TinyModal-closeBtn:before{content:"×"}.TinyModal-closeBtn:hover,.TinyModal-closeBtn:focus{background-color:#888}.HiddenForTinyModal{display:none!important}.MobileMenu{height:100vh;padding:20px;max-height:100vh;max-width:500px;width:100vw;background-color:#fff}

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.4/web";function K(o){const t=o.dataset.activateMenuItems?.trim();if(!t)return;const{id:i,parents:e}=JSON.parse(t),n=new Set(e);n.add(i);const a=o.querySelectorAll("[data-menu-item-id]");for(const r of a){const l=r.dataset.menuItemId;l!==void 0&&n.has(l)&&r.classList.add("active")}}function D(o,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(o,e.key,e)}}function f(o){return function(t){if(Array.isArray(t))return h(t)}(o)||function(t){if(typeof Symbol<"u"&&Symbol.iterator in Object(t))return Array.from(t)}(o)||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)}}(o)||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(o,t){(t==null||t>o.length)&&(t=o.length);for(var i=0,e=new Array(t);i<t;i++)e[i]=o[i];return e}var A,g,u,v,S,m=(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^="-"])'],g=function(){function o(e){var n=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,o),this.modal=document.getElementById(n),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,f(r)),this.onClick=this.onClick.bind(this),this.onKeydown=this.onKeydown.bind(this)}var t,i;return t=o,(i=[{key:"registerTriggers",value:function(){for(var e=this,n=arguments.length,a=new Array(n),r=0;r<n;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,n=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,n)}},{key:"closeModal",value:function(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:null,n=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(){n.classList.remove(a),n.removeEventListener("animationend",r,!1)}),!1)}else n.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 n=document.querySelector("body");switch(e){case"enable":Object.assign(n.style,{overflow:""});break;case"disable":Object.assign(n.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,f(e))}},{key:"setFocusToFirstNode",value:function(){var e=this;if(!this.config.disableFocus){var n=this.getFocusableNodes();if(n.length!==0){var a=n.filter((function(r){return!r.hasAttribute(e.config.closeTrigger)}));a.length>0&&a[0].focus(),a.length===0&&n[0].focus()}}}},{key:"retainFocus",value:function(e){var n=this.getFocusableNodes();if(n.length!==0)if(n=n.filter((function(r){return r.offsetParent!==null})),this.modal.contains(document.activeElement)){var a=n.indexOf(document.activeElement);e.shiftKey&&a===0&&(n[n.length-1].focus(),e.preventDefault()),!e.shiftKey&&n.length>0&&a===n.length-1&&(n[0].focus(),e.preventDefault())}else n[0].focus()}}])&&D(t.prototype,i),o}(),u=null,v=function(o){if(!document.getElementById(o))return console.warn("MicroModal: ❗Seems like you have missed %c'".concat(o,"'"),"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(o,'"></div>')),!1},S=function(o,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>'))}(o),!t)return!0;for(var i in t)v(i);return!0},{init:function(o){var t=Object.assign({},{openTrigger:"data-micromodal-trigger"},o),i=f(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 n in e){var a=e[n];t.targetModal=n,t.triggers=f(a),u=new g(t)}},show:function(o,t){var i=t||{};i.targetModal=o,i.debugMode===!0&&v(o)===!1||(u&&u.removeEventListeners(),(u=new g(i)).showModal())},close:function(o){o?u.closeModalById(o):u.closeModal()}});typeof window<"u"&&(window.MicroModal=m);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(o,t){const e=window.getComputedStyle(o).getPropertyValue("--siteAppMobileMenuMaxWidth");if(!window.matchMedia(`(max-width: ${e})`).matches)return;const a=document.querySelector('[data-mobile-menu="button"]');if(!a)return;m.init(),R(o);const r=(()=>{var s=H(),d=s.firstChild,c=d.firstChild;return c.firstChild,P(c,o,null),s})();o.style.display==="none"&&o.style.removeProperty("display"),document.body.appendChild(r);const l=(()=>{var s=z();return s.$$click=J,s})();a.appendChild(l),window.mobileMenuHandler={closeMenu:()=>m.close("mobileMenu")}}function J(){m.show("mobileMenu")}function R(o){const t=document.querySelectorAll("[data-mobile-menu-part]");for(const i of t){const e=i.dataset.mobileMenuPart,n=i.dataset.mobileMenuAction!=="move",a=o.querySelector(`[data-inject="${e}"]`);a&&a.appendChild(n?i.cloneNode(!0):i)}}q(["click"]);document.addEventListener("DOMContentLoaded",(()=>{const o=document.documentElement.lang,t={mobileMenu:W},i=document.querySelectorAll("[data-effect]");for(const n of i){const a=n.dataset.effect;if(!a)continue;const r=t[a];r&&r(n,{language:o})}const e=document.querySelectorAll("[data-activate-menu-items]");for(const n of e)K(n)}));
+import{insert as M,template as p}from"https://esm.sh/solid-js@1.9.4/web";function y(t){const c=t.dataset.activateMenuItems?.trim();if(!c)return;const{id:s,parents:n}=JSON.parse(c),e=new Set(n);e.add(s);const o=t.querySelectorAll("[data-menu-item-id]");for(const i of o){const l=i.dataset.menuItemId;l!==void 0&&e.has(l)&&i.classList.add("active")}}function h({openButton:t,dialogContent:c}){const s=t?typeof t=="string"?document.querySelector(t):t:void 0,n=typeof c=="string"?document.querySelector(c):c;if(!n)return;n instanceof HTMLTemplateElement||n.classList.remove("HiddenForTinyModal");const e=document.createElement("dialog");e.classList.add("TinyModal");const o=document.createElement("button");o.classList.add("TinyModal-closeBtn"),e.appendChild(o);const i=document.createElement("div");i.classList.add("TinyModal-wrapper"),i.appendChild(n instanceof HTMLTemplateElement?n.content.cloneNode(!0):n),e.appendChild(i),document.body.appendChild(e);const l=new Map;function d(a,r){l.has(a)||l.set(a,[]),l.get(a)?.push(r)}function u(a){l.has(a)&&l.get(a)?.forEach((r=>r()))}function m(){e.showModal(),document.body.style.overflow="hidden",u("open")}function f(){e.close()}return s?.addEventListener("click",m),o.addEventListener("click",f),e.addEventListener("close",(()=>{document.body.style.overflow="",u("close")})),{open:m,close:f,on:d}}var v=p("<div class=MobileMenu>"),b=p('<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 g(t,c){const n=window.getComputedStyle(t).getPropertyValue("--siteAppMobileMenuMaxWidth");if(!window.matchMedia(`(max-width: ${n})`).matches)return;const o=document.querySelector('[data-mobile-menu="button"]');if(!o)return;E(t);const i=(()=>{var d=v();return M(d,t),d})();t.style.display==="none"&&t.style.removeProperty("display");const l=b();o.appendChild(l),h({openButton:l,dialogContent:i})}function E(t){const c=document.querySelectorAll("[data-mobile-menu-part]");for(const s of c){const n=s.dataset.mobileMenuPart,e=s.dataset.mobileMenuAction!=="move",o=t.querySelector(`[data-inject="${n}"]`);o&&o.appendChild(e?s.cloneNode(!0):s)}}document.addEventListener("DOMContentLoaded",(()=>{const t=document.documentElement.lang,c={mobileMenu:g},s=document.querySelectorAll("[data-effect]");for(const e of s){const o=e.dataset.effect;if(!o)continue;const i=c[o];i&&i(e,{language:t})}const n=document.querySelectorAll("[data-activate-menu-items]");for(const e of n)y(e)}));

package/public-front/dist/public-menu-plugin.css

@@ -1 +0,0 @@
-.modal{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif}.modal__overlay{background:#0009;inset:0;position:fixed;z-index:1001}.modal__container{background-color:#fff;border-radius:4px;box-sizing:border-box;max-height:100vh;max-width:500px;overflow-y:auto}.modal__header{align-items:center;display:flex;justify-content:space-between}.modal__title{box-sizing:border-box;color:#00449e;font-size:1.25rem;font-weight:600;line-height:1.25;margin-bottom:0;margin-top:0}.modal__close{background:transparent;border:0}.modal__header .modal__close:before{content:"✕"}.modal__content{color:#000c;line-height:1.5;width:100%}.modal__btn{backface-visibility:hidden;background-color:#e6e6e6;border-radius:.25rem;border-style:none;border-width:0;color:#000c;cursor:pointer;font-size:.875rem;line-height:1.15;margin:0;overflow:visible;padding:.5rem 1rem;text-transform:none;transform:translateZ(0);transition:transform .25s ease-out;will-change:transform}.modal__btn:focus,.modal__btn:hover{transform:scale(1.05)}.modal__btn-primary{background-color:#00449e;color:#fff}@keyframes mmfadeIn{0%{opacity:0}to{opacity:1}}@keyframes mmfadeOut{0%{opacity:1}to{opacity:0}}@keyframes mmslideIn{0%{transform:translateY(15%)}to{transform:translateY(0)}}@keyframes mmslideOut{0%{transform:translateY(0)}to{transform:translateY(-10%)}}.micromodal-slide{display:none}.micromodal-slide.is-open{display:block}.micromodal-slide[aria-hidden=false] .modal__overlay{animation:mmfadeIn .3s cubic-bezier(0,0,.2,1)}.micromodal-slide[aria-hidden=false] .modal__container{animation:mmslideIn .3s cubic-bezier(0,0,.2,1)}.micromodal-slide[aria-hidden=true] .modal__overlay{animation:mmfadeOut .3s cubic-bezier(0,0,.2,1)}.micromodal-slide[aria-hidden=true] .modal__container{animation:mmslideOut .3s cubic-bezier(0,0,.2,1)}.micromodal-slide .modal__container,.micromodal-slide .modal__overlay{will-change:transform}.MobileMenu{height:100%;padding:20px;position:relative;width:100%}.MobileMenu-closeBtn{display:block;font-size:32px;height:50px;position:absolute;right:10px;top:10px;width:50px}