@whitesev/domutils 1.6.5 → 1.6.7
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/README.md +42 -42
- package/dist/index.amd.js +267 -301
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +267 -301
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +267 -301
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +267 -301
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +267 -301
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +267 -301
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/DOMUtils.d.ts +34 -5
- package/dist/types/src/DOMUtilsCommonUtils.d.ts +2 -2
- package/dist/types/src/DOMUtilsEvent.d.ts +64 -64
- package/dist/types/src/types/DOMUtilsEvent.d.ts +142 -142
- package/dist/types/src/types/WindowApi.d.ts +9 -9
- package/dist/types/src/types/global.d.ts +2 -10
- package/dist/types/src/types/gm.d.ts +5 -1
- package/index.ts +3 -0
- package/package.json +19 -7
- package/src/DOMUtils.ts +1967 -1974
- package/src/DOMUtilsCommonUtils.ts +196 -196
- package/src/DOMUtilsData.ts +2 -2
- package/src/DOMUtilsEvent.ts +1407 -1459
- package/src/DOMUtilsOriginPrototype.ts +3 -3
- package/src/WindowApi.ts +55 -55
- package/src/types/DOMUtilsEvent.d.ts +142 -142
- package/src/types/WindowApi.d.ts +9 -9
- package/src/types/global.d.ts +2 -10
- package/src/types/gm.d.ts +5 -1
package/dist/index.esm.js
CHANGED
|
@@ -323,10 +323,8 @@ const DOMUtilsCommonUtils = {
|
|
|
323
323
|
* 获取安全的html
|
|
324
324
|
*/
|
|
325
325
|
getSafeHTML(text) {
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
// @ts-ignore
|
|
329
|
-
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
326
|
+
if (window.trustedTypes) {
|
|
327
|
+
const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
|
|
330
328
|
createHTML: (html) => html,
|
|
331
329
|
});
|
|
332
330
|
return policy.createHTML(text);
|
|
@@ -349,7 +347,7 @@ const DOMUtilsCommonUtils = {
|
|
|
349
347
|
* @param element
|
|
350
348
|
*/
|
|
351
349
|
showElement(element) {
|
|
352
|
-
|
|
350
|
+
const dupNode = element.cloneNode(true);
|
|
353
351
|
dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
|
|
354
352
|
this.windowApi.document.documentElement.appendChild(dupNode);
|
|
355
353
|
return {
|
|
@@ -380,7 +378,7 @@ const DOMUtilsCommonUtils = {
|
|
|
380
378
|
}
|
|
381
379
|
styles = view.getComputedStyle(element);
|
|
382
380
|
}
|
|
383
|
-
|
|
381
|
+
const value = parseFloat(styles[styleName]);
|
|
384
382
|
if (isNaN(value)) {
|
|
385
383
|
return 0;
|
|
386
384
|
}
|
|
@@ -445,7 +443,7 @@ const DOMUtilsCommonUtils = {
|
|
|
445
443
|
try {
|
|
446
444
|
return setTimeout$1(callback, timeout);
|
|
447
445
|
}
|
|
448
|
-
catch
|
|
446
|
+
catch {
|
|
449
447
|
return this.windowApi.setTimeout(callback, timeout);
|
|
450
448
|
}
|
|
451
449
|
},
|
|
@@ -458,7 +456,8 @@ const DOMUtilsCommonUtils = {
|
|
|
458
456
|
clearTimeout$1(timeId);
|
|
459
457
|
}
|
|
460
458
|
}
|
|
461
|
-
catch
|
|
459
|
+
catch {
|
|
460
|
+
// TODO
|
|
462
461
|
}
|
|
463
462
|
finally {
|
|
464
463
|
this.windowApi.clearTimeout(timeId);
|
|
@@ -471,7 +470,7 @@ const DOMUtilsCommonUtils = {
|
|
|
471
470
|
try {
|
|
472
471
|
return setInterval$1(callback, timeout);
|
|
473
472
|
}
|
|
474
|
-
catch
|
|
473
|
+
catch {
|
|
475
474
|
return this.windowApi.setInterval(callback, timeout);
|
|
476
475
|
}
|
|
477
476
|
},
|
|
@@ -484,7 +483,8 @@ const DOMUtilsCommonUtils = {
|
|
|
484
483
|
clearInterval$1(timeId);
|
|
485
484
|
}
|
|
486
485
|
}
|
|
487
|
-
catch
|
|
486
|
+
catch {
|
|
487
|
+
// TODO
|
|
488
488
|
}
|
|
489
489
|
finally {
|
|
490
490
|
this.windowApi.clearInterval(timeId);
|
|
@@ -532,7 +532,7 @@ class DOMUtilsEvent {
|
|
|
532
532
|
* @param option
|
|
533
533
|
*/
|
|
534
534
|
function getOption(args, startIndex, option) {
|
|
535
|
-
|
|
535
|
+
const currentParam = args[startIndex];
|
|
536
536
|
if (typeof currentParam === "boolean") {
|
|
537
537
|
option.capture = currentParam;
|
|
538
538
|
if (typeof args[startIndex + 1] === "boolean") {
|
|
@@ -554,8 +554,9 @@ class DOMUtilsEvent {
|
|
|
554
554
|
}
|
|
555
555
|
return option;
|
|
556
556
|
}
|
|
557
|
-
|
|
558
|
-
|
|
557
|
+
const DOMUtilsContext = this;
|
|
558
|
+
// eslint-disable-next-line prefer-rest-params
|
|
559
|
+
const args = arguments;
|
|
559
560
|
if (typeof element === "string") {
|
|
560
561
|
element = DOMUtilsContext.selectorAll(element);
|
|
561
562
|
}
|
|
@@ -631,14 +632,14 @@ class DOMUtilsEvent {
|
|
|
631
632
|
totalParent = DOMUtilsContext.windowApi.document.documentElement;
|
|
632
633
|
}
|
|
633
634
|
}
|
|
634
|
-
|
|
635
|
+
const findValue = selectorList.find((selectorItem) => {
|
|
635
636
|
// 判断目标元素是否匹配选择器
|
|
636
637
|
if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
|
|
637
638
|
/* 当前目标可以被selector所匹配到 */
|
|
638
639
|
return true;
|
|
639
640
|
}
|
|
640
641
|
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
|
|
641
|
-
|
|
642
|
+
const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
|
|
642
643
|
if ($closestMatches && totalParent?.contains($closestMatches)) {
|
|
643
644
|
eventTarget = $closestMatches;
|
|
644
645
|
return true;
|
|
@@ -654,7 +655,9 @@ class DOMUtilsEvent {
|
|
|
654
655
|
},
|
|
655
656
|
});
|
|
656
657
|
}
|
|
657
|
-
catch
|
|
658
|
+
catch {
|
|
659
|
+
// TODO
|
|
660
|
+
}
|
|
658
661
|
listenerCallBack.call(eventTarget, event, eventTarget);
|
|
659
662
|
checkOptionOnceToRemoveEventListener();
|
|
660
663
|
}
|
|
@@ -669,7 +672,7 @@ class DOMUtilsEvent {
|
|
|
669
672
|
eventTypeList.forEach((eventName) => {
|
|
670
673
|
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
671
674
|
/* 获取对象上的事件 */
|
|
672
|
-
|
|
675
|
+
const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
|
|
673
676
|
/* 初始化对象上的xx事件 */
|
|
674
677
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
675
678
|
elementEvents[eventName].push({
|
|
@@ -691,7 +694,7 @@ class DOMUtilsEvent {
|
|
|
691
694
|
* @param option
|
|
692
695
|
*/
|
|
693
696
|
function getOption(args1, startIndex, option) {
|
|
694
|
-
|
|
697
|
+
const currentParam = args1[startIndex];
|
|
695
698
|
if (typeof currentParam === "boolean") {
|
|
696
699
|
option.capture = currentParam;
|
|
697
700
|
}
|
|
@@ -700,8 +703,9 @@ class DOMUtilsEvent {
|
|
|
700
703
|
}
|
|
701
704
|
return option;
|
|
702
705
|
}
|
|
703
|
-
|
|
704
|
-
|
|
706
|
+
const DOMUtilsContext = this;
|
|
707
|
+
// eslint-disable-next-line prefer-rest-params
|
|
708
|
+
const args = arguments;
|
|
705
709
|
if (typeof element === "string") {
|
|
706
710
|
element = DOMUtilsContext.selectorAll(element);
|
|
707
711
|
}
|
|
@@ -763,14 +767,14 @@ class DOMUtilsEvent {
|
|
|
763
767
|
}
|
|
764
768
|
elementList.forEach((elementItem) => {
|
|
765
769
|
/* 获取对象上的事件 */
|
|
766
|
-
|
|
770
|
+
const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
|
|
767
771
|
eventTypeList.forEach((eventName) => {
|
|
768
772
|
let handlers = elementEvents[eventName] || [];
|
|
769
773
|
if (typeof filter === "function") {
|
|
770
774
|
handlers = handlers.filter(filter);
|
|
771
775
|
}
|
|
772
776
|
for (let index = 0; index < handlers.length; index++) {
|
|
773
|
-
|
|
777
|
+
const handler = handlers[index];
|
|
774
778
|
let flag = true;
|
|
775
779
|
if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
|
|
776
780
|
// callback不同
|
|
@@ -805,7 +809,7 @@ class DOMUtilsEvent {
|
|
|
805
809
|
* @param eventType (可选)需要取消监听的事件
|
|
806
810
|
*/
|
|
807
811
|
offAll(element, eventType) {
|
|
808
|
-
|
|
812
|
+
const DOMUtilsContext = this;
|
|
809
813
|
if (typeof element === "string") {
|
|
810
814
|
element = DOMUtilsContext.selectorAll(element);
|
|
811
815
|
}
|
|
@@ -831,10 +835,10 @@ class DOMUtilsEvent {
|
|
|
831
835
|
if (!symbolEvents.toString().startsWith("Symbol(events_")) {
|
|
832
836
|
return;
|
|
833
837
|
}
|
|
834
|
-
|
|
835
|
-
|
|
838
|
+
const elementEvents = elementItem[symbolEvents] || {};
|
|
839
|
+
const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
|
|
836
840
|
iterEventNameList.forEach((eventName) => {
|
|
837
|
-
|
|
841
|
+
const handlers = elementEvents[eventName];
|
|
838
842
|
if (!handlers) {
|
|
839
843
|
return;
|
|
840
844
|
}
|
|
@@ -843,7 +847,7 @@ class DOMUtilsEvent {
|
|
|
843
847
|
capture: handler["option"]["capture"],
|
|
844
848
|
});
|
|
845
849
|
}
|
|
846
|
-
|
|
850
|
+
const events = Reflect.get(elementItem, symbolEvents);
|
|
847
851
|
DOMUtilsCommonUtils.delete(events, eventName);
|
|
848
852
|
});
|
|
849
853
|
});
|
|
@@ -861,7 +865,7 @@ class DOMUtilsEvent {
|
|
|
861
865
|
if (typeof callback !== "function") {
|
|
862
866
|
return;
|
|
863
867
|
}
|
|
864
|
-
|
|
868
|
+
const DOMUtilsContext = this;
|
|
865
869
|
/**
|
|
866
870
|
* 检测文档是否加载完毕
|
|
867
871
|
*/
|
|
@@ -876,7 +880,7 @@ class DOMUtilsEvent {
|
|
|
876
880
|
return false;
|
|
877
881
|
}
|
|
878
882
|
}
|
|
879
|
-
catch
|
|
883
|
+
catch {
|
|
880
884
|
return false;
|
|
881
885
|
}
|
|
882
886
|
}
|
|
@@ -887,7 +891,7 @@ class DOMUtilsEvent {
|
|
|
887
891
|
removeDomReadyListener();
|
|
888
892
|
callback();
|
|
889
893
|
}
|
|
890
|
-
|
|
894
|
+
const targetList = [
|
|
891
895
|
{
|
|
892
896
|
target: DOMUtilsContext.windowApi.document,
|
|
893
897
|
eventType: "DOMContentLoaded",
|
|
@@ -904,7 +908,7 @@ class DOMUtilsEvent {
|
|
|
904
908
|
*/
|
|
905
909
|
function addDomReadyListener() {
|
|
906
910
|
for (let index = 0; index < targetList.length; index++) {
|
|
907
|
-
|
|
911
|
+
const item = targetList[index];
|
|
908
912
|
item.target.addEventListener(item.eventType, item.callback);
|
|
909
913
|
}
|
|
910
914
|
}
|
|
@@ -913,7 +917,7 @@ class DOMUtilsEvent {
|
|
|
913
917
|
*/
|
|
914
918
|
function removeDomReadyListener() {
|
|
915
919
|
for (let index = 0; index < targetList.length; index++) {
|
|
916
|
-
|
|
920
|
+
const item = targetList[index];
|
|
917
921
|
item.target.removeEventListener(item.eventType, item.callback);
|
|
918
922
|
}
|
|
919
923
|
}
|
|
@@ -941,7 +945,7 @@ class DOMUtilsEvent {
|
|
|
941
945
|
* DOMUtils.trigger("a.xx",["click","tap","hover"])
|
|
942
946
|
*/
|
|
943
947
|
trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
|
|
944
|
-
|
|
948
|
+
const DOMUtilsContext = this;
|
|
945
949
|
if (typeof element === "string") {
|
|
946
950
|
element = DOMUtilsContext.selectorAll(element);
|
|
947
951
|
}
|
|
@@ -965,7 +969,7 @@ class DOMUtilsEvent {
|
|
|
965
969
|
}
|
|
966
970
|
elementList.forEach((elementItem) => {
|
|
967
971
|
/* 获取对象上的事件 */
|
|
968
|
-
|
|
972
|
+
const events = elementItem[DOMUtilsData.SymbolEvents] || {};
|
|
969
973
|
eventTypeList.forEach((_eventType_) => {
|
|
970
974
|
let event = null;
|
|
971
975
|
if (details && details instanceof Event) {
|
|
@@ -1005,7 +1009,7 @@ class DOMUtilsEvent {
|
|
|
1005
1009
|
* })
|
|
1006
1010
|
* */
|
|
1007
1011
|
click(element, handler, details, useDispatchToTriggerEvent) {
|
|
1008
|
-
|
|
1012
|
+
const DOMUtilsContext = this;
|
|
1009
1013
|
if (typeof element === "string") {
|
|
1010
1014
|
element = DOMUtilsContext.selectorAll(element);
|
|
1011
1015
|
}
|
|
@@ -1041,7 +1045,7 @@ class DOMUtilsEvent {
|
|
|
1041
1045
|
* })
|
|
1042
1046
|
* */
|
|
1043
1047
|
blur(element, handler, details, useDispatchToTriggerEvent) {
|
|
1044
|
-
|
|
1048
|
+
const DOMUtilsContext = this;
|
|
1045
1049
|
if (typeof element === "string") {
|
|
1046
1050
|
element = DOMUtilsContext.selectorAll(element);
|
|
1047
1051
|
}
|
|
@@ -1077,7 +1081,7 @@ class DOMUtilsEvent {
|
|
|
1077
1081
|
* })
|
|
1078
1082
|
* */
|
|
1079
1083
|
focus(element, handler, details, useDispatchToTriggerEvent) {
|
|
1080
|
-
|
|
1084
|
+
const DOMUtilsContext = this;
|
|
1081
1085
|
if (typeof element === "string") {
|
|
1082
1086
|
element = DOMUtilsContext.selectorAll(element);
|
|
1083
1087
|
}
|
|
@@ -1113,7 +1117,7 @@ class DOMUtilsEvent {
|
|
|
1113
1117
|
* })
|
|
1114
1118
|
*/
|
|
1115
1119
|
hover(element, handler, option) {
|
|
1116
|
-
|
|
1120
|
+
const DOMUtilsContext = this;
|
|
1117
1121
|
if (typeof element === "string") {
|
|
1118
1122
|
element = DOMUtilsContext.selectorAll(element);
|
|
1119
1123
|
}
|
|
@@ -1137,7 +1141,7 @@ class DOMUtilsEvent {
|
|
|
1137
1141
|
* @param option 配置项,这里默认配置once为true
|
|
1138
1142
|
*/
|
|
1139
1143
|
animationend(element, handler, option) {
|
|
1140
|
-
|
|
1144
|
+
const DOMUtilsContext = this;
|
|
1141
1145
|
if (typeof element === "string") {
|
|
1142
1146
|
element = DOMUtilsContext.selector(element);
|
|
1143
1147
|
}
|
|
@@ -1172,7 +1176,7 @@ class DOMUtilsEvent {
|
|
|
1172
1176
|
* @param option 配置项,这里默认配置once为true
|
|
1173
1177
|
*/
|
|
1174
1178
|
transitionend(element, handler, option) {
|
|
1175
|
-
|
|
1179
|
+
const DOMUtilsContext = this;
|
|
1176
1180
|
if (typeof element === "string") {
|
|
1177
1181
|
element = DOMUtilsContext.selector(element);
|
|
1178
1182
|
}
|
|
@@ -1216,7 +1220,7 @@ class DOMUtilsEvent {
|
|
|
1216
1220
|
* })
|
|
1217
1221
|
*/
|
|
1218
1222
|
keyup(element, handler, option) {
|
|
1219
|
-
|
|
1223
|
+
const DOMUtilsContext = this;
|
|
1220
1224
|
if (element == null) {
|
|
1221
1225
|
return;
|
|
1222
1226
|
}
|
|
@@ -1248,7 +1252,7 @@ class DOMUtilsEvent {
|
|
|
1248
1252
|
* })
|
|
1249
1253
|
*/
|
|
1250
1254
|
keydown(element, handler, option) {
|
|
1251
|
-
|
|
1255
|
+
const DOMUtilsContext = this;
|
|
1252
1256
|
if (element == null) {
|
|
1253
1257
|
return;
|
|
1254
1258
|
}
|
|
@@ -1280,7 +1284,7 @@ class DOMUtilsEvent {
|
|
|
1280
1284
|
* })
|
|
1281
1285
|
*/
|
|
1282
1286
|
keypress(element, handler, option) {
|
|
1283
|
-
|
|
1287
|
+
const DOMUtilsContext = this;
|
|
1284
1288
|
if (element == null) {
|
|
1285
1289
|
return;
|
|
1286
1290
|
}
|
|
@@ -1297,80 +1301,80 @@ class DOMUtilsEvent {
|
|
|
1297
1301
|
DOMUtilsContext.on(element, "keypress", null, handler, option);
|
|
1298
1302
|
}
|
|
1299
1303
|
/**
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1304
|
+
* 监听某个元素键盘按键事件或window全局按键事件
|
|
1305
|
+
* 按下有值的键时触发,按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件,再触发keypress事件。
|
|
1306
|
+
* @param element 需要监听的对象,可以是全局Window或者某个元素
|
|
1307
|
+
* @param eventName 事件名,默认keypress
|
|
1308
|
+
* @param callback 自己定义的回调事件,参数1为当前的key,参数2为组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
|
|
1309
|
+
* @param options 监听事件的配置
|
|
1310
|
+
* @example
|
|
1311
|
+
Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
|
|
1312
|
+
if(keyName === "Enter"){
|
|
1313
|
+
console.log("回车按键的值是:"+keyValue)
|
|
1314
|
+
}
|
|
1315
|
+
if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
|
|
1316
|
+
console.log("Ctrl和回车键");
|
|
1317
|
+
}
|
|
1318
|
+
})
|
|
1319
|
+
* @example
|
|
1320
|
+
字母和数字键的键码值(keyCode)
|
|
1321
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1322
|
+
A 65 J 74 S 83 1 49
|
|
1323
|
+
B 66 K 75 T 84 2 50
|
|
1324
|
+
C 67 L 76 U 85 3 51
|
|
1325
|
+
D 68 M 77 V 86 4 52
|
|
1326
|
+
E 69 N 78 W 87 5 53
|
|
1327
|
+
F 70 O 79 X 88 6 54
|
|
1328
|
+
G 71 P 80 Y 89 7 55
|
|
1329
|
+
H 72 Q 81 Z 90 8 56
|
|
1330
|
+
I 73 R 82 0 48 9 57
|
|
1331
|
+
|
|
1332
|
+
数字键盘上的键的键码值(keyCode)
|
|
1333
|
+
功能键键码值(keyCode)
|
|
1334
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1335
|
+
0 96 8 104 F1 112 F7 118
|
|
1336
|
+
1 97 9 105 F2 113 F8 119
|
|
1337
|
+
2 98 * 106 F3 114 F9 120
|
|
1338
|
+
3 99 + 107 F4 115 F10 121
|
|
1339
|
+
4 100 Enter 108 F5 116 F11 122
|
|
1340
|
+
5 101 - 109 F6 117 F12 123
|
|
1341
|
+
6 102 . 110
|
|
1342
|
+
7 103 / 111
|
|
1343
|
+
|
|
1344
|
+
控制键键码值(keyCode)
|
|
1345
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1346
|
+
BackSpace 8 Esc 27 → 39 -_ 189
|
|
1347
|
+
Tab 9 Spacebar 32 ↓ 40 .> 190
|
|
1348
|
+
Clear 12 Page Up 33 Insert 45 /? 191
|
|
1349
|
+
Enter 13 Page Down 34 Delete 46 `~ 192
|
|
1350
|
+
Shift 16 End 35 Num Lock 144 [{ 219
|
|
1351
|
+
Control 17 Home 36 ;: 186 \| 220
|
|
1352
|
+
Alt 18 ← 37 =+ 187 ]} 221
|
|
1353
|
+
Cape Lock 20 ↑ 38 ,< 188 '" 222
|
|
1354
|
+
|
|
1355
|
+
多媒体键码值(keyCode)
|
|
1356
|
+
按键 键码
|
|
1357
|
+
音量加 175
|
|
1358
|
+
音量减 174
|
|
1359
|
+
停止 179
|
|
1360
|
+
静音 173
|
|
1361
|
+
浏览器 172
|
|
1362
|
+
邮件 180
|
|
1363
|
+
搜索 170
|
|
1364
|
+
收藏 171
|
|
1365
|
+
**/
|
|
1362
1366
|
listenKeyboard(element, eventName = "keypress", callback, options) {
|
|
1363
|
-
|
|
1367
|
+
const DOMUtilsContext = this;
|
|
1364
1368
|
if (typeof element === "string") {
|
|
1365
1369
|
element = DOMUtilsContext.selectorAll(element);
|
|
1366
1370
|
}
|
|
1367
|
-
|
|
1371
|
+
const keyboardEventCallBack = function (event) {
|
|
1368
1372
|
/** 键名 */
|
|
1369
|
-
|
|
1373
|
+
const keyName = event.key || event.code;
|
|
1370
1374
|
/** 键值 */
|
|
1371
|
-
|
|
1375
|
+
const keyValue = event.charCode || event.keyCode || event.which;
|
|
1372
1376
|
/** 组合键列表 */
|
|
1373
|
-
|
|
1377
|
+
const otherCodeList = [];
|
|
1374
1378
|
if (event.ctrlKey) {
|
|
1375
1379
|
otherCodeList.push("ctrl");
|
|
1376
1380
|
}
|
|
@@ -1408,29 +1412,27 @@ class DOMUtilsEvent {
|
|
|
1408
1412
|
return $ele?.innerHTML?.trim() === "";
|
|
1409
1413
|
});
|
|
1410
1414
|
}
|
|
1411
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1412
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1415
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1413
1416
|
// contains 语法
|
|
1414
|
-
|
|
1415
|
-
|
|
1417
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1418
|
+
const text = textMatch[2];
|
|
1416
1419
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1417
1420
|
return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
|
|
1418
1421
|
// @ts-ignore
|
|
1419
1422
|
return ($ele?.textContent || $ele?.innerText)?.includes(text);
|
|
1420
1423
|
});
|
|
1421
1424
|
}
|
|
1422
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1423
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1425
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1424
1426
|
// regexp 语法
|
|
1425
|
-
|
|
1427
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1426
1428
|
let pattern = textMatch[2];
|
|
1427
|
-
|
|
1429
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1428
1430
|
let flags = "";
|
|
1429
1431
|
if (flagMatch) {
|
|
1430
1432
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1431
1433
|
flags = flagMatch[3];
|
|
1432
1434
|
}
|
|
1433
|
-
|
|
1435
|
+
const regexp = new RegExp(pattern, flags);
|
|
1434
1436
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1435
1437
|
return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
|
|
1436
1438
|
// @ts-ignore
|
|
@@ -1473,11 +1475,10 @@ class DOMUtilsEvent {
|
|
|
1473
1475
|
selector = selector.replace(/:empty$/gi, "");
|
|
1474
1476
|
return $el.matches(selector) && $el?.innerHTML?.trim() === "";
|
|
1475
1477
|
}
|
|
1476
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1477
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1478
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1478
1479
|
// contains 语法
|
|
1479
|
-
|
|
1480
|
-
|
|
1480
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1481
|
+
const text = textMatch[2];
|
|
1481
1482
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1482
1483
|
// @ts-ignore
|
|
1483
1484
|
let content = $el?.textContent || $el?.innerText;
|
|
@@ -1486,18 +1487,17 @@ class DOMUtilsEvent {
|
|
|
1486
1487
|
}
|
|
1487
1488
|
return $el.matches(selector) && content?.includes(text);
|
|
1488
1489
|
}
|
|
1489
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1490
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1490
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1491
1491
|
// regexp 语法
|
|
1492
|
-
|
|
1492
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1493
1493
|
let pattern = textMatch[2];
|
|
1494
|
-
|
|
1494
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1495
1495
|
let flags = "";
|
|
1496
1496
|
if (flagMatch) {
|
|
1497
1497
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1498
1498
|
flags = flagMatch[3];
|
|
1499
1499
|
}
|
|
1500
|
-
|
|
1500
|
+
const regexp = new RegExp(pattern, flags);
|
|
1501
1501
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1502
1502
|
// @ts-ignore
|
|
1503
1503
|
let content = $el?.textContent || $el?.innerText;
|
|
@@ -1516,45 +1516,43 @@ class DOMUtilsEvent {
|
|
|
1516
1516
|
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1517
1517
|
// empty 语法
|
|
1518
1518
|
selector = selector.replace(/:empty$/gi, "");
|
|
1519
|
-
|
|
1519
|
+
const $closest = $el?.closest(selector);
|
|
1520
1520
|
if ($closest && $closest?.innerHTML?.trim() === "") {
|
|
1521
1521
|
return $closest;
|
|
1522
1522
|
}
|
|
1523
1523
|
return null;
|
|
1524
1524
|
}
|
|
1525
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1526
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1525
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1527
1526
|
// contains 语法
|
|
1528
|
-
|
|
1529
|
-
|
|
1527
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1528
|
+
const text = textMatch[2];
|
|
1530
1529
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1531
|
-
|
|
1530
|
+
const $closest = $el?.closest(selector);
|
|
1532
1531
|
if ($closest) {
|
|
1533
1532
|
// @ts-ignore
|
|
1534
|
-
|
|
1533
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1535
1534
|
if (typeof content === "string" && content.includes(text)) {
|
|
1536
1535
|
return $closest;
|
|
1537
1536
|
}
|
|
1538
1537
|
}
|
|
1539
1538
|
return null;
|
|
1540
1539
|
}
|
|
1541
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1542
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1540
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1543
1541
|
// regexp 语法
|
|
1544
|
-
|
|
1542
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1545
1543
|
let pattern = textMatch[2];
|
|
1546
|
-
|
|
1544
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1547
1545
|
let flags = "";
|
|
1548
1546
|
if (flagMatch) {
|
|
1549
1547
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1550
1548
|
flags = flagMatch[3];
|
|
1551
1549
|
}
|
|
1552
|
-
|
|
1550
|
+
const regexp = new RegExp(pattern, flags);
|
|
1553
1551
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1554
|
-
|
|
1552
|
+
const $closest = $el?.closest(selector);
|
|
1555
1553
|
if ($closest) {
|
|
1556
1554
|
// @ts-ignore
|
|
1557
|
-
|
|
1555
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1558
1556
|
if (typeof content === "string" && content.match(regexp)) {
|
|
1559
1557
|
return $closest;
|
|
1560
1558
|
}
|
|
@@ -1563,20 +1561,22 @@ class DOMUtilsEvent {
|
|
|
1563
1561
|
}
|
|
1564
1562
|
else {
|
|
1565
1563
|
// 普通语法
|
|
1566
|
-
|
|
1564
|
+
const $closest = $el?.closest(selector);
|
|
1567
1565
|
return $closest;
|
|
1568
1566
|
}
|
|
1569
1567
|
}
|
|
1570
1568
|
}
|
|
1571
1569
|
|
|
1570
|
+
const version = "1.6.6";
|
|
1571
|
+
|
|
1572
1572
|
class DOMUtils extends DOMUtilsEvent {
|
|
1573
1573
|
constructor(option) {
|
|
1574
1574
|
super(option);
|
|
1575
1575
|
}
|
|
1576
1576
|
/** 版本号 */
|
|
1577
|
-
version =
|
|
1577
|
+
version = version;
|
|
1578
1578
|
attr(element, attrName, attrValue) {
|
|
1579
|
-
|
|
1579
|
+
const DOMUtilsContext = this;
|
|
1580
1580
|
if (typeof element === "string") {
|
|
1581
1581
|
element = DOMUtilsContext.selectorAll(element);
|
|
1582
1582
|
}
|
|
@@ -1603,24 +1603,6 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1603
1603
|
element.setAttribute(attrName, attrValue);
|
|
1604
1604
|
}
|
|
1605
1605
|
}
|
|
1606
|
-
/**
|
|
1607
|
-
* 创建元素
|
|
1608
|
-
* @param tagName 标签名
|
|
1609
|
-
* @param property 属性
|
|
1610
|
-
* @param attributes 元素上的自定义属性
|
|
1611
|
-
* @example
|
|
1612
|
-
* // 创建一个DIV元素,且属性class为xxx
|
|
1613
|
-
* DOMUtils.createElement("div",undefined,{ class:"xxx" });
|
|
1614
|
-
* > <div class="xxx"></div>
|
|
1615
|
-
* @example
|
|
1616
|
-
* // 创建一个DIV元素
|
|
1617
|
-
* DOMUtils.createElement("div");
|
|
1618
|
-
* > <div></div>
|
|
1619
|
-
* @example
|
|
1620
|
-
* // 创建一个DIV元素
|
|
1621
|
-
* DOMUtils.createElement("div","测试");
|
|
1622
|
-
* > <div>测试</div>
|
|
1623
|
-
*/
|
|
1624
1606
|
createElement(
|
|
1625
1607
|
/** 元素名 */
|
|
1626
1608
|
tagName,
|
|
@@ -1628,8 +1610,8 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1628
1610
|
property,
|
|
1629
1611
|
/** 自定义属性 */
|
|
1630
1612
|
attributes) {
|
|
1631
|
-
|
|
1632
|
-
|
|
1613
|
+
const DOMUtilsContext = this;
|
|
1614
|
+
const tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
|
|
1633
1615
|
if (typeof property === "string") {
|
|
1634
1616
|
DOMUtilsContext.html(tempElement, property);
|
|
1635
1617
|
return tempElement;
|
|
@@ -1641,7 +1623,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1641
1623
|
attributes = {};
|
|
1642
1624
|
}
|
|
1643
1625
|
Object.keys(property).forEach((key) => {
|
|
1644
|
-
|
|
1626
|
+
const value = property[key];
|
|
1645
1627
|
if (key === "innerHTML") {
|
|
1646
1628
|
DOMUtilsContext.html(tempElement, value);
|
|
1647
1629
|
return;
|
|
@@ -1663,18 +1645,16 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1663
1645
|
return tempElement;
|
|
1664
1646
|
}
|
|
1665
1647
|
css(element, property, value) {
|
|
1666
|
-
|
|
1648
|
+
const DOMUtilsContext = this;
|
|
1667
1649
|
/**
|
|
1668
1650
|
* 把纯数字没有px的加上
|
|
1669
1651
|
*/
|
|
1670
1652
|
function handlePixe(propertyName, propertyValue) {
|
|
1671
|
-
|
|
1653
|
+
const allowAddPixe = ["width", "height", "top", "left", "right", "bottom", "font-size"];
|
|
1672
1654
|
if (typeof propertyValue === "number") {
|
|
1673
1655
|
propertyValue = propertyValue.toString();
|
|
1674
1656
|
}
|
|
1675
|
-
if (typeof propertyValue === "string" &&
|
|
1676
|
-
allowAddPixe.includes(propertyName) &&
|
|
1677
|
-
propertyValue.match(/[0-9]$/gi)) {
|
|
1657
|
+
if (typeof propertyValue === "string" && allowAddPixe.includes(propertyName) && propertyValue.match(/[0-9]$/gi)) {
|
|
1678
1658
|
propertyValue = propertyValue + "px";
|
|
1679
1659
|
}
|
|
1680
1660
|
return propertyValue;
|
|
@@ -1706,10 +1686,9 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1706
1686
|
});
|
|
1707
1687
|
return;
|
|
1708
1688
|
}
|
|
1709
|
-
else ;
|
|
1710
1689
|
return;
|
|
1711
1690
|
}
|
|
1712
|
-
|
|
1691
|
+
const setStyleProperty = (propertyName, propertyValue) => {
|
|
1713
1692
|
if (typeof propertyValue === "string" && propertyValue.trim().endsWith("!important")) {
|
|
1714
1693
|
propertyValue = propertyValue
|
|
1715
1694
|
.trim()
|
|
@@ -1731,8 +1710,8 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1731
1710
|
}
|
|
1732
1711
|
}
|
|
1733
1712
|
else if (typeof property === "object") {
|
|
1734
|
-
for (
|
|
1735
|
-
|
|
1713
|
+
for (const prop in property) {
|
|
1714
|
+
const value = property[prop];
|
|
1736
1715
|
setStyleProperty(prop, value);
|
|
1737
1716
|
}
|
|
1738
1717
|
}
|
|
@@ -1742,7 +1721,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1742
1721
|
}
|
|
1743
1722
|
}
|
|
1744
1723
|
text(element, text) {
|
|
1745
|
-
|
|
1724
|
+
const DOMUtilsContext = this;
|
|
1746
1725
|
if (typeof element === "string") {
|
|
1747
1726
|
element = DOMUtilsContext.selectorAll(element);
|
|
1748
1727
|
}
|
|
@@ -1778,7 +1757,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1778
1757
|
}
|
|
1779
1758
|
}
|
|
1780
1759
|
html(element, html) {
|
|
1781
|
-
|
|
1760
|
+
const DOMUtilsContext = this;
|
|
1782
1761
|
if (typeof element === "string") {
|
|
1783
1762
|
element = DOMUtilsContext.selectorAll(element);
|
|
1784
1763
|
}
|
|
@@ -1816,19 +1795,19 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1816
1795
|
* 获取移动元素的transform偏移
|
|
1817
1796
|
*/
|
|
1818
1797
|
getTransform(element, isShow = false) {
|
|
1819
|
-
|
|
1798
|
+
const DOMUtilsContext = this;
|
|
1820
1799
|
let transform_left = 0;
|
|
1821
1800
|
let transform_top = 0;
|
|
1822
1801
|
if (!(isShow || (!isShow && DOMUtilsCommonUtils.isShow(element)))) {
|
|
1823
1802
|
/* 未显示 */
|
|
1824
|
-
|
|
1825
|
-
|
|
1803
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
1804
|
+
const transformInfo = DOMUtilsContext.getTransform(element, true);
|
|
1826
1805
|
recovery();
|
|
1827
1806
|
return transformInfo;
|
|
1828
1807
|
}
|
|
1829
|
-
|
|
1808
|
+
const elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
|
|
1830
1809
|
if (elementTransform != null && elementTransform !== "none" && elementTransform !== "") {
|
|
1831
|
-
|
|
1810
|
+
const elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
|
|
1832
1811
|
if (elementTransformSplit) {
|
|
1833
1812
|
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
1834
1813
|
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
@@ -1844,7 +1823,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1844
1823
|
};
|
|
1845
1824
|
}
|
|
1846
1825
|
val(element, value) {
|
|
1847
|
-
|
|
1826
|
+
const DOMUtilsContext = this;
|
|
1848
1827
|
if (typeof element === "string") {
|
|
1849
1828
|
element = DOMUtilsContext.selectorAll(element);
|
|
1850
1829
|
}
|
|
@@ -1884,7 +1863,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1884
1863
|
}
|
|
1885
1864
|
}
|
|
1886
1865
|
prop(element, propName, propValue) {
|
|
1887
|
-
|
|
1866
|
+
const DOMUtilsContext = this;
|
|
1888
1867
|
if (typeof element === "string") {
|
|
1889
1868
|
element = DOMUtilsContext.selectorAll(element);
|
|
1890
1869
|
}
|
|
@@ -1926,7 +1905,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1926
1905
|
* DOMUtils.removeAttr("a.xx","data-value")
|
|
1927
1906
|
* */
|
|
1928
1907
|
removeAttr(element, attrName) {
|
|
1929
|
-
|
|
1908
|
+
const DOMUtilsContext = this;
|
|
1930
1909
|
if (typeof element === "string") {
|
|
1931
1910
|
element = DOMUtilsContext.selectorAll(element);
|
|
1932
1911
|
}
|
|
@@ -1952,7 +1931,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1952
1931
|
* DOMUtils.removeClass("a.xx","xx")
|
|
1953
1932
|
*/
|
|
1954
1933
|
removeClass(element, className) {
|
|
1955
|
-
|
|
1934
|
+
const DOMUtilsContext = this;
|
|
1956
1935
|
if (typeof element === "string") {
|
|
1957
1936
|
element = DOMUtilsContext.selectorAll(element);
|
|
1958
1937
|
}
|
|
@@ -1972,7 +1951,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1972
1951
|
}
|
|
1973
1952
|
else {
|
|
1974
1953
|
if (!Array.isArray(className)) {
|
|
1975
|
-
className = className.split(" ");
|
|
1954
|
+
className = className.trim().split(" ");
|
|
1976
1955
|
}
|
|
1977
1956
|
className.forEach((itemClassName) => {
|
|
1978
1957
|
element.classList.remove(itemClassName);
|
|
@@ -1989,7 +1968,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1989
1968
|
* DOMUtils.removeProp("a.xx","href")
|
|
1990
1969
|
* */
|
|
1991
1970
|
removeProp(element, propName) {
|
|
1992
|
-
|
|
1971
|
+
const DOMUtilsContext = this;
|
|
1993
1972
|
if (typeof element === "string") {
|
|
1994
1973
|
element = DOMUtilsContext.selectorAll(element);
|
|
1995
1974
|
}
|
|
@@ -2015,7 +1994,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2015
1994
|
* DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
|
|
2016
1995
|
*/
|
|
2017
1996
|
replaceWith(element, newElement) {
|
|
2018
|
-
|
|
1997
|
+
const DOMUtilsContext = this;
|
|
2019
1998
|
if (typeof element === "string") {
|
|
2020
1999
|
element = DOMUtilsContext.selectorAll(element);
|
|
2021
2000
|
}
|
|
@@ -2032,7 +2011,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2032
2011
|
if (typeof newElement === "string") {
|
|
2033
2012
|
newElement = DOMUtilsContext.parseHTML(newElement, false, false);
|
|
2034
2013
|
}
|
|
2035
|
-
|
|
2014
|
+
const $parent = element.parentElement;
|
|
2036
2015
|
if ($parent) {
|
|
2037
2016
|
$parent.replaceChild(newElement, element);
|
|
2038
2017
|
}
|
|
@@ -2051,7 +2030,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2051
2030
|
* DOMUtils.addClass("a.xx","_vue_")
|
|
2052
2031
|
* */
|
|
2053
2032
|
addClass(element, className) {
|
|
2054
|
-
|
|
2033
|
+
const DOMUtilsContext = this;
|
|
2055
2034
|
if (typeof element === "string") {
|
|
2056
2035
|
element = DOMUtilsContext.selectorAll(element);
|
|
2057
2036
|
}
|
|
@@ -2081,7 +2060,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2081
2060
|
* @param className
|
|
2082
2061
|
*/
|
|
2083
2062
|
hasClass(element, className) {
|
|
2084
|
-
|
|
2063
|
+
const DOMUtilsContext = this;
|
|
2085
2064
|
if (typeof element === "string") {
|
|
2086
2065
|
element = DOMUtilsContext.selectorAll(element);
|
|
2087
2066
|
}
|
|
@@ -2120,7 +2099,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2120
2099
|
* DOMUtils.append("a.xx","'<b class="xx"></b>")
|
|
2121
2100
|
* */
|
|
2122
2101
|
append(element, content) {
|
|
2123
|
-
|
|
2102
|
+
const DOMUtilsContext = this;
|
|
2124
2103
|
if (typeof element === "string") {
|
|
2125
2104
|
element = DOMUtilsContext.selectorAll(element);
|
|
2126
2105
|
}
|
|
@@ -2152,7 +2131,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2152
2131
|
}
|
|
2153
2132
|
if (Array.isArray(content) || content instanceof NodeList) {
|
|
2154
2133
|
/* 数组 */
|
|
2155
|
-
|
|
2134
|
+
const fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
|
|
2156
2135
|
content.forEach((ele) => {
|
|
2157
2136
|
if (typeof ele === "string") {
|
|
2158
2137
|
// 转为元素
|
|
@@ -2176,7 +2155,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2176
2155
|
* DOMUtils.prepend("a.xx","'<b class="xx"></b>")
|
|
2177
2156
|
* */
|
|
2178
2157
|
prepend(element, content) {
|
|
2179
|
-
|
|
2158
|
+
const DOMUtilsContext = this;
|
|
2180
2159
|
if (typeof element === "string") {
|
|
2181
2160
|
element = DOMUtilsContext.selectorAll(element);
|
|
2182
2161
|
}
|
|
@@ -2200,7 +2179,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2200
2179
|
}
|
|
2201
2180
|
}
|
|
2202
2181
|
else {
|
|
2203
|
-
|
|
2182
|
+
const $firstChild = element.firstChild;
|
|
2204
2183
|
if ($firstChild == null) {
|
|
2205
2184
|
element.prepend(content);
|
|
2206
2185
|
}
|
|
@@ -2219,7 +2198,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2219
2198
|
* DOMUtils.after("a.xx","'<b class="xx"></b>")
|
|
2220
2199
|
* */
|
|
2221
2200
|
after(element, content) {
|
|
2222
|
-
|
|
2201
|
+
const DOMUtilsContext = this;
|
|
2223
2202
|
if (typeof element === "string") {
|
|
2224
2203
|
element = DOMUtilsContext.selectorAll(element);
|
|
2225
2204
|
}
|
|
@@ -2237,8 +2216,8 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2237
2216
|
element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
2238
2217
|
}
|
|
2239
2218
|
else {
|
|
2240
|
-
|
|
2241
|
-
|
|
2219
|
+
const $parent = element.parentElement;
|
|
2220
|
+
const $nextSlibling = element.nextSibling;
|
|
2242
2221
|
if (!$parent || $nextSlibling) {
|
|
2243
2222
|
// 任意一个不行
|
|
2244
2223
|
element.after(content);
|
|
@@ -2258,7 +2237,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2258
2237
|
* DOMUtils.before("a.xx","'<b class="xx"></b>")
|
|
2259
2238
|
* */
|
|
2260
2239
|
before(element, content) {
|
|
2261
|
-
|
|
2240
|
+
const DOMUtilsContext = this;
|
|
2262
2241
|
if (typeof element === "string") {
|
|
2263
2242
|
element = DOMUtilsContext.selectorAll(element);
|
|
2264
2243
|
}
|
|
@@ -2276,7 +2255,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2276
2255
|
element.insertAdjacentHTML("beforebegin", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
2277
2256
|
}
|
|
2278
2257
|
else {
|
|
2279
|
-
|
|
2258
|
+
const $parent = element.parentElement;
|
|
2280
2259
|
if (!$parent) {
|
|
2281
2260
|
element.before(content);
|
|
2282
2261
|
}
|
|
@@ -2295,7 +2274,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2295
2274
|
* DOMUtils.remove("a.xx")
|
|
2296
2275
|
* */
|
|
2297
2276
|
remove(element) {
|
|
2298
|
-
|
|
2277
|
+
const DOMUtilsContext = this;
|
|
2299
2278
|
if (typeof element === "string") {
|
|
2300
2279
|
element = DOMUtilsContext.selectorAll(element);
|
|
2301
2280
|
}
|
|
@@ -2327,7 +2306,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2327
2306
|
* DOMUtils.empty("a.xx")
|
|
2328
2307
|
* */
|
|
2329
2308
|
empty(element) {
|
|
2330
|
-
|
|
2309
|
+
const DOMUtilsContext = this;
|
|
2331
2310
|
if (typeof element === "string") {
|
|
2332
2311
|
element = DOMUtilsContext.selectorAll(element);
|
|
2333
2312
|
}
|
|
@@ -2358,14 +2337,14 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2358
2337
|
* > 0
|
|
2359
2338
|
*/
|
|
2360
2339
|
offset(element) {
|
|
2361
|
-
|
|
2340
|
+
const DOMUtilsContext = this;
|
|
2362
2341
|
if (typeof element === "string") {
|
|
2363
2342
|
element = DOMUtilsContext.selector(element);
|
|
2364
2343
|
}
|
|
2365
2344
|
if (element == null) {
|
|
2366
2345
|
return;
|
|
2367
2346
|
}
|
|
2368
|
-
|
|
2347
|
+
const rect = element.getBoundingClientRect();
|
|
2369
2348
|
return {
|
|
2370
2349
|
/** y轴偏移 */
|
|
2371
2350
|
top: rect.top + DOMUtilsContext.windowApi.globalThis.scrollY,
|
|
@@ -2374,14 +2353,10 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2374
2353
|
};
|
|
2375
2354
|
}
|
|
2376
2355
|
width(element, isShow = false) {
|
|
2377
|
-
|
|
2356
|
+
const DOMUtilsContext = this;
|
|
2378
2357
|
if (typeof element === "string") {
|
|
2379
2358
|
element = DOMUtilsContext.selector(element);
|
|
2380
2359
|
}
|
|
2381
|
-
if (element == null) {
|
|
2382
|
-
// @ts-ignore
|
|
2383
|
-
return;
|
|
2384
|
-
}
|
|
2385
2360
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2386
2361
|
return DOMUtilsContext.windowApi.window.document.documentElement.clientWidth;
|
|
2387
2362
|
}
|
|
@@ -2400,11 +2375,11 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2400
2375
|
}
|
|
2401
2376
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
|
|
2402
2377
|
if (element.offsetWidth > 0) {
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2378
|
+
const borderLeftWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderLeftWidth");
|
|
2379
|
+
const borderRightWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderRightWidth");
|
|
2380
|
+
const paddingLeft = DOMUtilsCommonUtils.getStyleValue(element, "paddingLeft");
|
|
2381
|
+
const paddingRight = DOMUtilsCommonUtils.getStyleValue(element, "paddingRight");
|
|
2382
|
+
const backHeight = parseFloat(element.offsetWidth.toString()) -
|
|
2408
2383
|
parseFloat(borderLeftWidth.toString()) -
|
|
2409
2384
|
parseFloat(borderRightWidth.toString()) -
|
|
2410
2385
|
parseFloat(paddingLeft.toString()) -
|
|
@@ -2416,24 +2391,20 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2416
2391
|
else {
|
|
2417
2392
|
/* 未显示 */
|
|
2418
2393
|
element = element;
|
|
2419
|
-
|
|
2420
|
-
|
|
2394
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2395
|
+
const width = DOMUtilsContext.width(element, true);
|
|
2421
2396
|
recovery();
|
|
2422
2397
|
return width;
|
|
2423
2398
|
}
|
|
2424
2399
|
}
|
|
2425
2400
|
height(element, isShow = false) {
|
|
2426
|
-
|
|
2401
|
+
const DOMUtilsContext = this;
|
|
2427
2402
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2428
2403
|
return DOMUtilsContext.windowApi.window.document.documentElement.clientHeight;
|
|
2429
2404
|
}
|
|
2430
2405
|
if (typeof element === "string") {
|
|
2431
2406
|
element = DOMUtilsContext.selector(element);
|
|
2432
2407
|
}
|
|
2433
|
-
if (element == null) {
|
|
2434
|
-
// @ts-ignore
|
|
2435
|
-
return;
|
|
2436
|
-
}
|
|
2437
2408
|
if (element.nodeType === 9) {
|
|
2438
2409
|
element = element;
|
|
2439
2410
|
/* Document文档节点 */
|
|
@@ -2449,11 +2420,11 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2449
2420
|
}
|
|
2450
2421
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
|
|
2451
2422
|
if (element.offsetHeight > 0) {
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2423
|
+
const borderTopWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderTopWidth");
|
|
2424
|
+
const borderBottomWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderBottomWidth");
|
|
2425
|
+
const paddingTop = DOMUtilsCommonUtils.getStyleValue(element, "paddingTop");
|
|
2426
|
+
const paddingBottom = DOMUtilsCommonUtils.getStyleValue(element, "paddingBottom");
|
|
2427
|
+
const backHeight = parseFloat(element.offsetHeight.toString()) -
|
|
2457
2428
|
parseFloat(borderTopWidth.toString()) -
|
|
2458
2429
|
parseFloat(borderBottomWidth.toString()) -
|
|
2459
2430
|
parseFloat(paddingTop.toString()) -
|
|
@@ -2465,60 +2436,52 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2465
2436
|
else {
|
|
2466
2437
|
/* 未显示 */
|
|
2467
2438
|
element = element;
|
|
2468
|
-
|
|
2469
|
-
|
|
2439
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2440
|
+
const height = DOMUtilsContext.height(element, true);
|
|
2470
2441
|
recovery();
|
|
2471
2442
|
return height;
|
|
2472
2443
|
}
|
|
2473
2444
|
}
|
|
2474
2445
|
outerWidth(element, isShow = false) {
|
|
2475
|
-
|
|
2446
|
+
const DOMUtilsContext = this;
|
|
2476
2447
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2477
2448
|
return DOMUtilsContext.windowApi.window.innerWidth;
|
|
2478
2449
|
}
|
|
2479
2450
|
if (typeof element === "string") {
|
|
2480
2451
|
element = DOMUtilsContext.selector(element);
|
|
2481
2452
|
}
|
|
2482
|
-
if (element == null) {
|
|
2483
|
-
// @ts-ignore
|
|
2484
|
-
return;
|
|
2485
|
-
}
|
|
2486
2453
|
element = element;
|
|
2487
2454
|
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2455
|
+
const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
|
|
2456
|
+
const marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
|
|
2457
|
+
const marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
|
|
2491
2458
|
return element.offsetWidth + marginLeft + marginRight;
|
|
2492
2459
|
}
|
|
2493
2460
|
else {
|
|
2494
|
-
|
|
2495
|
-
|
|
2461
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2462
|
+
const outerWidth = DOMUtilsContext.outerWidth(element, true);
|
|
2496
2463
|
recovery();
|
|
2497
2464
|
return outerWidth;
|
|
2498
2465
|
}
|
|
2499
2466
|
}
|
|
2500
2467
|
outerHeight(element, isShow = false) {
|
|
2501
|
-
|
|
2468
|
+
const DOMUtilsContext = this;
|
|
2502
2469
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2503
2470
|
return DOMUtilsContext.windowApi.window.innerHeight;
|
|
2504
2471
|
}
|
|
2505
2472
|
if (typeof element === "string") {
|
|
2506
2473
|
element = DOMUtilsContext.selector(element);
|
|
2507
2474
|
}
|
|
2508
|
-
if (element == null) {
|
|
2509
|
-
// @ts-ignore
|
|
2510
|
-
return;
|
|
2511
|
-
}
|
|
2512
2475
|
element = element;
|
|
2513
2476
|
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2477
|
+
const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
|
|
2478
|
+
const marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
|
|
2479
|
+
const marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
|
|
2517
2480
|
return element.offsetHeight + marginTop + marginBottom;
|
|
2518
2481
|
}
|
|
2519
2482
|
else {
|
|
2520
|
-
|
|
2521
|
-
|
|
2483
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2484
|
+
const outerHeight = DOMUtilsContext.outerHeight(element, true);
|
|
2522
2485
|
recovery();
|
|
2523
2486
|
return outerHeight;
|
|
2524
2487
|
}
|
|
@@ -2536,7 +2499,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2536
2499
|
* })
|
|
2537
2500
|
*/
|
|
2538
2501
|
animate(element, styles, duration = 1000, callback = null) {
|
|
2539
|
-
|
|
2502
|
+
const DOMUtilsContext = this;
|
|
2540
2503
|
if (typeof element === "string") {
|
|
2541
2504
|
element = DOMUtilsContext.selectorAll(element);
|
|
2542
2505
|
}
|
|
@@ -2562,21 +2525,20 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2562
2525
|
if (Object.keys(styles).length === 0) {
|
|
2563
2526
|
throw new Error("styles must contain at least one property");
|
|
2564
2527
|
}
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
for (
|
|
2569
|
-
from[prop] =
|
|
2570
|
-
element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
2528
|
+
const start = performance.now();
|
|
2529
|
+
const from = {};
|
|
2530
|
+
const to = {};
|
|
2531
|
+
for (const prop in styles) {
|
|
2532
|
+
from[prop] = element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
2571
2533
|
to[prop] = styles[prop];
|
|
2572
2534
|
}
|
|
2573
|
-
|
|
2574
|
-
|
|
2535
|
+
const timer = DOMUtilsCommonUtils.setInterval(function () {
|
|
2536
|
+
const timePassed = performance.now() - start;
|
|
2575
2537
|
let progress = timePassed / duration;
|
|
2576
2538
|
if (progress > 1) {
|
|
2577
2539
|
progress = 1;
|
|
2578
2540
|
}
|
|
2579
|
-
for (
|
|
2541
|
+
for (const prop in styles) {
|
|
2580
2542
|
element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
|
|
2581
2543
|
}
|
|
2582
2544
|
if (progress === 1) {
|
|
@@ -2596,7 +2558,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2596
2558
|
* DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
|
|
2597
2559
|
*/
|
|
2598
2560
|
wrap(element, wrapperHTML) {
|
|
2599
|
-
|
|
2561
|
+
const DOMUtilsContext = this;
|
|
2600
2562
|
if (typeof element === "string") {
|
|
2601
2563
|
element = DOMUtilsContext.selectorAll(element);
|
|
2602
2564
|
}
|
|
@@ -2612,17 +2574,17 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2612
2574
|
}
|
|
2613
2575
|
element = element;
|
|
2614
2576
|
// 创建一个新的div元素,并将wrapperHTML作为其innerHTML
|
|
2615
|
-
|
|
2577
|
+
const wrapper = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2616
2578
|
DOMUtilsContext.html(wrapper, wrapperHTML);
|
|
2617
|
-
|
|
2579
|
+
const wrapperFirstChild = wrapper.firstChild;
|
|
2618
2580
|
// 将要包裹的元素插入目标元素前面
|
|
2619
|
-
|
|
2581
|
+
const parentElement = element.parentElement;
|
|
2620
2582
|
parentElement.insertBefore(wrapperFirstChild, element);
|
|
2621
2583
|
// 将要包裹的元素移动到wrapper中
|
|
2622
2584
|
wrapperFirstChild.appendChild(element);
|
|
2623
2585
|
}
|
|
2624
2586
|
prev(element) {
|
|
2625
|
-
|
|
2587
|
+
const DOMUtilsContext = this;
|
|
2626
2588
|
if (typeof element === "string") {
|
|
2627
2589
|
element = DOMUtilsContext.selector(element);
|
|
2628
2590
|
}
|
|
@@ -2632,7 +2594,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2632
2594
|
return element.previousElementSibling;
|
|
2633
2595
|
}
|
|
2634
2596
|
next(element) {
|
|
2635
|
-
|
|
2597
|
+
const DOMUtilsContext = this;
|
|
2636
2598
|
if (typeof element === "string") {
|
|
2637
2599
|
element = DOMUtilsContext.selector(element);
|
|
2638
2600
|
}
|
|
@@ -2647,7 +2609,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2647
2609
|
* let DOMUtils = window.DOMUtils.noConflict()
|
|
2648
2610
|
*/
|
|
2649
2611
|
noConflict() {
|
|
2650
|
-
|
|
2612
|
+
const DOMUtilsContext = this;
|
|
2651
2613
|
if (DOMUtilsContext.windowApi.window.DOMUtils) {
|
|
2652
2614
|
DOMUtilsCommonUtils.delete(window, "DOMUtils");
|
|
2653
2615
|
}
|
|
@@ -2655,7 +2617,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2655
2617
|
return this;
|
|
2656
2618
|
}
|
|
2657
2619
|
siblings(element) {
|
|
2658
|
-
|
|
2620
|
+
const DOMUtilsContext = this;
|
|
2659
2621
|
if (typeof element === "string") {
|
|
2660
2622
|
element = DOMUtilsContext.selector(element);
|
|
2661
2623
|
}
|
|
@@ -2675,7 +2637,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2675
2637
|
* > <div ...>....</div>
|
|
2676
2638
|
*/
|
|
2677
2639
|
parent(element) {
|
|
2678
|
-
|
|
2640
|
+
const DOMUtilsContext = this;
|
|
2679
2641
|
if (typeof element === "string") {
|
|
2680
2642
|
element = DOMUtilsContext.selector(element);
|
|
2681
2643
|
}
|
|
@@ -2683,7 +2645,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2683
2645
|
return;
|
|
2684
2646
|
}
|
|
2685
2647
|
if (DOMUtilsCommonUtils.isNodeList(element)) {
|
|
2686
|
-
|
|
2648
|
+
const resultArray = [];
|
|
2687
2649
|
element.forEach(($ele) => {
|
|
2688
2650
|
resultArray.push(DOMUtilsContext.parent($ele));
|
|
2689
2651
|
});
|
|
@@ -2694,11 +2656,11 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2694
2656
|
}
|
|
2695
2657
|
}
|
|
2696
2658
|
parseHTML(html, useParser = false, isComplete = false) {
|
|
2697
|
-
|
|
2659
|
+
const DOMUtilsContext = this;
|
|
2698
2660
|
// 去除html前后的空格
|
|
2699
2661
|
html = html.trim();
|
|
2700
2662
|
function parseHTMLByDOMParser() {
|
|
2701
|
-
|
|
2663
|
+
const parser = new DOMParser();
|
|
2702
2664
|
if (isComplete) {
|
|
2703
2665
|
return parser.parseFromString(html, "text/html");
|
|
2704
2666
|
}
|
|
@@ -2707,7 +2669,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2707
2669
|
}
|
|
2708
2670
|
}
|
|
2709
2671
|
function parseHTMLByCreateDom() {
|
|
2710
|
-
|
|
2672
|
+
const tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2711
2673
|
DOMUtilsContext.html(tempDIV, html);
|
|
2712
2674
|
if (isComplete) {
|
|
2713
2675
|
return tempDIV;
|
|
@@ -2732,7 +2694,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2732
2694
|
*/
|
|
2733
2695
|
serialize($form) {
|
|
2734
2696
|
const elements = $form.elements;
|
|
2735
|
-
|
|
2697
|
+
const serializedArray = [];
|
|
2736
2698
|
for (let i = 0; i < elements.length; i++) {
|
|
2737
2699
|
const element = elements[i];
|
|
2738
2700
|
if (element.name &&
|
|
@@ -2771,7 +2733,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2771
2733
|
* DOMUtils.show("a.xx")
|
|
2772
2734
|
*/
|
|
2773
2735
|
show(target, checkVisiblie = true) {
|
|
2774
|
-
|
|
2736
|
+
const DOMUtilsContext = this;
|
|
2775
2737
|
if (target == null) {
|
|
2776
2738
|
return;
|
|
2777
2739
|
}
|
|
@@ -2808,7 +2770,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2808
2770
|
* DOMUtils.hide("a.xx")
|
|
2809
2771
|
*/
|
|
2810
2772
|
hide(target, checkVisiblie = true) {
|
|
2811
|
-
|
|
2773
|
+
const DOMUtilsContext = this;
|
|
2812
2774
|
if (target == null) {
|
|
2813
2775
|
return;
|
|
2814
2776
|
}
|
|
@@ -2850,7 +2812,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2850
2812
|
if (element == null) {
|
|
2851
2813
|
return;
|
|
2852
2814
|
}
|
|
2853
|
-
|
|
2815
|
+
const DOMUtilsContext = this;
|
|
2854
2816
|
if (typeof element === "string") {
|
|
2855
2817
|
element = DOMUtilsContext.selectorAll(element);
|
|
2856
2818
|
}
|
|
@@ -2868,7 +2830,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2868
2830
|
function step(timestamp) {
|
|
2869
2831
|
if (!start)
|
|
2870
2832
|
start = timestamp;
|
|
2871
|
-
|
|
2833
|
+
const progress = timestamp - start;
|
|
2872
2834
|
element = element;
|
|
2873
2835
|
element.style.opacity = Math.min(progress / duration, 1).toString();
|
|
2874
2836
|
if (progress < duration) {
|
|
@@ -2898,7 +2860,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2898
2860
|
* })
|
|
2899
2861
|
*/
|
|
2900
2862
|
fadeOut(element, duration = 400, callback) {
|
|
2901
|
-
|
|
2863
|
+
const DOMUtilsContext = this;
|
|
2902
2864
|
if (element == null) {
|
|
2903
2865
|
return;
|
|
2904
2866
|
}
|
|
@@ -2918,7 +2880,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2918
2880
|
function step(timestamp) {
|
|
2919
2881
|
if (!start)
|
|
2920
2882
|
start = timestamp;
|
|
2921
|
-
|
|
2883
|
+
const progress = timestamp - start;
|
|
2922
2884
|
element = element;
|
|
2923
2885
|
element.style.opacity = Math.max(1 - progress / duration, 0).toString();
|
|
2924
2886
|
if (progress < duration) {
|
|
@@ -2944,7 +2906,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2944
2906
|
* DOMUtils.toggle("a.xx")
|
|
2945
2907
|
*/
|
|
2946
2908
|
toggle(element, checkVisiblie) {
|
|
2947
|
-
|
|
2909
|
+
const DOMUtilsContext = this;
|
|
2948
2910
|
if (typeof element === "string") {
|
|
2949
2911
|
element = DOMUtilsContext.selectorAll(element);
|
|
2950
2912
|
}
|
|
@@ -2982,7 +2944,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2982
2944
|
* DOMUtils.getTextBoundingRect(document.querySelector("input"));
|
|
2983
2945
|
*/
|
|
2984
2946
|
getTextBoundingRect($input, selectionStart, selectionEnd) {
|
|
2985
|
-
|
|
2947
|
+
const DOMUtilsContext = this;
|
|
2986
2948
|
// Basic parameter validation
|
|
2987
2949
|
if (!$input || !("value" in $input))
|
|
2988
2950
|
return $input;
|
|
@@ -3011,18 +2973,20 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3011
2973
|
else
|
|
3012
2974
|
selectionEnd = Math.min($input.value.length, selectionEnd);
|
|
3013
2975
|
// If available (thus IE), use the createTextRange method
|
|
3014
|
-
// @ts-ignore
|
|
3015
2976
|
if (typeof $input.createTextRange == "function") {
|
|
3016
|
-
|
|
2977
|
+
const range = $input.createTextRange();
|
|
3017
2978
|
range.collapse(true);
|
|
3018
2979
|
range.moveStart("character", selectionStart);
|
|
3019
2980
|
range.moveEnd("character", selectionEnd - selectionStart);
|
|
3020
2981
|
return range.getBoundingClientRect();
|
|
3021
2982
|
}
|
|
3022
2983
|
// createTextRange is not supported, create a fake text range
|
|
3023
|
-
|
|
2984
|
+
const offset = getInputOffset(), width = getInputCSS("width", true), height = getInputCSS("height", true);
|
|
2985
|
+
let topPos = offset.top;
|
|
2986
|
+
let leftPos = offset.left;
|
|
3024
2987
|
// Styles to simulate a node in an input field
|
|
3025
|
-
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;"
|
|
2988
|
+
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;";
|
|
2989
|
+
const listOfModifiers = [
|
|
3026
2990
|
"direction",
|
|
3027
2991
|
"font-family",
|
|
3028
2992
|
"font-size",
|
|
@@ -3044,16 +3008,15 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3044
3008
|
leftPos += getInputCSS("border-left-width", true);
|
|
3045
3009
|
leftPos += 1; //Seems to be necessary
|
|
3046
3010
|
for (let index = 0; index < listOfModifiers.length; index++) {
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
cssDefaultStyles += property + ":" + getInputCSS(property) + ";";
|
|
3011
|
+
const property = listOfModifiers[index];
|
|
3012
|
+
cssDefaultStyles += property + ":" + getInputCSS(property, false) + ";";
|
|
3050
3013
|
}
|
|
3051
3014
|
// End of CSS variable checks
|
|
3052
3015
|
// 不能为空,不然获取不到高度
|
|
3053
|
-
|
|
3016
|
+
const text = $input.value || "G", textLen = text.length, fakeClone = DOMUtilsContext.windowApi.document.createElement("div");
|
|
3054
3017
|
if (selectionStart > 0)
|
|
3055
3018
|
appendPart(0, selectionStart);
|
|
3056
|
-
|
|
3019
|
+
const fakeRange = appendPart(selectionStart, selectionEnd);
|
|
3057
3020
|
if (textLen > selectionEnd)
|
|
3058
3021
|
appendPart(selectionEnd, textLen);
|
|
3059
3022
|
// Styles to inherit the font styles of the element
|
|
@@ -3065,7 +3028,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3065
3028
|
fakeClone.style.width = width + "px";
|
|
3066
3029
|
fakeClone.style.height = height + "px";
|
|
3067
3030
|
DOMUtilsContext.windowApi.document.body.appendChild(fakeClone);
|
|
3068
|
-
|
|
3031
|
+
const returnValue = fakeRange.getBoundingClientRect(); //Get rect
|
|
3069
3032
|
fakeClone?.parentNode?.removeChild(fakeClone); //Remove temp
|
|
3070
3033
|
return returnValue;
|
|
3071
3034
|
// Local functions for readability of the previous code
|
|
@@ -3076,7 +3039,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3076
3039
|
* @returns
|
|
3077
3040
|
*/
|
|
3078
3041
|
function appendPart(start, end) {
|
|
3079
|
-
|
|
3042
|
+
const span = DOMUtilsContext.windowApi.document.createElement("span");
|
|
3080
3043
|
span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
|
|
3081
3044
|
span.textContent = text.substring(start, end);
|
|
3082
3045
|
fakeClone.appendChild(span);
|
|
@@ -3084,13 +3047,13 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3084
3047
|
}
|
|
3085
3048
|
// Computing offset position
|
|
3086
3049
|
function getInputOffset() {
|
|
3087
|
-
|
|
3050
|
+
const body = DOMUtilsContext.windowApi.document.body, win = DOMUtilsContext.windowApi.document.defaultView, docElem = DOMUtilsContext.windowApi.document.documentElement, $box = DOMUtilsContext.windowApi.document.createElement("div");
|
|
3088
3051
|
$box.style.paddingLeft = $box.style.width = "1px";
|
|
3089
3052
|
body.appendChild($box);
|
|
3090
|
-
|
|
3053
|
+
const isBoxModel = $box.offsetWidth == 2;
|
|
3091
3054
|
body.removeChild($box);
|
|
3092
|
-
|
|
3093
|
-
|
|
3055
|
+
const $boxRect = $input.getBoundingClientRect();
|
|
3056
|
+
const clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop = win.pageYOffset || (isBoxModel && docElem.scrollTop) || body.scrollTop, scrollLeft = win.pageXOffset || (isBoxModel && docElem.scrollLeft) || body.scrollLeft;
|
|
3094
3057
|
return {
|
|
3095
3058
|
top: $boxRect.top + scrollTop - clientTop,
|
|
3096
3059
|
left: $boxRect.left + scrollLeft - clientLeft,
|
|
@@ -3103,10 +3066,13 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3103
3066
|
* @returns
|
|
3104
3067
|
*/
|
|
3105
3068
|
function getInputCSS(prop, isNumber) {
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3069
|
+
const val = DOMUtilsContext.windowApi.document.defaultView.getComputedStyle($input, null).getPropertyValue(prop);
|
|
3070
|
+
if (isNumber) {
|
|
3071
|
+
return parseFloat(val);
|
|
3072
|
+
}
|
|
3073
|
+
else {
|
|
3074
|
+
return val;
|
|
3075
|
+
}
|
|
3110
3076
|
}
|
|
3111
3077
|
}
|
|
3112
3078
|
/** 获取 animationend 在各个浏览器的兼容名 */
|
|
@@ -3118,7 +3084,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3118
3084
|
return DOMUtilsCommonUtils.getTransitionEndNameList();
|
|
3119
3085
|
}
|
|
3120
3086
|
}
|
|
3121
|
-
|
|
3087
|
+
const domUtils = new DOMUtils();
|
|
3122
3088
|
|
|
3123
3089
|
export { domUtils as default };
|
|
3124
3090
|
//# sourceMappingURL=index.esm.js.map
|