@ne1410s/popup 0.3.3 → 0.3.4

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.
Files changed (6) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/ne14_pop.cjs.min.js +146 -146
  3. package/dist/ne14_pop.esm.min.js +146 -146
  4. package/dist/ne14_pop.umd.min.js +167 -167
  5. package/dist/popup/popup.d.ts +25 -25
  6. package/package.json +7 -7
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
@@ -6,154 +6,154 @@ var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc
6
6
 
7
7
  var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuM3MsIGJhY2tncm91bmQtY29sb3IgMC4zczsNCn0NCi5mb3JlLm92ZXIgew0KICBjdXJzb3I6IG1vdmU7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjUwLCAyNTAsIDI1MCwgMSk7DQp9DQouZm9yZS5tb3Zpbmcgew0KICBjdXJzb3I6IGNyb3NzaGFpcjsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQp9DQouZm9yZS5vdmVyLA0KLmZvcmUubW92aW5nIHsNCiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAuNWVtIGJsYWNrICFpbXBvcnRhbnQ7DQp9DQouZm9yZSB7DQogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7DQogIG1pbi13aWR0aDogMXJlbTsNCiAgbWF4LXdpZHRoOiAxMDB2dzsNCiAgbWluLWhlaWdodDogMXJlbTsNCiAgbWF4LWhlaWdodDogMTAwdmg7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdG9wOiA1MCU7DQogIGxlZnQ6IDUwJTsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuM3M7DQogIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpOw0KICBib3gtc2hhZG93OiB2YXIoLS1ib3gtc2hhZG93KTsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
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
@@ -4,154 +4,154 @@ var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc
4
4
 
5
5
  var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuM3MsIGJhY2tncm91bmQtY29sb3IgMC4zczsNCn0NCi5mb3JlLm92ZXIgew0KICBjdXJzb3I6IG1vdmU7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjUwLCAyNTAsIDI1MCwgMSk7DQp9DQouZm9yZS5tb3Zpbmcgew0KICBjdXJzb3I6IGNyb3NzaGFpcjsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQp9DQouZm9yZS5vdmVyLA0KLmZvcmUubW92aW5nIHsNCiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAuNWVtIGJsYWNrICFpbXBvcnRhbnQ7DQp9DQouZm9yZSB7DQogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7DQogIG1pbi13aWR0aDogMXJlbTsNCiAgbWF4LXdpZHRoOiAxMDB2dzsNCiAgbWluLWhlaWdodDogMXJlbTsNCiAgbWF4LWhlaWdodDogMTAwdmg7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdG9wOiA1MCU7DQogIGxlZnQ6IDUwJTsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuM3M7DQogIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpOw0KICBib3gtc2hhZG93OiB2YXIoLS1ib3gtc2hhZG93KTsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
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
34
  var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuM3MsIGJhY2tncm91bmQtY29sb3IgMC4zczsNCn0NCi5mb3JlLm92ZXIgew0KICBjdXJzb3I6IG1vdmU7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjUwLCAyNTAsIDI1MCwgMSk7DQp9DQouZm9yZS5tb3Zpbmcgew0KICBjdXJzb3I6IGNyb3NzaGFpcjsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQp9DQouZm9yZS5vdmVyLA0KLmZvcmUubW92aW5nIHsNCiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAuNWVtIGJsYWNrICFpbXBvcnRhbnQ7DQp9DQouZm9yZSB7DQogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7DQogIG1pbi13aWR0aDogMXJlbTsNCiAgbWF4LXdpZHRoOiAxMDB2dzsNCiAgbWluLWhlaWdodDogMXJlbTsNCiAgbWF4LWhlaWdodDogMTAwdmg7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdG9wOiA1MCU7DQogIGxlZnQ6IDUwJTsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuM3M7DQogIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpOw0KICBib3gtc2hhZG93OiB2YXIoLS1ib3gtc2hhZG93KTsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
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",
3
+ "version": "0.3.4",
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",
@@ -40,15 +40,15 @@
40
40
  "devDependencies": {
41
41
  "@rollup/plugin-commonjs": "^24.0.1",
42
42
  "@rollup/plugin-json": "^6.0.0",
43
- "@rollup/plugin-node-resolve": "^15.0.1",
43
+ "@rollup/plugin-node-resolve": "^15.0.2",
44
44
  "@rollup/plugin-url": "^8.0.1",
45
- "prettier": "^2.8.4",
46
- "rimraf": "^4.3.1",
47
- "rollup": "^3.18.0",
45
+ "prettier": "^2.8.7",
46
+ "rimraf": "^4.4.1",
47
+ "rollup": "^3.20.2",
48
48
  "rollup-plugin-typescript2": "^0.34.1",
49
- "typescript": "^4.9.5"
49
+ "typescript": "^5.0.4"
50
50
  },
51
51
  "dependencies": {
52
- "@ne1410s/cust-elems": "^0.3.3"
52
+ "@ne1410s/cust-elems": "^0.3.4"
53
53
  }
54
54
  }