@ne1410s/popup - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/ne14_pop.cjs.min.js

@@ -1,1 +0,189 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@ne1410s/cust-elems");class t extends e.CustomElementBase{constructor(){super("data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsgcmlnaHQ6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAuODUpOw0KICBvcGFjaXR5OiAwOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0cmFuc2l0aW9uOiBvcGFjaXR5IC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsgcG9pbnRlci1ldmVudHM6IG5vbmU7IH0NCi5iYWNrLm9wZW4geyBvcGFjaXR5OiAxOyB9DQouYmFjay5vcGVuIC5mb3JlLnJlYWR5IHsgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAuM3MsIGJhY2tncm91bmQtY29sb3IgLjNzOyB9DQouZm9yZS5vdmVyIHsgY3Vyc29yOiBtb3ZlOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOyB9DQouZm9yZS5tb3ZpbmcgeyBjdXJzb3I6IGNyb3NzaGFpcjsgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsgdXNlci1zZWxlY3Q6IG5vbmU7IH0NCi5mb3JlLm92ZXIsIC5mb3JlLm1vdmluZyB7IGJveC1zaGFkb3c6IGluc2V0IDAgMCAuNWVtIGJsYWNrIWltcG9ydGFudDsgfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07IG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07IG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7IG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOyBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAuM3M7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7IG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7IG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOyB9DQouZm9yZS5uby1jbG9zZSAuY2xvc2UgeyBkaXNwbGF5OiBub25lOyB9DQouZm9yZSAuY2xvc2UgeyBjdXJzb3I6IHBvaW50ZXI7IHRvcDogLTZweDsgcmlnaHQ6IDA7IHBhZGRpbmc6IC4yZW07IH0NCi5mb3JlOm5vdCgucmVzaXplKSAuc2UtcmVzaXplIHsgZGlzcGxheTogbm9uZTsgfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7IGN1cnNvcjogc2UtcmVzaXplOyBib3R0b206IC05cHg7IHJpZ2h0OiAtNHB4OyB9","data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+"),this._styles={};const e=this.root.querySelector(".back"),t=e.querySelector(".fore"),s=t.querySelector(".se-resize"),i=t.querySelector(".close");this.resetOffscreenPosition(t),i.addEventListener("click",()=>this.close()),s.addEventListener("mousedown",()=>{if(t.classList.toggle("over",this.canResize),t.classList.toggle("resizing",this.canResize),!this.canShrink&&!t.style.minWidth){const e=t.getBoundingClientRect();t.style.minWidth=e.width+"px",t.style.minHeight=e.height+"px"}}),e.addEventListener("mousedown",s=>{this._drag=s.target===e?"back":s.target===t?"fore":"fore*",this._coords="fore"!==this._drag?null:{x:s.offsetX,y:s.offsetY},t.classList.toggle("moving",this.canMove&&"fore"===this._drag)}),t.addEventListener("mouseover",e=>t.classList.toggle("over",this.canMove&&e.target===t)),t.addEventListener("mouseout",()=>t.classList.remove("over")),window.addEventListener("mousemove",s=>{const i=t.getBoundingClientRect();if(t.classList.contains("resizing")){const e=5;t.style.width=e+s.pageX-i.x+"px",t.style.height=e+s.pageY-i.y+"px"}else if(this.canMove&&"fore"===this._drag&&this._coords){const i=e.getBoundingClientRect(),o=i.width-window.innerWidth,r=i.height-window.innerHeight,a=100*Math.max(0,s.pageX-this._coords.x)/window.innerWidth,c=100*Math.max(0,s.pageY-this._coords.y)/window.innerHeight,n=`min(${a.toFixed(2)}vw, ${o}px + 100vw - 100%)`,l=`min(${c.toFixed(2)}vh, ${r}px + 100vh - 100%)`;t.style.top=t.style.left="0",t.style.transform=`translate(${n}, ${l})`}}),window.addEventListener("mouseup",()=>{this._drag=null,t.classList.remove("moving","resizing")}),e.addEventListener("mouseup",s=>{"back"===this._drag&&s.target===e&&this.dismiss(),this._drag=null,t.classList.remove("moving","resizing")}),t.addEventListener("transitionend",s=>{"transform"===s.propertyName&&(e.classList.contains("open")?t.classList.add("ready"):this.resetOffscreenPosition(t))})}get canMove(){return this.hasAttribute("move")}get canResize(){return this.hasAttribute("resize")}get canShrink(){return this.canResize&&this.hasAttribute("shrink")}get canClose(){return!this.hasAttribute("no-close")}close(){this.removeAttribute("open")}open(){this.setAttribute("open","")}wrap(e){const t="function"==typeof e.append?e:document.querySelector(e+"");this.appendChild(t)}confirm(){const e=!!this.confirmCallback,t=!e||this.confirmCallback();e&&this.fire(t?"confirmaccept":"confirmreject"),t&&this.close()}dismiss(){const e=!!this.dismissCallback,t=!e||this.dismissCallback();e&&this.fire(t?"dismissaccept":"dismissreject"),t&&this.close()}attributeChangedCallback(e,s,i){switch(e){case"open":const e=this.root.querySelector(".back"),s=e.querySelector(".fore"),o=!!i||"string"==typeof i;s.classList.remove("ready","moving"),s.style.transform=o?"translate(-50%, -50%)":s.style.transform+" translateY(-100vh)",s.classList.toggle("resize",this.canResize),s.classList.toggle("no-close",!this.canClose),e.classList.toggle("open",o),o&&(s.style.minWidth=s.style.width="",s.style.minHeight=s.style.height="",this.propagateSupportedStyles(e)),this.fire(o?"open":"close");break;case"style":i&&(t.STYLE_KEYS.map(e=>({key:e,value:this.style[e]})).filter(e=>e.value).forEach(e=>this._styles[e.key]=e.value),this.removeAttribute("style"))}}connectedCallback(){const e=this.root.querySelector(".back"),t=e.querySelector(".fore");e.classList.contains("open")&&t.classList.add("ready")}resetOffscreenPosition(e){e.style.left="50%",e.style.top="50%",e.style.transform="translate(-50%, -100vh)"}propagateSupportedStyles(e){["backgroundColor"].forEach(t=>{e.style[t]=this._styles[t]});const t=e.querySelector(".fore");["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","boxShadow"].forEach(e=>{t.style[e]=this._styles[e]})}fire(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t}))}}t.observedAttributes=["open","style"],t.STYLE_KEYS=["backgroundColor","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","boxShadow"],"customElements"in window&&window.customElements.define("ne14-pop",t),exports.Popup=t;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var custElems = require('@ne1410s/cust-elems');
+
+var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+";
+
+var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsgcmlnaHQ6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAuODUpOw0KICBvcGFjaXR5OiAwOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0cmFuc2l0aW9uOiBvcGFjaXR5IC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsgcG9pbnRlci1ldmVudHM6IG5vbmU7IH0NCi5iYWNrLm9wZW4geyBvcGFjaXR5OiAxOyB9DQouYmFjay5vcGVuIC5mb3JlLnJlYWR5IHsgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAuM3MsIGJhY2tncm91bmQtY29sb3IgLjNzOyB9DQouZm9yZS5vdmVyIHsgY3Vyc29yOiBtb3ZlOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOyB9DQouZm9yZS5tb3ZpbmcgeyBjdXJzb3I6IGNyb3NzaGFpcjsgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsgdXNlci1zZWxlY3Q6IG5vbmU7IH0NCi5mb3JlLm92ZXIsIC5mb3JlLm1vdmluZyB7IGJveC1zaGFkb3c6IGluc2V0IDAgMCAuNWVtIGJsYWNrIWltcG9ydGFudDsgfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07IG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07IG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7IG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOyBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAuM3M7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7IG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7IG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOyB9DQouZm9yZS5uby1jbG9zZSAuY2xvc2UgeyBkaXNwbGF5OiBub25lOyB9DQouZm9yZSAuY2xvc2UgeyBjdXJzb3I6IHBvaW50ZXI7IHRvcDogLTZweDsgcmlnaHQ6IDA7IHBhZGRpbmc6IC4yZW07IH0NCi5mb3JlOm5vdCgucmVzaXplKSAuc2UtcmVzaXplIHsgZGlzcGxheTogbm9uZTsgfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7IGN1cnNvcjogc2UtcmVzaXplOyBib3R0b206IC05cHg7IHJpZ2h0OiAtNHB4OyB9";
+
+class Popup extends custElems.CustomElementBase {
+    constructor() {
+        super(stylesUrl, markupUrl);
+        this._styles = {};
+        const back = this.root.querySelector('.back');
+        const fore = back.querySelector('.fore');
+        const resizer = fore.querySelector('.se-resize');
+        const closer = fore.querySelector('.close');
+        this.resetOffscreenPosition(fore);
+        closer.addEventListener('click', () => this.close());
+        resizer.addEventListener('mousedown', () => {
+            fore.classList.toggle('over', this.canResize);
+            fore.classList.toggle('resizing', this.canResize);
+            if (!this.canShrink && !fore.style.minWidth) {
+                const rect = fore.getBoundingClientRect();
+                fore.style.minWidth = rect.width + 'px';
+                fore.style.minHeight = rect.height + 'px';
+            }
+        });
+        back.addEventListener('mousedown', event => {
+            this._drag = event.target === back ? 'back'
+                : event.target === fore ? 'fore'
+                    : 'fore*';
+            this._coords = this._drag !== 'fore' ? null
+                : { x: event.offsetX, y: event.offsetY };
+            fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
+        });
+        fore.addEventListener('mouseover', event => fore.classList.toggle('over', this.canMove && event.target === fore));
+        fore.addEventListener('mouseout', () => fore.classList.remove('over'));
+        window.addEventListener('mousemove', (event) => {
+            const rect = fore.getBoundingClientRect();
+            if (fore.classList.contains('resizing')) {
+                const adjust = 5;
+                fore.style.width = adjust + event.pageX - rect.x + 'px';
+                fore.style.height = adjust + event.pageY - rect.y + 'px';
+            }
+            else if (this.canMove && this._drag === 'fore' && this._coords) {
+                const backRect = back.getBoundingClientRect();
+                const deltaW = backRect.width - window.innerWidth;
+                const deltaH = backRect.height - window.innerHeight;
+                const x_min_pc = 100 * Math.max(0, event.pageX - this._coords.x) / window.innerWidth;
+                const y_min_pc = 100 * Math.max(0, event.pageY - this._coords.y) / window.innerHeight;
+                const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
+                const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
+                fore.style.top = fore.style.left = '0';
+                fore.style.transform = `translate(${x_css}, ${y_css})`;
+            }
+        });
+        window.addEventListener('mouseup', () => {
+            this._drag = null;
+            fore.classList.remove('moving', 'resizing');
+        });
+        back.addEventListener('mouseup', event => {
+            if (this._drag === 'back' && event.target === back)
+                this.dismiss();
+            this._drag = null;
+            fore.classList.remove('moving', 'resizing');
+        });
+        fore.addEventListener('transitionend', (event) => {
+            if (event.propertyName === 'transform') {
+                if (back.classList.contains('open')) {
+                    fore.classList.add('ready');
+                }
+                else
+                    this.resetOffscreenPosition(fore);
+            }
+        });
+    }
+    get canMove() { return this.hasAttribute('move'); }
+    get canResize() { return this.hasAttribute('resize'); }
+    get canShrink() { return this.canResize && this.hasAttribute('shrink'); }
+    get canClose() { return !this.hasAttribute('no-close'); }
+    close() {
+        this.removeAttribute('open');
+    }
+    open() {
+        this.setAttribute('open', '');
+    }
+    wrap(selectorOrElem) {
+        const target = typeof selectorOrElem.append === 'function'
+            ? selectorOrElem
+            : document.querySelector(selectorOrElem + '');
+        this.appendChild(target);
+    }
+    confirm() {
+        const doCheck = !!this.confirmCallback;
+        const proceed = !doCheck || this.confirmCallback();
+        if (doCheck)
+            this.fire(proceed ? 'confirmaccept' : 'confirmreject');
+        if (proceed)
+            this.close();
+    }
+    dismiss() {
+        const doCheck = !!this.dismissCallback;
+        const proceed = !doCheck || this.dismissCallback();
+        if (doCheck)
+            this.fire(proceed ? 'dismissaccept' : 'dismissreject');
+        if (proceed)
+            this.close();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case 'open':
+                const back = this.root.querySelector('.back');
+                const fore = back.querySelector('.fore');
+                const doOpen = !!newValue || typeof newValue === 'string';
+                fore.classList.remove('ready', 'moving');
+                fore.style.transform = doOpen ? 'translate(-50%, -50%)' : fore.style.transform + ' translateY(-100vh)';
+                fore.classList.toggle('resize', this.canResize);
+                fore.classList.toggle('no-close', !this.canClose);
+                back.classList.toggle('open', doOpen);
+                if (doOpen) {
+                    fore.style.minWidth = fore.style.width = '';
+                    fore.style.minHeight = fore.style.height = '';
+                    this.propagateSupportedStyles(back);
+                }
+                this.fire(doOpen ? 'open' : 'close');
+                break;
+            case 'style':
+                if (newValue) {
+                    Popup.STYLE_KEYS
+                        .map(key => ({ key, value: this.style[key] }))
+                        .filter(kvp => kvp.value)
+                        .forEach(kvp => this._styles[kvp.key] = kvp.value);
+                    this.removeAttribute('style');
+                }
+                break;
+        }
+    }
+    connectedCallback() {
+        const back = this.root.querySelector('.back');
+        const fore = back.querySelector('.fore');
+        if (back.classList.contains('open')) {
+            fore.classList.add('ready');
+        }
+    }
+    resetOffscreenPosition(fore) {
+        fore.style.left = '50%';
+        fore.style.top = '50%';
+        fore.style.transform = 'translate(-50%, -100vh)';
+    }
+    /** Some relevant style properties are propagated */
+    propagateSupportedStyles(backing) {
+        // Backing
+        ['backgroundColor'].forEach(prop => {
+            backing.style[prop] = this._styles[prop];
+        });
+        // Fore
+        const fore = backing.querySelector('.fore');
+        [
+            'borderTopLeftRadius',
+            'borderTopRightRadius',
+            'borderBottomRightRadius',
+            'borderBottomLeftRadius',
+            'boxShadow',
+        ].forEach(prop => {
+            fore.style[prop] = this._styles[prop];
+        });
+    }
+    /** Emits a new event. */
+    fire(event, detail) {
+        this.dispatchEvent(new CustomEvent(event, { detail }));
+    }
+}
+Popup.observedAttributes = ['open', 'style'];
+Popup.STYLE_KEYS = [
+    'backgroundColor',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius',
+    'boxShadow',
+];
+
+if ('customElements' in window) {
+    window.customElements.define('ne14-pop', Popup);
+}
+
+exports.Popup = Popup;

