@ne1410s/menu 0.1.2 → 0.1.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.
@@ -29,413 +29,413 @@
29
29
  return to.concat(ar || Array.prototype.slice.call(from));
30
30
  }
31
31
 
32
- var ChainedQuery = /** @class */ (function () {
33
- function ChainedQuery(mapper) {
34
- var sources = [];
35
- for (var _i = 1; _i < arguments.length; _i++) {
36
- sources[_i - 1] = arguments[_i];
37
- }
38
- var _this = this;
39
- this.mapper = mapper;
40
- this._items = [];
41
- this.get = function (index) { return _this._items[index]; };
42
- this.add.apply(this, sources);
43
- }
44
- Object.defineProperty(ChainedQuery.prototype, "targets", {
45
- get: function () {
46
- return this._items.filter(function (it) { return it instanceof EventTarget; }).map(function (it) { return it; });
47
- },
48
- enumerable: false,
49
- configurable: true
50
- });
51
- Object.defineProperty(ChainedQuery.prototype, "elements", {
52
- get: function () {
53
- return this._items.filter(function (it) { return it instanceof Element; }).map(function (it) { return it; });
54
- },
55
- enumerable: false,
56
- configurable: true
57
- });
58
- Object.defineProperty(ChainedQuery.prototype, "nodes", {
59
- get: function () {
60
- return this._items.filter(function (it) { return it instanceof Node; }).map(function (it) { return it; });
61
- },
62
- enumerable: false,
63
- configurable: true
64
- });
65
- Object.defineProperty(ChainedQuery.prototype, "containers", {
66
- get: function () {
67
- return this._items.map(function (it) { return it; }).filter(function (p) { return typeof p.append === 'function'; });
68
- },
69
- enumerable: false,
70
- configurable: true
71
- });
72
- Object.defineProperty(ChainedQuery.prototype, "length", {
73
- get: function () {
74
- return this._items.length;
75
- },
76
- enumerable: false,
77
- configurable: true
78
- });
79
- ChainedQuery.prototype.add = function () {
80
- var _a;
81
- var sources = [];
82
- for (var _i = 0; _i < arguments.length; _i++) {
83
- sources[_i] = arguments[_i];
84
- }
85
- (_a = this._items).push.apply(_a, this.mapper.Map(sources));
86
- return this;
87
- };
88
- // TODO: This must not fall over if trying to perform an action
89
- // on an inappropriate type. eg setting an attribute on window, or
90
- // trying to query a non-parent node..
91
- ChainedQuery.prototype.each = function (func) {
92
- this._items.forEach(function (item, i) { return func(item, i); });
93
- return this;
94
- };
95
- ChainedQuery.prototype.prop = function (name, value) {
96
- return this.each(function (item) {
97
- if (name in item) {
98
- item[name] = value;
99
- }
100
- });
101
- };
102
- //#region Targets
103
- ChainedQuery.prototype.fire = function (eventName, detail) {
104
- var evt = new CustomEvent(eventName, { detail: detail });
105
- this.targets.forEach(function (t) { return t.dispatchEvent(evt); });
106
- return this;
107
- };
108
- ChainedQuery.prototype.on = function (eventNames, func) {
109
- var evts = eventNames.split(ChainedQuery.WHITESPACE_RGX);
110
- this.targets.forEach(function (t) {
111
- evts.forEach(function (name) { return t.addEventListener(name, func); });
112
- });
113
- return this;
114
- };
115
- //#endregion
116
- //#region Elements
117
- ChainedQuery.prototype.attr = function (name, value, ns) {
118
- this.elements.forEach(function (elem) {
119
- if (value != null)
120
- elem.setAttributeNS(ns, name, value);
121
- else
122
- elem.removeAttributeNS(ns, name);
123
- });
124
- return this;
125
- };
126
- ChainedQuery.prototype.toggle = function (className, doSet) {
127
- this.elements.forEach(function (elem) {
128
- var force = typeof doSet === 'function' ? doSet(elem) : !!doSet;
129
- elem.classList.toggle(className, force);
130
- });
131
- return this;
132
- };
133
- //#endregion
134
- //#region Nodes
135
- ChainedQuery.prototype.empty = function () {
136
- this.nodes.forEach(function (n) {
137
- while (n.firstChild) {
138
- n.removeChild(n.firstChild);
139
- }
140
- });
141
- return this;
142
- };
143
- ChainedQuery.prototype.remove = function () {
144
- return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this._items.filter(function (it) {
145
- var handle = it instanceof Node;
146
- if (handle)
147
- it.parentNode.removeChild(it);
148
- return !handle;
149
- }), false)))();
150
- };
151
- //#endregion
152
- //#region Containers
153
- ChainedQuery.prototype.append = function () {
154
- var sources = [];
155
- for (var _i = 0; _i < arguments.length; _i++) {
156
- sources[_i] = arguments[_i];
157
- }
158
- this.appendIn.apply(this, sources);
159
- return this;
160
- };
161
- ChainedQuery.prototype.appendIn = function () {
162
- var _this = this;
163
- var sources = [];
164
- for (var _i = 0; _i < arguments.length; _i++) {
165
- sources[_i] = arguments[_i];
166
- }
167
- return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.reduce(function (acc, parent) {
168
- var nodes = new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, _this.mapper], sources, false)))().nodes;
169
- parent.append.apply(parent, nodes);
170
- acc.push.apply(acc, nodes);
171
- return acc;
172
- }, []), false)))();
173
- };
174
- ChainedQuery.prototype.find = function (selector) {
175
- return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.reduce(function (acc, parent) {
176
- acc.push.apply(acc, Array.from(parent.querySelectorAll(selector)));
177
- return acc;
178
- }, []), false)))();
179
- };
180
- ChainedQuery.prototype.first = function (selector) {
181
- return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.map(function (parent) { return parent.querySelector(selector); }).filter(function (found) { return !!found; }), false)))();
182
- };
183
- ChainedQuery.WHITESPACE_RGX = /\s+/;
184
- return ChainedQuery;
32
+ var ChainedQuery = /** @class */ (function () {
33
+ function ChainedQuery(mapper) {
34
+ var sources = [];
35
+ for (var _i = 1; _i < arguments.length; _i++) {
36
+ sources[_i - 1] = arguments[_i];
37
+ }
38
+ var _this = this;
39
+ this.mapper = mapper;
40
+ this._items = [];
41
+ this.get = function (index) { return _this._items[index]; };
42
+ this.add.apply(this, sources);
43
+ }
44
+ Object.defineProperty(ChainedQuery.prototype, "targets", {
45
+ get: function () {
46
+ return this._items.filter(function (it) { return it instanceof EventTarget; }).map(function (it) { return it; });
47
+ },
48
+ enumerable: false,
49
+ configurable: true
50
+ });
51
+ Object.defineProperty(ChainedQuery.prototype, "elements", {
52
+ get: function () {
53
+ return this._items.filter(function (it) { return it instanceof Element; }).map(function (it) { return it; });
54
+ },
55
+ enumerable: false,
56
+ configurable: true
57
+ });
58
+ Object.defineProperty(ChainedQuery.prototype, "nodes", {
59
+ get: function () {
60
+ return this._items.filter(function (it) { return it instanceof Node; }).map(function (it) { return it; });
61
+ },
62
+ enumerable: false,
63
+ configurable: true
64
+ });
65
+ Object.defineProperty(ChainedQuery.prototype, "containers", {
66
+ get: function () {
67
+ return this._items.map(function (it) { return it; }).filter(function (p) { return typeof p.append === 'function'; });
68
+ },
69
+ enumerable: false,
70
+ configurable: true
71
+ });
72
+ Object.defineProperty(ChainedQuery.prototype, "length", {
73
+ get: function () {
74
+ return this._items.length;
75
+ },
76
+ enumerable: false,
77
+ configurable: true
78
+ });
79
+ ChainedQuery.prototype.add = function () {
80
+ var _a;
81
+ var sources = [];
82
+ for (var _i = 0; _i < arguments.length; _i++) {
83
+ sources[_i] = arguments[_i];
84
+ }
85
+ (_a = this._items).push.apply(_a, this.mapper.Map(sources));
86
+ return this;
87
+ };
88
+ // TODO: This must not fall over if trying to perform an action
89
+ // on an inappropriate type. eg setting an attribute on window, or
90
+ // trying to query a non-parent node..
91
+ ChainedQuery.prototype.each = function (func) {
92
+ this._items.forEach(function (item, i) { return func(item, i); });
93
+ return this;
94
+ };
95
+ ChainedQuery.prototype.prop = function (name, value) {
96
+ return this.each(function (item) {
97
+ if (name in item) {
98
+ item[name] = value;
99
+ }
100
+ });
101
+ };
102
+ //#region Targets
103
+ ChainedQuery.prototype.fire = function (eventName, detail) {
104
+ var evt = new CustomEvent(eventName, { detail: detail });
105
+ this.targets.forEach(function (t) { return t.dispatchEvent(evt); });
106
+ return this;
107
+ };
108
+ ChainedQuery.prototype.on = function (eventNames, func) {
109
+ var evts = eventNames.split(ChainedQuery.WHITESPACE_RGX);
110
+ this.targets.forEach(function (t) {
111
+ evts.forEach(function (name) { return t.addEventListener(name, func); });
112
+ });
113
+ return this;
114
+ };
115
+ //#endregion
116
+ //#region Elements
117
+ ChainedQuery.prototype.attr = function (name, value, ns) {
118
+ this.elements.forEach(function (elem) {
119
+ if (value != null)
120
+ elem.setAttributeNS(ns, name, value);
121
+ else
122
+ elem.removeAttributeNS(ns, name);
123
+ });
124
+ return this;
125
+ };
126
+ ChainedQuery.prototype.toggle = function (className, doSet) {
127
+ this.elements.forEach(function (elem) {
128
+ var force = typeof doSet === 'function' ? doSet(elem) : !!doSet;
129
+ elem.classList.toggle(className, force);
130
+ });
131
+ return this;
132
+ };
133
+ //#endregion
134
+ //#region Nodes
135
+ ChainedQuery.prototype.empty = function () {
136
+ this.nodes.forEach(function (n) {
137
+ while (n.firstChild) {
138
+ n.removeChild(n.firstChild);
139
+ }
140
+ });
141
+ return this;
142
+ };
143
+ ChainedQuery.prototype.remove = function () {
144
+ return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this._items.filter(function (it) {
145
+ var handle = it instanceof Node;
146
+ if (handle)
147
+ it.parentNode.removeChild(it);
148
+ return !handle;
149
+ }), false)))();
150
+ };
151
+ //#endregion
152
+ //#region Containers
153
+ ChainedQuery.prototype.append = function () {
154
+ var sources = [];
155
+ for (var _i = 0; _i < arguments.length; _i++) {
156
+ sources[_i] = arguments[_i];
157
+ }
158
+ this.appendIn.apply(this, sources);
159
+ return this;
160
+ };
161
+ ChainedQuery.prototype.appendIn = function () {
162
+ var _this = this;
163
+ var sources = [];
164
+ for (var _i = 0; _i < arguments.length; _i++) {
165
+ sources[_i] = arguments[_i];
166
+ }
167
+ return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.reduce(function (acc, parent) {
168
+ var nodes = new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, _this.mapper], sources, false)))().nodes;
169
+ parent.append.apply(parent, nodes);
170
+ acc.push.apply(acc, nodes);
171
+ return acc;
172
+ }, []), false)))();
173
+ };
174
+ ChainedQuery.prototype.find = function (selector) {
175
+ return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.reduce(function (acc, parent) {
176
+ acc.push.apply(acc, Array.from(parent.querySelectorAll(selector)));
177
+ return acc;
178
+ }, []), false)))();
179
+ };
180
+ ChainedQuery.prototype.first = function (selector) {
181
+ return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, this.mapper], this.containers.map(function (parent) { return parent.querySelector(selector); }).filter(function (found) { return !!found; }), false)))();
182
+ };
183
+ ChainedQuery.WHITESPACE_RGX = /\s+/;
184
+ return ChainedQuery;
185
185
  }());
