New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

tiny-popup-menu

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tiny-popup-menu - npm Package Compare versions

Comparing version

to
1.0.0

/*!
* tiny-popup-menu - v1.0.0-beta
* tiny-popup-menu - v1.0.0
* https://github.com/GastonZalba/tiny-popup-menu#readme
* Built: Thu Aug 31 2023 21:14:38 GMT-0300 (Argentina Standard Time)
* Built: Fri Sep 01 2023 10:39:40 GMT-0300 (Argentina Standard Time)
*/

@@ -6,0 +6,0 @@ (function (global, factory) {

/*!
* tiny-popup-menu - v1.0.0-beta
* tiny-popup-menu - v1.0.0
* https://github.com/GastonZalba/tiny-popup-menu#readme
* Built: Thu Aug 31 2023 21:14:38 GMT-0300 (Argentina Standard Time)
* Built: Fri Sep 01 2023 10:39:40 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}));
//# sourceMappingURL=tiny-popup-menu.min.js.map
/*!
* tiny-popup-menu - v1.0.0-beta
* tiny-popup-menu - v1.0.0
* https://github.com/GastonZalba/tiny-popup-menu#readme
* Built: Thu Aug 31 2023 21:14:42 GMT-0300 (Argentina Standard Time)
* Built: Fri Sep 01 2023 10:39:45 GMT-0300 (Argentina Standard Time)
*/

@@ -6,0 +6,0 @@ import { TinyEmitter } from 'tiny-emitter';

{
"name": "tiny-popup-menu",
"version": "1.0.0-beta",
"version": "1.0.0",
"description": "Tiny Popup menu",

@@ -5,0 +5,0 @@ "main": "dist/tiny-popup-menu.js",

@@ -1,2 +0,13 @@

# Tiny Popup Menu (beta)
# Tiny Popup Menu
<p align="center">
<a href="https://www.npmjs.com/package/tiny-popup-menu">
<img src="https://img.shields.io/npm/v/tiny-popup-menu.svg" alt="npm version">
</a>
<a href="https://img.shields.io/npm/dm/tiny-popup-menu">
<img alt="npm" src="https://img.shields.io/npm/dm/tiny-popup-menu">
</a>
<a href="https://github.com/gastonzalba/tiny-popup-menu/blob/master/LICENSE">
<img src="https://img.shields.io/npm/l/tiny-popup-menu.svg" alt="license">
</a>
</p>

@@ -6,3 +17,3 @@ Tiny vanilla javascript library to display popup menus next to button togglers.

## Example
See an online example/playground [here](https://raw.githack.com/GastonZalba/tiny-popup-menu/v1.0.0-beta/examples/basic.html).
See an online example/playground [here](https://raw.githack.com/GastonZalba/tiny-popup-menu/v1.0.0/examples/basic.html).

@@ -9,0 +20,0 @@ ## Usage

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet