tiny-popup-menu - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/tiny-popup-menu.js

 /*!
  * tiny-popup-menu - v1.0.0
  * https://github.com/GastonZalba/tiny-popup-menu#readme
- * Built: Fri Sep 01 2023 10:39:40 GMT-0300 (Argentina Standard Time)
+ * Built: Fri Sep 01 2023 12:08:18 GMT-0300 (Argentina Standard Time)
 */
@@ -175,4 +175,6 @@ (function (global, factory) {
               if (options.event.currentTarget === this._toggler) {
-                  options.event.preventDefault();
-                  options.event.stopPropagation();
+                  if (options.stopClick) {
+                      options.event.preventDefault();
+                      options.event.stopPropagation();
+                  }
                   return;
@@ -202,4 +204,6 @@ }
           this.emit('open');
-          event.preventDefault();
-          event.stopPropagation();
+          if (options.stopClick) {
+              event.preventDefault();
+              event.stopPropagation();
+          }
       }
@@ -337,3 +341,4 @@ /**
               },
-              menuItems: []
+              menuItems: [],
+              stopClick: true
           };
@@ -340,0 +345,0 @@ return deepObjectAssign({}, defaultOptions, this._instanceOptions || {}, options || {});

dist/tiny-popup-menu.min.js

 /*!
  * tiny-popup-menu - v1.0.0
  * https://github.com/GastonZalba/tiny-popup-menu#readme
- * Built: Fri Sep 01 2023 10:39:40 GMT-0300 (Argentina Standard Time)
+ * Built: Fri Sep 01 2023 12:08:18 GMT-0300 (Argentina Standard Time)
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).TinyPopupMenu=e()}(this,(function(){"use strict";var t={exports:{}};function e(){}e.prototype={on:function(t,e,n){var s=this.e||(this.e={});return(s[t]||(s[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var s=this;function i(){s.off(t,i),e.apply(n,arguments)}return i._=e,this.on(t,i,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),s=0,i=n.length;s<i;s++)n[s].fn.apply(n[s].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),s=n[t],i=[];if(s&&e)for(var o=0,r=s.length;o<r;o++)s[o].fn!==e&&s[o].fn._!==e&&i.push(s[o]);return i.length?n[t]=i:delete n[t],this}},t.exports=e;var n=t.exports.TinyEmitter=e;function s(t,e={},...n){if("function"==typeof t)return t(e,n);const s=null===t?new DocumentFragment:document.createElement(t);Object.entries(e||{}).forEach((([t,e])=>{void 0!==typeof e&&null!=e&&(t.startsWith("on")&&t.toLowerCase()in window?s.addEventListener(t.toLowerCase().substr(2),e):"className"===t?s.setAttribute("class",e.toString()):"htmlFor"===t?s.setAttribute("for",e.toString()):s.setAttribute(t,e.toString()))}));for(const t of n)t&&(Array.isArray(t)?s.append(...t):void 0===t.nodeType?s.innerHTML+=t:s.appendChild(t));return s}const i="popup-menu",o=i+"--container",r=i+"--active",a=i+"--show-arrow",c=i+"--show-arrow-top",l=i+"--show-arrow-bottom",h=i+"--item",u=i+"--item-separator";let p=1;const d=(t,...e)=>(e.forEach((e=>{Object.keys(e).forEach((n=>{const s=e[n],i=t[n];t[n]=i&&s&&"object"==typeof i&&"object"==typeof s&&!Array.isArray(i)?d(i,s):s}))})),t);class f extends n{constructor(t=null){super(),this._isOpen=!1,this._containerMenu=s("div",{id:`${i}-${p}`}),this._instanceOptions=this._parseOptions(t),p++}open(t){if(this._isOpen&&(this.close(),t.event.currentTarget===this._toggler))return t.event.preventDefault(),void t.event.stopPropagation();this._options=this._parseOptions(t);const{event:e,menuItems:n,autoClose:i}=this._options;this._toggler=e.currentTarget,this._menuItemsList=n.map((t=>"-"===t?s("span",{className:u}):s("div",{className:h+" "+(t.className||""),onClick:t.callback?e=>{t.callback(e),i&&this.close()}:null,id:t.id,style:t.style},t.content))),this._isOpen=!0,this.updatePosition(),this.addEventListeners(),this.emit("open"),e.preventDefault(),e.stopPropagation()}close(){this._containerMenu.innerHTML="",this._containerMenu.remove(),this._toggler.classList.remove(r),this._isOpen=!1,this.removeEventListeners(),this.emit("close")}updatePosition(t=!0){if(!this._isOpen)return;const{offset:e,className:n,arrow:c,position:l,margin:h}=this._options;this._containerMenu.style.position="fixed",this._containerMenu.className=n,this._containerMenu.classList.add(i),c&&this._containerMenu.classList.add(a),this._containerMenu.innerHTML="",this._containerMenu.append(s("div",{className:o},...this._menuItemsList)),document.body.append(this._containerMenu);const u=this._toggler.getBoundingClientRect(),p=this._toggler.offsetHeight,d=this._toggler.offsetWidth,f=(null==e?void 0:e.x)||0,m=(null==e?void 0:e.y)||0,_=this._containerMenu.offsetHeight,v=this._containerMenu.offsetWidth,g=(()=>{if("top"===l){if(u.top+_+m+h<=0)return"bottom"}else if("bottom"===l&&u.top+_+m+p+h>=document.documentElement.scrollHeight)return"top";return l})();let y=0,L=0;switch(g){case"bottom":y=m+p+h,L=-v/2+d/2;break;case"top":y=-_-h,L=-v/2+d/2}const b=window.innerWidth,w=u.left+f+L;let M=0;w<0?M=0-w+h:w+v>b&&(M=b-(w+v)-h),this._containerMenu.style.left=w+M+"px",this._containerMenu.style.top=u.top+y+"px",this._toggler.classList.add(r),c&&(this._containerMenu.style.setProperty("--ofx",`${M+5}px`),this._evaluateArrowPosition(g)),t||this.emit("updateposition")}addToggler(t,e={},n="click"){"contextmenu"===n?t.addEventListener("contextmenu",(t=>this.open(Object.assign(Object.assign({},e),{event:t})))):t.addEventListener("click",(t=>this.open(Object.assign(Object.assign({},e),{event:t}))))}_parseOptions(t){const e={position:"bottom",className:"",autoClose:!0,arrow:!0,margin:!("arrow"in(t||{}))||t.arrow?10:2,offset:{x:0,y:0},menuItems:[]};return d({},e,this._instanceOptions||{},t||{})}_evaluateArrowPosition(t){let e="";switch(t){case"bottom":e=c;break;case"top":e=l}this._containerMenu.classList.add(e)}addEventListeners(){this._closeListener=t=>{this._containerMenu.contains(t.target)||this.close()},this._resizeListener=()=>{this._isOpen&&this.updatePosition(!1)},document.addEventListener("click",this._closeListener),window.addEventListener("resize",this._resizeListener)}removeEventListeners(){document.removeEventListener("click",this._closeListener),window.removeEventListener("resize",this._resizeListener)}}var m=Object.freeze({__proto__:null,default:f});return Object.assign(f,m),f}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).TinyPopupMenu=e()}(this,(function(){"use strict";var t={exports:{}};function e(){}e.prototype={on:function(t,e,n){var s=this.e||(this.e={});return(s[t]||(s[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var s=this;function i(){s.off(t,i),e.apply(n,arguments)}return i._=e,this.on(t,i,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),s=0,i=n.length;s<i;s++)n[s].fn.apply(n[s].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),s=n[t],i=[];if(s&&e)for(var o=0,r=s.length;o<r;o++)s[o].fn!==e&&s[o].fn._!==e&&i.push(s[o]);return i.length?n[t]=i:delete n[t],this}},t.exports=e;var n=t.exports.TinyEmitter=e;function s(t,e={},...n){if("function"==typeof t)return t(e,n);const s=null===t?new DocumentFragment:document.createElement(t);Object.entries(e||{}).forEach((([t,e])=>{void 0!==typeof e&&null!=e&&(t.startsWith("on")&&t.toLowerCase()in window?s.addEventListener(t.toLowerCase().substr(2),e):"className"===t?s.setAttribute("class",e.toString()):"htmlFor"===t?s.setAttribute("for",e.toString()):s.setAttribute(t,e.toString()))}));for(const t of n)t&&(Array.isArray(t)?s.append(...t):void 0===t.nodeType?s.innerHTML+=t:s.appendChild(t));return s}const i="popup-menu",o=i+"--container",r=i+"--active",a=i+"--show-arrow",c=i+"--show-arrow-top",l=i+"--show-arrow-bottom",h=i+"--item",u=i+"--item-separator";let p=1;const d=(t,...e)=>(e.forEach((e=>{Object.keys(e).forEach((n=>{const s=e[n],i=t[n];t[n]=i&&s&&"object"==typeof i&&"object"==typeof s&&!Array.isArray(i)?d(i,s):s}))})),t);class f extends n{constructor(t=null){super(),this._isOpen=!1,this._containerMenu=s("div",{id:`${i}-${p}`}),this._instanceOptions=this._parseOptions(t),p++}open(t){if(this._isOpen&&(this.close(),t.event.currentTarget===this._toggler))return void(t.stopClick&&(t.event.preventDefault(),t.event.stopPropagation()));this._options=this._parseOptions(t);const{event:e,menuItems:n,autoClose:i}=this._options;this._toggler=e.currentTarget,this._menuItemsList=n.map((t=>"-"===t?s("span",{className:u}):s("div",{className:h+" "+(t.className||""),onClick:t.callback?e=>{t.callback(e),i&&this.close()}:null,id:t.id,style:t.style},t.content))),this._isOpen=!0,this.updatePosition(),this.addEventListeners(),this.emit("open"),t.stopClick&&(e.preventDefault(),e.stopPropagation())}close(){this._containerMenu.innerHTML="",this._containerMenu.remove(),this._toggler.classList.remove(r),this._isOpen=!1,this.removeEventListeners(),this.emit("close")}updatePosition(t=!0){if(!this._isOpen)return;const{offset:e,className:n,arrow:c,position:l,margin:h}=this._options;this._containerMenu.style.position="fixed",this._containerMenu.className=n,this._containerMenu.classList.add(i),c&&this._containerMenu.classList.add(a),this._containerMenu.innerHTML="",this._containerMenu.append(s("div",{className:o},...this._menuItemsList)),document.body.append(this._containerMenu);const u=this._toggler.getBoundingClientRect(),p=this._toggler.offsetHeight,d=this._toggler.offsetWidth,f=(null==e?void 0:e.x)||0,m=(null==e?void 0:e.y)||0,_=this._containerMenu.offsetHeight,v=this._containerMenu.offsetWidth,g=(()=>{if("top"===l){if(u.top+_+m+h<=0)return"bottom"}else if("bottom"===l&&u.top+_+m+p+h>=document.documentElement.scrollHeight)return"top";return l})();let y=0,L=0;switch(g){case"bottom":y=m+p+h,L=-v/2+d/2;break;case"top":y=-_-h,L=-v/2+d/2}const b=window.innerWidth,w=u.left+f+L;let M=0;w<0?M=0-w+h:w+v>b&&(M=b-(w+v)-h),this._containerMenu.style.left=w+M+"px",this._containerMenu.style.top=u.top+y+"px",this._toggler.classList.add(r),c&&(this._containerMenu.style.setProperty("--ofx",`${M+5}px`),this._evaluateArrowPosition(g)),t||this.emit("updateposition")}addToggler(t,e={},n="click"){"contextmenu"===n?t.addEventListener("contextmenu",(t=>this.open(Object.assign(Object.assign({},e),{event:t})))):t.addEventListener("click",(t=>this.open(Object.assign(Object.assign({},e),{event:t}))))}_parseOptions(t){const e={position:"bottom",className:"",autoClose:!0,arrow:!0,margin:!("arrow"in(t||{}))||t.arrow?10:2,offset:{x:0,y:0},menuItems:[],stopClick:!0};return d({},e,this._instanceOptions||{},t||{})}_evaluateArrowPosition(t){let e="";switch(t){case"bottom":e=c;break;case"top":e=l}this._containerMenu.classList.add(e)}addEventListeners(){this._closeListener=t=>{this._containerMenu.contains(t.target)||this.close()},this._resizeListener=()=>{this._isOpen&&this.updatePosition(!1)},document.addEventListener("click",this._closeListener),window.addEventListener("resize",this._resizeListener)}removeEventListeners(){document.removeEventListener("click",this._closeListener),window.removeEventListener("resize",this._resizeListener)}}var m=Object.freeze({__proto__:null,default:f});return Object.assign(f,m),f}));
 //# sourceMappingURL=tiny-popup-menu.min.js.map

lib/tiny-popup-menu.d.ts

@@ -101,2 +101,6 @@ import { TinyEmitter } from 'tiny-emitter';
     } | '-'>;
+    /**
+     * Prevent event propagation
+     */
+    stopClick?: boolean;
 }