186
186
 
187
- var SourceMapper = /** @class */ (function () {
188
- function SourceMapper() {
189
- }
190
- SourceMapper.prototype.Map = function (sources) {
191
- return sources.reduce(function (acc, item) {
192
- if (typeof item === 'string') {
193
- acc.push.apply(acc, (SourceMapper.NAIVE_HTML_RGX.test(item)
194
- ? SourceMapper.MapHTML(item)
195
- : SourceMapper.MapSelector(item)));
196
- }
197
- else if (item.tag)
198
- acc.push(SourceMapper.MapParam(item));
199
- else if (item instanceof Node)
200
- acc.push(item);
201
- else if (item instanceof EventTarget)
202
- acc.push(item);
203
- else if (item instanceof ChainedQuery)
204
- item.each(function (i) { return acc.push(i); });
205
- else
206
- console.warn('Unrecognised item:', item);
207
- return acc;
208
- }, []);
209
- };
210
- SourceMapper.MapHTML = function (html) {
211
- var template = document.createElement('template');
212
- template.innerHTML = html;
213
- return Array.from(template.content.childNodes);
214
- };
215
- SourceMapper.MapSelector = function (selector) {
216
- return Array.from(document.querySelectorAll(selector));
217
- };
218
- SourceMapper.MapParam = function (p) {
219
- var n = document.createElement(p.tag);
220
- if (p.text)
221
- n.textContent = p.text;
222
- for (var key in p.attr || {}) {
223
- if (p.attr[key] != null) {
224
- n.setAttribute(key, p.attr[key]);
225
- }
226
- }
227
- for (var key in p.evts || {}) {
228
- if (typeof p.evts[key] === 'function') {
229
- n.addEventListener(key, p.evts[key]);
230
- }
231
- }
232
- return n;
233
- };
234
- SourceMapper.NAIVE_HTML_RGX = /^\s*<.*>\s*$/m;
235
- return SourceMapper;
187
+ var SourceMapper = /** @class */ (function () {
188
+ function SourceMapper() {
189
+ }
190
+ SourceMapper.prototype.Map = function (sources) {
191
+ return sources.reduce(function (acc, item) {
192
+ if (typeof item === 'string') {
193
+ acc.push.apply(acc, (SourceMapper.NAIVE_HTML_RGX.test(item)
194
+ ? SourceMapper.MapHTML(item)
195
+ : SourceMapper.MapSelector(item)));
196
+ }
197
+ else if (item.tag)
198
+ acc.push(SourceMapper.MapParam(item));
199
+ else if (item instanceof Node)
200
+ acc.push(item);
201
+ else if (item instanceof EventTarget)
202
+ acc.push(item);
203
+ else if (item instanceof ChainedQuery)
204
+ item.each(function (i) { return acc.push(i); });
205
+ else
206
+ console.warn('Unrecognised item:', item);
207
+ return acc;
208
+ }, []);
209
+ };
210
+ SourceMapper.MapHTML = function (html) {
211
+ var template = document.createElement('template');
212
+ template.innerHTML = html;
213
+ return Array.from(template.content.childNodes);
214
+ };
215
+ SourceMapper.MapSelector = function (selector) {
216
+ return Array.from(document.querySelectorAll(selector));
217
+ };
218
+ SourceMapper.MapParam = function (p) {
219
+ var n = document.createElement(p.tag);
220
+ if (p.text)
221
+ n.textContent = p.text;
222
+ for (var key in p.attr || {}) {
223
+ if (p.attr[key] != null) {
224
+ n.setAttribute(key, p.attr[key]);
225
+ }
226
+ }
227
+ for (var key in p.evts || {}) {
228
+ if (typeof p.evts[key] === 'function') {
229
+ n.addEventListener(key, p.evts[key]);
230
+ }
231
+ }
232
+ return n;
233
+ };
234
+ SourceMapper.NAIVE_HTML_RGX = /^\s*<.*>\s*$/m;
235
+ return SourceMapper;
236
236
  }());
237
- var mapper = new SourceMapper();
238
- function q() {
239
- var input = [];
240
- for (var _i = 0; _i < arguments.length; _i++) {
241
- input[_i] = arguments[_i];
242
- }
243
- return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, mapper], input, false)))();
237
+ var mapper = new SourceMapper();
238
+ function q() {
239
+ var input = [];
240
+ for (var _i = 0; _i < arguments.length; _i++) {
241
+ input[_i] = arguments[_i];
242
+ }
243
+ return new (ChainedQuery.bind.apply(ChainedQuery, __spreadArray([void 0, mapper], input, false)))();
244
244
  }
245
245
 
246
- class CustomElementBase extends HTMLElement {
247
- constructor(css, html, mode = 'closed') {
248
- super();
249
- this.root = this.attachShadow({ mode });
250
- this.root.innerHTML = html;
251
- const style = document.createElement('style');
252
- style.textContent = css;
253
- this.root.appendChild(style);
254
- }
246
+ class CustomElementBase extends HTMLElement {
247
+ constructor(css, html, mode = 'closed') {
248
+ super();
249
+ this.root = this.attachShadow({ mode });
250
+ this.root.innerHTML = html;
251
+ const style = document.createElement('style');
252
+ style.textContent = css;
253
+ this.root.appendChild(style);
254
+ }
255
255
  }
256
256
 
257
- function decode(b64) {
258
- const bIndex = (b64 + '').indexOf('base64,');
259
- return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
260
- }
261
- function reduceCss(cssIn) {
262
- return cssIn
263
- .replace(/\s+/g, ' ')
264
- .replace(/([,{}:;])\s/g, '$1')
265
- .replace(/\s([{])/g, '$1');
266
- }
267
- function reduceHtml(htmlIn) {
268
- return htmlIn.replace(/\s+/g, ' ').replace(/(^|>)\s+(<|$)/g, '$1$2');
257
+ function decode(b64) {
258
+ const bIndex = (b64 + '').indexOf('base64,');
259
+ return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
260
+ }
261
+ function reduceCss(cssIn) {
262
+ return cssIn
263
+ .replace(/\s+/g, ' ')
264
+ .replace(/([,{}:;])\s/g, '$1')
265
+ .replace(/\s([{])/g, '$1');
266
+ }
267
+ function reduceHtml(htmlIn) {
268
+ return htmlIn.replace(/\s+/g, ' ').replace(/(^|>)\s+(<|$)/g, '$1$2');
269
269
  }
270
270
 
271
271
  var markupUrl = "data:text/html;base64,PHNsb3Q+PC9zbG90Pg0KPHVsIGNsYXNzPSJ0b3AiPjwvdWw+DQo=";
272
272
 
273
273
  var stylesUrl = "data:text/css;base64,dWwsDQpsaSB7DQogIHBhZGRpbmc6IDA7DQogIG1hcmdpbjogMDsNCiAgZm9udDogaW5oZXJpdDsNCn0NCnNsb3QsDQpsaS5zcGxpdCAuaWNvbiB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoudG9wOm5vdCgub3BlbiksDQp1bDpub3QoLnRvcCkgew0KICB2aXNpYmlsaXR5OiBoaWRkZW47DQp9DQoNCnVsIHsNCiAgYm9yZGVyOiB2YXIoLS1ib3JkZXIsIDFweCBzb2xpZCAjYmJiKTsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmcsICNmZmYpOw0KICBib3gtc2hhZG93OiB2YXIoLS1ib3gtc2hhZG93LCAycHggMnB4IDNweCAjODg4KTsNCiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjZzOw0KICB6LWluZGV4OiA5OTk5OTk5Ow0KfQ0KDQoudG9wIHsNCiAgcG9zaXRpb246IGZpeGVkOw0KICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZSwgMC42NXJlbSk7DQogIHVzZXItc2VsZWN0OiBub25lOw0KfQ0KDQouaWNvbi5sZWZ0IHsNCiAgbGVmdDogMWVtOw0KICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNTAlLCAtNTAlKTsNCn0NCi5pY29uLnJpZ2h0IHsNCiAgcmlnaHQ6IDFlbTsNCiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoNTAlLCAtNTAlKTsNCn0NCi5pY29uIHsNCiAgbWF4LXdpZHRoOiAxZW07DQogIG1heC1oZWlnaHQ6IDFlbTsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICB0b3A6IDUwJTsNCiAgbGluZS1oZWlnaHQ6IDA7DQp9DQoNCmxpID4gcDpub3QoOmVtcHR5KSB7DQogIG1hcmdpbjogMCAxZW07DQogIHdoaXRlLXNwYWNlOiBub3dyYXA7DQp9DQpsaS5kaXNhYmxlZCB7DQogIGNvbG9yOiB2YXIoLS1kaXNhYmxlZC1mZywgI2JiYik7DQp9DQpsaS5zcGxpdCB7DQogIGJvcmRlci10b3A6IHZhcigtLXNwbGl0LWJvcmRlciwgdmFyKC0tYm9yZGVyLCAxcHggc29saWQgI2JiYikpOw0KICBwYWRkaW5nOiAwOw0KICBtYXJnaW46IDAuM2VtOw0KfQ0KbGkuc3BsaXQ6Zmlyc3QtY2hpbGQsDQpsaS5zcGxpdDpsYXN0LWNoaWxkLA0KbGkuc3BsaXQgKyBsaS5zcGxpdCB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQpsaS5ob3Zlcjpub3QoLmRpc2FiZWQpOm5vdCguc3BsaXQpIHsNCiAgYmFja2dyb3VuZDogdmFyKC0taG92ZXItaXRlbS1iZywgI2JiYik7DQp9DQoudG9wLm9wZW4gbGkuaG92ZXIgPiB1bCB7DQogIHZpc2liaWxpdHk6IHZpc2libGU7DQp9DQpsaSB7DQogIG1hcmdpbjogMC4yZW0gMDsNCiAgcGFkZGluZzogMC41ZW0gMWVtOw0KICBkaXNwbGF5OiBmbGV4Ow0KICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47DQogIHRleHQtYWxpZ246IGxlZnQ7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgY3Vyc29yOiBkZWZhdWx0Ow0KICBjb2xvcjogdmFyKC0tZmcsICMwMDApOw0KfQ0KDQpsaS5ncm91cDo6YWZ0ZXIgew0KICBjb250ZW50OiAnXDI1YjYnOw0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGZvbnQtc2l6ZTogMC42NWVtOw0KICByaWdodDogMDsNCiAgdG9wOiA1MCU7DQogIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOw0KfQ0KDQp1bDpub3QoLnRvcCkgew0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGxlZnQ6IDEwMCU7DQogIHRvcDogLTAuMjVlbTsNCn0NCg0KdWwubmVzdGxlIHsNCiAgbGVmdDogMC41ZW07DQogIHRvcDogMTAwJTsNCn0NCg==";
274
274
 
275
- class NeMenu extends CustomElementBase {
276
- constructor() {
277
- super(NeMenu.Css, NeMenu.Html);
278
- this.top = this.root.querySelector('ul');
279
- }
280
- connectedCallback() {
281
- if (!this._connected) {
282
- setTimeout(() => this.reload());
283
- q(this.parentNode).on('contextmenu', (e) => this.onParentContext(e));
284
- q(this, this.parentNode).on('contextmenu wheel', (e) => {
285
- e.preventDefault();
286
- e.stopPropagation();
287
- });
288
- q(this).on('mousedown', (e) => e.stopPropagation());
289
- q(window).on('mousedown resize wheel', () => this.close());
290
- this._connected = true;
291
- }
292
- }
293
- /** Opens the menu. */
294
- open() {
295
- // close all menus
296
- const doc = this.parentElement.getRootNode();
297
- doc.querySelectorAll('ne14-menu').forEach((m) => m.close());
298
- // style this one as open
299
- this.top.classList.add('open');
300
- q(this).fire('menuopen');
301
- }
302
- /** Closes the menu. */
303
- close() {
304
- if (this.top.classList.contains('open')) {
305
- this.top.classList.remove('open');
306
- q(this).fire('menuclose');
307
- }
308
- }
309
- /** Reloads active contents based on client dom. */
310
- reload() {
311
- q(this.top)
312
- .empty()
313
- .append(...this.walk(this, false));
314
- }
315
- onParentContext(event) {
316
- if (this.isConnected) {
317
- // update position (y)
318
- const y = event.clientY;
319
- const height = this.top.offsetHeight;
320
- const posY = y + height + 2 > window.innerHeight ? y - height : y;
321
- this.top.style.top = `${Math.max(0, posY)}px`;
322
- // update position (x)
323
- const x = event.clientX;
324
- const width = this.top.offsetWidth;
325
- const posX = x + width + 2 > window.innerWidth ? x - width : x;
326
- this.top.style.left = `${Math.max(0, posX)}px`;
327
- // open
328
- this.open();
329
- }
330
- }
331
- walk(ul, parentDisabled, ref = '') {
332
- let levelItemNo = 0;
333
- return Array.from(ul.children)
334
- .filter((c) => c instanceof HTMLLIElement &&
335
- !c.classList.contains('hidden') &&
336
- (c.textContent || c.classList.contains('split')))
337
- .reduce((acc, li) => {
338
- var _a, _b, _c;
339
- const children = Array.from(li.children).map((el) => el);
340
- const a = children.find((n) => n instanceof HTMLAnchorElement);
341
- const ul = children.find((n) => n instanceof HTMLUListElement);
342
- const isSplit = li.classList.contains('split');
343
- const isGrouper = !isSplit && ul && ul.querySelector('li');
344
- const isDisabled = !isSplit && (parentDisabled || li.classList.contains('disabled'));
345
- const aChildren = Array.from((a === null || a === void 0 ? void 0 : a.children) || []).map((el) => el);
346
- const imgs = children
347
- .concat(aChildren)
348
- .filter((n) => n instanceof HTMLImageElement)
349
- .map((n) => n);
350
- if (!isSplit)
351
- levelItemNo++;
352
- const classes = [];
353
- if (isSplit)
354
- classes.push('split');
355
- else {
356
- if (isDisabled)
357
- classes.push('disabled');
358
- if (isGrouper)
359
- classes.push('group');
360
- if ((a === null || a === void 0 ? void 0 : a.target) === '_blank')
361
- classes.push('click-out');
362
- else if (a)
363
- classes.push('click-in');
364
- }
365
- const bestTextNode = [...children, li].find((c) => c.innerText);
366
- const bestText = isSplit ? null : (_a = bestTextNode === null || bestTextNode === void 0 ? void 0 : bestTextNode.innerText) !== null && _a !== void 0 ? _a : `Item ${levelItemNo}`;
367
- const shortcut = isSplit || isGrouper ? null : li.getAttribute('aria-keyshortcuts');
368
- const liRef = `${ref}${levelItemNo}`;
369
- const eventDetail = { ref: liRef, title: bestText, origin: a || li };
370
- const handleClick = () => {
371
- if (!isDisabled && !isGrouper && !isSplit) {
372
- eventDetail.origin.click();
373
- q(this).fire('itemselect', eventDetail);
374
- this.close();
375
- }
376
- };
377
- const handleMouseEnter = (e) => {
378
- if (!isDisabled && !isSplit) {
379
- const domLi = e.target;
380
- if (isGrouper) {
381
- const domUl = Array.from(domLi.children).find((n) => n instanceof HTMLUListElement);
382
- const liRect = domLi.getBoundingClientRect();
383
- domUl.classList.toggle('nestle', liRect.right + domUl.clientWidth + 2 > window.innerWidth);
384
- }
385
- domLi.classList.add('hover');
386
- q(this).fire('itemhover', eventDetail);
387
- }
388
- };
389
- const handleMouseLeave = (e) => {
390
- if (!isDisabled && !isSplit) {
391
- e.target.classList.remove('hover');
392
- q(this).fire('itemunhover', eventDetail);
393
- }
394
- };
395
- const $domItem = q({ tag: 'li' })
396
- .attr('class', classes.length ? classes.join(' ') : null)
397
- .attr('aria-keyshortcuts', shortcut)
398
- .on('click contextmenu', handleClick)
399
- .on('mouseenter', handleMouseEnter)
400
- .on('mouseleave', handleMouseLeave);
401
- const charLeft = li.dataset.charLeft;
402
- const charRight = li.dataset.charRight;
403
- const imgLeft = imgs.find((i) => !i.classList.contains('right'));
404
- const imgRight = imgs.find((i) => i.classList.contains('right'));
405
- if (!isSplit && !isGrouper && bestText) {
406
- if (NeMenu.CHAR_REF_REGEX.test(charLeft))
407
- $domItem.append(`<span class='icon left'>&#x${charLeft};</span>`);
408
- else if (charLeft)
409
- console.warn(`ne14-menu: Bad hex code '${charLeft}' to left of '${bestText}'.`);
410
- else if (imgLeft)
411
- $domItem.append(`<img class='icon left' src='${imgLeft.src}'/>`);
412
- if (NeMenu.CHAR_REF_REGEX.test(charRight))
413
- $domItem.append(`<span class='icon right'>&#x${charRight};</span>`);
414
- else if (charRight)
415
- console.warn(`ne14-menu: Bad hex code '${charRight}' to right of '${bestText}'.`);
416
- else if (imgRight)
417
- $domItem.append(`<img class='icon right' src='${imgRight.src}'/>`);
418
- }
419
- if (bestText)
420
- $domItem.append({ tag: 'p', text: bestText });
421
- if (shortcut)
422
- $domItem.append({ tag: 'p', text: shortcut });
423
- if (isGrouper)
424
- $domItem.appendIn({ tag: 'ul' }).append(...this.walk(ul, isDisabled, `${liRef}-`));
425
- // Do not push two consecutive splits
426
- if (!isSplit || !((_c = (_b = acc[acc.length - 1]) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('split'))) {
427
- acc.push($domItem.elements[0]);
428
- }
429
- return acc;
430
- }, []);
431
- }
432
- }
433
- NeMenu.Css = reduceCss(decode(stylesUrl));
434
- NeMenu.Html = reduceHtml(decode(markupUrl));
275
+ class NeMenu extends CustomElementBase {
276
+ constructor() {
277
+ super(NeMenu.Css, NeMenu.Html);
278
+ this.top = this.root.querySelector('ul');
279
+ }
280
+ connectedCallback() {
281
+ if (!this._connected) {
282
+ setTimeout(() => this.reload());
283
+ q(this.parentNode).on('contextmenu', (e) => this.onParentContext(e));
284
+ q(this, this.parentNode).on('contextmenu wheel', (e) => {
285
+ e.preventDefault();
286
+ e.stopPropagation();
287
+ });
288
+ q(this).on('mousedown', (e) => e.stopPropagation());
289
+ q(window).on('mousedown resize wheel', () => this.close());
290
+ this._connected = true;
291
+ }
292
+ }
293
+ /** Opens the menu. */
294
+ open() {
295
+ // close all menus
296
+ const doc = this.parentElement.getRootNode();
297
+ doc.querySelectorAll('ne14-menu').forEach((m) => m.close());
298
+ // style this one as open
299
+ this.top.classList.add('open');
300
+ q(this).fire('menuopen');
301
+ }
302
+ /** Closes the menu. */
303
+ close() {
304
+ if (this.top.classList.contains('open')) {
305
+ this.top.classList.remove('open');
306
+ q(this).fire('menuclose');
307
+ }
308
+ }
309
+ /** Reloads active contents based on client dom. */
310
+ reload() {
311
+ q(this.top)
312
+ .empty()
313
+ .append(...this.walk(this, false));
314
+ }
315
+ onParentContext(event) {
316
+ if (this.isConnected) {
317
+ // update position (y)
318
+ const y = event.clientY;
319
+ const height = this.top.offsetHeight;
320
+ const posY = y + height + 2 > window.innerHeight ? y - height : y;
321
+ this.top.style.top = `${Math.max(0, posY)}px`;
322
+ // update position (x)
323
+ const x = event.clientX;
324
+ const width = this.top.offsetWidth;
325
+ const posX = x + width + 2 > window.innerWidth ? x - width : x;
326
+ this.top.style.left = `${Math.max(0, posX)}px`;
327
+ // open
328
+ this.open();
329
+ }
330
+ }
331
+ walk(ul, parentDisabled, ref = '') {
332
+ let levelItemNo = 0;
333
+ return Array.from(ul.children)
334
+ .filter((c) => c instanceof HTMLLIElement &&
335
+ !c.classList.contains('hidden') &&
336
+ (c.textContent || c.classList.contains('split')))
337
+ .reduce((acc, li) => {
338
+ var _a, _b, _c;
339
+ const children = Array.from(li.children).map((el) => el);
340
+ const a = children.find((n) => n instanceof HTMLAnchorElement);
341
+ const ul = children.find((n) => n instanceof HTMLUListElement);
342
+ const isSplit = li.classList.contains('split');
343
+ const isGrouper = !isSplit && ul && ul.querySelector('li');
344
+ const isDisabled = !isSplit && (parentDisabled || li.classList.contains('disabled'));
345
+ const aChildren = Array.from((a === null || a === void 0 ? void 0 : a.children) || []).map((el) => el);
346
+ const imgs = children
347
+ .concat(aChildren)
348
+ .filter((n) => n instanceof HTMLImageElement)
349
+ .map((n) => n);
350
+ if (!isSplit)
351
+ levelItemNo++;
352
+ const classes = [];
353
+ if (isSplit)
354
+ classes.push('split');
355
+ else {
356
+ if (isDisabled)
357
+ classes.push('disabled');
358
+ if (isGrouper)
359
+ classes.push('group');
360
+ if ((a === null || a === void 0 ? void 0 : a.target) === '_blank')
361
+ classes.push('click-out');
362
+ else if (a)
363
+ classes.push('click-in');
364
+ }
365
+ const bestTextNode = [...children, li].find((c) => c.innerText);
366
+ const bestText = isSplit ? null : (_a = bestTextNode === null || bestTextNode === void 0 ? void 0 : bestTextNode.innerText) !== null && _a !== void 0 ? _a : `Item ${levelItemNo}`;
367
+ const shortcut = isSplit || isGrouper ? null : li.getAttribute('aria-keyshortcuts');
368
+ const liRef = `${ref}${levelItemNo}`;
369
+ const eventDetail = { ref: liRef, title: bestText, origin: a || li };
370
+ const handleClick = () => {
371
+ if (!isDisabled && !isGrouper && !isSplit) {
372
+ eventDetail.origin.click();
373
+ q(this).fire('itemselect', eventDetail);
374
+ this.close();
375
+ }
376
+ };
377
+ const handleMouseEnter = (e) => {
378
+ if (!isDisabled && !isSplit) {
379
+ const domLi = e.target;
380
+ if (isGrouper) {
381
+ const domUl = Array.from(domLi.children).find((n) => n instanceof HTMLUListElement);
382
+ const liRect = domLi.getBoundingClientRect();
383
+ domUl.classList.toggle('nestle', liRect.right + domUl.clientWidth + 2 > window.innerWidth);
384
+ }
385
+ domLi.classList.add('hover');
386
+ q(this).fire('itemhover', eventDetail);
387
+ }
388
+ };
389
+ const handleMouseLeave = (e) => {
390
+ if (!isDisabled && !isSplit) {
391
+ e.target.classList.remove('hover');
392
+ q(this).fire('itemunhover', eventDetail);
393
+ }
394
+ };
395
+ const $domItem = q({ tag: 'li' })
396
+ .attr('class', classes.length ? classes.join(' ') : null)
397
+ .attr('aria-keyshortcuts', shortcut)
398
+ .on('click contextmenu', handleClick)
399
+ .on('mouseenter', handleMouseEnter)
400
+ .on('mouseleave', handleMouseLeave);
401
+ const charLeft = li.dataset.charLeft;
402
+ const charRight = li.dataset.charRight;
403
+ const imgLeft = imgs.find((i) => !i.classList.contains('right'));
404
+ const imgRight = imgs.find((i) => i.classList.contains('right'));
405
+ if (!isSplit && !isGrouper && bestText) {
406
+ if (NeMenu.CHAR_REF_REGEX.test(charLeft))
407
+ $domItem.append(`<span class='icon left'>&#x${charLeft};</span>`);
408
+ else if (charLeft)
409
+ console.warn(`ne14-menu: Bad hex code '${charLeft}' to left of '${bestText}'.`);
410
+ else if (imgLeft)
411
+ $domItem.append(`<img class='icon left' src='${imgLeft.src}'/>`);
412
+ if (NeMenu.CHAR_REF_REGEX.test(charRight))
413
+ $domItem.append(`<span class='icon right'>&#x${charRight};</span>`);
414
+ else if (charRight)
415
+ console.warn(`ne14-menu: Bad hex code '${charRight}' to right of '${bestText}'.`);
416
+ else if (imgRight)
417
+ $domItem.append(`<img class='icon right' src='${imgRight.src}'/>`);
418
+ }
419
+ if (bestText)
420
+ $domItem.append({ tag: 'p', text: bestText });
421
+ if (shortcut)
422
+ $domItem.append({ tag: 'p', text: shortcut });
423
+ if (isGrouper)
424
+ $domItem.appendIn({ tag: 'ul' }).append(...this.walk(ul, isDisabled, `${liRef}-`));
425
+ // Do not push two consecutive splits
426
+ if (!isSplit || !((_c = (_b = acc[acc.length - 1]) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('split'))) {
427
+ acc.push($domItem.elements[0]);
428
+ }
429
+ return acc;
430
+ }, []);
431
+ }
432
+ }
433
+ NeMenu.Css = reduceCss(decode(stylesUrl));
434
+ NeMenu.Html = reduceHtml(decode(markupUrl));
435
435
  NeMenu.CHAR_REF_REGEX = /^[0-9a-f]{4,5}$/i;
436
436
 
437
- if ('customElements' in window) {
438
- window.customElements.define('ne14-menu', NeMenu);
437
+ if ('customElements' in window) {
438
+ window.customElements.define('ne14-menu', NeMenu);
439
439
  }
440
440
 
441
441
  exports.ContextMenu = NeMenu;