dist/ne14_pop.esm.min.js

@@ -1,1 +0,185 @@
-import{CustomElementBase as e}from"@ne1410s/cust-elems";class t extends e{constructor(){super("data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsgcmlnaHQ6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAuODUpOw0KICBvcGFjaXR5OiAwOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0cmFuc2l0aW9uOiBvcGFjaXR5IC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsgcG9pbnRlci1ldmVudHM6IG5vbmU7IH0NCi5iYWNrLm9wZW4geyBvcGFjaXR5OiAxOyB9DQouYmFjay5vcGVuIC5mb3JlLnJlYWR5IHsgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAuM3MsIGJhY2tncm91bmQtY29sb3IgLjNzOyB9DQouZm9yZS5vdmVyIHsgY3Vyc29yOiBtb3ZlOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOyB9DQouZm9yZS5tb3ZpbmcgeyBjdXJzb3I6IGNyb3NzaGFpcjsgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsgdXNlci1zZWxlY3Q6IG5vbmU7IH0NCi5mb3JlLm92ZXIsIC5mb3JlLm1vdmluZyB7IGJveC1zaGFkb3c6IGluc2V0IDAgMCAuNWVtIGJsYWNrIWltcG9ydGFudDsgfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07IG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07IG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7IG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOyBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAuM3M7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7IG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7IG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOyB9DQouZm9yZS5uby1jbG9zZSAuY2xvc2UgeyBkaXNwbGF5OiBub25lOyB9DQouZm9yZSAuY2xvc2UgeyBjdXJzb3I6IHBvaW50ZXI7IHRvcDogLTZweDsgcmlnaHQ6IDA7IHBhZGRpbmc6IC4yZW07IH0NCi5mb3JlOm5vdCgucmVzaXplKSAuc2UtcmVzaXplIHsgZGlzcGxheTogbm9uZTsgfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7IGN1cnNvcjogc2UtcmVzaXplOyBib3R0b206IC05cHg7IHJpZ2h0OiAtNHB4OyB9","data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+"),this._styles={};const e=this.root.querySelector(".back"),t=e.querySelector(".fore"),s=t.querySelector(".se-resize"),i=t.querySelector(".close");this.resetOffscreenPosition(t),i.addEventListener("click",()=>this.close()),s.addEventListener("mousedown",()=>{if(t.classList.toggle("over",this.canResize),t.classList.toggle("resizing",this.canResize),!this.canShrink&&!t.style.minWidth){const e=t.getBoundingClientRect();t.style.minWidth=e.width+"px",t.style.minHeight=e.height+"px"}}),e.addEventListener("mousedown",s=>{this._drag=s.target===e?"back":s.target===t?"fore":"fore*",this._coords="fore"!==this._drag?null:{x:s.offsetX,y:s.offsetY},t.classList.toggle("moving",this.canMove&&"fore"===this._drag)}),t.addEventListener("mouseover",e=>t.classList.toggle("over",this.canMove&&e.target===t)),t.addEventListener("mouseout",()=>t.classList.remove("over")),window.addEventListener("mousemove",s=>{const i=t.getBoundingClientRect();if(t.classList.contains("resizing")){const e=5;t.style.width=e+s.pageX-i.x+"px",t.style.height=e+s.pageY-i.y+"px"}else if(this.canMove&&"fore"===this._drag&&this._coords){const i=e.getBoundingClientRect(),o=i.width-window.innerWidth,r=i.height-window.innerHeight,a=100*Math.max(0,s.pageX-this._coords.x)/window.innerWidth,c=100*Math.max(0,s.pageY-this._coords.y)/window.innerHeight,n=`min(${a.toFixed(2)}vw, ${o}px + 100vw - 100%)`,l=`min(${c.toFixed(2)}vh, ${r}px + 100vh - 100%)`;t.style.top=t.style.left="0",t.style.transform=`translate(${n}, ${l})`}}),window.addEventListener("mouseup",()=>{this._drag=null,t.classList.remove("moving","resizing")}),e.addEventListener("mouseup",s=>{"back"===this._drag&&s.target===e&&this.dismiss(),this._drag=null,t.classList.remove("moving","resizing")}),t.addEventListener("transitionend",s=>{"transform"===s.propertyName&&(e.classList.contains("open")?t.classList.add("ready"):this.resetOffscreenPosition(t))})}get canMove(){return this.hasAttribute("move")}get canResize(){return this.hasAttribute("resize")}get canShrink(){return this.canResize&&this.hasAttribute("shrink")}get canClose(){return!this.hasAttribute("no-close")}close(){this.removeAttribute("open")}open(){this.setAttribute("open","")}wrap(e){const t="function"==typeof e.append?e:document.querySelector(e+"");this.appendChild(t)}confirm(){const e=!!this.confirmCallback,t=!e||this.confirmCallback();e&&this.fire(t?"confirmaccept":"confirmreject"),t&&this.close()}dismiss(){const e=!!this.dismissCallback,t=!e||this.dismissCallback();e&&this.fire(t?"dismissaccept":"dismissreject"),t&&this.close()}attributeChangedCallback(e,s,i){switch(e){case"open":const e=this.root.querySelector(".back"),s=e.querySelector(".fore"),o=!!i||"string"==typeof i;s.classList.remove("ready","moving"),s.style.transform=o?"translate(-50%, -50%)":s.style.transform+" translateY(-100vh)",s.classList.toggle("resize",this.canResize),s.classList.toggle("no-close",!this.canClose),e.classList.toggle("open",o),o&&(s.style.minWidth=s.style.width="",s.style.minHeight=s.style.height="",this.propagateSupportedStyles(e)),this.fire(o?"open":"close");break;case"style":i&&(t.STYLE_KEYS.map(e=>({key:e,value:this.style[e]})).filter(e=>e.value).forEach(e=>this._styles[e.key]=e.value),this.removeAttribute("style"))}}connectedCallback(){const e=this.root.querySelector(".back"),t=e.querySelector(".fore");e.classList.contains("open")&&t.classList.add("ready")}resetOffscreenPosition(e){e.style.left="50%",e.style.top="50%",e.style.transform="translate(-50%, -100vh)"}propagateSupportedStyles(e){["backgroundColor"].forEach(t=>{e.style[t]=this._styles[t]});const t=e.querySelector(".fore");["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","boxShadow"].forEach(e=>{t.style[e]=this._styles[e]})}fire(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t}))}}t.observedAttributes=["open","style"],t.STYLE_KEYS=["backgroundColor","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","boxShadow"],"customElements"in window&&window.customElements.define("ne14-pop",t);export{t as Popup};
+import { CustomElementBase } from '@ne1410s/cust-elems';
+
+var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+";
+
+var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsgcmlnaHQ6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAuODUpOw0KICBvcGFjaXR5OiAwOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0cmFuc2l0aW9uOiBvcGFjaXR5IC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsgcG9pbnRlci1ldmVudHM6IG5vbmU7IH0NCi5iYWNrLm9wZW4geyBvcGFjaXR5OiAxOyB9DQouYmFjay5vcGVuIC5mb3JlLnJlYWR5IHsgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAuM3MsIGJhY2tncm91bmQtY29sb3IgLjNzOyB9DQouZm9yZS5vdmVyIHsgY3Vyc29yOiBtb3ZlOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOyB9DQouZm9yZS5tb3ZpbmcgeyBjdXJzb3I6IGNyb3NzaGFpcjsgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsgdXNlci1zZWxlY3Q6IG5vbmU7IH0NCi5mb3JlLm92ZXIsIC5mb3JlLm1vdmluZyB7IGJveC1zaGFkb3c6IGluc2V0IDAgMCAuNWVtIGJsYWNrIWltcG9ydGFudDsgfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07IG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07IG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7IG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOyBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAuM3M7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7IG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7IG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOyB9DQouZm9yZS5uby1jbG9zZSAuY2xvc2UgeyBkaXNwbGF5OiBub25lOyB9DQouZm9yZSAuY2xvc2UgeyBjdXJzb3I6IHBvaW50ZXI7IHRvcDogLTZweDsgcmlnaHQ6IDA7IHBhZGRpbmc6IC4yZW07IH0NCi5mb3JlOm5vdCgucmVzaXplKSAuc2UtcmVzaXplIHsgZGlzcGxheTogbm9uZTsgfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7IGN1cnNvcjogc2UtcmVzaXplOyBib3R0b206IC05cHg7IHJpZ2h0OiAtNHB4OyB9";
+
+class Popup extends CustomElementBase {
+    constructor() {
+        super(stylesUrl, markupUrl);
+        this._styles = {};
+        const back = this.root.querySelector('.back');
+        const fore = back.querySelector('.fore');
+        const resizer = fore.querySelector('.se-resize');
+        const closer = fore.querySelector('.close');
+        this.resetOffscreenPosition(fore);
+        closer.addEventListener('click', () => this.close());
+        resizer.addEventListener('mousedown', () => {
+            fore.classList.toggle('over', this.canResize);
+            fore.classList.toggle('resizing', this.canResize);
+            if (!this.canShrink && !fore.style.minWidth) {
+                const rect = fore.getBoundingClientRect();
+                fore.style.minWidth = rect.width + 'px';
+                fore.style.minHeight = rect.height + 'px';
+            }
+        });
+        back.addEventListener('mousedown', event => {
+            this._drag = event.target === back ? 'back'
+                : event.target === fore ? 'fore'
+                    : 'fore*';
+            this._coords = this._drag !== 'fore' ? null
+                : { x: event.offsetX, y: event.offsetY };
+            fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
+        });
+        fore.addEventListener('mouseover', event => fore.classList.toggle('over', this.canMove && event.target === fore));
+        fore.addEventListener('mouseout', () => fore.classList.remove('over'));
+        window.addEventListener('mousemove', (event) => {
+            const rect = fore.getBoundingClientRect();
+            if (fore.classList.contains('resizing')) {
+                const adjust = 5;
+                fore.style.width = adjust + event.pageX - rect.x + 'px';
+                fore.style.height = adjust + event.pageY - rect.y + 'px';
+            }
+            else if (this.canMove && this._drag === 'fore' && this._coords) {
+                const backRect = back.getBoundingClientRect();
+                const deltaW = backRect.width - window.innerWidth;
+                const deltaH = backRect.height - window.innerHeight;
+                const x_min_pc = 100 * Math.max(0, event.pageX - this._coords.x) / window.innerWidth;
+                const y_min_pc = 100 * Math.max(0, event.pageY - this._coords.y) / window.innerHeight;
+                const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
+                const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
+                fore.style.top = fore.style.left = '0';
+                fore.style.transform = `translate(${x_css}, ${y_css})`;
+            }
+        });
+        window.addEventListener('mouseup', () => {
+            this._drag = null;
+            fore.classList.remove('moving', 'resizing');
+        });
+        back.addEventListener('mouseup', event => {
+            if (this._drag === 'back' && event.target === back)
+                this.dismiss();
+            this._drag = null;
+            fore.classList.remove('moving', 'resizing');
+        });
+        fore.addEventListener('transitionend', (event) => {
+            if (event.propertyName === 'transform') {
+                if (back.classList.contains('open')) {
+                    fore.classList.add('ready');
+                }
+                else
+                    this.resetOffscreenPosition(fore);
+            }
+        });
+    }
+    get canMove() { return this.hasAttribute('move'); }
+    get canResize() { return this.hasAttribute('resize'); }
+    get canShrink() { return this.canResize && this.hasAttribute('shrink'); }
+    get canClose() { return !this.hasAttribute('no-close'); }
+    close() {
+        this.removeAttribute('open');
+    }
+    open() {
+        this.setAttribute('open', '');
+    }
+    wrap(selectorOrElem) {
+        const target = typeof selectorOrElem.append === 'function'
+            ? selectorOrElem
+            : document.querySelector(selectorOrElem + '');
+        this.appendChild(target);
+    }
+    confirm() {
+        const doCheck = !!this.confirmCallback;
+        const proceed = !doCheck || this.confirmCallback();
+        if (doCheck)
+            this.fire(proceed ? 'confirmaccept' : 'confirmreject');
+        if (proceed)
+            this.close();
+    }
+    dismiss() {
+        const doCheck = !!this.dismissCallback;
+        const proceed = !doCheck || this.dismissCallback();
+        if (doCheck)
+            this.fire(proceed ? 'dismissaccept' : 'dismissreject');
+        if (proceed)
+            this.close();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case 'open':
+                const back = this.root.querySelector('.back');
+                const fore = back.querySelector('.fore');
+                const doOpen = !!newValue || typeof newValue === 'string';
+                fore.classList.remove('ready', 'moving');
+                fore.style.transform = doOpen ? 'translate(-50%, -50%)' : fore.style.transform + ' translateY(-100vh)';
+                fore.classList.toggle('resize', this.canResize);
+                fore.classList.toggle('no-close', !this.canClose);
+                back.classList.toggle('open', doOpen);
+                if (doOpen) {
+                    fore.style.minWidth = fore.style.width = '';
+                    fore.style.minHeight = fore.style.height = '';
+                    this.propagateSupportedStyles(back);
+                }
+                this.fire(doOpen ? 'open' : 'close');
+                break;
+            case 'style':
+                if (newValue) {
+                    Popup.STYLE_KEYS
+                        .map(key => ({ key, value: this.style[key] }))
+                        .filter(kvp => kvp.value)
+                        .forEach(kvp => this._styles[kvp.key] = kvp.value);
+                    this.removeAttribute('style');
+                }
+                break;
+        }
+    }
+    connectedCallback() {
+        const back = this.root.querySelector('.back');
+        const fore = back.querySelector('.fore');
+        if (back.classList.contains('open')) {
+            fore.classList.add('ready');
+        }
+    }
+    resetOffscreenPosition(fore) {
+        fore.style.left = '50%';
+        fore.style.top = '50%';
+        fore.style.transform = 'translate(-50%, -100vh)';
+    }
+    /** Some relevant style properties are propagated */
+    propagateSupportedStyles(backing) {
+        // Backing
+        ['backgroundColor'].forEach(prop => {
+            backing.style[prop] = this._styles[prop];
+        });
+        // Fore
+        const fore = backing.querySelector('.fore');
+        [
+            'borderTopLeftRadius',
+            'borderTopRightRadius',
+            'borderBottomRightRadius',
+            'borderBottomLeftRadius',
+            'boxShadow',
+        ].forEach(prop => {
+            fore.style[prop] = this._styles[prop];
+        });
+    }
+    /** Emits a new event. */
+    fire(event, detail) {
+        this.dispatchEvent(new CustomEvent(event, { detail }));
+    }
+}
+Popup.observedAttributes = ['open', 'style'];
+Popup.STYLE_KEYS = [
+    'backgroundColor',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius',
+    'boxShadow',
+];
+
+if ('customElements' in window) {
+    window.customElements.define('ne14-pop', Popup);
+}
+
+export { Popup };

