@ne1410s/popup 0.3.3 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -2
- package/dist/ne14_pop.cjs.min.js +147 -147
- package/dist/ne14_pop.esm.min.js +147 -147
- package/dist/ne14_pop.umd.min.js +168 -168
- package/dist/popup/popup.d.ts +25 -25
- package/package.json +9 -9
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Popup } from './popup/popup';
|
|
2
|
-
export { Popup };
|
|
1
|
+
import { Popup } from './popup/popup';
|
|
2
|
+
export { Popup };
|
package/dist/ne14_pop.cjs.min.js
CHANGED
|
@@ -4,156 +4,156 @@ var custElems = require('@ne1410s/cust-elems');
|
|
|
4
4
|
|
|
5
5
|
var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+DQo=";
|
|
6
6
|
|
|
7
|
-
var stylesUrl = "data:text/css;base64,
|
|
7
|
+
var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOg0KICAgIGJveC1zaGFkb3cgMC4zcywNCiAgICBiYWNrZ3JvdW5kLWNvbG9yIDAuM3M7DQp9DQouZm9yZS5vdmVyIHsNCiAgY3Vyc29yOiBtb3ZlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOw0KfQ0KLmZvcmUubW92aW5nIHsNCiAgY3Vyc29yOiBjcm9zc2hhaXI7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjMwLCAyMzAsIDIzMCwgMSk7DQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KLmZvcmUub3ZlciwNCi5mb3JlLm1vdmluZyB7DQogIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwLjVlbSBibGFjayAhaW1wb3J0YW50Ow0KfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07DQogIG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07DQogIG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOw0KICBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjNzOw0KICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTsNCiAgYm94LXNoYWRvdzogdmFyKC0tYm94LXNoYWRvdyk7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjMpOw0KfQ0KLmZvcmUubm8tY2xvc2Ugew0KICBtYXgtd2lkdGg6IGNhbGMoMTAwdncgLSAxZW0pOw0KICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMWVtKTsNCn0NCi5mb3JlLm5vLWNsb3NlIC5jbG9zZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuY2xvc2Ugew0KICBjdXJzb3I6IHBvaW50ZXI7DQogIHRvcDogLTZweDsNCiAgcmlnaHQ6IDA7DQogIHBhZGRpbmc6IDAuMmVtOw0KfQ0KLmZvcmU6bm90KC5yZXNpemUpIC5zZS1yZXNpemUgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7DQogIGN1cnNvcjogc2UtcmVzaXplOw0KICBib3R0b206IC05cHg7DQogIHJpZ2h0OiAtNHB4Ow0KfQ0K";
|
|
8
8
|
|
|
9
|
-
class Popup extends custElems.CustomElementBase {
|
|
10
|
-
get canMove() {
|
|
11
|
-
return this.hasAttribute('move');
|
|
12
|
-
}
|
|
13
|
-
get canResize() {
|
|
14
|
-
return this.hasAttribute('resize');
|
|
15
|
-
}
|
|
16
|
-
get canShrink() {
|
|
17
|
-
return this.canResize && this.hasAttribute('shrink');
|
|
18
|
-
}
|
|
19
|
-
get canClose() {
|
|
20
|
-
return !this.hasAttribute('no-close');
|
|
21
|
-
}
|
|
22
|
-
constructor() {
|
|
23
|
-
super(Popup.Css, Popup.Html);
|
|
24
|
-
const back = this.root.querySelector('.back');
|
|
25
|
-
const fore = back.querySelector('.fore');
|
|
26
|
-
const resizer = fore.querySelector('.se-resize');
|
|
27
|
-
const closer = fore.querySelector('.close');
|
|
28
|
-
this.resetOffscreenPosition(fore);
|
|
29
|
-
closer.addEventListener('click', () => this.close());
|
|
30
|
-
resizer.addEventListener('mousedown', () => {
|
|
31
|
-
fore.classList.toggle('over', this.canResize);
|
|
32
|
-
fore.classList.toggle('resizing', this.canResize);
|
|
33
|
-
if (!this.canShrink && !fore.style.minWidth) {
|
|
34
|
-
const rect = fore.getBoundingClientRect();
|
|
35
|
-
fore.style.minWidth = rect.width + 'px';
|
|
36
|
-
fore.style.minHeight = rect.height + 'px';
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
back.addEventListener('mousedown', (event) => {
|
|
40
|
-
this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
|
|
41
|
-
this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
|
|
42
|
-
fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
|
|
43
|
-
});
|
|
44
|
-
fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
|
|
45
|
-
fore.addEventListener('mouseout', () => fore.classList.remove('over'));
|
|
46
|
-
window.addEventListener('mousemove', (event) => {
|
|
47
|
-
const rect = fore.getBoundingClientRect();
|
|
48
|
-
if (fore.classList.contains('resizing')) {
|
|
49
|
-
const adjust = 5;
|
|
50
|
-
fore.style.width = adjust + event.pageX - rect.x + 'px';
|
|
51
|
-
fore.style.height = adjust + event.pageY - rect.y + 'px';
|
|
52
|
-
}
|
|
53
|
-
else if (this.canMove && this._drag === 'fore' && this._coords) {
|
|
54
|
-
const backRect = back.getBoundingClientRect();
|
|
55
|
-
const deltaW = backRect.width - window.innerWidth;
|
|
56
|
-
const deltaH = backRect.height - window.innerHeight;
|
|
57
|
-
const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
|
|
58
|
-
const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
|
|
59
|
-
const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
|
|
60
|
-
const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
|
|
61
|
-
fore.style.top = fore.style.left = '0';
|
|
62
|
-
fore.style.transform = `translate(${x_css}, ${y_css})`;
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
window.addEventListener('mouseup', () => {
|
|
66
|
-
this._drag = null;
|
|
67
|
-
fore.classList.remove('moving', 'resizing');
|
|
68
|
-
});
|
|
69
|
-
back.addEventListener('mouseup', (event) => {
|
|
70
|
-
if (this._drag === 'back' && event.target === back)
|
|
71
|
-
this.dismiss();
|
|
72
|
-
this._drag = null;
|
|
73
|
-
fore.classList.remove('moving', 'resizing');
|
|
74
|
-
});
|
|
75
|
-
fore.addEventListener('transitionend', (event) => {
|
|
76
|
-
if (event.propertyName === 'transform') {
|
|
77
|
-
if (back.classList.contains('open')) {
|
|
78
|
-
fore.classList.add('ready');
|
|
79
|
-
}
|
|
80
|
-
else
|
|
81
|
-
this.resetOffscreenPosition(fore);
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
close() {
|
|
86
|
-
this.removeAttribute('open');
|
|
87
|
-
}
|
|
88
|
-
open() {
|
|
89
|
-
this.setAttribute('open', '');
|
|
90
|
-
}
|
|
91
|
-
wrap(selectorOrElem) {
|
|
92
|
-
const target = typeof selectorOrElem.append === 'function'
|
|
93
|
-
? selectorOrElem
|
|
94
|
-
: document.querySelector(selectorOrElem + '');
|
|
95
|
-
this.appendChild(target);
|
|
96
|
-
}
|
|
97
|
-
confirm() {
|
|
98
|
-
const doCheck = !!this.confirmCallback;
|
|
99
|
-
const proceed = !doCheck || this.confirmCallback();
|
|
100
|
-
if (doCheck)
|
|
101
|
-
this.fire(proceed ? 'confirmaccept' : 'confirmreject');
|
|
102
|
-
if (proceed)
|
|
103
|
-
this.close();
|
|
104
|
-
}
|
|
105
|
-
dismiss() {
|
|
106
|
-
const doCheck = !!this.dismissCallback;
|
|
107
|
-
const proceed = !doCheck || this.dismissCallback();
|
|
108
|
-
if (doCheck)
|
|
109
|
-
this.fire(proceed ? 'dismissaccept' : 'dismissreject');
|
|
110
|
-
if (proceed)
|
|
111
|
-
this.close();
|
|
112
|
-
}
|
|
113
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
114
|
-
switch (name) {
|
|
115
|
-
case 'open':
|
|
116
|
-
const back = this.root.querySelector('.back');
|
|
117
|
-
const fore = back.querySelector('.fore');
|
|
118
|
-
const doOpen = !!newValue || typeof newValue === 'string';
|
|
119
|
-
fore.classList.remove('ready', 'moving');
|
|
120
|
-
fore.style.transform = doOpen
|
|
121
|
-
? 'translate(-50%, -50%)'
|
|
122
|
-
: fore.style.transform + ' translateY(-100vh)';
|
|
123
|
-
fore.classList.toggle('resize', this.canResize);
|
|
124
|
-
fore.classList.toggle('no-close', !this.canClose);
|
|
125
|
-
back.classList.toggle('open', doOpen);
|
|
126
|
-
if (doOpen) {
|
|
127
|
-
fore.style.minWidth = fore.style.width = '';
|
|
128
|
-
fore.style.minHeight = fore.style.height = '';
|
|
129
|
-
}
|
|
130
|
-
this.fire(doOpen ? 'open' : 'close');
|
|
131
|
-
break;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
connectedCallback() {
|
|
135
|
-
const back = this.root.querySelector('.back');
|
|
136
|
-
const fore = back.querySelector('.fore');
|
|
137
|
-
if (back.classList.contains('open')) {
|
|
138
|
-
fore.classList.add('ready');
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
resetOffscreenPosition(fore) {
|
|
142
|
-
fore.style.left = '50%';
|
|
143
|
-
fore.style.top = '50%';
|
|
144
|
-
fore.style.transform = 'translate(-50%, -100vh)';
|
|
145
|
-
}
|
|
146
|
-
/** Emits a new event. */
|
|
147
|
-
fire(event, detail) {
|
|
148
|
-
this.dispatchEvent(new CustomEvent(event, { detail }));
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
Popup.observedAttributes = ['open'];
|
|
152
|
-
Popup.Css = custElems.reduceCss(custElems.decode(stylesUrl));
|
|
9
|
+
class Popup extends custElems.CustomElementBase {
|
|
10
|
+
get canMove() {
|
|
11
|
+
return this.hasAttribute('move');
|
|
12
|
+
}
|
|
13
|
+
get canResize() {
|
|
14
|
+
return this.hasAttribute('resize');
|
|
15
|
+
}
|
|
16
|
+
get canShrink() {
|
|
17
|
+
return this.canResize && this.hasAttribute('shrink');
|
|
18
|
+
}
|
|
19
|
+
get canClose() {
|
|
20
|
+
return !this.hasAttribute('no-close');
|
|
21
|
+
}
|
|
22
|
+
constructor() {
|
|
23
|
+
super(Popup.Css, Popup.Html);
|
|
24
|
+
const back = this.root.querySelector('.back');
|
|
25
|
+
const fore = back.querySelector('.fore');
|
|
26
|
+
const resizer = fore.querySelector('.se-resize');
|
|
27
|
+
const closer = fore.querySelector('.close');
|
|
28
|
+
this.resetOffscreenPosition(fore);
|
|
29
|
+
closer.addEventListener('click', () => this.close());
|
|
30
|
+
resizer.addEventListener('mousedown', () => {
|
|
31
|
+
fore.classList.toggle('over', this.canResize);
|
|
32
|
+
fore.classList.toggle('resizing', this.canResize);
|
|
33
|
+
if (!this.canShrink && !fore.style.minWidth) {
|
|
34
|
+
const rect = fore.getBoundingClientRect();
|
|
35
|
+
fore.style.minWidth = rect.width + 'px';
|
|
36
|
+
fore.style.minHeight = rect.height + 'px';
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
back.addEventListener('mousedown', (event) => {
|
|
40
|
+
this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
|
|
41
|
+
this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
|
|
42
|
+
fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
|
|
43
|
+
});
|
|
44
|
+
fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
|
|
45
|
+
fore.addEventListener('mouseout', () => fore.classList.remove('over'));
|
|
46
|
+
window.addEventListener('mousemove', (event) => {
|
|
47
|
+
const rect = fore.getBoundingClientRect();
|
|
48
|
+
if (fore.classList.contains('resizing')) {
|
|
49
|
+
const adjust = 5;
|
|
50
|
+
fore.style.width = adjust + event.pageX - rect.x + 'px';
|
|
51
|
+
fore.style.height = adjust + event.pageY - rect.y + 'px';
|
|
52
|
+
}
|
|
53
|
+
else if (this.canMove && this._drag === 'fore' && this._coords) {
|
|
54
|
+
const backRect = back.getBoundingClientRect();
|
|
55
|
+
const deltaW = backRect.width - window.innerWidth;
|
|
56
|
+
const deltaH = backRect.height - window.innerHeight;
|
|
57
|
+
const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
|
|
58
|
+
const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
|
|
59
|
+
const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
|
|
60
|
+
const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
|
|
61
|
+
fore.style.top = fore.style.left = '0';
|
|
62
|
+
fore.style.transform = `translate(${x_css}, ${y_css})`;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
window.addEventListener('mouseup', () => {
|
|
66
|
+
this._drag = null;
|
|
67
|
+
fore.classList.remove('moving', 'resizing');
|
|
68
|
+
});
|
|
69
|
+
back.addEventListener('mouseup', (event) => {
|
|
70
|
+
if (this._drag === 'back' && event.target === back)
|
|
71
|
+
this.dismiss();
|
|
72
|
+
this._drag = null;
|
|
73
|
+
fore.classList.remove('moving', 'resizing');
|
|
74
|
+
});
|
|
75
|
+
fore.addEventListener('transitionend', (event) => {
|
|
76
|
+
if (event.propertyName === 'transform') {
|
|
77
|
+
if (back.classList.contains('open')) {
|
|
78
|
+
fore.classList.add('ready');
|
|
79
|
+
}
|
|
80
|
+
else
|
|
81
|
+
this.resetOffscreenPosition(fore);
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
close() {
|
|
86
|
+
this.removeAttribute('open');
|
|
87
|
+
}
|
|
88
|
+
open() {
|
|
89
|
+
this.setAttribute('open', '');
|
|
90
|
+
}
|
|
91
|
+
wrap(selectorOrElem) {
|
|
92
|
+
const target = typeof selectorOrElem.append === 'function'
|
|
93
|
+
? selectorOrElem
|
|
94
|
+
: document.querySelector(selectorOrElem + '');
|
|
95
|
+
this.appendChild(target);
|
|
96
|
+
}
|
|
97
|
+
confirm() {
|
|
98
|
+
const doCheck = !!this.confirmCallback;
|
|
99
|
+
const proceed = !doCheck || this.confirmCallback();
|
|
100
|
+
if (doCheck)
|
|
101
|
+
this.fire(proceed ? 'confirmaccept' : 'confirmreject');
|
|
102
|
+
if (proceed)
|
|
103
|
+
this.close();
|
|
104
|
+
}
|
|
105
|
+
dismiss() {
|
|
106
|
+
const doCheck = !!this.dismissCallback;
|
|
107
|
+
const proceed = !doCheck || this.dismissCallback();
|
|
108
|
+
if (doCheck)
|
|
109
|
+
this.fire(proceed ? 'dismissaccept' : 'dismissreject');
|
|
110
|
+
if (proceed)
|
|
111
|
+
this.close();
|
|
112
|
+
}
|
|
113
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
114
|
+
switch (name) {
|
|
115
|
+
case 'open':
|
|
116
|
+
const back = this.root.querySelector('.back');
|
|
117
|
+
const fore = back.querySelector('.fore');
|
|
118
|
+
const doOpen = !!newValue || typeof newValue === 'string';
|
|
119
|
+
fore.classList.remove('ready', 'moving');
|
|
120
|
+
fore.style.transform = doOpen
|
|
121
|
+
? 'translate(-50%, -50%)'
|
|
122
|
+
: fore.style.transform + ' translateY(-100vh)';
|
|
123
|
+
fore.classList.toggle('resize', this.canResize);
|
|
124
|
+
fore.classList.toggle('no-close', !this.canClose);
|
|
125
|
+
back.classList.toggle('open', doOpen);
|
|
126
|
+
if (doOpen) {
|
|
127
|
+
fore.style.minWidth = fore.style.width = '';
|
|
128
|
+
fore.style.minHeight = fore.style.height = '';
|
|
129
|
+
}
|
|
130
|
+
this.fire(doOpen ? 'open' : 'close');
|
|
131
|
+
break;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
connectedCallback() {
|
|
135
|
+
const back = this.root.querySelector('.back');
|
|
136
|
+
const fore = back.querySelector('.fore');
|
|
137
|
+
if (back.classList.contains('open')) {
|
|
138
|
+
fore.classList.add('ready');
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
resetOffscreenPosition(fore) {
|
|
142
|
+
fore.style.left = '50%';
|
|
143
|
+
fore.style.top = '50%';
|
|
144
|
+
fore.style.transform = 'translate(-50%, -100vh)';
|
|
145
|
+
}
|
|
146
|
+
/** Emits a new event. */
|
|
147
|
+
fire(event, detail) {
|
|
148
|
+
this.dispatchEvent(new CustomEvent(event, { detail }));
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
Popup.observedAttributes = ['open'];
|
|
152
|
+
Popup.Css = custElems.reduceCss(custElems.decode(stylesUrl));
|
|
153
153
|
Popup.Html = custElems.reduceHtml(custElems.decode(markupUrl));
|
|
154
154
|
|
|
155
|
-
if ('customElements' in window) {
|
|
156
|
-
window.customElements.define('ne14-pop', Popup);
|
|
155
|
+
if ('customElements' in window) {
|
|
156
|
+
window.customElements.define('ne14-pop', Popup);
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
exports.Popup = Popup;
|
package/dist/ne14_pop.esm.min.js
CHANGED
|
@@ -2,156 +2,156 @@ import { reduceCss, decode, reduceHtml, CustomElementBase } from '@ne1410s/cust-
|
|
|
2
2
|
|
|
3
3
|
var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+DQo=";
|
|
4
4
|
|
|
5
|
-
var stylesUrl = "data:text/css;base64,
|
|
5
|
+
var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOg0KICAgIGJveC1zaGFkb3cgMC4zcywNCiAgICBiYWNrZ3JvdW5kLWNvbG9yIDAuM3M7DQp9DQouZm9yZS5vdmVyIHsNCiAgY3Vyc29yOiBtb3ZlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOw0KfQ0KLmZvcmUubW92aW5nIHsNCiAgY3Vyc29yOiBjcm9zc2hhaXI7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjMwLCAyMzAsIDIzMCwgMSk7DQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KLmZvcmUub3ZlciwNCi5mb3JlLm1vdmluZyB7DQogIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwLjVlbSBibGFjayAhaW1wb3J0YW50Ow0KfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07DQogIG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07DQogIG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOw0KICBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjNzOw0KICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTsNCiAgYm94LXNoYWRvdzogdmFyKC0tYm94LXNoYWRvdyk7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjMpOw0KfQ0KLmZvcmUubm8tY2xvc2Ugew0KICBtYXgtd2lkdGg6IGNhbGMoMTAwdncgLSAxZW0pOw0KICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMWVtKTsNCn0NCi5mb3JlLm5vLWNsb3NlIC5jbG9zZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuY2xvc2Ugew0KICBjdXJzb3I6IHBvaW50ZXI7DQogIHRvcDogLTZweDsNCiAgcmlnaHQ6IDA7DQogIHBhZGRpbmc6IDAuMmVtOw0KfQ0KLmZvcmU6bm90KC5yZXNpemUpIC5zZS1yZXNpemUgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7DQogIGN1cnNvcjogc2UtcmVzaXplOw0KICBib3R0b206IC05cHg7DQogIHJpZ2h0OiAtNHB4Ow0KfQ0K";
|
|
6
6
|
|
|
7
|
-
class Popup extends CustomElementBase {
|
|
8
|
-
get canMove() {
|
|
9
|
-
return this.hasAttribute('move');
|
|
10
|
-
}
|
|
11
|
-
get canResize() {
|
|
12
|
-
return this.hasAttribute('resize');
|
|
13
|
-
}
|
|
14
|
-
get canShrink() {
|
|
15
|
-
return this.canResize && this.hasAttribute('shrink');
|
|
16
|
-
}
|
|
17
|
-
get canClose() {
|
|
18
|
-
return !this.hasAttribute('no-close');
|
|
19
|
-
}
|
|
20
|
-
constructor() {
|
|
21
|
-
super(Popup.Css, Popup.Html);
|
|
22
|
-
const back = this.root.querySelector('.back');
|
|
23
|
-
const fore = back.querySelector('.fore');
|
|
24
|
-
const resizer = fore.querySelector('.se-resize');
|
|
25
|
-
const closer = fore.querySelector('.close');
|
|
26
|
-
this.resetOffscreenPosition(fore);
|
|
27
|
-
closer.addEventListener('click', () => this.close());
|
|
28
|
-
resizer.addEventListener('mousedown', () => {
|
|
29
|
-
fore.classList.toggle('over', this.canResize);
|
|
30
|
-
fore.classList.toggle('resizing', this.canResize);
|
|
31
|
-
if (!this.canShrink && !fore.style.minWidth) {
|
|
32
|
-
const rect = fore.getBoundingClientRect();
|
|
33
|
-
fore.style.minWidth = rect.width + 'px';
|
|
34
|
-
fore.style.minHeight = rect.height + 'px';
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
back.addEventListener('mousedown', (event) => {
|
|
38
|
-
this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
|
|
39
|
-
this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
|
|
40
|
-
fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
|
|
41
|
-
});
|
|
42
|
-
fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
|
|
43
|
-
fore.addEventListener('mouseout', () => fore.classList.remove('over'));
|
|
44
|
-
window.addEventListener('mousemove', (event) => {
|
|
45
|
-
const rect = fore.getBoundingClientRect();
|
|
46
|
-
if (fore.classList.contains('resizing')) {
|
|
47
|
-
const adjust = 5;
|
|
48
|
-
fore.style.width = adjust + event.pageX - rect.x + 'px';
|
|
49
|
-
fore.style.height = adjust + event.pageY - rect.y + 'px';
|
|
50
|
-
}
|
|
51
|
-
else if (this.canMove && this._drag === 'fore' && this._coords) {
|
|
52
|
-
const backRect = back.getBoundingClientRect();
|
|
53
|
-
const deltaW = backRect.width - window.innerWidth;
|
|
54
|
-
const deltaH = backRect.height - window.innerHeight;
|
|
55
|
-
const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
|
|
56
|
-
const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
|
|
57
|
-
const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
|
|
58
|
-
const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
|
|
59
|
-
fore.style.top = fore.style.left = '0';
|
|
60
|
-
fore.style.transform = `translate(${x_css}, ${y_css})`;
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
window.addEventListener('mouseup', () => {
|
|
64
|
-
this._drag = null;
|
|
65
|
-
fore.classList.remove('moving', 'resizing');
|
|
66
|
-
});
|
|
67
|
-
back.addEventListener('mouseup', (event) => {
|
|
68
|
-
if (this._drag === 'back' && event.target === back)
|
|
69
|
-
this.dismiss();
|
|
70
|
-
this._drag = null;
|
|
71
|
-
fore.classList.remove('moving', 'resizing');
|
|
72
|
-
});
|
|
73
|
-
fore.addEventListener('transitionend', (event) => {
|
|
74
|
-
if (event.propertyName === 'transform') {
|
|
75
|
-
if (back.classList.contains('open')) {
|
|
76
|
-
fore.classList.add('ready');
|
|
77
|
-
}
|
|
78
|
-
else
|
|
79
|
-
this.resetOffscreenPosition(fore);
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
close() {
|
|
84
|
-
this.removeAttribute('open');
|
|
85
|
-
}
|
|
86
|
-
open() {
|
|
87
|
-
this.setAttribute('open', '');
|
|
88
|
-
}
|
|
89
|
-
wrap(selectorOrElem) {
|
|
90
|
-
const target = typeof selectorOrElem.append === 'function'
|
|
91
|
-
? selectorOrElem
|
|
92
|
-
: document.querySelector(selectorOrElem + '');
|
|
93
|
-
this.appendChild(target);
|
|
94
|
-
}
|
|
95
|
-
confirm() {
|
|
96
|
-
const doCheck = !!this.confirmCallback;
|
|
97
|
-
const proceed = !doCheck || this.confirmCallback();
|
|
98
|
-
if (doCheck)
|
|
99
|
-
this.fire(proceed ? 'confirmaccept' : 'confirmreject');
|
|
100
|
-
if (proceed)
|
|
101
|
-
this.close();
|
|
102
|
-
}
|
|
103
|
-
dismiss() {
|
|
104
|
-
const doCheck = !!this.dismissCallback;
|
|
105
|
-
const proceed = !doCheck || this.dismissCallback();
|
|
106
|
-
if (doCheck)
|
|
107
|
-
this.fire(proceed ? 'dismissaccept' : 'dismissreject');
|
|
108
|
-
if (proceed)
|
|
109
|
-
this.close();
|
|
110
|
-
}
|
|
111
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
112
|
-
switch (name) {
|
|
113
|
-
case 'open':
|
|
114
|
-
const back = this.root.querySelector('.back');
|
|
115
|
-
const fore = back.querySelector('.fore');
|
|
116
|
-
const doOpen = !!newValue || typeof newValue === 'string';
|
|
117
|
-
fore.classList.remove('ready', 'moving');
|
|
118
|
-
fore.style.transform = doOpen
|
|
119
|
-
? 'translate(-50%, -50%)'
|
|
120
|
-
: fore.style.transform + ' translateY(-100vh)';
|
|
121
|
-
fore.classList.toggle('resize', this.canResize);
|
|
122
|
-
fore.classList.toggle('no-close', !this.canClose);
|
|
123
|
-
back.classList.toggle('open', doOpen);
|
|
124
|
-
if (doOpen) {
|
|
125
|
-
fore.style.minWidth = fore.style.width = '';
|
|
126
|
-
fore.style.minHeight = fore.style.height = '';
|
|
127
|
-
}
|
|
128
|
-
this.fire(doOpen ? 'open' : 'close');
|
|
129
|
-
break;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
connectedCallback() {
|
|
133
|
-
const back = this.root.querySelector('.back');
|
|
134
|
-
const fore = back.querySelector('.fore');
|
|
135
|
-
if (back.classList.contains('open')) {
|
|
136
|
-
fore.classList.add('ready');
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
resetOffscreenPosition(fore) {
|
|
140
|
-
fore.style.left = '50%';
|
|
141
|
-
fore.style.top = '50%';
|
|
142
|
-
fore.style.transform = 'translate(-50%, -100vh)';
|
|
143
|
-
}
|
|
144
|
-
/** Emits a new event. */
|
|
145
|
-
fire(event, detail) {
|
|
146
|
-
this.dispatchEvent(new CustomEvent(event, { detail }));
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
Popup.observedAttributes = ['open'];
|
|
150
|
-
Popup.Css = reduceCss(decode(stylesUrl));
|
|
7
|
+
class Popup extends CustomElementBase {
|
|
8
|
+
get canMove() {
|
|
9
|
+
return this.hasAttribute('move');
|
|
10
|
+
}
|
|
11
|
+
get canResize() {
|
|
12
|
+
return this.hasAttribute('resize');
|
|
13
|
+
}
|
|
14
|
+
get canShrink() {
|
|
15
|
+
return this.canResize && this.hasAttribute('shrink');
|
|
16
|
+
}
|
|
17
|
+
get canClose() {
|
|
18
|
+
return !this.hasAttribute('no-close');
|
|
19
|
+
}
|
|
20
|
+
constructor() {
|
|
21
|
+
super(Popup.Css, Popup.Html);
|
|
22
|
+
const back = this.root.querySelector('.back');
|
|
23
|
+
const fore = back.querySelector('.fore');
|
|
24
|
+
const resizer = fore.querySelector('.se-resize');
|
|
25
|
+
const closer = fore.querySelector('.close');
|
|
26
|
+
this.resetOffscreenPosition(fore);
|
|
27
|
+
closer.addEventListener('click', () => this.close());
|
|
28
|
+
resizer.addEventListener('mousedown', () => {
|
|
29
|
+
fore.classList.toggle('over', this.canResize);
|
|
30
|
+
fore.classList.toggle('resizing', this.canResize);
|
|
31
|
+
if (!this.canShrink && !fore.style.minWidth) {
|
|
32
|
+
const rect = fore.getBoundingClientRect();
|
|
33
|
+
fore.style.minWidth = rect.width + 'px';
|
|
34
|
+
fore.style.minHeight = rect.height + 'px';
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
back.addEventListener('mousedown', (event) => {
|
|
38
|
+
this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
|
|
39
|
+
this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
|
|
40
|
+
fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
|
|
41
|
+
});
|
|
42
|
+
fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
|
|
43
|
+
fore.addEventListener('mouseout', () => fore.classList.remove('over'));
|
|
44
|
+
window.addEventListener('mousemove', (event) => {
|
|
45
|
+
const rect = fore.getBoundingClientRect();
|
|
46
|
+
if (fore.classList.contains('resizing')) {
|
|
47
|
+
const adjust = 5;
|
|
48
|
+
fore.style.width = adjust + event.pageX - rect.x + 'px';
|
|
49
|
+
fore.style.height = adjust + event.pageY - rect.y + 'px';
|
|
50
|
+
}
|
|
51
|
+
else if (this.canMove && this._drag === 'fore' && this._coords) {
|
|
52
|
+
const backRect = back.getBoundingClientRect();
|
|
53
|
+
const deltaW = backRect.width - window.innerWidth;
|
|
54
|
+
const deltaH = backRect.height - window.innerHeight;
|
|
55
|
+
const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
|
|
56
|
+
const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
|
|
57
|
+
const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
|
|
58
|
+
const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
|
|
59
|
+
fore.style.top = fore.style.left = '0';
|
|
60
|
+
fore.style.transform = `translate(${x_css}, ${y_css})`;
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
window.addEventListener('mouseup', () => {
|
|
64
|
+
this._drag = null;
|
|
65
|
+
fore.classList.remove('moving', 'resizing');
|
|
66
|
+
});
|
|
67
|
+
back.addEventListener('mouseup', (event) => {
|
|
68
|
+
if (this._drag === 'back' && event.target === back)
|
|
69
|
+
this.dismiss();
|
|
70
|
+
this._drag = null;
|
|
71
|
+
fore.classList.remove('moving', 'resizing');
|
|
72
|
+
});
|
|
73
|
+
fore.addEventListener('transitionend', (event) => {
|
|
74
|
+
if (event.propertyName === 'transform') {
|
|
75
|
+
if (back.classList.contains('open')) {
|
|
76
|
+
fore.classList.add('ready');
|
|
77
|
+
}
|
|
78
|
+
else
|
|
79
|
+
this.resetOffscreenPosition(fore);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
close() {
|
|
84
|
+
this.removeAttribute('open');
|
|
85
|
+
}
|
|
86
|
+
open() {
|
|
87
|
+
this.setAttribute('open', '');
|
|
88
|
+
}
|
|
89
|
+
wrap(selectorOrElem) {
|
|
90
|
+
const target = typeof selectorOrElem.append === 'function'
|
|
91
|
+
? selectorOrElem
|
|
92
|
+
: document.querySelector(selectorOrElem + '');
|
|
93
|
+
this.appendChild(target);
|
|
94
|
+
}
|
|
95
|
+
confirm() {
|
|
96
|
+
const doCheck = !!this.confirmCallback;
|
|
97
|
+
const proceed = !doCheck || this.confirmCallback();
|
|
98
|
+
if (doCheck)
|
|
99
|
+
this.fire(proceed ? 'confirmaccept' : 'confirmreject');
|
|
100
|
+
if (proceed)
|
|
101
|
+
this.close();
|
|
102
|
+
}
|
|
103
|
+
dismiss() {
|
|
104
|
+
const doCheck = !!this.dismissCallback;
|
|
105
|
+
const proceed = !doCheck || this.dismissCallback();
|
|
106
|
+
if (doCheck)
|
|
107
|
+
this.fire(proceed ? 'dismissaccept' : 'dismissreject');
|
|
108
|
+
if (proceed)
|
|
109
|
+
this.close();
|
|
110
|
+
}
|
|
111
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
112
|
+
switch (name) {
|
|
113
|
+
case 'open':
|
|
114
|
+
const back = this.root.querySelector('.back');
|
|
115
|
+
const fore = back.querySelector('.fore');
|
|
116
|
+
const doOpen = !!newValue || typeof newValue === 'string';
|
|
117
|
+
fore.classList.remove('ready', 'moving');
|
|
118
|
+
fore.style.transform = doOpen
|
|
119
|
+
? 'translate(-50%, -50%)'
|
|
120
|
+
: fore.style.transform + ' translateY(-100vh)';
|
|
121
|
+
fore.classList.toggle('resize', this.canResize);
|
|
122
|
+
fore.classList.toggle('no-close', !this.canClose);
|
|
123
|
+
back.classList.toggle('open', doOpen);
|
|
124
|
+
if (doOpen) {
|
|
125
|
+
fore.style.minWidth = fore.style.width = '';
|
|
126
|
+
fore.style.minHeight = fore.style.height = '';
|
|
127
|
+
}
|
|
128
|
+
this.fire(doOpen ? 'open' : 'close');
|
|
129
|
+
break;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
connectedCallback() {
|
|
133
|
+
const back = this.root.querySelector('.back');
|
|
134
|
+
const fore = back.querySelector('.fore');
|
|
135
|
+
if (back.classList.contains('open')) {
|
|
136
|
+
fore.classList.add('ready');
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
resetOffscreenPosition(fore) {
|
|
140
|
+
fore.style.left = '50%';
|
|
141
|
+
fore.style.top = '50%';
|
|
142
|
+
fore.style.transform = 'translate(-50%, -100vh)';
|
|
143
|
+
}
|
|
144
|
+
/** Emits a new event. */
|
|
145
|
+
fire(event, detail) {
|
|
146
|
+
this.dispatchEvent(new CustomEvent(event, { detail }));
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
Popup.observedAttributes = ['open'];
|
|
150
|
+
Popup.Css = reduceCss(decode(stylesUrl));
|
|
151
151
|
Popup.Html = reduceHtml(decode(markupUrl));
|
|
152
152
|
|
|
153
|
-
if ('customElements' in window) {
|
|
154
|
-
window.customElements.define('ne14-pop', Popup);
|
|
153
|
+
if ('customElements' in window) {
|
|
154
|
+
window.customElements.define('ne14-pop', Popup);
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
export { Popup };
|
package/dist/ne14_pop.umd.min.js
CHANGED
|
@@ -4,183 +4,183 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ne_pop = {}));
|
|
5
5
|
})(this, (function (exports) { 'use strict';
|
|
6
6
|
|
|
7
|
-
class CustomElementBase extends HTMLElement {
|
|
8
|
-
constructor(css, html, mode = 'closed') {
|
|
9
|
-
super();
|
|
10
|
-
this.root = this.attachShadow({ mode });
|
|
11
|
-
this.root.innerHTML = html;
|
|
12
|
-
const style = document.createElement('style');
|
|
13
|
-
style.textContent = css;
|
|
14
|
-
this.root.appendChild(style);
|
|
15
|
-
}
|
|
7
|
+
class CustomElementBase extends HTMLElement {
|
|
8
|
+
constructor(css, html, mode = 'closed') {
|
|
9
|
+
super();
|
|
10
|
+
this.root = this.attachShadow({ mode });
|
|
11
|
+
this.root.innerHTML = html;
|
|
12
|
+
const style = document.createElement('style');
|
|
13
|
+
style.textContent = css;
|
|
14
|
+
this.root.appendChild(style);
|
|
15
|
+
}
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
function decode(b64) {
|
|
19
|
-
const bIndex = (b64 + '').indexOf('base64,');
|
|
20
|
-
return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
|
|
21
|
-
}
|
|
22
|
-
function reduceCss(cssIn) {
|
|
23
|
-
return cssIn
|
|
24
|
-
.replace(/\s+/g, ' ')
|
|
25
|
-
.replace(/([,{}:;])\s/g, '$1')
|
|
26
|
-
.replace(/\s([{])/g, '$1');
|
|
27
|
-
}
|
|
28
|
-
function reduceHtml(htmlIn) {
|
|
29
|
-
return htmlIn.replace(/\s+/g, ' ').replace(/(^|>)\s+(<|$)/g, '$1$2');
|
|
18
|
+
function decode(b64) {
|
|
19
|
+
const bIndex = (b64 + '').indexOf('base64,');
|
|
20
|
+
return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
|
|
21
|
+
}
|
|
22
|
+
function reduceCss(cssIn) {
|
|
23
|
+
return cssIn
|
|
24
|
+
.replace(/\s+/g, ' ')
|
|
25
|
+
.replace(/([,{}:;])\s/g, '$1')
|
|
26
|
+
.replace(/\s([{])/g, '$1');
|
|
27
|
+
}
|
|
28
|
+
function reduceHtml(htmlIn) {
|
|
29
|
+
return htmlIn.replace(/\s+/g, ' ').replace(/(^|>)\s+(<|$)/g, '$1$2');
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+DQo=";
|
|
33
33
|
|
|
34
|
-
var stylesUrl = "data:text/css;base64,
|
|
34
|
+
var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOg0KICAgIGJveC1zaGFkb3cgMC4zcywNCiAgICBiYWNrZ3JvdW5kLWNvbG9yIDAuM3M7DQp9DQouZm9yZS5vdmVyIHsNCiAgY3Vyc29yOiBtb3ZlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1MCwgMjUwLCAyNTAsIDEpOw0KfQ0KLmZvcmUubW92aW5nIHsNCiAgY3Vyc29yOiBjcm9zc2hhaXI7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjMwLCAyMzAsIDIzMCwgMSk7DQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KLmZvcmUub3ZlciwNCi5mb3JlLm1vdmluZyB7DQogIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwLjVlbSBibGFjayAhaW1wb3J0YW50Ow0KfQ0KLmZvcmUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICBtaW4td2lkdGg6IDFyZW07DQogIG1heC13aWR0aDogMTAwdnc7DQogIG1pbi1oZWlnaHQ6IDFyZW07DQogIG1heC1oZWlnaHQ6IDEwMHZoOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRvcDogNTAlOw0KICBsZWZ0OiA1MCU7DQogIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjNzOw0KICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTsNCiAgYm94LXNoYWRvdzogdmFyKC0tYm94LXNoYWRvdyk7DQp9DQouZm9yZSA+IHNwYW4gew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMS41ZW07DQogIHVzZXItc2VsZWN0OiBub25lOw0KICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjMpOw0KfQ0KLmZvcmUubm8tY2xvc2Ugew0KICBtYXgtd2lkdGg6IGNhbGMoMTAwdncgLSAxZW0pOw0KICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMWVtKTsNCn0NCi5mb3JlLm5vLWNsb3NlIC5jbG9zZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuY2xvc2Ugew0KICBjdXJzb3I6IHBvaW50ZXI7DQogIHRvcDogLTZweDsNCiAgcmlnaHQ6IDA7DQogIHBhZGRpbmc6IDAuMmVtOw0KfQ0KLmZvcmU6bm90KC5yZXNpemUpIC5zZS1yZXNpemUgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmZvcmUgLnNlLXJlc2l6ZSB7DQogIGN1cnNvcjogc2UtcmVzaXplOw0KICBib3R0b206IC05cHg7DQogIHJpZ2h0OiAtNHB4Ow0KfQ0K";
|
|
35
35
|
|
|
36
|
-
class Popup extends CustomElementBase {
|
|
37
|
-
get canMove() {
|
|
38
|
-
return this.hasAttribute('move');
|
|
39
|
-
}
|
|
40
|
-
get canResize() {
|
|
41
|
-
return this.hasAttribute('resize');
|
|
42
|
-
}
|
|
43
|
-
get canShrink() {
|
|
44
|
-
return this.canResize && this.hasAttribute('shrink');
|
|
45
|
-
}
|
|
46
|
-
get canClose() {
|
|
47
|
-
return !this.hasAttribute('no-close');
|
|
48
|
-
}
|
|
49
|
-
constructor() {
|
|
50
|
-
super(Popup.Css, Popup.Html);
|
|
51
|
-
const back = this.root.querySelector('.back');
|
|
52
|
-
const fore = back.querySelector('.fore');
|
|
53
|
-
const resizer = fore.querySelector('.se-resize');
|
|
54
|
-
const closer = fore.querySelector('.close');
|
|
55
|
-
this.resetOffscreenPosition(fore);
|
|
56
|
-
closer.addEventListener('click', () => this.close());
|
|
57
|
-
resizer.addEventListener('mousedown', () => {
|
|
58
|
-
fore.classList.toggle('over', this.canResize);
|
|
59
|
-
fore.classList.toggle('resizing', this.canResize);
|
|
60
|
-
if (!this.canShrink && !fore.style.minWidth) {
|
|
61
|
-
const rect = fore.getBoundingClientRect();
|
|
62
|
-
fore.style.minWidth = rect.width + 'px';
|
|
63
|
-
fore.style.minHeight = rect.height + 'px';
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
back.addEventListener('mousedown', (event) => {
|
|
67
|
-
this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
|
|
68
|
-
this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
|
|
69
|
-
fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
|
|
70
|
-
});
|
|
71
|
-
fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
|
|
72
|
-
fore.addEventListener('mouseout', () => fore.classList.remove('over'));
|
|
73
|
-
window.addEventListener('mousemove', (event) => {
|
|
74
|
-
const rect = fore.getBoundingClientRect();
|
|
75
|
-
if (fore.classList.contains('resizing')) {
|
|
76
|
-
const adjust = 5;
|
|
77
|
-
fore.style.width = adjust + event.pageX - rect.x + 'px';
|
|
78
|
-
fore.style.height = adjust + event.pageY - rect.y + 'px';
|
|
79
|
-
}
|
|
80
|
-
else if (this.canMove && this._drag === 'fore' && this._coords) {
|
|
81
|
-
const backRect = back.getBoundingClientRect();
|
|
82
|
-
const deltaW = backRect.width - window.innerWidth;
|
|
83
|
-
const deltaH = backRect.height - window.innerHeight;
|
|
84
|
-
const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
|
|
85
|
-
const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
|
|
86
|
-
const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
|
|
87
|
-
const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
|
|
88
|
-
fore.style.top = fore.style.left = '0';
|
|
89
|
-
fore.style.transform = `translate(${x_css}, ${y_css})`;
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
window.addEventListener('mouseup', () => {
|
|
93
|
-
this._drag = null;
|
|
94
|
-
fore.classList.remove('moving', 'resizing');
|
|
95
|
-
});
|
|
96
|
-
back.addEventListener('mouseup', (event) => {
|
|
97
|
-
if (this._drag === 'back' && event.target === back)
|
|
98
|
-
this.dismiss();
|
|
99
|
-
this._drag = null;
|
|
100
|
-
fore.classList.remove('moving', 'resizing');
|
|
101
|
-
});
|
|
102
|
-
fore.addEventListener('transitionend', (event) => {
|
|
103
|
-
if (event.propertyName === 'transform') {
|
|
104
|
-
if (back.classList.contains('open')) {
|
|
105
|
-
fore.classList.add('ready');
|
|
106
|
-
}
|
|
107
|
-
else
|
|
108
|
-
this.resetOffscreenPosition(fore);
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
close() {
|
|
113
|
-
this.removeAttribute('open');
|
|
114
|
-
}
|
|
115
|
-
open() {
|
|
116
|
-
this.setAttribute('open', '');
|
|
117
|
-
}
|
|
118
|
-
wrap(selectorOrElem) {
|
|
119
|
-
const target = typeof selectorOrElem.append === 'function'
|
|
120
|
-
? selectorOrElem
|
|
121
|
-
: document.querySelector(selectorOrElem + '');
|
|
122
|
-
this.appendChild(target);
|
|
123
|
-
}
|
|
124
|
-
confirm() {
|
|
125
|
-
const doCheck = !!this.confirmCallback;
|
|
126
|
-
const proceed = !doCheck || this.confirmCallback();
|
|
127
|
-
if (doCheck)
|
|
128
|
-
this.fire(proceed ? 'confirmaccept' : 'confirmreject');
|
|
129
|
-
if (proceed)
|
|
130
|
-
this.close();
|
|
131
|
-
}
|
|
132
|
-
dismiss() {
|
|
133
|
-
const doCheck = !!this.dismissCallback;
|
|
134
|
-
const proceed = !doCheck || this.dismissCallback();
|
|
135
|
-
if (doCheck)
|
|
136
|
-
this.fire(proceed ? 'dismissaccept' : 'dismissreject');
|
|
137
|
-
if (proceed)
|
|
138
|
-
this.close();
|
|
139
|
-
}
|
|
140
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
141
|
-
switch (name) {
|
|
142
|
-
case 'open':
|
|
143
|
-
const back = this.root.querySelector('.back');
|
|
144
|
-
const fore = back.querySelector('.fore');
|
|
145
|
-
const doOpen = !!newValue || typeof newValue === 'string';
|
|
146
|
-
fore.classList.remove('ready', 'moving');
|
|
147
|
-
fore.style.transform = doOpen
|
|
148
|
-
? 'translate(-50%, -50%)'
|
|
149
|
-
: fore.style.transform + ' translateY(-100vh)';
|
|
150
|
-
fore.classList.toggle('resize', this.canResize);
|
|
151
|
-
fore.classList.toggle('no-close', !this.canClose);
|
|
152
|
-
back.classList.toggle('open', doOpen);
|
|
153
|
-
if (doOpen) {
|
|
154
|
-
fore.style.minWidth = fore.style.width = '';
|
|
155
|
-
fore.style.minHeight = fore.style.height = '';
|
|
156
|
-
}
|
|
157
|
-
this.fire(doOpen ? 'open' : 'close');
|
|
158
|
-
break;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
connectedCallback() {
|
|
162
|
-
const back = this.root.querySelector('.back');
|
|
163
|
-
const fore = back.querySelector('.fore');
|
|
164
|
-
if (back.classList.contains('open')) {
|
|
165
|
-
fore.classList.add('ready');
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
resetOffscreenPosition(fore) {
|
|
169
|
-
fore.style.left = '50%';
|
|
170
|
-
fore.style.top = '50%';
|
|
171
|
-
fore.style.transform = 'translate(-50%, -100vh)';
|
|
172
|
-
}
|
|
173
|
-
/** Emits a new event. */
|
|
174
|
-
fire(event, detail) {
|
|
175
|
-
this.dispatchEvent(new CustomEvent(event, { detail }));
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
Popup.observedAttributes = ['open'];
|
|
179
|
-
Popup.Css = reduceCss(decode(stylesUrl));
|
|
36
|
+
class Popup extends CustomElementBase {
|
|
37
|
+
get canMove() {
|
|
38
|
+
return this.hasAttribute('move');
|
|
39
|
+
}
|
|
40
|
+
get canResize() {
|
|
41
|
+
return this.hasAttribute('resize');
|
|
42
|
+
}
|
|
43
|
+
get canShrink() {
|
|
44
|
+
return this.canResize && this.hasAttribute('shrink');
|
|
45
|
+
}
|
|
46
|
+
get canClose() {
|
|
47
|
+
return !this.hasAttribute('no-close');
|
|
48
|
+
}
|
|
49
|
+
constructor() {
|
|
50
|
+
super(Popup.Css, Popup.Html);
|
|
51
|
+
const back = this.root.querySelector('.back');
|
|
52
|
+
const fore = back.querySelector('.fore');
|
|
53
|
+
const resizer = fore.querySelector('.se-resize');
|
|
54
|
+
const closer = fore.querySelector('.close');
|
|
55
|
+
this.resetOffscreenPosition(fore);
|
|
56
|
+
closer.addEventListener('click', () => this.close());
|
|
57
|
+
resizer.addEventListener('mousedown', () => {
|
|
58
|
+
fore.classList.toggle('over', this.canResize);
|
|
59
|
+
fore.classList.toggle('resizing', this.canResize);
|
|
60
|
+
if (!this.canShrink && !fore.style.minWidth) {
|
|
61
|
+
const rect = fore.getBoundingClientRect();
|
|
62
|
+
fore.style.minWidth = rect.width + 'px';
|
|
63
|
+
fore.style.minHeight = rect.height + 'px';
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
back.addEventListener('mousedown', (event) => {
|
|
67
|
+
this._drag = event.target === back ? 'back' : event.target === fore ? 'fore' : 'fore*';
|
|
68
|
+
this._coords = this._drag !== 'fore' ? null : { x: event.offsetX, y: event.offsetY };
|
|
69
|
+
fore.classList.toggle('moving', this.canMove && this._drag === 'fore');
|
|
70
|
+
});
|
|
71
|
+
fore.addEventListener('mouseover', (event) => fore.classList.toggle('over', this.canMove && event.target === fore));
|
|
72
|
+
fore.addEventListener('mouseout', () => fore.classList.remove('over'));
|
|
73
|
+
window.addEventListener('mousemove', (event) => {
|
|
74
|
+
const rect = fore.getBoundingClientRect();
|
|
75
|
+
if (fore.classList.contains('resizing')) {
|
|
76
|
+
const adjust = 5;
|
|
77
|
+
fore.style.width = adjust + event.pageX - rect.x + 'px';
|
|
78
|
+
fore.style.height = adjust + event.pageY - rect.y + 'px';
|
|
79
|
+
}
|
|
80
|
+
else if (this.canMove && this._drag === 'fore' && this._coords) {
|
|
81
|
+
const backRect = back.getBoundingClientRect();
|
|
82
|
+
const deltaW = backRect.width - window.innerWidth;
|
|
83
|
+
const deltaH = backRect.height - window.innerHeight;
|
|
84
|
+
const x_min_pc = (100 * Math.max(0, event.pageX - this._coords.x)) / window.innerWidth;
|
|
85
|
+
const y_min_pc = (100 * Math.max(0, event.pageY - this._coords.y)) / window.innerHeight;
|
|
86
|
+
const x_css = `min(${x_min_pc.toFixed(2)}vw, ${deltaW}px + 100vw - 100%)`;
|
|
87
|
+
const y_css = `min(${y_min_pc.toFixed(2)}vh, ${deltaH}px + 100vh - 100%)`;
|
|
88
|
+
fore.style.top = fore.style.left = '0';
|
|
89
|
+
fore.style.transform = `translate(${x_css}, ${y_css})`;
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
window.addEventListener('mouseup', () => {
|
|
93
|
+
this._drag = null;
|
|
94
|
+
fore.classList.remove('moving', 'resizing');
|
|
95
|
+
});
|
|
96
|
+
back.addEventListener('mouseup', (event) => {
|
|
97
|
+
if (this._drag === 'back' && event.target === back)
|
|
98
|
+
this.dismiss();
|
|
99
|
+
this._drag = null;
|
|
100
|
+
fore.classList.remove('moving', 'resizing');
|
|
101
|
+
});
|
|
102
|
+
fore.addEventListener('transitionend', (event) => {
|
|
103
|
+
if (event.propertyName === 'transform') {
|
|
104
|
+
if (back.classList.contains('open')) {
|
|
105
|
+
fore.classList.add('ready');
|
|
106
|
+
}
|
|
107
|
+
else
|
|
108
|
+
this.resetOffscreenPosition(fore);
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
close() {
|
|
113
|
+
this.removeAttribute('open');
|
|
114
|
+
}
|
|
115
|
+
open() {
|
|
116
|
+
this.setAttribute('open', '');
|
|
117
|
+
}
|
|
118
|
+
wrap(selectorOrElem) {
|
|
119
|
+
const target = typeof selectorOrElem.append === 'function'
|
|
120
|
+
? selectorOrElem
|
|
121
|
+
: document.querySelector(selectorOrElem + '');
|
|
122
|
+
this.appendChild(target);
|
|
123
|
+
}
|
|
124
|
+
confirm() {
|
|
125
|
+
const doCheck = !!this.confirmCallback;
|
|
126
|
+
const proceed = !doCheck || this.confirmCallback();
|
|
127
|
+
if (doCheck)
|
|
128
|
+
this.fire(proceed ? 'confirmaccept' : 'confirmreject');
|
|
129
|
+
if (proceed)
|
|
130
|
+
this.close();
|
|
131
|
+
}
|
|
132
|
+
dismiss() {
|
|
133
|
+
const doCheck = !!this.dismissCallback;
|
|
134
|
+
const proceed = !doCheck || this.dismissCallback();
|
|
135
|
+
if (doCheck)
|
|
136
|
+
this.fire(proceed ? 'dismissaccept' : 'dismissreject');
|
|
137
|
+
if (proceed)
|
|
138
|
+
this.close();
|
|
139
|
+
}
|
|
140
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
141
|
+
switch (name) {
|
|
142
|
+
case 'open':
|
|
143
|
+
const back = this.root.querySelector('.back');
|
|
144
|
+
const fore = back.querySelector('.fore');
|
|
145
|
+
const doOpen = !!newValue || typeof newValue === 'string';
|
|
146
|
+
fore.classList.remove('ready', 'moving');
|
|
147
|
+
fore.style.transform = doOpen
|
|
148
|
+
? 'translate(-50%, -50%)'
|
|
149
|
+
: fore.style.transform + ' translateY(-100vh)';
|
|
150
|
+
fore.classList.toggle('resize', this.canResize);
|
|
151
|
+
fore.classList.toggle('no-close', !this.canClose);
|
|
152
|
+
back.classList.toggle('open', doOpen);
|
|
153
|
+
if (doOpen) {
|
|
154
|
+
fore.style.minWidth = fore.style.width = '';
|
|
155
|
+
fore.style.minHeight = fore.style.height = '';
|
|
156
|
+
}
|
|
157
|
+
this.fire(doOpen ? 'open' : 'close');
|
|
158
|
+
break;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
connectedCallback() {
|
|
162
|
+
const back = this.root.querySelector('.back');
|
|
163
|
+
const fore = back.querySelector('.fore');
|
|
164
|
+
if (back.classList.contains('open')) {
|
|
165
|
+
fore.classList.add('ready');
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
resetOffscreenPosition(fore) {
|
|
169
|
+
fore.style.left = '50%';
|
|
170
|
+
fore.style.top = '50%';
|
|
171
|
+
fore.style.transform = 'translate(-50%, -100vh)';
|
|
172
|
+
}
|
|
173
|
+
/** Emits a new event. */
|
|
174
|
+
fire(event, detail) {
|
|
175
|
+
this.dispatchEvent(new CustomEvent(event, { detail }));
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
Popup.observedAttributes = ['open'];
|
|
179
|
+
Popup.Css = reduceCss(decode(stylesUrl));
|
|
180
180
|
Popup.Html = reduceHtml(decode(markupUrl));
|
|
181
181
|
|
|
182
|
-
if ('customElements' in window) {
|
|
183
|
-
window.customElements.define('ne14-pop', Popup);
|
|
182
|
+
if ('customElements' in window) {
|
|
183
|
+
window.customElements.define('ne14-pop', Popup);
|
|
184
184
|
}
|
|
185
185
|
|
|
186
186
|
exports.Popup = Popup;
|
package/dist/popup/popup.d.ts
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { CustomElementBase } from '@ne1410s/cust-elems';
|
|
2
|
-
export declare class Popup extends CustomElementBase {
|
|
3
|
-
static readonly observedAttributes: string[];
|
|
4
|
-
private static readonly Css;
|
|
5
|
-
private static readonly Html;
|
|
6
|
-
protected get canMove(): boolean;
|
|
7
|
-
protected get canResize(): boolean;
|
|
8
|
-
protected get canShrink(): boolean;
|
|
9
|
-
private get canClose();
|
|
10
|
-
private _coords;
|
|
11
|
-
private _drag;
|
|
12
|
-
confirmCallback: () => boolean;
|
|
13
|
-
dismissCallback: () => boolean;
|
|
14
|
-
constructor();
|
|
15
|
-
close(): void;
|
|
16
|
-
open(): void;
|
|
17
|
-
wrap(selectorOrElem: string | Element): void;
|
|
18
|
-
confirm(): void;
|
|
19
|
-
dismiss(): void;
|
|
20
|
-
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
21
|
-
connectedCallback(): void;
|
|
22
|
-
private resetOffscreenPosition;
|
|
23
|
-
/** Emits a new event. */
|
|
24
|
-
private fire;
|
|
25
|
-
}
|
|
1
|
+
import { CustomElementBase } from '@ne1410s/cust-elems';
|
|
2
|
+
export declare class Popup extends CustomElementBase {
|
|
3
|
+
static readonly observedAttributes: string[];
|
|
4
|
+
private static readonly Css;
|
|
5
|
+
private static readonly Html;
|
|
6
|
+
protected get canMove(): boolean;
|
|
7
|
+
protected get canResize(): boolean;
|
|
8
|
+
protected get canShrink(): boolean;
|
|
9
|
+
private get canClose();
|
|
10
|
+
private _coords;
|
|
11
|
+
private _drag;
|
|
12
|
+
confirmCallback: () => boolean;
|
|
13
|
+
dismissCallback: () => boolean;
|
|
14
|
+
constructor();
|
|
15
|
+
close(): void;
|
|
16
|
+
open(): void;
|
|
17
|
+
wrap(selectorOrElem: string | Element): void;
|
|
18
|
+
confirm(): void;
|
|
19
|
+
dismiss(): void;
|
|
20
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
21
|
+
connectedCallback(): void;
|
|
22
|
+
private resetOffscreenPosition;
|
|
23
|
+
/** Emits a new event. */
|
|
24
|
+
private fire;
|
|
25
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ne1410s/popup",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"description": "A lightweight configurable popup.",
|
|
5
5
|
"main": "dist/ne14_pop.cjs.min.js",
|
|
6
6
|
"module": "dist/ne14_pop.esm.min.js",
|
|
@@ -38,17 +38,17 @@
|
|
|
38
38
|
},
|
|
39
39
|
"homepage": "https://github.com/ne14-fed/elem.popup#readme",
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@rollup/plugin-commonjs": "^
|
|
41
|
+
"@rollup/plugin-commonjs": "^25.0.3",
|
|
42
42
|
"@rollup/plugin-json": "^6.0.0",
|
|
43
|
-
"@rollup/plugin-node-resolve": "^15.0
|
|
43
|
+
"@rollup/plugin-node-resolve": "^15.1.0",
|
|
44
44
|
"@rollup/plugin-url": "^8.0.1",
|
|
45
|
-
"prettier": "^
|
|
46
|
-
"rimraf": "^
|
|
47
|
-
"rollup": "^3.
|
|
48
|
-
"rollup-plugin-typescript2": "^0.
|
|
49
|
-
"typescript": "^
|
|
45
|
+
"prettier": "^3.0.0",
|
|
46
|
+
"rimraf": "^5.0.1",
|
|
47
|
+
"rollup": "^3.26.3",
|
|
48
|
+
"rollup-plugin-typescript2": "^0.35.0",
|
|
49
|
+
"typescript": "^5.1.6"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@ne1410s/cust-elems": "^0.3.
|
|
52
|
+
"@ne1410s/cust-elems": "^0.3.5"
|
|
53
53
|
}
|
|
54
54
|
}
|