@whitesev/domutils 1.8.8 → 1.9.0
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.amd.js +3913 -4128
- package/dist/index.amd.js.map +1 -1
- package/dist/index.amd.min.js +1 -1
- package/dist/index.amd.min.js.map +1 -1
- package/dist/index.cjs.js +195 -410
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.cjs.min.js.map +1 -1
- package/dist/index.esm.js +195 -410
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +3914 -4129
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +1 -1
- package/dist/index.iife.min.js.map +1 -1
- package/dist/index.system.js +3918 -4133
- package/dist/index.system.js.map +1 -1
- package/dist/index.system.min.js +1 -1
- package/dist/index.system.min.js.map +1 -1
- package/dist/index.umd.js +3916 -4131
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/dist/types/src/CommonUtils.d.ts +0 -16
- package/dist/types/src/ElementAnimate.d.ts +1 -1
- package/dist/types/src/ElementEvent.d.ts +51 -23
- package/dist/types/src/ElementSelector.d.ts +2 -2
- package/dist/types/src/index.d.ts +23 -14
- package/dist/types/src/types/DOMUtilsEvent.d.ts +3 -3
- package/dist/types/src/types/env.d.ts +1 -0
- package/package.json +2 -2
- package/src/CommonUtils.ts +0 -54
- package/src/ElementAnimate.ts +3 -3
- package/src/ElementEvent.ts +99 -76
- package/src/ElementSelector.ts +8 -6
- package/src/ElementWait.ts +1 -2
- package/src/index.ts +164 -81
- package/src/types/DOMUtilsEvent.d.ts +3 -3
- package/src/types/env.d.ts +1 -0
package/dist/index.esm.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
const version = "1.9.0";
|
|
2
|
+
|
|
1
3
|
class WindowApi {
|
|
2
4
|
/** 默认的配置 */
|
|
3
5
|
defaultApi = {
|
|
@@ -56,245 +58,6 @@ class WindowApi {
|
|
|
56
58
|
}
|
|
57
59
|
}
|
|
58
60
|
|
|
59
|
-
const createCache = (lastNumberWeakMap) => {
|
|
60
|
-
return (collection, nextNumber) => {
|
|
61
|
-
lastNumberWeakMap.set(collection, nextNumber);
|
|
62
|
-
return nextNumber;
|
|
63
|
-
};
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
/*
|
|
67
|
-
* The value of the constant Number.MAX_SAFE_INTEGER equals (2 ** 53 - 1) but it
|
|
68
|
-
* is fairly new.
|
|
69
|
-
*/
|
|
70
|
-
const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER === undefined ? 9007199254740991 : Number.MAX_SAFE_INTEGER;
|
|
71
|
-
const TWO_TO_THE_POWER_OF_TWENTY_NINE = 536870912;
|
|
72
|
-
const TWO_TO_THE_POWER_OF_THIRTY = TWO_TO_THE_POWER_OF_TWENTY_NINE * 2;
|
|
73
|
-
const createGenerateUniqueNumber = (cache, lastNumberWeakMap) => {
|
|
74
|
-
return (collection) => {
|
|
75
|
-
const lastNumber = lastNumberWeakMap.get(collection);
|
|
76
|
-
/*
|
|
77
|
-
* Let's try the cheapest algorithm first. It might fail to produce a new
|
|
78
|
-
* number, but it is so cheap that it is okay to take the risk. Just
|
|
79
|
-
* increase the last number by one or reset it to 0 if we reached the upper
|
|
80
|
-
* bound of SMIs (which stands for small integers). When the last number is
|
|
81
|
-
* unknown it is assumed that the collection contains zero based consecutive
|
|
82
|
-
* numbers.
|
|
83
|
-
*/
|
|
84
|
-
let nextNumber = lastNumber === undefined ? collection.size : lastNumber < TWO_TO_THE_POWER_OF_THIRTY ? lastNumber + 1 : 0;
|
|
85
|
-
if (!collection.has(nextNumber)) {
|
|
86
|
-
return cache(collection, nextNumber);
|
|
87
|
-
}
|
|
88
|
-
/*
|
|
89
|
-
* If there are less than half of 2 ** 30 numbers stored in the collection,
|
|
90
|
-
* the chance to generate a new random number in the range from 0 to 2 ** 30
|
|
91
|
-
* is at least 50%. It's benifitial to use only SMIs because they perform
|
|
92
|
-
* much better in any environment based on V8.
|
|
93
|
-
*/
|
|
94
|
-
if (collection.size < TWO_TO_THE_POWER_OF_TWENTY_NINE) {
|
|
95
|
-
while (collection.has(nextNumber)) {
|
|
96
|
-
nextNumber = Math.floor(Math.random() * TWO_TO_THE_POWER_OF_THIRTY);
|
|
97
|
-
}
|
|
98
|
-
return cache(collection, nextNumber);
|
|
99
|
-
}
|
|
100
|
-
// Quickly check if there is a theoretical chance to generate a new number.
|
|
101
|
-
if (collection.size > MAX_SAFE_INTEGER) {
|
|
102
|
-
throw new Error('Congratulations, you created a collection of unique numbers which uses all available integers!');
|
|
103
|
-
}
|
|
104
|
-
// Otherwise use the full scale of safely usable integers.
|
|
105
|
-
while (collection.has(nextNumber)) {
|
|
106
|
-
nextNumber = Math.floor(Math.random() * MAX_SAFE_INTEGER);
|
|
107
|
-
}
|
|
108
|
-
return cache(collection, nextNumber);
|
|
109
|
-
};
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
const LAST_NUMBER_WEAK_MAP = new WeakMap();
|
|
113
|
-
const cache = createCache(LAST_NUMBER_WEAK_MAP);
|
|
114
|
-
const generateUniqueNumber = createGenerateUniqueNumber(cache, LAST_NUMBER_WEAK_MAP);
|
|
115
|
-
|
|
116
|
-
const createBrokerFactory = (createOrGetOngoingRequests, extendBrokerImplementation, generateUniqueNumber, isMessagePort) => (brokerImplementation) => {
|
|
117
|
-
const fullBrokerImplementation = extendBrokerImplementation(brokerImplementation);
|
|
118
|
-
return (sender) => {
|
|
119
|
-
const ongoingRequests = createOrGetOngoingRequests(sender);
|
|
120
|
-
sender.addEventListener('message', (({ data: message }) => {
|
|
121
|
-
const { id } = message;
|
|
122
|
-
if (id !== null && ongoingRequests.has(id)) {
|
|
123
|
-
const { reject, resolve } = ongoingRequests.get(id);
|
|
124
|
-
ongoingRequests.delete(id);
|
|
125
|
-
if (message.error === undefined) {
|
|
126
|
-
resolve(message.result);
|
|
127
|
-
}
|
|
128
|
-
else {
|
|
129
|
-
reject(new Error(message.error.message));
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}));
|
|
133
|
-
if (isMessagePort(sender)) {
|
|
134
|
-
sender.start();
|
|
135
|
-
}
|
|
136
|
-
const call = (method, params = null, transferables = []) => {
|
|
137
|
-
return new Promise((resolve, reject) => {
|
|
138
|
-
const id = generateUniqueNumber(ongoingRequests);
|
|
139
|
-
ongoingRequests.set(id, { reject, resolve });
|
|
140
|
-
if (params === null) {
|
|
141
|
-
sender.postMessage({ id, method }, transferables);
|
|
142
|
-
}
|
|
143
|
-
else {
|
|
144
|
-
sender.postMessage({ id, method, params }, transferables);
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
};
|
|
148
|
-
const notify = (method, params, transferables = []) => {
|
|
149
|
-
sender.postMessage({ id: null, method, params }, transferables);
|
|
150
|
-
};
|
|
151
|
-
let functions = {};
|
|
152
|
-
for (const [key, handler] of Object.entries(fullBrokerImplementation)) {
|
|
153
|
-
functions = { ...functions, [key]: handler({ call, notify }) };
|
|
154
|
-
}
|
|
155
|
-
return { ...functions };
|
|
156
|
-
};
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
const createCreateOrGetOngoingRequests = (ongoingRequestsMap) => (sender) => {
|
|
160
|
-
if (ongoingRequestsMap.has(sender)) {
|
|
161
|
-
// @todo TypeScript needs to be convinced that has() works as expected.
|
|
162
|
-
return ongoingRequestsMap.get(sender);
|
|
163
|
-
}
|
|
164
|
-
const ongoingRequests = new Map();
|
|
165
|
-
ongoingRequestsMap.set(sender, ongoingRequests);
|
|
166
|
-
return ongoingRequests;
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
const createExtendBrokerImplementation = (portMap) => (partialBrokerImplementation) => ({
|
|
170
|
-
...partialBrokerImplementation,
|
|
171
|
-
connect: ({ call }) => {
|
|
172
|
-
return async () => {
|
|
173
|
-
const { port1, port2 } = new MessageChannel();
|
|
174
|
-
const portId = await call('connect', { port: port1 }, [port1]);
|
|
175
|
-
portMap.set(port2, portId);
|
|
176
|
-
return port2;
|
|
177
|
-
};
|
|
178
|
-
},
|
|
179
|
-
disconnect: ({ call }) => {
|
|
180
|
-
return async (port) => {
|
|
181
|
-
const portId = portMap.get(port);
|
|
182
|
-
if (portId === undefined) {
|
|
183
|
-
throw new Error('The given port is not connected.');
|
|
184
|
-
}
|
|
185
|
-
await call('disconnect', { portId });
|
|
186
|
-
};
|
|
187
|
-
},
|
|
188
|
-
isSupported: ({ call }) => {
|
|
189
|
-
return () => call('isSupported');
|
|
190
|
-
}
|
|
191
|
-
});
|
|
192
|
-
|
|
193
|
-
const isMessagePort = (sender) => {
|
|
194
|
-
return typeof sender.start === 'function';
|
|
195
|
-
};
|
|
196
|
-
|
|
197
|
-
const createBroker = createBrokerFactory(createCreateOrGetOngoingRequests(new WeakMap()), createExtendBrokerImplementation(new WeakMap()), generateUniqueNumber, isMessagePort);
|
|
198
|
-
|
|
199
|
-
const createClearIntervalFactory = (scheduledIntervalsState) => (clear) => (timerId) => {
|
|
200
|
-
if (typeof scheduledIntervalsState.get(timerId) === 'symbol') {
|
|
201
|
-
scheduledIntervalsState.set(timerId, null);
|
|
202
|
-
clear(timerId).then(() => {
|
|
203
|
-
scheduledIntervalsState.delete(timerId);
|
|
204
|
-
});
|
|
205
|
-
}
|
|
206
|
-
};
|
|
207
|
-
|
|
208
|
-
const createClearTimeoutFactory = (scheduledTimeoutsState) => (clear) => (timerId) => {
|
|
209
|
-
if (typeof scheduledTimeoutsState.get(timerId) === 'symbol') {
|
|
210
|
-
scheduledTimeoutsState.set(timerId, null);
|
|
211
|
-
clear(timerId).then(() => {
|
|
212
|
-
scheduledTimeoutsState.delete(timerId);
|
|
213
|
-
});
|
|
214
|
-
}
|
|
215
|
-
};
|
|
216
|
-
|
|
217
|
-
const createSetIntervalFactory = (generateUniqueNumber, scheduledIntervalsState) => (set) => (func, delay = 0, ...args) => {
|
|
218
|
-
const symbol = Symbol();
|
|
219
|
-
const timerId = generateUniqueNumber(scheduledIntervalsState);
|
|
220
|
-
scheduledIntervalsState.set(timerId, symbol);
|
|
221
|
-
const schedule = () => set(delay, timerId).then(() => {
|
|
222
|
-
const state = scheduledIntervalsState.get(timerId);
|
|
223
|
-
if (state === undefined) {
|
|
224
|
-
throw new Error('The timer is in an undefined state.');
|
|
225
|
-
}
|
|
226
|
-
if (state === symbol) {
|
|
227
|
-
func(...args);
|
|
228
|
-
// Doublecheck if the interval should still be rescheduled because it could have been cleared inside of func().
|
|
229
|
-
if (scheduledIntervalsState.get(timerId) === symbol) {
|
|
230
|
-
schedule();
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
});
|
|
234
|
-
schedule();
|
|
235
|
-
return timerId;
|
|
236
|
-
};
|
|
237
|
-
|
|
238
|
-
const createSetTimeoutFactory = (generateUniqueNumber, scheduledTimeoutsState) => (set) => (func, delay = 0, ...args) => {
|
|
239
|
-
const symbol = Symbol();
|
|
240
|
-
const timerId = generateUniqueNumber(scheduledTimeoutsState);
|
|
241
|
-
scheduledTimeoutsState.set(timerId, symbol);
|
|
242
|
-
set(delay, timerId).then(() => {
|
|
243
|
-
const state = scheduledTimeoutsState.get(timerId);
|
|
244
|
-
if (state === undefined) {
|
|
245
|
-
throw new Error('The timer is in an undefined state.');
|
|
246
|
-
}
|
|
247
|
-
if (state === symbol) {
|
|
248
|
-
// A timeout can be savely deleted because it is only called once.
|
|
249
|
-
scheduledTimeoutsState.delete(timerId);
|
|
250
|
-
func(...args);
|
|
251
|
-
}
|
|
252
|
-
});
|
|
253
|
-
return timerId;
|
|
254
|
-
};
|
|
255
|
-
|
|
256
|
-
// Prefilling the Maps with a function indexed by zero is necessary to be compliant with the specification.
|
|
257
|
-
const scheduledIntervalsState = new Map([[0, null]]); // tslint:disable-line no-empty
|
|
258
|
-
const scheduledTimeoutsState = new Map([[0, null]]); // tslint:disable-line no-empty
|
|
259
|
-
const createClearInterval = createClearIntervalFactory(scheduledIntervalsState);
|
|
260
|
-
const createClearTimeout = createClearTimeoutFactory(scheduledTimeoutsState);
|
|
261
|
-
const createSetInterval = createSetIntervalFactory(generateUniqueNumber, scheduledIntervalsState);
|
|
262
|
-
const createSetTimeout = createSetTimeoutFactory(generateUniqueNumber, scheduledTimeoutsState);
|
|
263
|
-
const wrap = createBroker({
|
|
264
|
-
clearInterval: ({ call }) => createClearInterval((timerId) => call('clear', { timerId, timerType: 'interval' })),
|
|
265
|
-
clearTimeout: ({ call }) => createClearTimeout((timerId) => call('clear', { timerId, timerType: 'timeout' })),
|
|
266
|
-
setInterval: ({ call }) => createSetInterval((delay, timerId) => call('set', { delay, now: performance.timeOrigin + performance.now(), timerId, timerType: 'interval' })),
|
|
267
|
-
setTimeout: ({ call }) => createSetTimeout((delay, timerId) => call('set', { delay, now: performance.timeOrigin + performance.now(), timerId, timerType: 'timeout' }))
|
|
268
|
-
});
|
|
269
|
-
const load = (url) => {
|
|
270
|
-
const worker = new Worker(url);
|
|
271
|
-
return wrap(worker);
|
|
272
|
-
};
|
|
273
|
-
|
|
274
|
-
const createLoadOrReturnBroker = (loadBroker, worker) => {
|
|
275
|
-
let broker = null;
|
|
276
|
-
return () => {
|
|
277
|
-
if (broker !== null) {
|
|
278
|
-
return broker;
|
|
279
|
-
}
|
|
280
|
-
const blob = new Blob([worker], { type: 'application/javascript; charset=utf-8' });
|
|
281
|
-
const url = URL.createObjectURL(blob);
|
|
282
|
-
broker = loadBroker(url);
|
|
283
|
-
// Bug #1: Edge up until v18 didn't like the URL to be revoked directly.
|
|
284
|
-
setTimeout(() => URL.revokeObjectURL(url));
|
|
285
|
-
return broker;
|
|
286
|
-
};
|
|
287
|
-
};
|
|
288
|
-
|
|
289
|
-
// This is the minified and stringified code of the worker-timers-worker package.
|
|
290
|
-
const worker = `(()=>{var e={455(e,t){!function(e){"use strict";var t=function(e){return function(t){var r=e(t);return t.add(r),r}},r=function(e){return function(t,r){return e.set(t,r),r}},n=void 0===Number.MAX_SAFE_INTEGER?9007199254740991:Number.MAX_SAFE_INTEGER,o=536870912,s=2*o,a=function(e,t){return function(r){var a=t.get(r),i=void 0===a?r.size:a<s?a+1:0;if(!r.has(i))return e(r,i);if(r.size<o){for(;r.has(i);)i=Math.floor(Math.random()*s);return e(r,i)}if(r.size>n)throw new Error("Congratulations, you created a collection of unique numbers which uses all available integers!");for(;r.has(i);)i=Math.floor(Math.random()*n);return e(r,i)}},i=new WeakMap,u=r(i),c=a(u,i),l=t(c);e.addUniqueNumber=l,e.generateUniqueNumber=c}(t)}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n].call(s.exports,s,s.exports,r),s.exports}(()=>{"use strict";const e=-32603,t=-32602,n=-32601,o=(e,t)=>Object.assign(new Error(e),{status:t}),s=t=>o('The handler of the method called "'.concat(t,'" returned an unexpected result.'),e),a=(t,r)=>async({data:{id:a,method:i,params:u}})=>{const c=r[i];try{if(void 0===c)throw(e=>o('The requested method called "'.concat(e,'" is not supported.'),n))(i);const r=void 0===u?c():c(u);if(void 0===r)throw(t=>o('The handler of the method called "'.concat(t,'" returned no required result.'),e))(i);const l=r instanceof Promise?await r:r;if(null===a){if(void 0!==l.result)throw s(i)}else{if(void 0===l.result)throw s(i);const{result:e,transferables:r=[]}=l;t.postMessage({id:a,result:e},r)}}catch(e){const{message:r,status:n=-32603}=e;t.postMessage({error:{code:n,message:r},id:a})}};var i=r(455);const u=new Map,c=(e,r,n)=>({...r,connect:({port:t})=>{t.start();const n=e(t,r),o=(0,i.generateUniqueNumber)(u);return u.set(o,()=>{n(),t.close(),u.delete(o)}),{result:o}},disconnect:({portId:e})=>{const r=u.get(e);if(void 0===r)throw(e=>o('The specified parameter called "portId" with the given value "'.concat(e,'" does not identify a port connected to this worker.'),t))(e);return r(),{result:null}},isSupported:async()=>{if(await new Promise(e=>{const t=new ArrayBuffer(0),{port1:r,port2:n}=new MessageChannel;r.onmessage=({data:t})=>e(null!==t),n.postMessage(t,[t])})){const e=n();return{result:e instanceof Promise?await e:e}}return{result:!1}}}),l=(e,t,r=()=>!0)=>{const n=c(l,t,r),o=a(e,n);return e.addEventListener("message",o),()=>e.removeEventListener("message",o)},d=(e,t)=>r=>{const n=t.get(r);if(void 0===n)return Promise.resolve(!1);const[o,s]=n;return e(o),t.delete(r),s(!1),Promise.resolve(!0)},m=(e,t,r,n)=>(o,s,a)=>{const i=o+s-t.timeOrigin,u=i-t.now();return new Promise(t=>{e.set(a,[r(n,u,i,e,t,a),t])})},f=new Map,h=d(globalThis.clearTimeout,f),p=new Map,v=d(globalThis.clearTimeout,p),w=((e,t)=>{const r=(n,o,s,a)=>{const i=n-e.now();i>0?o.set(a,[t(r,i,n,o,s,a),s]):(o.delete(a),s(!0))};return r})(performance,globalThis.setTimeout),g=m(f,performance,globalThis.setTimeout,w),T=m(p,performance,globalThis.setTimeout,w);l(self,{clear:async({timerId:e,timerType:t})=>({result:await("interval"===t?h(e):v(e))}),set:async({delay:e,now:t,timerId:r,timerType:n})=>({result:await("interval"===n?g:T)(e,t,r)})})})()})();`; // tslint:disable-line:max-line-length
|
|
291
|
-
|
|
292
|
-
const loadOrReturnBroker = createLoadOrReturnBroker(load, worker);
|
|
293
|
-
const clearInterval = (timerId) => loadOrReturnBroker().clearInterval(timerId);
|
|
294
|
-
const clearTimeout = (timerId) => loadOrReturnBroker().clearTimeout(timerId);
|
|
295
|
-
const setInterval = (...args) => loadOrReturnBroker().setInterval(...args);
|
|
296
|
-
const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
|
|
297
|
-
|
|
298
61
|
/** 通用工具类 */
|
|
299
62
|
const CommonUtils = {
|
|
300
63
|
windowApi: new WindowApi({
|
|
@@ -444,60 +207,6 @@ const CommonUtils = {
|
|
|
444
207
|
delete target[propName];
|
|
445
208
|
}
|
|
446
209
|
},
|
|
447
|
-
/**
|
|
448
|
-
* 自动使用 Worker 执行 setTimeout
|
|
449
|
-
*/
|
|
450
|
-
setTimeout(callback, timeout = 0) {
|
|
451
|
-
try {
|
|
452
|
-
return setTimeout$1(callback, timeout);
|
|
453
|
-
}
|
|
454
|
-
catch {
|
|
455
|
-
return this.windowApi.setTimeout(callback, timeout);
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
/**
|
|
459
|
-
* 配合 .setTimeout 使用
|
|
460
|
-
*/
|
|
461
|
-
clearTimeout(timeId) {
|
|
462
|
-
try {
|
|
463
|
-
if (timeId != null) {
|
|
464
|
-
clearTimeout(timeId);
|
|
465
|
-
}
|
|
466
|
-
}
|
|
467
|
-
catch {
|
|
468
|
-
// TODO
|
|
469
|
-
}
|
|
470
|
-
finally {
|
|
471
|
-
this.windowApi.clearTimeout(timeId);
|
|
472
|
-
}
|
|
473
|
-
},
|
|
474
|
-
/**
|
|
475
|
-
* 自动使用 Worker 执行 setInterval
|
|
476
|
-
*/
|
|
477
|
-
setInterval(callback, timeout = 0) {
|
|
478
|
-
try {
|
|
479
|
-
return setInterval(callback, timeout);
|
|
480
|
-
}
|
|
481
|
-
catch {
|
|
482
|
-
return this.windowApi.setInterval(callback, timeout);
|
|
483
|
-
}
|
|
484
|
-
},
|
|
485
|
-
/**
|
|
486
|
-
* 配合 .setInterval 使用
|
|
487
|
-
*/
|
|
488
|
-
clearInterval(timeId) {
|
|
489
|
-
try {
|
|
490
|
-
if (timeId != null) {
|
|
491
|
-
clearInterval(timeId);
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
catch {
|
|
495
|
-
// TODO
|
|
496
|
-
}
|
|
497
|
-
finally {
|
|
498
|
-
this.windowApi.clearInterval(timeId);
|
|
499
|
-
}
|
|
500
|
-
},
|
|
501
210
|
/**
|
|
502
211
|
* 判断是否是元素列表
|
|
503
212
|
* @param $ele
|
|
@@ -515,8 +224,6 @@ const CommonUtils = {
|
|
|
515
224
|
},
|
|
516
225
|
};
|
|
517
226
|
|
|
518
|
-
const version = "1.8.8";
|
|
519
|
-
|
|
520
227
|
class ElementSelector {
|
|
521
228
|
windowApi;
|
|
522
229
|
constructor(windowApiOption) {
|
|
@@ -602,9 +309,10 @@ class ElementSelector {
|
|
|
602
309
|
*/
|
|
603
310
|
matches($el, selector) {
|
|
604
311
|
selector = selector.trim();
|
|
605
|
-
if ($el == null)
|
|
312
|
+
if ($el == null)
|
|
313
|
+
return false;
|
|
314
|
+
if ($el instanceof Document)
|
|
606
315
|
return false;
|
|
607
|
-
}
|
|
608
316
|
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
609
317
|
// empty 语法
|
|
610
318
|
selector = selector.replace(/:empty$/gi, "");
|
|
@@ -648,6 +356,10 @@ class ElementSelector {
|
|
|
648
356
|
}
|
|
649
357
|
closest($el, selector) {
|
|
650
358
|
selector = selector.trim();
|
|
359
|
+
if ($el == null)
|
|
360
|
+
return null;
|
|
361
|
+
if ($el instanceof Document)
|
|
362
|
+
return null;
|
|
651
363
|
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
652
364
|
// empty 语法
|
|
653
365
|
selector = selector.replace(/:empty$/gi, "");
|
|
@@ -1045,7 +757,7 @@ class ElementWait extends ElementSelector {
|
|
|
1045
757
|
},
|
|
1046
758
|
});
|
|
1047
759
|
if (__timeout__ > 0) {
|
|
1048
|
-
|
|
760
|
+
setTimeout(() => {
|
|
1049
761
|
// 取消观察器
|
|
1050
762
|
if (typeof observer?.disconnect === "function") {
|
|
1051
763
|
observer.disconnect();
|
|
@@ -1392,7 +1104,7 @@ class ElementAnimate extends ElementWait {
|
|
|
1392
1104
|
from[prop] = element.style[prop] || context.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
1393
1105
|
to[prop] = styles[prop];
|
|
1394
1106
|
}
|
|
1395
|
-
const timer =
|
|
1107
|
+
const timer = setInterval(function () {
|
|
1396
1108
|
const timePassed = performance.now() - start;
|
|
1397
1109
|
let progress = timePassed / duration;
|
|
1398
1110
|
if (progress > 1) {
|
|
@@ -1402,7 +1114,7 @@ class ElementAnimate extends ElementWait {
|
|
|
1402
1114
|
element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
|
|
1403
1115
|
}
|
|
1404
1116
|
if (progress === 1) {
|
|
1405
|
-
|
|
1117
|
+
clearInterval(timer);
|
|
1406
1118
|
if (callback) {
|
|
1407
1119
|
callback();
|
|
1408
1120
|
}
|
|
@@ -1732,17 +1444,17 @@ class ElementEvent extends ElementAnimate {
|
|
|
1732
1444
|
/**
|
|
1733
1445
|
* 如果是once,那么删除该监听和元素上的事件和监听
|
|
1734
1446
|
*/
|
|
1735
|
-
|
|
1447
|
+
const checkOptionOnceToRemoveEventListener = () => {
|
|
1736
1448
|
if (listenerOption.once) {
|
|
1737
1449
|
that.off(element, eventType, selector, callback, option);
|
|
1738
1450
|
}
|
|
1739
|
-
}
|
|
1451
|
+
};
|
|
1740
1452
|
$elList.forEach((elementItem) => {
|
|
1741
1453
|
/**
|
|
1742
1454
|
* 事件回调
|
|
1743
1455
|
* @param event
|
|
1744
1456
|
*/
|
|
1745
|
-
function
|
|
1457
|
+
const handlerCallBack = function (event) {
|
|
1746
1458
|
if (selectorList.length) {
|
|
1747
1459
|
/* 存在子元素选择器 */
|
|
1748
1460
|
// 这时候的this和target都是子元素选择器的元素
|
|
@@ -1790,10 +1502,10 @@ class ElementEvent extends ElementAnimate {
|
|
|
1790
1502
|
listenerCallBack.call(elementItem, event);
|
|
1791
1503
|
checkOptionOnceToRemoveEventListener();
|
|
1792
1504
|
}
|
|
1793
|
-
}
|
|
1505
|
+
};
|
|
1794
1506
|
/* 遍历事件名设置元素事件 */
|
|
1795
1507
|
eventTypeList.forEach((eventName) => {
|
|
1796
|
-
elementItem.addEventListener(eventName,
|
|
1508
|
+
elementItem.addEventListener(eventName, handlerCallBack, listenerOption);
|
|
1797
1509
|
/* 获取对象上的事件 */
|
|
1798
1510
|
const elementEvents = Reflect.get(elementItem, GlobalData.domEventSymbol) || {};
|
|
1799
1511
|
/* 初始化对象上的xx事件 */
|
|
@@ -1801,8 +1513,8 @@ class ElementEvent extends ElementAnimate {
|
|
|
1801
1513
|
elementEvents[eventName].push({
|
|
1802
1514
|
selector: selectorList,
|
|
1803
1515
|
option: listenerOption,
|
|
1804
|
-
|
|
1805
|
-
|
|
1516
|
+
handlerCallBack: handlerCallBack,
|
|
1517
|
+
callback: listenerCallBack,
|
|
1806
1518
|
});
|
|
1807
1519
|
/* 覆盖事件 */
|
|
1808
1520
|
Reflect.set(elementItem, GlobalData.domEventSymbol, elementEvents);
|
|
@@ -1818,11 +1530,11 @@ class ElementEvent extends ElementAnimate {
|
|
|
1818
1530
|
},
|
|
1819
1531
|
/**
|
|
1820
1532
|
* 主动触发事件
|
|
1821
|
-
* @param
|
|
1822
|
-
* @param
|
|
1533
|
+
* @param extraDetails 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
1534
|
+
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了$selector的没有值
|
|
1823
1535
|
*/
|
|
1824
|
-
emit: (
|
|
1825
|
-
that.emit($elList, eventTypeList,
|
|
1536
|
+
emit: (extraDetails, useDispatchToTriggerEvent) => {
|
|
1537
|
+
that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
|
|
1826
1538
|
},
|
|
1827
1539
|
};
|
|
1828
1540
|
}
|
|
@@ -1918,7 +1630,7 @@ class ElementEvent extends ElementAnimate {
|
|
|
1918
1630
|
for (let index = 0; index < filterHandler.length; index++) {
|
|
1919
1631
|
const handler = filterHandler[index];
|
|
1920
1632
|
let flag = true;
|
|
1921
|
-
if (flag && listenerCallBack && handler.
|
|
1633
|
+
if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
|
|
1922
1634
|
// callback不同
|
|
1923
1635
|
flag = false;
|
|
1924
1636
|
}
|
|
@@ -1935,7 +1647,7 @@ class ElementEvent extends ElementAnimate {
|
|
|
1935
1647
|
flag = false;
|
|
1936
1648
|
}
|
|
1937
1649
|
if (flag || isRemoveAll) {
|
|
1938
|
-
$elItem.removeEventListener(eventName, handler.
|
|
1650
|
+
$elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
|
|
1939
1651
|
const findIndex = handlers.findIndex((item) => item === handler);
|
|
1940
1652
|
if (findIndex !== -1) {
|
|
1941
1653
|
handlers.splice(findIndex, 1);
|
|
@@ -1991,7 +1703,7 @@ class ElementEvent extends ElementAnimate {
|
|
|
1991
1703
|
return;
|
|
1992
1704
|
}
|
|
1993
1705
|
for (const handler of handlers) {
|
|
1994
|
-
$elItem.removeEventListener(eventName, handler.
|
|
1706
|
+
$elItem.removeEventListener(eventName, handler.handlerCallBack, {
|
|
1995
1707
|
capture: handler["option"]["capture"],
|
|
1996
1708
|
});
|
|
1997
1709
|
}
|
|
@@ -2073,7 +1785,7 @@ class ElementEvent extends ElementAnimate {
|
|
|
2073
1785
|
function check() {
|
|
2074
1786
|
if (checkDOMReadyState()) {
|
|
2075
1787
|
/* 检查document状态 */
|
|
2076
|
-
|
|
1788
|
+
setTimeout(completed, 0);
|
|
2077
1789
|
}
|
|
2078
1790
|
else {
|
|
2079
1791
|
/* 添加监听 */
|
|
@@ -2094,8 +1806,8 @@ class ElementEvent extends ElementAnimate {
|
|
|
2094
1806
|
* 主动触发事件
|
|
2095
1807
|
* @param element 需要触发的元素|元素数组|window
|
|
2096
1808
|
* @param eventType 需要触发的事件
|
|
2097
|
-
* @param
|
|
2098
|
-
* @param
|
|
1809
|
+
* @param extraDetails 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
1810
|
+
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用通过.on监听的callback(),但是这种只有一个入参,如果使用$selector则没有值
|
|
2099
1811
|
* @example
|
|
2100
1812
|
* // 触发元素a.xx的click事件
|
|
2101
1813
|
* DOMUtils.emit(document.querySelector("a.xx"),"click")
|
|
@@ -2104,7 +1816,7 @@ class ElementEvent extends ElementAnimate {
|
|
|
2104
1816
|
* DOMUtils.emit(document.querySelector("a.xx"),"click tap hover")
|
|
2105
1817
|
* DOMUtils.emit("a.xx",["click","tap","hover"])
|
|
2106
1818
|
*/
|
|
2107
|
-
emit(element, eventType,
|
|
1819
|
+
emit(element, eventType, extraDetails, useDispatchToTriggerEvent = true) {
|
|
2108
1820
|
const that = this;
|
|
2109
1821
|
if (typeof element === "string") {
|
|
2110
1822
|
element = that.selectorAll(element);
|
|
@@ -2131,25 +1843,25 @@ class ElementEvent extends ElementAnimate {
|
|
|
2131
1843
|
const elementEvents = Reflect.get($elItem, GlobalData.domEventSymbol) || {};
|
|
2132
1844
|
eventTypeList.forEach((eventTypeItem) => {
|
|
2133
1845
|
let event = null;
|
|
2134
|
-
if (
|
|
2135
|
-
event =
|
|
1846
|
+
if (extraDetails && extraDetails instanceof Event) {
|
|
1847
|
+
event = extraDetails;
|
|
2136
1848
|
}
|
|
2137
1849
|
else {
|
|
2138
1850
|
// 构造事件
|
|
2139
1851
|
event = new Event(eventTypeItem);
|
|
2140
|
-
if (
|
|
2141
|
-
const detailKeys = Object.keys(
|
|
1852
|
+
if (typeof extraDetails === "object" && extraDetails != null) {
|
|
1853
|
+
const detailKeys = Object.keys(extraDetails);
|
|
2142
1854
|
detailKeys.forEach((keyName) => {
|
|
2143
|
-
const value = Reflect.get(
|
|
1855
|
+
const value = Reflect.get(extraDetails, keyName);
|
|
2144
1856
|
// 在event上添加属性
|
|
2145
1857
|
Reflect.set(event, keyName, value);
|
|
2146
1858
|
});
|
|
2147
1859
|
}
|
|
2148
1860
|
}
|
|
2149
|
-
if (
|
|
1861
|
+
if (useDispatchToTriggerEvent == false && eventTypeItem in elementEvents) {
|
|
2150
1862
|
// 直接调用监听的事件
|
|
2151
1863
|
elementEvents[eventTypeItem].forEach((eventsItem) => {
|
|
2152
|
-
eventsItem.
|
|
1864
|
+
eventsItem.handlerCallBack(event);
|
|
2153
1865
|
});
|
|
2154
1866
|
}
|
|
2155
1867
|
else {
|
|
@@ -2635,14 +2347,14 @@ class ElementEvent extends ElementAnimate {
|
|
|
2635
2347
|
isDoubleClick: true,
|
|
2636
2348
|
});
|
|
2637
2349
|
}, options);
|
|
2638
|
-
const touchEndListener = this.on($el, "pointerup", selector, (evt,
|
|
2350
|
+
const touchEndListener = this.on($el, "pointerup", selector, (evt, $selector) => {
|
|
2639
2351
|
this.preventEvent(evt);
|
|
2640
2352
|
if (evt.pointerType === "touch") {
|
|
2641
2353
|
isMobileTouch = true;
|
|
2642
2354
|
}
|
|
2643
|
-
|
|
2355
|
+
clearTimeout(timer);
|
|
2644
2356
|
timer = void 0;
|
|
2645
|
-
if (isDoubleClick && $click ===
|
|
2357
|
+
if (isDoubleClick && $click === $selector) {
|
|
2646
2358
|
isDoubleClick = false;
|
|
2647
2359
|
$click = null;
|
|
2648
2360
|
/* 判定为双击 */
|
|
@@ -2651,7 +2363,7 @@ class ElementEvent extends ElementAnimate {
|
|
|
2651
2363
|
});
|
|
2652
2364
|
}
|
|
2653
2365
|
else {
|
|
2654
|
-
timer =
|
|
2366
|
+
timer = setTimeout(() => {
|
|
2655
2367
|
isDoubleClick = false;
|
|
2656
2368
|
// 判断为单击
|
|
2657
2369
|
dblclick_handler(evt, {
|
|
@@ -2659,7 +2371,7 @@ class ElementEvent extends ElementAnimate {
|
|
|
2659
2371
|
});
|
|
2660
2372
|
}, checkClickTime);
|
|
2661
2373
|
isDoubleClick = true;
|
|
2662
|
-
$click =
|
|
2374
|
+
$click = $selector;
|
|
2663
2375
|
}
|
|
2664
2376
|
}, options);
|
|
2665
2377
|
return {
|
|
@@ -3241,16 +2953,17 @@ class DOMUtils extends ElementHandler {
|
|
|
3241
2953
|
/**
|
|
3242
2954
|
* 函数在元素内部末尾添加子元素或HTML字符串
|
|
3243
2955
|
* @param $el 目标元素
|
|
3244
|
-
* @param
|
|
2956
|
+
* @param args 子元素或HTML字符串
|
|
3245
2957
|
* @example
|
|
3246
2958
|
* // 元素a.xx的内部末尾添加一个元素
|
|
3247
|
-
* DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
|
|
3248
|
-
* DOMUtils.append("a.xx","
|
|
2959
|
+
* DOMUtils.append(document.querySelector("a.xx"), document.querySelector("b.xx"))
|
|
2960
|
+
* DOMUtils.append("a.xx", "<b class="xx"></b>")
|
|
2961
|
+
* DOMUtils.append(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
|
|
2962
|
+
* DOMUtils.append(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
|
|
3249
2963
|
* */
|
|
3250
|
-
append($el,
|
|
3251
|
-
const that = this;
|
|
2964
|
+
append($el, ...args) {
|
|
3252
2965
|
if (typeof $el === "string") {
|
|
3253
|
-
$el =
|
|
2966
|
+
$el = this.selectorAll($el);
|
|
3254
2967
|
}
|
|
3255
2968
|
if ($el == null) {
|
|
3256
2969
|
return;
|
|
@@ -3258,55 +2971,55 @@ class DOMUtils extends ElementHandler {
|
|
|
3258
2971
|
if (CommonUtils.isNodeList($el)) {
|
|
3259
2972
|
// 设置
|
|
3260
2973
|
$el.forEach(($elItem) => {
|
|
3261
|
-
|
|
2974
|
+
this.append($elItem, ...args);
|
|
3262
2975
|
});
|
|
3263
2976
|
return;
|
|
3264
2977
|
}
|
|
3265
|
-
|
|
3266
|
-
if (
|
|
3267
|
-
if (
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
2978
|
+
const handler = ($ele, $target) => {
|
|
2979
|
+
if ($ele instanceof DocumentFragment) {
|
|
2980
|
+
if (typeof $target === "string") {
|
|
2981
|
+
// 字符串转元素
|
|
2982
|
+
$target = this.toElement($target, true, false);
|
|
2983
|
+
}
|
|
2984
|
+
$ele.appendChild($target);
|
|
2985
|
+
}
|
|
2986
|
+
else {
|
|
2987
|
+
if (typeof $target === "string") {
|
|
2988
|
+
$ele.insertAdjacentHTML("beforeend", CommonUtils.createSafeHTML($target));
|
|
3272
2989
|
}
|
|
3273
2990
|
else {
|
|
3274
|
-
ele.
|
|
2991
|
+
$ele.appendChild($target);
|
|
3275
2992
|
}
|
|
3276
2993
|
}
|
|
2994
|
+
};
|
|
2995
|
+
const $fragment = this.windowApi.document.createDocumentFragment();
|
|
2996
|
+
args.forEach((argItem) => {
|
|
2997
|
+
if (CommonUtils.isNodeList(argItem)) {
|
|
2998
|
+
// 数组
|
|
2999
|
+
argItem.forEach((it) => {
|
|
3000
|
+
handler($fragment, it);
|
|
3001
|
+
});
|
|
3002
|
+
}
|
|
3277
3003
|
else {
|
|
3278
|
-
|
|
3004
|
+
handler($fragment, argItem);
|
|
3279
3005
|
}
|
|
3280
|
-
}
|
|
3281
|
-
|
|
3282
|
-
/* 数组 */
|
|
3283
|
-
const fragment = that.windowApi.document.createDocumentFragment();
|
|
3284
|
-
content.forEach((ele) => {
|
|
3285
|
-
if (typeof ele === "string") {
|
|
3286
|
-
// 转为元素
|
|
3287
|
-
ele = that.toElement(ele, true, false);
|
|
3288
|
-
}
|
|
3289
|
-
fragment.appendChild(ele);
|
|
3290
|
-
});
|
|
3291
|
-
$el.appendChild(fragment);
|
|
3292
|
-
}
|
|
3293
|
-
else {
|
|
3294
|
-
elementAppendChild($el, content);
|
|
3295
|
-
}
|
|
3006
|
+
});
|
|
3007
|
+
handler($el, $fragment);
|
|
3296
3008
|
}
|
|
3297
3009
|
/**
|
|
3298
3010
|
* 函数 在元素内部开头添加子元素或HTML字符串
|
|
3299
3011
|
* @param $el 目标元素
|
|
3300
|
-
* @param
|
|
3012
|
+
* @param args 子元素或HTML字符串
|
|
3301
3013
|
* @example
|
|
3302
3014
|
* // 元素a.xx内部开头添加一个元素
|
|
3303
3015
|
* DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
|
|
3304
3016
|
* DOMUtils.prepend("a.xx","'<b class="xx"></b>")
|
|
3017
|
+
* DOMUtils.prepend(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
|
|
3018
|
+
* DOMUtils.prepend(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
|
|
3305
3019
|
* */
|
|
3306
|
-
prepend($el,
|
|
3307
|
-
const that = this;
|
|
3020
|
+
prepend($el, ...args) {
|
|
3308
3021
|
if (typeof $el === "string") {
|
|
3309
|
-
$el =
|
|
3022
|
+
$el = this.selectorAll($el);
|
|
3310
3023
|
}
|
|
3311
3024
|
if ($el == null) {
|
|
3312
3025
|
return;
|
|
@@ -3314,42 +3027,61 @@ class DOMUtils extends ElementHandler {
|
|
|
3314
3027
|
if (CommonUtils.isNodeList($el)) {
|
|
3315
3028
|
// 设置
|
|
3316
3029
|
$el.forEach(($elItem) => {
|
|
3317
|
-
|
|
3030
|
+
this.prepend($elItem, ...args);
|
|
3318
3031
|
});
|
|
3319
3032
|
return;
|
|
3320
3033
|
}
|
|
3321
|
-
|
|
3322
|
-
if ($
|
|
3323
|
-
|
|
3324
|
-
|
|
3034
|
+
const handler = ($ele, $target) => {
|
|
3035
|
+
if ($ele instanceof DocumentFragment) {
|
|
3036
|
+
if (typeof $target === "string") {
|
|
3037
|
+
// 字符串转元素
|
|
3038
|
+
$target = this.toElement($target, true, false);
|
|
3039
|
+
}
|
|
3040
|
+
$ele.appendChild($target);
|
|
3325
3041
|
}
|
|
3326
3042
|
else {
|
|
3327
|
-
$
|
|
3043
|
+
if (typeof $target === "string") {
|
|
3044
|
+
$ele.insertAdjacentHTML("afterbegin", CommonUtils.createSafeHTML($target));
|
|
3045
|
+
}
|
|
3046
|
+
else {
|
|
3047
|
+
const $firstChild = $ele.firstChild;
|
|
3048
|
+
if ($firstChild) {
|
|
3049
|
+
$ele.insertBefore($target, $firstChild);
|
|
3050
|
+
}
|
|
3051
|
+
else {
|
|
3052
|
+
$ele.prepend($target);
|
|
3053
|
+
}
|
|
3054
|
+
}
|
|
3328
3055
|
}
|
|
3329
|
-
}
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
if (
|
|
3333
|
-
|
|
3056
|
+
};
|
|
3057
|
+
const $fragment = this.windowApi.document.createDocumentFragment();
|
|
3058
|
+
args.forEach((argItem) => {
|
|
3059
|
+
if (CommonUtils.isNodeList(argItem)) {
|
|
3060
|
+
// 数组
|
|
3061
|
+
argItem.forEach((it) => {
|
|
3062
|
+
handler($fragment, it);
|
|
3063
|
+
});
|
|
3334
3064
|
}
|
|
3335
3065
|
else {
|
|
3336
|
-
$
|
|
3066
|
+
handler($fragment, argItem);
|
|
3337
3067
|
}
|
|
3338
|
-
}
|
|
3068
|
+
});
|
|
3069
|
+
handler($el, $fragment);
|
|
3339
3070
|
}
|
|
3340
3071
|
/**
|
|
3341
3072
|
* 在元素后面添加兄弟元素或HTML字符串
|
|
3342
3073
|
* @param $el 目标元素
|
|
3343
|
-
* @param
|
|
3074
|
+
* @param args 兄弟元素或HTML字符串
|
|
3344
3075
|
* @example
|
|
3345
3076
|
* // 元素a.xx后面添加一个元素
|
|
3346
3077
|
* DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
|
|
3347
3078
|
* DOMUtils.after("a.xx","'<b class="xx"></b>")
|
|
3079
|
+
* DOMUtils.after(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
|
|
3080
|
+
* DOMUtils.after(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
|
|
3348
3081
|
* */
|
|
3349
|
-
after($el,
|
|
3350
|
-
const that = this;
|
|
3082
|
+
after($el, ...args) {
|
|
3351
3083
|
if (typeof $el === "string") {
|
|
3352
|
-
$el =
|
|
3084
|
+
$el = this.selectorAll($el);
|
|
3353
3085
|
}
|
|
3354
3086
|
if ($el == null) {
|
|
3355
3087
|
return;
|
|
@@ -3357,38 +3089,63 @@ class DOMUtils extends ElementHandler {
|
|
|
3357
3089
|
if (CommonUtils.isNodeList($el)) {
|
|
3358
3090
|
// 设置
|
|
3359
3091
|
$el.forEach(($elItem) => {
|
|
3360
|
-
|
|
3092
|
+
this.after($elItem, ...args);
|
|
3361
3093
|
});
|
|
3362
3094
|
return;
|
|
3363
3095
|
}
|
|
3364
|
-
|
|
3365
|
-
$
|
|
3366
|
-
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
// 任意一个不行
|
|
3372
|
-
$el.after(content);
|
|
3096
|
+
const handler = ($ele, $target) => {
|
|
3097
|
+
if ($ele instanceof DocumentFragment) {
|
|
3098
|
+
if (typeof $target === "string") {
|
|
3099
|
+
// 字符串转元素
|
|
3100
|
+
$target = this.toElement($target, true, false);
|
|
3101
|
+
}
|
|
3102
|
+
$ele.appendChild($target);
|
|
3373
3103
|
}
|
|
3374
3104
|
else {
|
|
3375
|
-
|
|
3105
|
+
if (typeof $target === "string") {
|
|
3106
|
+
$ele.insertAdjacentHTML("afterend", CommonUtils.createSafeHTML($target));
|
|
3107
|
+
}
|
|
3108
|
+
else {
|
|
3109
|
+
const $parent = $el.parentElement;
|
|
3110
|
+
const $nextSlibling = $el.nextSibling;
|
|
3111
|
+
if ($parent && $nextSlibling) {
|
|
3112
|
+
$parent.insertBefore($target, $nextSlibling);
|
|
3113
|
+
}
|
|
3114
|
+
else {
|
|
3115
|
+
$el.after($target);
|
|
3116
|
+
}
|
|
3117
|
+
}
|
|
3376
3118
|
}
|
|
3377
|
-
}
|
|
3119
|
+
};
|
|
3120
|
+
const $fragment = this.windowApi.document.createDocumentFragment();
|
|
3121
|
+
args.forEach((argItem) => {
|
|
3122
|
+
if (CommonUtils.isNodeList(argItem)) {
|
|
3123
|
+
// 数组
|
|
3124
|
+
argItem.forEach((it) => {
|
|
3125
|
+
handler($fragment, it);
|
|
3126
|
+
});
|
|
3127
|
+
}
|
|
3128
|
+
else {
|
|
3129
|
+
handler($fragment, argItem);
|
|
3130
|
+
}
|
|
3131
|
+
});
|
|
3132
|
+
handler($el, $fragment);
|
|
3378
3133
|
}
|
|
3379
3134
|
/**
|
|
3380
3135
|
* 在元素前面添加兄弟元素或HTML字符串
|
|
3381
3136
|
* @param $el 目标元素
|
|
3382
|
-
* @param
|
|
3137
|
+
* @param args 兄弟元素或HTML字符串
|
|
3383
3138
|
* @example
|
|
3384
3139
|
* // 元素a.xx前面添加一个元素
|
|
3385
3140
|
* DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
|
|
3386
3141
|
* DOMUtils.before("a.xx","'<b class="xx"></b>")
|
|
3142
|
+
* DOMUtils.before(document, [document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx")])
|
|
3143
|
+
* DOMUtils.before(document, document.querySelector("b.xx"), document.querySelector("c.xx"), document.querySelector("d.xx"))
|
|
3144
|
+
*
|
|
3387
3145
|
* */
|
|
3388
|
-
before($el,
|
|
3389
|
-
const that = this;
|
|
3146
|
+
before($el, ...args) {
|
|
3390
3147
|
if (typeof $el === "string") {
|
|
3391
|
-
$el =
|
|
3148
|
+
$el = this.selectorAll($el);
|
|
3392
3149
|
}
|
|
3393
3150
|
if ($el == null) {
|
|
3394
3151
|
return;
|
|
@@ -3396,22 +3153,46 @@ class DOMUtils extends ElementHandler {
|
|
|
3396
3153
|
if (CommonUtils.isNodeList($el)) {
|
|
3397
3154
|
// 设置
|
|
3398
3155
|
$el.forEach(($elItem) => {
|
|
3399
|
-
|
|
3156
|
+
this.before($elItem, ...args);
|
|
3400
3157
|
});
|
|
3401
3158
|
return;
|
|
3402
3159
|
}
|
|
3403
|
-
|
|
3404
|
-
$
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
$
|
|
3160
|
+
const handler = ($ele, $target) => {
|
|
3161
|
+
if ($ele instanceof DocumentFragment) {
|
|
3162
|
+
if (typeof $target === "string") {
|
|
3163
|
+
// 字符串转元素
|
|
3164
|
+
$target = this.toElement($target, true, false);
|
|
3165
|
+
}
|
|
3166
|
+
$ele.appendChild($target);
|
|
3167
|
+
}
|
|
3168
|
+
else {
|
|
3169
|
+
if (typeof $target === "string") {
|
|
3170
|
+
$el.insertAdjacentHTML("beforebegin", CommonUtils.createSafeHTML($target));
|
|
3171
|
+
}
|
|
3172
|
+
else {
|
|
3173
|
+
const $parent = $el.parentElement;
|
|
3174
|
+
if ($parent) {
|
|
3175
|
+
$parent.insertBefore($target, $el);
|
|
3176
|
+
}
|
|
3177
|
+
else {
|
|
3178
|
+
$el.before($target);
|
|
3179
|
+
}
|
|
3180
|
+
}
|
|
3181
|
+
}
|
|
3182
|
+
};
|
|
3183
|
+
const $fragment = this.windowApi.document.createDocumentFragment();
|
|
3184
|
+
args.forEach((argItem) => {
|
|
3185
|
+
if (CommonUtils.isNodeList(argItem)) {
|
|
3186
|
+
// 数组
|
|
3187
|
+
argItem.forEach((it) => {
|
|
3188
|
+
handler($fragment, it);
|
|
3189
|
+
});
|
|
3410
3190
|
}
|
|
3411
3191
|
else {
|
|
3412
|
-
$
|
|
3192
|
+
handler($fragment, argItem);
|
|
3413
3193
|
}
|
|
3414
|
-
}
|
|
3194
|
+
});
|
|
3195
|
+
handler($el, $fragment);
|
|
3415
3196
|
}
|
|
3416
3197
|
/**
|
|
3417
3198
|
* 移除元素
|
|
@@ -3447,7 +3228,7 @@ class DOMUtils extends ElementHandler {
|
|
|
3447
3228
|
}
|
|
3448
3229
|
}
|
|
3449
3230
|
/**
|
|
3450
|
-
*
|
|
3231
|
+
* 移除元素内所有的子元素
|
|
3451
3232
|
* @param $el 目标元素
|
|
3452
3233
|
* @example
|
|
3453
3234
|
* // 移除元素a.xx元素的所有子元素
|
|
@@ -4137,6 +3918,10 @@ class DOMUtils extends ElementHandler {
|
|
|
4137
3918
|
}
|
|
4138
3919
|
}
|
|
4139
3920
|
const domUtils = new DOMUtils();
|
|
3921
|
+
domUtils.emit(document, "test");
|
|
3922
|
+
domUtils.emit(document, "click");
|
|
3923
|
+
domUtils.emit(document, ["test", "click"]);
|
|
3924
|
+
domUtils.emit(document, ["test", "click"], true);
|
|
4140
3925
|
|
|
4141
3926
|
export { domUtils as default };
|
|
4142
3927
|
//# sourceMappingURL=index.esm.js.map
|