dist/ne14_pop.umd.min.js

@@ -1,1 +0,208 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ne_pop={})}(this,(function(e){"use strict";class t extends HTMLElement{constructor(e,t,s="closed"){super(),this.root=this.attachShadow({mode:s}),this.root.innerHTML=this.decode(t);const o=document.createElement("style");o.textContent=this.decode(e),this.root.appendChild(o)}decode(e){const t=(e+"").indexOf("base64,");return-1===t?e:window.atob(e.substring(t+7))}}class s extends t{constructor(){super("data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsgcmlnaHQ6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAuODUpOw0KICBvcGFjaXR5OiAwOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0cmFuc2l0aW9uOiBvcGFjaXR5IC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsgcG9pbnRlci1ldmVudHM6IG5vbmU7IH0NCi5iYWNrLm9wZW4geyBvcGFjaXR5OiAxOyB9DQouYmFjay5vcGVuIC5mb3JlLnJlYWR5IHsgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAuM3MsIGJhY2tncm91bmQtY29sb3IgLjNzOyB9DQouZm9yZS5vdmVyIHsgY3Vyc29yOiBtb3ZlOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOyB9DQouZm9yZS5tb3ZpbmcgeyBjdXJzb3I6IGNyb3NzaGFpcjsgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsgdXNlci1zZWxlY3Q6IG5vbmU7IH0NCi5mb3JlLm92ZXIsIC5mb3JlLm1vdmluZyB7IGJveC1zaGFkb3c6IGluc2V0IDAgMCAuNWVtIGJsYWNrIWltcG9ydGFudDsgfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07IG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07IG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7IG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOyBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAuM3M7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7IG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7IG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOyB9DQouZm9yZS5uby1jbG9zZSAuY2xvc2UgeyBkaXNwbGF5OiBub25lOyB9DQouZm9yZSAuY2xvc2UgeyBjdXJzb3I6IHBvaW50ZXI7IHRvcDogLTZweDsgcmlnaHQ6IDA7IHBhZGRpbmc6IC4yZW07IH0NCi5mb3JlOm5vdCgucmVzaXplKSAuc2UtcmVzaXplIHsgZGlzcGxheTogbm9uZTsgfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7IGN1cnNvcjogc2UtcmVzaXplOyBib3R0b206IC05cHg7IHJpZ2h0OiAtNHB4OyB9","data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+"),this._styles={};const e=this.root.querySelector(".back"),t=e.querySelector(".fore"),s=t.querySelector(".se-resize"),o=t.querySelector(".close");this.resetOffscreenPosition(t),o.addEventListener("click",()=>this.close()),s.addEventListener("mousedown",()=>{if(t.classList.toggle("over",this.canResize),t.classList.toggle("resizing",this.canResize),!this.canShrink&&!t.style.minWidth){const e=t.getBoundingClientRect();t.style.minWidth=e.width+"px",t.style.minHeight=e.height+"px"}}),e.addEventListener("mousedown",s=>{this._drag=s.target===e?"back":s.target===t?"fore":"fore*",this._coords="fore"!==this._drag?null:{x:s.offsetX,y:s.offsetY},t.classList.toggle("moving",this.canMove&&"fore"===this._drag)}),t.addEventListener("mouseover",e=>t.classList.toggle("over",this.canMove&&e.target===t)),t.addEventListener("mouseout",()=>t.classList.remove("over")),window.addEventListener("mousemove",s=>{const o=t.getBoundingClientRect();if(t.classList.contains("resizing")){const e=5;t.style.width=e+s.pageX-o.x+"px",t.style.height=e+s.pageY-o.y+"px"}else if(this.canMove&&"fore"===this._drag&&this._coords){const o=e.getBoundingClientRect(),i=o.width-window.innerWidth,n=o.height-window.innerHeight,r=100*Math.max(0,s.pageX-this._coords.x)/window.innerWidth,c=100*Math.max(0,s.pageY-this._coords.y)/window.innerHeight,a=`min(${r.toFixed(2)}vw, ${i}px + 100vw - 100%)`,l=`min(${c.toFixed(2)}vh, ${n}px + 100vh - 100%)`;t.style.top=t.style.left="0",t.style.transform=`translate(${a}, ${l})`}}),window.addEventListener("mouseup",()=>{this._drag=null,t.classList.remove("moving","resizing")}),e.addEventListener("mouseup",s=>{"back"===this._drag&&s.target===e&&this.dismiss(),this._drag=null,t.classList.remove("moving","resizing")}),t.addEventListener("transitionend",s=>{"transform"===s.propertyName&&(e.classList.contains("open")?t.classList.add("ready"):this.resetOffscreenPosition(t))})}get canMove(){return this.hasAttribute("move")}get canResize(){return this.hasAttribute("resize")}get canShrink(){return this.canResize&&this.hasAttribute("shrink")}get canClose(){return!this.hasAttribute("no-close")}close(){this.removeAttribute("open")}open(){this.setAttribute("open","")}wrap(e){const t="function"==typeof e.append?e:document.querySelector(e+"");this.appendChild(t)}confirm(){const e=!!this.confirmCallback,t=!e||this.confirmCallback();e&&this.fire(t?"confirmaccept":"confirmreject"),t&&this.close()}dismiss(){const e=!!this.dismissCallback,t=!e||this.dismissCallback();e&&this.fire(t?"dismissaccept":"dismissreject"),t&&this.close()}attributeChangedCallback(e,t,o){switch(e){case"open":const e=this.root.querySelector(".back"),t=e.querySelector(".fore"),i=!!o||"string"==typeof o;t.classList.remove("ready","moving"),t.style.transform=i?"translate(-50%, -50%)":t.style.transform+" translateY(-100vh)",t.classList.toggle("resize",this.canResize),t.classList.toggle("no-close",!this.canClose),e.classList.toggle("open",i),i&&(t.style.minWidth=t.style.width="",t.style.minHeight=t.style.height="",this.propagateSupportedStyles(e)),this.fire(i?"open":"close");break;case"style":o&&(s.STYLE_KEYS.map(e=>({key:e,value:this.style[e]})).filter(e=>e.value).forEach(e=>this._styles[e.key]=e.value),this.removeAttribute("style"))}}connectedCallback(){const e=this.root.querySelector(".back"),t=e.querySelector(".fore");e.classList.contains("open")&&t.classList.add("ready")}resetOffscreenPosition(e){e.style.left="50%",e.style.top="50%",e.style.transform="translate(-50%, -100vh)"}propagateSupportedStyles(e){["backgroundColor"].forEach(t=>{e.style[t]=this._styles[t]});const t=e.querySelector(".fore");["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","boxShadow"].forEach(e=>{t.style[e]=this._styles[e]})}fire(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t}))}}s.observedAttributes=["open","style"],s.STYLE_KEYS=["backgroundColor","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","boxShadow"],"customElements"in window&&window.customElements.define("ne14-pop",s),e.Popup=s,Object.defineProperty(e,"__esModule",{value:!0})}));
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = global || self, factory(global.ne_pop = {}));
+}(this, (function (exports) { 'use strict';
+
+    class CustomElementBase extends HTMLElement {
+        constructor(css, html, mode = 'closed') {
+            super();
+            this.root = this.attachShadow({ mode });
+            this.root.innerHTML = this.decode(html);
+            const style = document.createElement('style');
+            style.textContent = this.decode(css);
+            this.root.appendChild(style);
+        }
+        decode(b64) {
+            const bIndex = (b64 + '').indexOf('base64,');
+            return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
+        }
+    }
+
+    var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+";
+
+    var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsgcmlnaHQ6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAuODUpOw0KICBvcGFjaXR5OiAwOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0cmFuc2l0aW9uOiBvcGFjaXR5IC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsgcG9pbnRlci1ldmVudHM6IG5vbmU7IH0NCi5iYWNrLm9wZW4geyBvcGFjaXR5OiAxOyB9DQouYmFjay5vcGVuIC5mb3JlLnJlYWR5IHsgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAuM3MsIGJhY2tncm91bmQtY29sb3IgLjNzOyB9DQouZm9yZS5vdmVyIHsgY3Vyc29yOiBtb3ZlOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOyB9DQouZm9yZS5tb3ZpbmcgeyBjdXJzb3I6IGNyb3NzaGFpcjsgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsgdXNlci1zZWxlY3Q6IG5vbmU7IH0NCi5mb3JlLm92ZXIsIC5mb3JlLm1vdmluZyB7IGJveC1zaGFkb3c6IGluc2V0IDAgMCAuNWVtIGJsYWNrIWltcG9ydGFudDsgfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07IG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07IG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7IG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOyBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAuM3M7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7IG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7IG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOyB9DQouZm9yZS5uby1jbG9zZSAuY2xvc2UgeyBkaXNwbGF5OiBub25lOyB9DQouZm9yZSAuY2xvc2UgeyBjdXJzb3I6IHBvaW50ZXI7IHRvcDogLTZweDsgcmlnaHQ6IDA7IHBhZGRpbmc6IC4yZW07IH0NCi5mb3JlOm5vdCgucmVzaXplKSAuc2UtcmVzaXplIHsgZGlzcGxheTogbm9uZTsgfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7IGN1cnNvcjogc2UtcmVzaXplOyBib3R0b206IC05cHg7IHJpZ2h0OiAtNHB4OyB9";
+
+    class Popup extends CustomElementBase {
+        constructor() {
+            super(stylesUrl, markupUrl);
+            this._styles = {};
+            const back = this.root.querySelector('.back');
+            const fore = back.querySelector('.fore');
+            const resizer = fore.querySelector('.se-resize');
+            const closer = fore.querySelector('.close');
+            this.resetOffscreenPosition(fore);
+            closer.addEventListener('click', () => this.close());
+            resizer.addEventListener('mousedown', () => {
+                fore.classList.toggle('over', this.canResize);
+                fore.classList.toggle('resizing', this.canResize);
+                if (!this.canShrink && !fore.style.minWidth) {
+                    const rect = fore.getBoundingClientRect();
+                    fore.style.minWidth = rect.width + 'px';
+                    fore.style.minHeight = rect.height + 'px';
+                }
+            });
+            back.addEventListener('mousedown', event => {
+                this._drag = event.target === back ? 'back'
+                    : event.target === fore ? 'fore'
+                        : 'fore*';
+                this._coords = this._drag !== 'fore' ? null
+                    : { x: event.offsetX, y: event.offsetY };
+                fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
+            });
+            fore.addEventListener('mouseover', event => fore.classList.toggle('over', this.canMove && event.target === fore));
+            fore.addEventListener('mouseout', () => fore.classList.remove('over'));
+            window.addEventListener('mousemove', (event) => {
+                const rect = fore.getBoundingClientRect();
+                if (fore.classList.contains('resizing')) {
+                    const adjust = 5;
+                    fore.style.width = adjust + event.pageX - rect.x + 'px';
+                    fore.style.height = adjust + event.pageY - rect.y + 'px';
+                }
+                else if (this.canMove && this._drag === 'fore' && this._coords) {
+                    const backRect = back.getBoundingClientRect();
+                    const deltaW = backRect.width - window.innerWidth;
+                    const deltaH = backRect.height - window.innerHeight;
+                    const x_min_pc = 100 * Math.max(0, event.pageX - this._coords.x) / window.innerWidth;
+                    const y_min_pc = 100 * Math.max(0, event.pageY - this._coords.y) / window.innerHeight;
+                    const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
+                    const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
+                    fore.style.top = fore.style.left = '0';
+                    fore.style.transform = `translate(${x_css}, ${y_css})`;
+                }
+            });
+            window.addEventListener('mouseup', () => {
+                this._drag = null;
+                fore.classList.remove('moving', 'resizing');
+            });
+            back.addEventListener('mouseup', event => {
+                if (this._drag === 'back' && event.target === back)
+                    this.dismiss();
+                this._drag = null;
+                fore.classList.remove('moving', 'resizing');
+            });
+            fore.addEventListener('transitionend', (event) => {
+                if (event.propertyName === 'transform') {
+                    if (back.classList.contains('open')) {
+                        fore.classList.add('ready');
+                    }
+                    else
+                        this.resetOffscreenPosition(fore);
+                }
+            });
+        }
+        get canMove() { return this.hasAttribute('move'); }
+        get canResize() { return this.hasAttribute('resize'); }
+        get canShrink() { return this.canResize && this.hasAttribute('shrink'); }
+        get canClose() { return !this.hasAttribute('no-close'); }
+        close() {
+            this.removeAttribute('open');
+        }
+        open() {
+            this.setAttribute('open', '');
+        }
+        wrap(selectorOrElem) {
+            const target = typeof selectorOrElem.append === 'function'
+                ? selectorOrElem
+                : document.querySelector(selectorOrElem + '');
+            this.appendChild(target);
+        }
+        confirm() {
+            const doCheck = !!this.confirmCallback;
+            const proceed = !doCheck || this.confirmCallback();
+            if (doCheck)
+                this.fire(proceed ? 'confirmaccept' : 'confirmreject');
+            if (proceed)
+                this.close();
+        }
+        dismiss() {
+            const doCheck = !!this.dismissCallback;
+            const proceed = !doCheck || this.dismissCallback();
+            if (doCheck)
+                this.fire(proceed ? 'dismissaccept' : 'dismissreject');
+            if (proceed)
+                this.close();
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            switch (name) {
+                case 'open':
+                    const back = this.root.querySelector('.back');
+                    const fore = back.querySelector('.fore');
+                    const doOpen = !!newValue || typeof newValue === 'string';
+                    fore.classList.remove('ready', 'moving');
+                    fore.style.transform = doOpen ? 'translate(-50%, -50%)' : fore.style.transform + ' translateY(-100vh)';
+                    fore.classList.toggle('resize', this.canResize);
+                    fore.classList.toggle('no-close', !this.canClose);
+                    back.classList.toggle('open', doOpen);
+                    if (doOpen) {
+                        fore.style.minWidth = fore.style.width = '';
+                        fore.style.minHeight = fore.style.height = '';
+                        this.propagateSupportedStyles(back);
+                    }
+                    this.fire(doOpen ? 'open' : 'close');
+                    break;
+                case 'style':
+                    if (newValue) {
+                        Popup.STYLE_KEYS
+                            .map(key => ({ key, value: this.style[key] }))
+                            .filter(kvp => kvp.value)
+                            .forEach(kvp => this._styles[kvp.key] = kvp.value);
+                        this.removeAttribute('style');
+                    }
+                    break;
+            }
+        }
+        connectedCallback() {
+            const back = this.root.querySelector('.back');
+            const fore = back.querySelector('.fore');
+            if (back.classList.contains('open')) {
+                fore.classList.add('ready');
+            }
+        }
+        resetOffscreenPosition(fore) {
+            fore.style.left = '50%';
+            fore.style.top = '50%';
+            fore.style.transform = 'translate(-50%, -100vh)';
+        }
+        /** Some relevant style properties are propagated */
+        propagateSupportedStyles(backing) {
+            // Backing
+            ['backgroundColor'].forEach(prop => {
+                backing.style[prop] = this._styles[prop];
+            });
+            // Fore
+            const fore = backing.querySelector('.fore');
+            [
+                'borderTopLeftRadius',
+                'borderTopRightRadius',
+                'borderBottomRightRadius',
+                'borderBottomLeftRadius',
+                'boxShadow',
+            ].forEach(prop => {
+                fore.style[prop] = this._styles[prop];
+            });
+        }
+        /** Emits a new event. */
+        fire(event, detail) {
+            this.dispatchEvent(new CustomEvent(event, { detail }));
+        }
+    }
+    Popup.observedAttributes = ['open', 'style'];
+    Popup.STYLE_KEYS = [
+        'backgroundColor',
+        'borderTopLeftRadius',
+        'borderTopRightRadius',
+        'borderBottomRightRadius',
+        'borderBottomLeftRadius',
+        'boxShadow',
+    ];
+
+    if ('customElements' in window) {
+        window.customElements.define('ne14-pop', Popup);
+    }
+
+    exports.Popup = Popup;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

package.json

 {
   "name": "@ne1410s/popup",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A lightweight configurable popup.",
@@ -38,15 +38,14 @@ "main": "dist/ne14_pop.cjs.min.js",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-json": "^4.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.3",
-    "@rollup/plugin-url": "^4.0.2",
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^8.0.1",
+    "@rollup/plugin-url": "^5.0.1",
     "rimraf": "^3.0.1",
-    "rollup": "^2.6.1",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.27.0",
-    "typescript": "^3.8.3"
+    "rollup": "^2.15.0",
+    "rollup-plugin-typescript2": "^0.27.1",
+    "typescript": "^3.9.5"
   },
   "dependencies": {
-    "@ne1410s/cust-elems": "^0.1.1"
+    "@ne1410s/cust-elems": "^0.1.3"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35864

increased by46.92%

Dev dependency count

8

decreased by-11.11%

Lines of code

609

increased by491.26%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@ne1410s/cust-elems@^0.1.3