@@ -103,0 +107,0 @@ export interface OpenOptions extends Options {

lib/tiny-popup-menu.js

 /*!
  * tiny-popup-menu - v1.0.0
  * https://github.com/GastonZalba/tiny-popup-menu#readme
- * Built: Fri Sep 01 2023 10:39:45 GMT-0300 (Argentina Standard Time)
+ * Built: Fri Sep 01 2023 12:08:35 GMT-0300 (Argentina Standard Time)
 */
@@ -102,4 +102,6 @@ import { TinyEmitter } from 'tiny-emitter';
             if (options.event.currentTarget === this._toggler) {
-                options.event.preventDefault();
-                options.event.stopPropagation();
+                if (options.stopClick) {
+                    options.event.preventDefault();
+                    options.event.stopPropagation();
+                }
                 return;
@@ -129,4 +131,6 @@ }
         this.emit('open');
-        event.preventDefault();
-        event.stopPropagation();
+        if (options.stopClick) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     }
@@ -264,3 +268,4 @@ /**
             },
-            menuItems: []
+            menuItems: [],
+            stopClick: true
         };
@@ -267,0 +272,0 @@ return deepObjectAssign({}, defaultOptions, this._instanceOptions || {}, options || {});

package.json

 {
   "name": "tiny-popup-menu",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Tiny Popup menu",
@@ -5,0 +5,0 @@ "main": "dist/tiny-popup-menu.js",

README.md

@@ -17,3 +17,3 @@ # Tiny Popup Menu
 ## Example
-See an online example/playground [here](https://raw.githack.com/GastonZalba/tiny-popup-menu/v1.0.0/examples/basic.html).
+See an online example/playground [here](https://raw.githack.com/GastonZalba/tiny-popup-menu/v1.0.1/examples/basic.html).
 
@@ -20,0 +20,0 @@ ## Usage

No alert changes

Improved metrics

Total package byte prevSize

197740

increased by17.1%

Number of package files

21

increased by10.53%

Lines of code

995

increased by14.37%

No dependency changes