@whitesev/domutils 1.6.6 → 1.6.8
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 +285 -294
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +285 -294
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +285 -294
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +285 -294
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +285 -294
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +285 -294
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/DOMUtils.d.ts +5 -5
- package/dist/types/src/DOMUtilsCommonUtils.d.ts +3 -3
- package/dist/types/src/DOMUtilsEvent.d.ts +62 -62
- 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 -2019
- package/src/DOMUtilsCommonUtils.ts +196 -196
- package/src/DOMUtilsData.ts +2 -2
- package/src/DOMUtilsEvent.ts +1420 -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.umd.js
CHANGED
|
@@ -329,10 +329,8 @@
|
|
|
329
329
|
* 获取安全的html
|
|
330
330
|
*/
|
|
331
331
|
getSafeHTML(text) {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
// @ts-ignore
|
|
335
|
-
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
332
|
+
if (window.trustedTypes) {
|
|
333
|
+
const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
|
|
336
334
|
createHTML: (html) => html,
|
|
337
335
|
});
|
|
338
336
|
return policy.createHTML(text);
|
|
@@ -355,7 +353,7 @@
|
|
|
355
353
|
* @param element
|
|
356
354
|
*/
|
|
357
355
|
showElement(element) {
|
|
358
|
-
|
|
356
|
+
const dupNode = element.cloneNode(true);
|
|
359
357
|
dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
|
|
360
358
|
this.windowApi.document.documentElement.appendChild(dupNode);
|
|
361
359
|
return {
|
|
@@ -386,7 +384,7 @@
|
|
|
386
384
|
}
|
|
387
385
|
styles = view.getComputedStyle(element);
|
|
388
386
|
}
|
|
389
|
-
|
|
387
|
+
const value = parseFloat(styles[styleName]);
|
|
390
388
|
if (isNaN(value)) {
|
|
391
389
|
return 0;
|
|
392
390
|
}
|
|
@@ -437,8 +435,8 @@
|
|
|
437
435
|
* @param propName
|
|
438
436
|
*/
|
|
439
437
|
delete(target, propName) {
|
|
440
|
-
if (typeof Reflect === "object" && Reflect.deleteProperty) {
|
|
441
|
-
Reflect.deleteProperty(target, propName);
|
|
438
|
+
if (typeof Reflect === "object" && Reflect != null && Reflect.deleteProperty) {
|
|
439
|
+
return Reflect.deleteProperty(target, propName);
|
|
442
440
|
}
|
|
443
441
|
else {
|
|
444
442
|
delete target[propName];
|
|
@@ -451,7 +449,7 @@
|
|
|
451
449
|
try {
|
|
452
450
|
return setTimeout$1(callback, timeout);
|
|
453
451
|
}
|
|
454
|
-
catch
|
|
452
|
+
catch {
|
|
455
453
|
return this.windowApi.setTimeout(callback, timeout);
|
|
456
454
|
}
|
|
457
455
|
},
|
|
@@ -464,7 +462,8 @@
|
|
|
464
462
|
clearTimeout$1(timeId);
|
|
465
463
|
}
|
|
466
464
|
}
|
|
467
|
-
catch
|
|
465
|
+
catch {
|
|
466
|
+
// TODO
|
|
468
467
|
}
|
|
469
468
|
finally {
|
|
470
469
|
this.windowApi.clearTimeout(timeId);
|
|
@@ -477,7 +476,7 @@
|
|
|
477
476
|
try {
|
|
478
477
|
return setInterval$1(callback, timeout);
|
|
479
478
|
}
|
|
480
|
-
catch
|
|
479
|
+
catch {
|
|
481
480
|
return this.windowApi.setInterval(callback, timeout);
|
|
482
481
|
}
|
|
483
482
|
},
|
|
@@ -490,7 +489,8 @@
|
|
|
490
489
|
clearInterval$1(timeId);
|
|
491
490
|
}
|
|
492
491
|
}
|
|
493
|
-
catch
|
|
492
|
+
catch {
|
|
493
|
+
// TODO
|
|
494
494
|
}
|
|
495
495
|
finally {
|
|
496
496
|
this.windowApi.clearInterval(timeId);
|
|
@@ -538,7 +538,7 @@
|
|
|
538
538
|
* @param option
|
|
539
539
|
*/
|
|
540
540
|
function getOption(args, startIndex, option) {
|
|
541
|
-
|
|
541
|
+
const currentParam = args[startIndex];
|
|
542
542
|
if (typeof currentParam === "boolean") {
|
|
543
543
|
option.capture = currentParam;
|
|
544
544
|
if (typeof args[startIndex + 1] === "boolean") {
|
|
@@ -560,8 +560,9 @@
|
|
|
560
560
|
}
|
|
561
561
|
return option;
|
|
562
562
|
}
|
|
563
|
-
|
|
564
|
-
|
|
563
|
+
const DOMUtilsContext = this;
|
|
564
|
+
// eslint-disable-next-line prefer-rest-params
|
|
565
|
+
const args = arguments;
|
|
565
566
|
if (typeof element === "string") {
|
|
566
567
|
element = DOMUtilsContext.selectorAll(element);
|
|
567
568
|
}
|
|
@@ -637,14 +638,14 @@
|
|
|
637
638
|
totalParent = DOMUtilsContext.windowApi.document.documentElement;
|
|
638
639
|
}
|
|
639
640
|
}
|
|
640
|
-
|
|
641
|
+
const findValue = selectorList.find((selectorItem) => {
|
|
641
642
|
// 判断目标元素是否匹配选择器
|
|
642
643
|
if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
|
|
643
644
|
/* 当前目标可以被selector所匹配到 */
|
|
644
645
|
return true;
|
|
645
646
|
}
|
|
646
647
|
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
|
|
647
|
-
|
|
648
|
+
const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
|
|
648
649
|
if ($closestMatches && totalParent?.contains($closestMatches)) {
|
|
649
650
|
eventTarget = $closestMatches;
|
|
650
651
|
return true;
|
|
@@ -660,7 +661,9 @@
|
|
|
660
661
|
},
|
|
661
662
|
});
|
|
662
663
|
}
|
|
663
|
-
catch
|
|
664
|
+
catch {
|
|
665
|
+
// TODO
|
|
666
|
+
}
|
|
664
667
|
listenerCallBack.call(eventTarget, event, eventTarget);
|
|
665
668
|
checkOptionOnceToRemoveEventListener();
|
|
666
669
|
}
|
|
@@ -675,7 +678,7 @@
|
|
|
675
678
|
eventTypeList.forEach((eventName) => {
|
|
676
679
|
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
677
680
|
/* 获取对象上的事件 */
|
|
678
|
-
|
|
681
|
+
const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
|
|
679
682
|
/* 初始化对象上的xx事件 */
|
|
680
683
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
681
684
|
elementEvents[eventName].push({
|
|
@@ -697,17 +700,18 @@
|
|
|
697
700
|
* @param option
|
|
698
701
|
*/
|
|
699
702
|
function getOption(args1, startIndex, option) {
|
|
700
|
-
|
|
703
|
+
const currentParam = args1[startIndex];
|
|
701
704
|
if (typeof currentParam === "boolean") {
|
|
702
705
|
option.capture = currentParam;
|
|
703
706
|
}
|
|
704
|
-
else if (typeof currentParam === "object" && "capture" in currentParam) {
|
|
707
|
+
else if (typeof currentParam === "object" && currentParam != null && "capture" in currentParam) {
|
|
705
708
|
option.capture = currentParam.capture;
|
|
706
709
|
}
|
|
707
710
|
return option;
|
|
708
711
|
}
|
|
709
|
-
|
|
710
|
-
|
|
712
|
+
const DOMUtilsContext = this;
|
|
713
|
+
// eslint-disable-next-line prefer-rest-params
|
|
714
|
+
const args = arguments;
|
|
711
715
|
if (typeof element === "string") {
|
|
712
716
|
element = DOMUtilsContext.selectorAll(element);
|
|
713
717
|
}
|
|
@@ -767,16 +771,18 @@
|
|
|
767
771
|
// 目标函数、事件名、子元素选择器
|
|
768
772
|
isRemoveAll = true;
|
|
769
773
|
}
|
|
774
|
+
if (args.length === 5 && typeof args[4] === "function" && typeof filter !== "function") {
|
|
775
|
+
// 目标函数、事件名、回调函数、事件配置、过滤函数
|
|
776
|
+
filter = option;
|
|
777
|
+
}
|
|
770
778
|
elementList.forEach((elementItem) => {
|
|
771
779
|
/* 获取对象上的事件 */
|
|
772
|
-
|
|
780
|
+
const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
|
|
773
781
|
eventTypeList.forEach((eventName) => {
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
for (let index = 0; index < handlers.length; index++) {
|
|
779
|
-
let handler = handlers[index];
|
|
782
|
+
const handlers = elementEvents[eventName] || [];
|
|
783
|
+
const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
|
|
784
|
+
for (let index = 0; index < filterHandler.length; index++) {
|
|
785
|
+
const handler = filterHandler[index];
|
|
780
786
|
let flag = true;
|
|
781
787
|
if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
|
|
782
788
|
// callback不同
|
|
@@ -788,13 +794,18 @@
|
|
|
788
794
|
flag = false;
|
|
789
795
|
}
|
|
790
796
|
}
|
|
791
|
-
if (flag &&
|
|
797
|
+
if (flag &&
|
|
798
|
+
typeof handler.option.capture === "boolean" &&
|
|
799
|
+
listenerOption.capture !== handler.option.capture) {
|
|
792
800
|
// 事件的配置项不同
|
|
793
801
|
flag = false;
|
|
794
802
|
}
|
|
795
803
|
if (flag || isRemoveAll) {
|
|
796
804
|
elementItem.removeEventListener(eventName, handler.callback, handler.option);
|
|
797
|
-
handlers.
|
|
805
|
+
const findIndex = handlers.findIndex((item) => item === handler);
|
|
806
|
+
if (findIndex !== -1) {
|
|
807
|
+
handlers.splice(findIndex, 1);
|
|
808
|
+
}
|
|
798
809
|
}
|
|
799
810
|
}
|
|
800
811
|
if (handlers.length === 0) {
|
|
@@ -811,7 +822,7 @@
|
|
|
811
822
|
* @param eventType (可选)需要取消监听的事件
|
|
812
823
|
*/
|
|
813
824
|
offAll(element, eventType) {
|
|
814
|
-
|
|
825
|
+
const DOMUtilsContext = this;
|
|
815
826
|
if (typeof element === "string") {
|
|
816
827
|
element = DOMUtilsContext.selectorAll(element);
|
|
817
828
|
}
|
|
@@ -837,10 +848,10 @@
|
|
|
837
848
|
if (!symbolEvents.toString().startsWith("Symbol(events_")) {
|
|
838
849
|
return;
|
|
839
850
|
}
|
|
840
|
-
|
|
841
|
-
|
|
851
|
+
const elementEvents = elementItem[symbolEvents] || {};
|
|
852
|
+
const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
|
|
842
853
|
iterEventNameList.forEach((eventName) => {
|
|
843
|
-
|
|
854
|
+
const handlers = elementEvents[eventName];
|
|
844
855
|
if (!handlers) {
|
|
845
856
|
return;
|
|
846
857
|
}
|
|
@@ -849,7 +860,7 @@
|
|
|
849
860
|
capture: handler["option"]["capture"],
|
|
850
861
|
});
|
|
851
862
|
}
|
|
852
|
-
|
|
863
|
+
const events = Reflect.get(elementItem, symbolEvents);
|
|
853
864
|
DOMUtilsCommonUtils.delete(events, eventName);
|
|
854
865
|
});
|
|
855
866
|
});
|
|
@@ -867,7 +878,7 @@
|
|
|
867
878
|
if (typeof callback !== "function") {
|
|
868
879
|
return;
|
|
869
880
|
}
|
|
870
|
-
|
|
881
|
+
const DOMUtilsContext = this;
|
|
871
882
|
/**
|
|
872
883
|
* 检测文档是否加载完毕
|
|
873
884
|
*/
|
|
@@ -882,7 +893,7 @@
|
|
|
882
893
|
return false;
|
|
883
894
|
}
|
|
884
895
|
}
|
|
885
|
-
catch
|
|
896
|
+
catch {
|
|
886
897
|
return false;
|
|
887
898
|
}
|
|
888
899
|
}
|
|
@@ -893,7 +904,7 @@
|
|
|
893
904
|
removeDomReadyListener();
|
|
894
905
|
callback();
|
|
895
906
|
}
|
|
896
|
-
|
|
907
|
+
const targetList = [
|
|
897
908
|
{
|
|
898
909
|
target: DOMUtilsContext.windowApi.document,
|
|
899
910
|
eventType: "DOMContentLoaded",
|
|
@@ -910,7 +921,7 @@
|
|
|
910
921
|
*/
|
|
911
922
|
function addDomReadyListener() {
|
|
912
923
|
for (let index = 0; index < targetList.length; index++) {
|
|
913
|
-
|
|
924
|
+
const item = targetList[index];
|
|
914
925
|
item.target.addEventListener(item.eventType, item.callback);
|
|
915
926
|
}
|
|
916
927
|
}
|
|
@@ -919,7 +930,7 @@
|
|
|
919
930
|
*/
|
|
920
931
|
function removeDomReadyListener() {
|
|
921
932
|
for (let index = 0; index < targetList.length; index++) {
|
|
922
|
-
|
|
933
|
+
const item = targetList[index];
|
|
923
934
|
item.target.removeEventListener(item.eventType, item.callback);
|
|
924
935
|
}
|
|
925
936
|
}
|
|
@@ -947,7 +958,7 @@
|
|
|
947
958
|
* DOMUtils.trigger("a.xx",["click","tap","hover"])
|
|
948
959
|
*/
|
|
949
960
|
trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
|
|
950
|
-
|
|
961
|
+
const DOMUtilsContext = this;
|
|
951
962
|
if (typeof element === "string") {
|
|
952
963
|
element = DOMUtilsContext.selectorAll(element);
|
|
953
964
|
}
|
|
@@ -971,7 +982,7 @@
|
|
|
971
982
|
}
|
|
972
983
|
elementList.forEach((elementItem) => {
|
|
973
984
|
/* 获取对象上的事件 */
|
|
974
|
-
|
|
985
|
+
const events = elementItem[DOMUtilsData.SymbolEvents] || {};
|
|
975
986
|
eventTypeList.forEach((_eventType_) => {
|
|
976
987
|
let event = null;
|
|
977
988
|
if (details && details instanceof Event) {
|
|
@@ -1011,7 +1022,7 @@
|
|
|
1011
1022
|
* })
|
|
1012
1023
|
* */
|
|
1013
1024
|
click(element, handler, details, useDispatchToTriggerEvent) {
|
|
1014
|
-
|
|
1025
|
+
const DOMUtilsContext = this;
|
|
1015
1026
|
if (typeof element === "string") {
|
|
1016
1027
|
element = DOMUtilsContext.selectorAll(element);
|
|
1017
1028
|
}
|
|
@@ -1047,7 +1058,7 @@
|
|
|
1047
1058
|
* })
|
|
1048
1059
|
* */
|
|
1049
1060
|
blur(element, handler, details, useDispatchToTriggerEvent) {
|
|
1050
|
-
|
|
1061
|
+
const DOMUtilsContext = this;
|
|
1051
1062
|
if (typeof element === "string") {
|
|
1052
1063
|
element = DOMUtilsContext.selectorAll(element);
|
|
1053
1064
|
}
|
|
@@ -1083,7 +1094,7 @@
|
|
|
1083
1094
|
* })
|
|
1084
1095
|
* */
|
|
1085
1096
|
focus(element, handler, details, useDispatchToTriggerEvent) {
|
|
1086
|
-
|
|
1097
|
+
const DOMUtilsContext = this;
|
|
1087
1098
|
if (typeof element === "string") {
|
|
1088
1099
|
element = DOMUtilsContext.selectorAll(element);
|
|
1089
1100
|
}
|
|
@@ -1119,7 +1130,7 @@
|
|
|
1119
1130
|
* })
|
|
1120
1131
|
*/
|
|
1121
1132
|
hover(element, handler, option) {
|
|
1122
|
-
|
|
1133
|
+
const DOMUtilsContext = this;
|
|
1123
1134
|
if (typeof element === "string") {
|
|
1124
1135
|
element = DOMUtilsContext.selectorAll(element);
|
|
1125
1136
|
}
|
|
@@ -1143,7 +1154,7 @@
|
|
|
1143
1154
|
* @param option 配置项,这里默认配置once为true
|
|
1144
1155
|
*/
|
|
1145
1156
|
animationend(element, handler, option) {
|
|
1146
|
-
|
|
1157
|
+
const DOMUtilsContext = this;
|
|
1147
1158
|
if (typeof element === "string") {
|
|
1148
1159
|
element = DOMUtilsContext.selector(element);
|
|
1149
1160
|
}
|
|
@@ -1178,7 +1189,7 @@
|
|
|
1178
1189
|
* @param option 配置项,这里默认配置once为true
|
|
1179
1190
|
*/
|
|
1180
1191
|
transitionend(element, handler, option) {
|
|
1181
|
-
|
|
1192
|
+
const DOMUtilsContext = this;
|
|
1182
1193
|
if (typeof element === "string") {
|
|
1183
1194
|
element = DOMUtilsContext.selector(element);
|
|
1184
1195
|
}
|
|
@@ -1222,7 +1233,7 @@
|
|
|
1222
1233
|
* })
|
|
1223
1234
|
*/
|
|
1224
1235
|
keyup(element, handler, option) {
|
|
1225
|
-
|
|
1236
|
+
const DOMUtilsContext = this;
|
|
1226
1237
|
if (element == null) {
|
|
1227
1238
|
return;
|
|
1228
1239
|
}
|
|
@@ -1254,7 +1265,7 @@
|
|
|
1254
1265
|
* })
|
|
1255
1266
|
*/
|
|
1256
1267
|
keydown(element, handler, option) {
|
|
1257
|
-
|
|
1268
|
+
const DOMUtilsContext = this;
|
|
1258
1269
|
if (element == null) {
|
|
1259
1270
|
return;
|
|
1260
1271
|
}
|
|
@@ -1286,7 +1297,7 @@
|
|
|
1286
1297
|
* })
|
|
1287
1298
|
*/
|
|
1288
1299
|
keypress(element, handler, option) {
|
|
1289
|
-
|
|
1300
|
+
const DOMUtilsContext = this;
|
|
1290
1301
|
if (element == null) {
|
|
1291
1302
|
return;
|
|
1292
1303
|
}
|
|
@@ -1303,80 +1314,80 @@
|
|
|
1303
1314
|
DOMUtilsContext.on(element, "keypress", null, handler, option);
|
|
1304
1315
|
}
|
|
1305
1316
|
/**
|
|
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
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1317
|
+
* 监听某个元素键盘按键事件或window全局按键事件
|
|
1318
|
+
* 按下有值的键时触发,按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件,再触发keypress事件。
|
|
1319
|
+
* @param element 需要监听的对象,可以是全局Window或者某个元素
|
|
1320
|
+
* @param eventName 事件名,默认keypress
|
|
1321
|
+
* @param callback 自己定义的回调事件,参数1为当前的key,参数2为组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
|
|
1322
|
+
* @param options 监听事件的配置
|
|
1323
|
+
* @example
|
|
1324
|
+
Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
|
|
1325
|
+
if(keyName === "Enter"){
|
|
1326
|
+
console.log("回车按键的值是:"+keyValue)
|
|
1327
|
+
}
|
|
1328
|
+
if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
|
|
1329
|
+
console.log("Ctrl和回车键");
|
|
1330
|
+
}
|
|
1331
|
+
})
|
|
1332
|
+
* @example
|
|
1333
|
+
字母和数字键的键码值(keyCode)
|
|
1334
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1335
|
+
A 65 J 74 S 83 1 49
|
|
1336
|
+
B 66 K 75 T 84 2 50
|
|
1337
|
+
C 67 L 76 U 85 3 51
|
|
1338
|
+
D 68 M 77 V 86 4 52
|
|
1339
|
+
E 69 N 78 W 87 5 53
|
|
1340
|
+
F 70 O 79 X 88 6 54
|
|
1341
|
+
G 71 P 80 Y 89 7 55
|
|
1342
|
+
H 72 Q 81 Z 90 8 56
|
|
1343
|
+
I 73 R 82 0 48 9 57
|
|
1344
|
+
|
|
1345
|
+
数字键盘上的键的键码值(keyCode)
|
|
1346
|
+
功能键键码值(keyCode)
|
|
1347
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1348
|
+
0 96 8 104 F1 112 F7 118
|
|
1349
|
+
1 97 9 105 F2 113 F8 119
|
|
1350
|
+
2 98 * 106 F3 114 F9 120
|
|
1351
|
+
3 99 + 107 F4 115 F10 121
|
|
1352
|
+
4 100 Enter 108 F5 116 F11 122
|
|
1353
|
+
5 101 - 109 F6 117 F12 123
|
|
1354
|
+
6 102 . 110
|
|
1355
|
+
7 103 / 111
|
|
1356
|
+
|
|
1357
|
+
控制键键码值(keyCode)
|
|
1358
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1359
|
+
BackSpace 8 Esc 27 → 39 -_ 189
|
|
1360
|
+
Tab 9 Spacebar 32 ↓ 40 .> 190
|
|
1361
|
+
Clear 12 Page Up 33 Insert 45 /? 191
|
|
1362
|
+
Enter 13 Page Down 34 Delete 46 `~ 192
|
|
1363
|
+
Shift 16 End 35 Num Lock 144 [{ 219
|
|
1364
|
+
Control 17 Home 36 ;: 186 \| 220
|
|
1365
|
+
Alt 18 ← 37 =+ 187 ]} 221
|
|
1366
|
+
Cape Lock 20 ↑ 38 ,< 188 '" 222
|
|
1367
|
+
|
|
1368
|
+
多媒体键码值(keyCode)
|
|
1369
|
+
按键 键码
|
|
1370
|
+
音量加 175
|
|
1371
|
+
音量减 174
|
|
1372
|
+
停止 179
|
|
1373
|
+
静音 173
|
|
1374
|
+
浏览器 172
|
|
1375
|
+
邮件 180
|
|
1376
|
+
搜索 170
|
|
1377
|
+
收藏 171
|
|
1378
|
+
**/
|
|
1368
1379
|
listenKeyboard(element, eventName = "keypress", callback, options) {
|
|
1369
|
-
|
|
1380
|
+
const DOMUtilsContext = this;
|
|
1370
1381
|
if (typeof element === "string") {
|
|
1371
1382
|
element = DOMUtilsContext.selectorAll(element);
|
|
1372
1383
|
}
|
|
1373
|
-
|
|
1384
|
+
const keyboardEventCallBack = function (event) {
|
|
1374
1385
|
/** 键名 */
|
|
1375
|
-
|
|
1386
|
+
const keyName = event.key || event.code;
|
|
1376
1387
|
/** 键值 */
|
|
1377
|
-
|
|
1388
|
+
const keyValue = event.charCode || event.keyCode || event.which;
|
|
1378
1389
|
/** 组合键列表 */
|
|
1379
|
-
|
|
1390
|
+
const otherCodeList = [];
|
|
1380
1391
|
if (event.ctrlKey) {
|
|
1381
1392
|
otherCodeList.push("ctrl");
|
|
1382
1393
|
}
|
|
@@ -1414,29 +1425,27 @@
|
|
|
1414
1425
|
return $ele?.innerHTML?.trim() === "";
|
|
1415
1426
|
});
|
|
1416
1427
|
}
|
|
1417
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1418
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1428
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1419
1429
|
// contains 语法
|
|
1420
|
-
|
|
1421
|
-
|
|
1430
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1431
|
+
const text = textMatch[2];
|
|
1422
1432
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1423
1433
|
return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
|
|
1424
1434
|
// @ts-ignore
|
|
1425
1435
|
return ($ele?.textContent || $ele?.innerText)?.includes(text);
|
|
1426
1436
|
});
|
|
1427
1437
|
}
|
|
1428
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1429
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1438
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1430
1439
|
// regexp 语法
|
|
1431
|
-
|
|
1440
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1432
1441
|
let pattern = textMatch[2];
|
|
1433
|
-
|
|
1442
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1434
1443
|
let flags = "";
|
|
1435
1444
|
if (flagMatch) {
|
|
1436
1445
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1437
1446
|
flags = flagMatch[3];
|
|
1438
1447
|
}
|
|
1439
|
-
|
|
1448
|
+
const regexp = new RegExp(pattern, flags);
|
|
1440
1449
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1441
1450
|
return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
|
|
1442
1451
|
// @ts-ignore
|
|
@@ -1479,11 +1488,10 @@
|
|
|
1479
1488
|
selector = selector.replace(/:empty$/gi, "");
|
|
1480
1489
|
return $el.matches(selector) && $el?.innerHTML?.trim() === "";
|
|
1481
1490
|
}
|
|
1482
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1483
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1491
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1484
1492
|
// contains 语法
|
|
1485
|
-
|
|
1486
|
-
|
|
1493
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1494
|
+
const text = textMatch[2];
|
|
1487
1495
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1488
1496
|
// @ts-ignore
|
|
1489
1497
|
let content = $el?.textContent || $el?.innerText;
|
|
@@ -1492,18 +1500,17 @@
|
|
|
1492
1500
|
}
|
|
1493
1501
|
return $el.matches(selector) && content?.includes(text);
|
|
1494
1502
|
}
|
|
1495
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1496
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1503
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1497
1504
|
// regexp 语法
|
|
1498
|
-
|
|
1505
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1499
1506
|
let pattern = textMatch[2];
|
|
1500
|
-
|
|
1507
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1501
1508
|
let flags = "";
|
|
1502
1509
|
if (flagMatch) {
|
|
1503
1510
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1504
1511
|
flags = flagMatch[3];
|
|
1505
1512
|
}
|
|
1506
|
-
|
|
1513
|
+
const regexp = new RegExp(pattern, flags);
|
|
1507
1514
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1508
1515
|
// @ts-ignore
|
|
1509
1516
|
let content = $el?.textContent || $el?.innerText;
|
|
@@ -1522,45 +1529,43 @@
|
|
|
1522
1529
|
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1523
1530
|
// empty 语法
|
|
1524
1531
|
selector = selector.replace(/:empty$/gi, "");
|
|
1525
|
-
|
|
1532
|
+
const $closest = $el?.closest(selector);
|
|
1526
1533
|
if ($closest && $closest?.innerHTML?.trim() === "") {
|
|
1527
1534
|
return $closest;
|
|
1528
1535
|
}
|
|
1529
1536
|
return null;
|
|
1530
1537
|
}
|
|
1531
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1532
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1538
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1533
1539
|
// contains 语法
|
|
1534
|
-
|
|
1535
|
-
|
|
1540
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1541
|
+
const text = textMatch[2];
|
|
1536
1542
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1537
|
-
|
|
1543
|
+
const $closest = $el?.closest(selector);
|
|
1538
1544
|
if ($closest) {
|
|
1539
1545
|
// @ts-ignore
|
|
1540
|
-
|
|
1546
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1541
1547
|
if (typeof content === "string" && content.includes(text)) {
|
|
1542
1548
|
return $closest;
|
|
1543
1549
|
}
|
|
1544
1550
|
}
|
|
1545
1551
|
return null;
|
|
1546
1552
|
}
|
|
1547
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1548
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1553
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1549
1554
|
// regexp 语法
|
|
1550
|
-
|
|
1555
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1551
1556
|
let pattern = textMatch[2];
|
|
1552
|
-
|
|
1557
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1553
1558
|
let flags = "";
|
|
1554
1559
|
if (flagMatch) {
|
|
1555
1560
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1556
1561
|
flags = flagMatch[3];
|
|
1557
1562
|
}
|
|
1558
|
-
|
|
1563
|
+
const regexp = new RegExp(pattern, flags);
|
|
1559
1564
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1560
|
-
|
|
1565
|
+
const $closest = $el?.closest(selector);
|
|
1561
1566
|
if ($closest) {
|
|
1562
1567
|
// @ts-ignore
|
|
1563
|
-
|
|
1568
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1564
1569
|
if (typeof content === "string" && content.match(regexp)) {
|
|
1565
1570
|
return $closest;
|
|
1566
1571
|
}
|
|
@@ -1569,20 +1574,22 @@
|
|
|
1569
1574
|
}
|
|
1570
1575
|
else {
|
|
1571
1576
|
// 普通语法
|
|
1572
|
-
|
|
1577
|
+
const $closest = $el?.closest(selector);
|
|
1573
1578
|
return $closest;
|
|
1574
1579
|
}
|
|
1575
1580
|
}
|
|
1576
1581
|
}
|
|
1577
1582
|
|
|
1583
|
+
const version = "1.6.8";
|
|
1584
|
+
|
|
1578
1585
|
class DOMUtils extends DOMUtilsEvent {
|
|
1579
1586
|
constructor(option) {
|
|
1580
1587
|
super(option);
|
|
1581
1588
|
}
|
|
1582
1589
|
/** 版本号 */
|
|
1583
|
-
version =
|
|
1590
|
+
version = version;
|
|
1584
1591
|
attr(element, attrName, attrValue) {
|
|
1585
|
-
|
|
1592
|
+
const DOMUtilsContext = this;
|
|
1586
1593
|
if (typeof element === "string") {
|
|
1587
1594
|
element = DOMUtilsContext.selectorAll(element);
|
|
1588
1595
|
}
|
|
@@ -1616,8 +1623,8 @@
|
|
|
1616
1623
|
property,
|
|
1617
1624
|
/** 自定义属性 */
|
|
1618
1625
|
attributes) {
|
|
1619
|
-
|
|
1620
|
-
|
|
1626
|
+
const DOMUtilsContext = this;
|
|
1627
|
+
const tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
|
|
1621
1628
|
if (typeof property === "string") {
|
|
1622
1629
|
DOMUtilsContext.html(tempElement, property);
|
|
1623
1630
|
return tempElement;
|
|
@@ -1629,7 +1636,7 @@
|
|
|
1629
1636
|
attributes = {};
|
|
1630
1637
|
}
|
|
1631
1638
|
Object.keys(property).forEach((key) => {
|
|
1632
|
-
|
|
1639
|
+
const value = property[key];
|
|
1633
1640
|
if (key === "innerHTML") {
|
|
1634
1641
|
DOMUtilsContext.html(tempElement, value);
|
|
1635
1642
|
return;
|
|
@@ -1651,18 +1658,16 @@
|
|
|
1651
1658
|
return tempElement;
|
|
1652
1659
|
}
|
|
1653
1660
|
css(element, property, value) {
|
|
1654
|
-
|
|
1661
|
+
const DOMUtilsContext = this;
|
|
1655
1662
|
/**
|
|
1656
1663
|
* 把纯数字没有px的加上
|
|
1657
1664
|
*/
|
|
1658
1665
|
function handlePixe(propertyName, propertyValue) {
|
|
1659
|
-
|
|
1666
|
+
const allowAddPixe = ["width", "height", "top", "left", "right", "bottom", "font-size"];
|
|
1660
1667
|
if (typeof propertyValue === "number") {
|
|
1661
1668
|
propertyValue = propertyValue.toString();
|
|
1662
1669
|
}
|
|
1663
|
-
if (typeof propertyValue === "string" &&
|
|
1664
|
-
allowAddPixe.includes(propertyName) &&
|
|
1665
|
-
propertyValue.match(/[0-9]$/gi)) {
|
|
1670
|
+
if (typeof propertyValue === "string" && allowAddPixe.includes(propertyName) && propertyValue.match(/[0-9]$/gi)) {
|
|
1666
1671
|
propertyValue = propertyValue + "px";
|
|
1667
1672
|
}
|
|
1668
1673
|
return propertyValue;
|
|
@@ -1694,10 +1699,9 @@
|
|
|
1694
1699
|
});
|
|
1695
1700
|
return;
|
|
1696
1701
|
}
|
|
1697
|
-
else ;
|
|
1698
1702
|
return;
|
|
1699
1703
|
}
|
|
1700
|
-
|
|
1704
|
+
const setStyleProperty = (propertyName, propertyValue) => {
|
|
1701
1705
|
if (typeof propertyValue === "string" && propertyValue.trim().endsWith("!important")) {
|
|
1702
1706
|
propertyValue = propertyValue
|
|
1703
1707
|
.trim()
|
|
@@ -1719,8 +1723,8 @@
|
|
|
1719
1723
|
}
|
|
1720
1724
|
}
|
|
1721
1725
|
else if (typeof property === "object") {
|
|
1722
|
-
for (
|
|
1723
|
-
|
|
1726
|
+
for (const prop in property) {
|
|
1727
|
+
const value = property[prop];
|
|
1724
1728
|
setStyleProperty(prop, value);
|
|
1725
1729
|
}
|
|
1726
1730
|
}
|
|
@@ -1730,7 +1734,7 @@
|
|
|
1730
1734
|
}
|
|
1731
1735
|
}
|
|
1732
1736
|
text(element, text) {
|
|
1733
|
-
|
|
1737
|
+
const DOMUtilsContext = this;
|
|
1734
1738
|
if (typeof element === "string") {
|
|
1735
1739
|
element = DOMUtilsContext.selectorAll(element);
|
|
1736
1740
|
}
|
|
@@ -1766,7 +1770,7 @@
|
|
|
1766
1770
|
}
|
|
1767
1771
|
}
|
|
1768
1772
|
html(element, html) {
|
|
1769
|
-
|
|
1773
|
+
const DOMUtilsContext = this;
|
|
1770
1774
|
if (typeof element === "string") {
|
|
1771
1775
|
element = DOMUtilsContext.selectorAll(element);
|
|
1772
1776
|
}
|
|
@@ -1804,19 +1808,19 @@
|
|
|
1804
1808
|
* 获取移动元素的transform偏移
|
|
1805
1809
|
*/
|
|
1806
1810
|
getTransform(element, isShow = false) {
|
|
1807
|
-
|
|
1811
|
+
const DOMUtilsContext = this;
|
|
1808
1812
|
let transform_left = 0;
|
|
1809
1813
|
let transform_top = 0;
|
|
1810
1814
|
if (!(isShow || (!isShow && DOMUtilsCommonUtils.isShow(element)))) {
|
|
1811
1815
|
/* 未显示 */
|
|
1812
|
-
|
|
1813
|
-
|
|
1816
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
1817
|
+
const transformInfo = DOMUtilsContext.getTransform(element, true);
|
|
1814
1818
|
recovery();
|
|
1815
1819
|
return transformInfo;
|
|
1816
1820
|
}
|
|
1817
|
-
|
|
1821
|
+
const elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
|
|
1818
1822
|
if (elementTransform != null && elementTransform !== "none" && elementTransform !== "") {
|
|
1819
|
-
|
|
1823
|
+
const elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
|
|
1820
1824
|
if (elementTransformSplit) {
|
|
1821
1825
|
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
1822
1826
|
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
@@ -1832,7 +1836,7 @@
|
|
|
1832
1836
|
};
|
|
1833
1837
|
}
|
|
1834
1838
|
val(element, value) {
|
|
1835
|
-
|
|
1839
|
+
const DOMUtilsContext = this;
|
|
1836
1840
|
if (typeof element === "string") {
|
|
1837
1841
|
element = DOMUtilsContext.selectorAll(element);
|
|
1838
1842
|
}
|
|
@@ -1872,7 +1876,7 @@
|
|
|
1872
1876
|
}
|
|
1873
1877
|
}
|
|
1874
1878
|
prop(element, propName, propValue) {
|
|
1875
|
-
|
|
1879
|
+
const DOMUtilsContext = this;
|
|
1876
1880
|
if (typeof element === "string") {
|
|
1877
1881
|
element = DOMUtilsContext.selectorAll(element);
|
|
1878
1882
|
}
|
|
@@ -1914,7 +1918,7 @@
|
|
|
1914
1918
|
* DOMUtils.removeAttr("a.xx","data-value")
|
|
1915
1919
|
* */
|
|
1916
1920
|
removeAttr(element, attrName) {
|
|
1917
|
-
|
|
1921
|
+
const DOMUtilsContext = this;
|
|
1918
1922
|
if (typeof element === "string") {
|
|
1919
1923
|
element = DOMUtilsContext.selectorAll(element);
|
|
1920
1924
|
}
|
|
@@ -1940,7 +1944,7 @@
|
|
|
1940
1944
|
* DOMUtils.removeClass("a.xx","xx")
|
|
1941
1945
|
*/
|
|
1942
1946
|
removeClass(element, className) {
|
|
1943
|
-
|
|
1947
|
+
const DOMUtilsContext = this;
|
|
1944
1948
|
if (typeof element === "string") {
|
|
1945
1949
|
element = DOMUtilsContext.selectorAll(element);
|
|
1946
1950
|
}
|
|
@@ -1977,7 +1981,7 @@
|
|
|
1977
1981
|
* DOMUtils.removeProp("a.xx","href")
|
|
1978
1982
|
* */
|
|
1979
1983
|
removeProp(element, propName) {
|
|
1980
|
-
|
|
1984
|
+
const DOMUtilsContext = this;
|
|
1981
1985
|
if (typeof element === "string") {
|
|
1982
1986
|
element = DOMUtilsContext.selectorAll(element);
|
|
1983
1987
|
}
|
|
@@ -2003,7 +2007,7 @@
|
|
|
2003
2007
|
* DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
|
|
2004
2008
|
*/
|
|
2005
2009
|
replaceWith(element, newElement) {
|
|
2006
|
-
|
|
2010
|
+
const DOMUtilsContext = this;
|
|
2007
2011
|
if (typeof element === "string") {
|
|
2008
2012
|
element = DOMUtilsContext.selectorAll(element);
|
|
2009
2013
|
}
|
|
@@ -2020,7 +2024,7 @@
|
|
|
2020
2024
|
if (typeof newElement === "string") {
|
|
2021
2025
|
newElement = DOMUtilsContext.parseHTML(newElement, false, false);
|
|
2022
2026
|
}
|
|
2023
|
-
|
|
2027
|
+
const $parent = element.parentElement;
|
|
2024
2028
|
if ($parent) {
|
|
2025
2029
|
$parent.replaceChild(newElement, element);
|
|
2026
2030
|
}
|
|
@@ -2039,7 +2043,7 @@
|
|
|
2039
2043
|
* DOMUtils.addClass("a.xx","_vue_")
|
|
2040
2044
|
* */
|
|
2041
2045
|
addClass(element, className) {
|
|
2042
|
-
|
|
2046
|
+
const DOMUtilsContext = this;
|
|
2043
2047
|
if (typeof element === "string") {
|
|
2044
2048
|
element = DOMUtilsContext.selectorAll(element);
|
|
2045
2049
|
}
|
|
@@ -2069,7 +2073,7 @@
|
|
|
2069
2073
|
* @param className
|
|
2070
2074
|
*/
|
|
2071
2075
|
hasClass(element, className) {
|
|
2072
|
-
|
|
2076
|
+
const DOMUtilsContext = this;
|
|
2073
2077
|
if (typeof element === "string") {
|
|
2074
2078
|
element = DOMUtilsContext.selectorAll(element);
|
|
2075
2079
|
}
|
|
@@ -2108,7 +2112,7 @@
|
|
|
2108
2112
|
* DOMUtils.append("a.xx","'<b class="xx"></b>")
|
|
2109
2113
|
* */
|
|
2110
2114
|
append(element, content) {
|
|
2111
|
-
|
|
2115
|
+
const DOMUtilsContext = this;
|
|
2112
2116
|
if (typeof element === "string") {
|
|
2113
2117
|
element = DOMUtilsContext.selectorAll(element);
|
|
2114
2118
|
}
|
|
@@ -2140,7 +2144,7 @@
|
|
|
2140
2144
|
}
|
|
2141
2145
|
if (Array.isArray(content) || content instanceof NodeList) {
|
|
2142
2146
|
/* 数组 */
|
|
2143
|
-
|
|
2147
|
+
const fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
|
|
2144
2148
|
content.forEach((ele) => {
|
|
2145
2149
|
if (typeof ele === "string") {
|
|
2146
2150
|
// 转为元素
|
|
@@ -2164,7 +2168,7 @@
|
|
|
2164
2168
|
* DOMUtils.prepend("a.xx","'<b class="xx"></b>")
|
|
2165
2169
|
* */
|
|
2166
2170
|
prepend(element, content) {
|
|
2167
|
-
|
|
2171
|
+
const DOMUtilsContext = this;
|
|
2168
2172
|
if (typeof element === "string") {
|
|
2169
2173
|
element = DOMUtilsContext.selectorAll(element);
|
|
2170
2174
|
}
|
|
@@ -2188,12 +2192,12 @@
|
|
|
2188
2192
|
}
|
|
2189
2193
|
}
|
|
2190
2194
|
else {
|
|
2191
|
-
|
|
2195
|
+
const $firstChild = element.firstChild;
|
|
2192
2196
|
if ($firstChild == null) {
|
|
2193
2197
|
element.prepend(content);
|
|
2194
2198
|
}
|
|
2195
2199
|
else {
|
|
2196
|
-
element.insertBefore(content,
|
|
2200
|
+
element.insertBefore(content, $firstChild);
|
|
2197
2201
|
}
|
|
2198
2202
|
}
|
|
2199
2203
|
}
|
|
@@ -2207,7 +2211,7 @@
|
|
|
2207
2211
|
* DOMUtils.after("a.xx","'<b class="xx"></b>")
|
|
2208
2212
|
* */
|
|
2209
2213
|
after(element, content) {
|
|
2210
|
-
|
|
2214
|
+
const DOMUtilsContext = this;
|
|
2211
2215
|
if (typeof element === "string") {
|
|
2212
2216
|
element = DOMUtilsContext.selectorAll(element);
|
|
2213
2217
|
}
|
|
@@ -2225,14 +2229,14 @@
|
|
|
2225
2229
|
element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
2226
2230
|
}
|
|
2227
2231
|
else {
|
|
2228
|
-
|
|
2229
|
-
|
|
2232
|
+
const $parent = element.parentElement;
|
|
2233
|
+
const $nextSlibling = element.nextSibling;
|
|
2230
2234
|
if (!$parent || $nextSlibling) {
|
|
2231
2235
|
// 任意一个不行
|
|
2232
2236
|
element.after(content);
|
|
2233
2237
|
}
|
|
2234
2238
|
else {
|
|
2235
|
-
|
|
2239
|
+
$parent.insertBefore(content, $nextSlibling);
|
|
2236
2240
|
}
|
|
2237
2241
|
}
|
|
2238
2242
|
}
|
|
@@ -2246,7 +2250,7 @@
|
|
|
2246
2250
|
* DOMUtils.before("a.xx","'<b class="xx"></b>")
|
|
2247
2251
|
* */
|
|
2248
2252
|
before(element, content) {
|
|
2249
|
-
|
|
2253
|
+
const DOMUtilsContext = this;
|
|
2250
2254
|
if (typeof element === "string") {
|
|
2251
2255
|
element = DOMUtilsContext.selectorAll(element);
|
|
2252
2256
|
}
|
|
@@ -2264,7 +2268,7 @@
|
|
|
2264
2268
|
element.insertAdjacentHTML("beforebegin", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
2265
2269
|
}
|
|
2266
2270
|
else {
|
|
2267
|
-
|
|
2271
|
+
const $parent = element.parentElement;
|
|
2268
2272
|
if (!$parent) {
|
|
2269
2273
|
element.before(content);
|
|
2270
2274
|
}
|
|
@@ -2283,7 +2287,7 @@
|
|
|
2283
2287
|
* DOMUtils.remove("a.xx")
|
|
2284
2288
|
* */
|
|
2285
2289
|
remove(element) {
|
|
2286
|
-
|
|
2290
|
+
const DOMUtilsContext = this;
|
|
2287
2291
|
if (typeof element === "string") {
|
|
2288
2292
|
element = DOMUtilsContext.selectorAll(element);
|
|
2289
2293
|
}
|
|
@@ -2315,7 +2319,7 @@
|
|
|
2315
2319
|
* DOMUtils.empty("a.xx")
|
|
2316
2320
|
* */
|
|
2317
2321
|
empty(element) {
|
|
2318
|
-
|
|
2322
|
+
const DOMUtilsContext = this;
|
|
2319
2323
|
if (typeof element === "string") {
|
|
2320
2324
|
element = DOMUtilsContext.selectorAll(element);
|
|
2321
2325
|
}
|
|
@@ -2346,14 +2350,14 @@
|
|
|
2346
2350
|
* > 0
|
|
2347
2351
|
*/
|
|
2348
2352
|
offset(element) {
|
|
2349
|
-
|
|
2353
|
+
const DOMUtilsContext = this;
|
|
2350
2354
|
if (typeof element === "string") {
|
|
2351
2355
|
element = DOMUtilsContext.selector(element);
|
|
2352
2356
|
}
|
|
2353
2357
|
if (element == null) {
|
|
2354
2358
|
return;
|
|
2355
2359
|
}
|
|
2356
|
-
|
|
2360
|
+
const rect = element.getBoundingClientRect();
|
|
2357
2361
|
return {
|
|
2358
2362
|
/** y轴偏移 */
|
|
2359
2363
|
top: rect.top + DOMUtilsContext.windowApi.globalThis.scrollY,
|
|
@@ -2362,14 +2366,10 @@
|
|
|
2362
2366
|
};
|
|
2363
2367
|
}
|
|
2364
2368
|
width(element, isShow = false) {
|
|
2365
|
-
|
|
2369
|
+
const DOMUtilsContext = this;
|
|
2366
2370
|
if (typeof element === "string") {
|
|
2367
2371
|
element = DOMUtilsContext.selector(element);
|
|
2368
2372
|
}
|
|
2369
|
-
if (element == null) {
|
|
2370
|
-
// @ts-ignore
|
|
2371
|
-
return;
|
|
2372
|
-
}
|
|
2373
2373
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2374
2374
|
return DOMUtilsContext.windowApi.window.document.documentElement.clientWidth;
|
|
2375
2375
|
}
|
|
@@ -2388,11 +2388,11 @@
|
|
|
2388
2388
|
}
|
|
2389
2389
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
|
|
2390
2390
|
if (element.offsetWidth > 0) {
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2391
|
+
const borderLeftWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderLeftWidth");
|
|
2392
|
+
const borderRightWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderRightWidth");
|
|
2393
|
+
const paddingLeft = DOMUtilsCommonUtils.getStyleValue(element, "paddingLeft");
|
|
2394
|
+
const paddingRight = DOMUtilsCommonUtils.getStyleValue(element, "paddingRight");
|
|
2395
|
+
const backHeight = parseFloat(element.offsetWidth.toString()) -
|
|
2396
2396
|
parseFloat(borderLeftWidth.toString()) -
|
|
2397
2397
|
parseFloat(borderRightWidth.toString()) -
|
|
2398
2398
|
parseFloat(paddingLeft.toString()) -
|
|
@@ -2404,24 +2404,20 @@
|
|
|
2404
2404
|
else {
|
|
2405
2405
|
/* 未显示 */
|
|
2406
2406
|
element = element;
|
|
2407
|
-
|
|
2408
|
-
|
|
2407
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2408
|
+
const width = DOMUtilsContext.width(element, true);
|
|
2409
2409
|
recovery();
|
|
2410
2410
|
return width;
|
|
2411
2411
|
}
|
|
2412
2412
|
}
|
|
2413
2413
|
height(element, isShow = false) {
|
|
2414
|
-
|
|
2414
|
+
const DOMUtilsContext = this;
|
|
2415
2415
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2416
2416
|
return DOMUtilsContext.windowApi.window.document.documentElement.clientHeight;
|
|
2417
2417
|
}
|
|
2418
2418
|
if (typeof element === "string") {
|
|
2419
2419
|
element = DOMUtilsContext.selector(element);
|
|
2420
2420
|
}
|
|
2421
|
-
if (element == null) {
|
|
2422
|
-
// @ts-ignore
|
|
2423
|
-
return;
|
|
2424
|
-
}
|
|
2425
2421
|
if (element.nodeType === 9) {
|
|
2426
2422
|
element = element;
|
|
2427
2423
|
/* Document文档节点 */
|
|
@@ -2437,11 +2433,11 @@
|
|
|
2437
2433
|
}
|
|
2438
2434
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
|
|
2439
2435
|
if (element.offsetHeight > 0) {
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2436
|
+
const borderTopWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderTopWidth");
|
|
2437
|
+
const borderBottomWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderBottomWidth");
|
|
2438
|
+
const paddingTop = DOMUtilsCommonUtils.getStyleValue(element, "paddingTop");
|
|
2439
|
+
const paddingBottom = DOMUtilsCommonUtils.getStyleValue(element, "paddingBottom");
|
|
2440
|
+
const backHeight = parseFloat(element.offsetHeight.toString()) -
|
|
2445
2441
|
parseFloat(borderTopWidth.toString()) -
|
|
2446
2442
|
parseFloat(borderBottomWidth.toString()) -
|
|
2447
2443
|
parseFloat(paddingTop.toString()) -
|
|
@@ -2453,60 +2449,52 @@
|
|
|
2453
2449
|
else {
|
|
2454
2450
|
/* 未显示 */
|
|
2455
2451
|
element = element;
|
|
2456
|
-
|
|
2457
|
-
|
|
2452
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2453
|
+
const height = DOMUtilsContext.height(element, true);
|
|
2458
2454
|
recovery();
|
|
2459
2455
|
return height;
|
|
2460
2456
|
}
|
|
2461
2457
|
}
|
|
2462
2458
|
outerWidth(element, isShow = false) {
|
|
2463
|
-
|
|
2459
|
+
const DOMUtilsContext = this;
|
|
2464
2460
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2465
2461
|
return DOMUtilsContext.windowApi.window.innerWidth;
|
|
2466
2462
|
}
|
|
2467
2463
|
if (typeof element === "string") {
|
|
2468
2464
|
element = DOMUtilsContext.selector(element);
|
|
2469
2465
|
}
|
|
2470
|
-
if (element == null) {
|
|
2471
|
-
// @ts-ignore
|
|
2472
|
-
return;
|
|
2473
|
-
}
|
|
2474
2466
|
element = element;
|
|
2475
2467
|
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2468
|
+
const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
|
|
2469
|
+
const marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
|
|
2470
|
+
const marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
|
|
2479
2471
|
return element.offsetWidth + marginLeft + marginRight;
|
|
2480
2472
|
}
|
|
2481
2473
|
else {
|
|
2482
|
-
|
|
2483
|
-
|
|
2474
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2475
|
+
const outerWidth = DOMUtilsContext.outerWidth(element, true);
|
|
2484
2476
|
recovery();
|
|
2485
2477
|
return outerWidth;
|
|
2486
2478
|
}
|
|
2487
2479
|
}
|
|
2488
2480
|
outerHeight(element, isShow = false) {
|
|
2489
|
-
|
|
2481
|
+
const DOMUtilsContext = this;
|
|
2490
2482
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2491
2483
|
return DOMUtilsContext.windowApi.window.innerHeight;
|
|
2492
2484
|
}
|
|
2493
2485
|
if (typeof element === "string") {
|
|
2494
2486
|
element = DOMUtilsContext.selector(element);
|
|
2495
2487
|
}
|
|
2496
|
-
if (element == null) {
|
|
2497
|
-
// @ts-ignore
|
|
2498
|
-
return;
|
|
2499
|
-
}
|
|
2500
2488
|
element = element;
|
|
2501
2489
|
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2490
|
+
const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
|
|
2491
|
+
const marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
|
|
2492
|
+
const marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
|
|
2505
2493
|
return element.offsetHeight + marginTop + marginBottom;
|
|
2506
2494
|
}
|
|
2507
2495
|
else {
|
|
2508
|
-
|
|
2509
|
-
|
|
2496
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2497
|
+
const outerHeight = DOMUtilsContext.outerHeight(element, true);
|
|
2510
2498
|
recovery();
|
|
2511
2499
|
return outerHeight;
|
|
2512
2500
|
}
|
|
@@ -2524,7 +2512,7 @@
|
|
|
2524
2512
|
* })
|
|
2525
2513
|
*/
|
|
2526
2514
|
animate(element, styles, duration = 1000, callback = null) {
|
|
2527
|
-
|
|
2515
|
+
const DOMUtilsContext = this;
|
|
2528
2516
|
if (typeof element === "string") {
|
|
2529
2517
|
element = DOMUtilsContext.selectorAll(element);
|
|
2530
2518
|
}
|
|
@@ -2550,21 +2538,20 @@
|
|
|
2550
2538
|
if (Object.keys(styles).length === 0) {
|
|
2551
2539
|
throw new Error("styles must contain at least one property");
|
|
2552
2540
|
}
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
for (
|
|
2557
|
-
from[prop] =
|
|
2558
|
-
element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
2541
|
+
const start = performance.now();
|
|
2542
|
+
const from = {};
|
|
2543
|
+
const to = {};
|
|
2544
|
+
for (const prop in styles) {
|
|
2545
|
+
from[prop] = element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
2559
2546
|
to[prop] = styles[prop];
|
|
2560
2547
|
}
|
|
2561
|
-
|
|
2562
|
-
|
|
2548
|
+
const timer = DOMUtilsCommonUtils.setInterval(function () {
|
|
2549
|
+
const timePassed = performance.now() - start;
|
|
2563
2550
|
let progress = timePassed / duration;
|
|
2564
2551
|
if (progress > 1) {
|
|
2565
2552
|
progress = 1;
|
|
2566
2553
|
}
|
|
2567
|
-
for (
|
|
2554
|
+
for (const prop in styles) {
|
|
2568
2555
|
element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
|
|
2569
2556
|
}
|
|
2570
2557
|
if (progress === 1) {
|
|
@@ -2584,7 +2571,7 @@
|
|
|
2584
2571
|
* DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
|
|
2585
2572
|
*/
|
|
2586
2573
|
wrap(element, wrapperHTML) {
|
|
2587
|
-
|
|
2574
|
+
const DOMUtilsContext = this;
|
|
2588
2575
|
if (typeof element === "string") {
|
|
2589
2576
|
element = DOMUtilsContext.selectorAll(element);
|
|
2590
2577
|
}
|
|
@@ -2600,17 +2587,17 @@
|
|
|
2600
2587
|
}
|
|
2601
2588
|
element = element;
|
|
2602
2589
|
// 创建一个新的div元素,并将wrapperHTML作为其innerHTML
|
|
2603
|
-
|
|
2590
|
+
const wrapper = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2604
2591
|
DOMUtilsContext.html(wrapper, wrapperHTML);
|
|
2605
|
-
|
|
2592
|
+
const wrapperFirstChild = wrapper.firstChild;
|
|
2606
2593
|
// 将要包裹的元素插入目标元素前面
|
|
2607
|
-
|
|
2594
|
+
const parentElement = element.parentElement;
|
|
2608
2595
|
parentElement.insertBefore(wrapperFirstChild, element);
|
|
2609
2596
|
// 将要包裹的元素移动到wrapper中
|
|
2610
2597
|
wrapperFirstChild.appendChild(element);
|
|
2611
2598
|
}
|
|
2612
2599
|
prev(element) {
|
|
2613
|
-
|
|
2600
|
+
const DOMUtilsContext = this;
|
|
2614
2601
|
if (typeof element === "string") {
|
|
2615
2602
|
element = DOMUtilsContext.selector(element);
|
|
2616
2603
|
}
|
|
@@ -2620,7 +2607,7 @@
|
|
|
2620
2607
|
return element.previousElementSibling;
|
|
2621
2608
|
}
|
|
2622
2609
|
next(element) {
|
|
2623
|
-
|
|
2610
|
+
const DOMUtilsContext = this;
|
|
2624
2611
|
if (typeof element === "string") {
|
|
2625
2612
|
element = DOMUtilsContext.selector(element);
|
|
2626
2613
|
}
|
|
@@ -2635,7 +2622,7 @@
|
|
|
2635
2622
|
* let DOMUtils = window.DOMUtils.noConflict()
|
|
2636
2623
|
*/
|
|
2637
2624
|
noConflict() {
|
|
2638
|
-
|
|
2625
|
+
const DOMUtilsContext = this;
|
|
2639
2626
|
if (DOMUtilsContext.windowApi.window.DOMUtils) {
|
|
2640
2627
|
DOMUtilsCommonUtils.delete(window, "DOMUtils");
|
|
2641
2628
|
}
|
|
@@ -2643,7 +2630,7 @@
|
|
|
2643
2630
|
return this;
|
|
2644
2631
|
}
|
|
2645
2632
|
siblings(element) {
|
|
2646
|
-
|
|
2633
|
+
const DOMUtilsContext = this;
|
|
2647
2634
|
if (typeof element === "string") {
|
|
2648
2635
|
element = DOMUtilsContext.selector(element);
|
|
2649
2636
|
}
|
|
@@ -2663,7 +2650,7 @@
|
|
|
2663
2650
|
* > <div ...>....</div>
|
|
2664
2651
|
*/
|
|
2665
2652
|
parent(element) {
|
|
2666
|
-
|
|
2653
|
+
const DOMUtilsContext = this;
|
|
2667
2654
|
if (typeof element === "string") {
|
|
2668
2655
|
element = DOMUtilsContext.selector(element);
|
|
2669
2656
|
}
|
|
@@ -2671,7 +2658,7 @@
|
|
|
2671
2658
|
return;
|
|
2672
2659
|
}
|
|
2673
2660
|
if (DOMUtilsCommonUtils.isNodeList(element)) {
|
|
2674
|
-
|
|
2661
|
+
const resultArray = [];
|
|
2675
2662
|
element.forEach(($ele) => {
|
|
2676
2663
|
resultArray.push(DOMUtilsContext.parent($ele));
|
|
2677
2664
|
});
|
|
@@ -2682,11 +2669,11 @@
|
|
|
2682
2669
|
}
|
|
2683
2670
|
}
|
|
2684
2671
|
parseHTML(html, useParser = false, isComplete = false) {
|
|
2685
|
-
|
|
2672
|
+
const DOMUtilsContext = this;
|
|
2686
2673
|
// 去除html前后的空格
|
|
2687
2674
|
html = html.trim();
|
|
2688
2675
|
function parseHTMLByDOMParser() {
|
|
2689
|
-
|
|
2676
|
+
const parser = new DOMParser();
|
|
2690
2677
|
if (isComplete) {
|
|
2691
2678
|
return parser.parseFromString(html, "text/html");
|
|
2692
2679
|
}
|
|
@@ -2695,7 +2682,7 @@
|
|
|
2695
2682
|
}
|
|
2696
2683
|
}
|
|
2697
2684
|
function parseHTMLByCreateDom() {
|
|
2698
|
-
|
|
2685
|
+
const tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2699
2686
|
DOMUtilsContext.html(tempDIV, html);
|
|
2700
2687
|
if (isComplete) {
|
|
2701
2688
|
return tempDIV;
|
|
@@ -2720,7 +2707,7 @@
|
|
|
2720
2707
|
*/
|
|
2721
2708
|
serialize($form) {
|
|
2722
2709
|
const elements = $form.elements;
|
|
2723
|
-
|
|
2710
|
+
const serializedArray = [];
|
|
2724
2711
|
for (let i = 0; i < elements.length; i++) {
|
|
2725
2712
|
const element = elements[i];
|
|
2726
2713
|
if (element.name &&
|
|
@@ -2759,7 +2746,7 @@
|
|
|
2759
2746
|
* DOMUtils.show("a.xx")
|
|
2760
2747
|
*/
|
|
2761
2748
|
show(target, checkVisiblie = true) {
|
|
2762
|
-
|
|
2749
|
+
const DOMUtilsContext = this;
|
|
2763
2750
|
if (target == null) {
|
|
2764
2751
|
return;
|
|
2765
2752
|
}
|
|
@@ -2796,7 +2783,7 @@
|
|
|
2796
2783
|
* DOMUtils.hide("a.xx")
|
|
2797
2784
|
*/
|
|
2798
2785
|
hide(target, checkVisiblie = true) {
|
|
2799
|
-
|
|
2786
|
+
const DOMUtilsContext = this;
|
|
2800
2787
|
if (target == null) {
|
|
2801
2788
|
return;
|
|
2802
2789
|
}
|
|
@@ -2838,7 +2825,7 @@
|
|
|
2838
2825
|
if (element == null) {
|
|
2839
2826
|
return;
|
|
2840
2827
|
}
|
|
2841
|
-
|
|
2828
|
+
const DOMUtilsContext = this;
|
|
2842
2829
|
if (typeof element === "string") {
|
|
2843
2830
|
element = DOMUtilsContext.selectorAll(element);
|
|
2844
2831
|
}
|
|
@@ -2856,7 +2843,7 @@
|
|
|
2856
2843
|
function step(timestamp) {
|
|
2857
2844
|
if (!start)
|
|
2858
2845
|
start = timestamp;
|
|
2859
|
-
|
|
2846
|
+
const progress = timestamp - start;
|
|
2860
2847
|
element = element;
|
|
2861
2848
|
element.style.opacity = Math.min(progress / duration, 1).toString();
|
|
2862
2849
|
if (progress < duration) {
|
|
@@ -2886,7 +2873,7 @@
|
|
|
2886
2873
|
* })
|
|
2887
2874
|
*/
|
|
2888
2875
|
fadeOut(element, duration = 400, callback) {
|
|
2889
|
-
|
|
2876
|
+
const DOMUtilsContext = this;
|
|
2890
2877
|
if (element == null) {
|
|
2891
2878
|
return;
|
|
2892
2879
|
}
|
|
@@ -2906,7 +2893,7 @@
|
|
|
2906
2893
|
function step(timestamp) {
|
|
2907
2894
|
if (!start)
|
|
2908
2895
|
start = timestamp;
|
|
2909
|
-
|
|
2896
|
+
const progress = timestamp - start;
|
|
2910
2897
|
element = element;
|
|
2911
2898
|
element.style.opacity = Math.max(1 - progress / duration, 0).toString();
|
|
2912
2899
|
if (progress < duration) {
|
|
@@ -2932,7 +2919,7 @@
|
|
|
2932
2919
|
* DOMUtils.toggle("a.xx")
|
|
2933
2920
|
*/
|
|
2934
2921
|
toggle(element, checkVisiblie) {
|
|
2935
|
-
|
|
2922
|
+
const DOMUtilsContext = this;
|
|
2936
2923
|
if (typeof element === "string") {
|
|
2937
2924
|
element = DOMUtilsContext.selectorAll(element);
|
|
2938
2925
|
}
|
|
@@ -2970,7 +2957,7 @@
|
|
|
2970
2957
|
* DOMUtils.getTextBoundingRect(document.querySelector("input"));
|
|
2971
2958
|
*/
|
|
2972
2959
|
getTextBoundingRect($input, selectionStart, selectionEnd) {
|
|
2973
|
-
|
|
2960
|
+
const DOMUtilsContext = this;
|
|
2974
2961
|
// Basic parameter validation
|
|
2975
2962
|
if (!$input || !("value" in $input))
|
|
2976
2963
|
return $input;
|
|
@@ -2999,18 +2986,20 @@
|
|
|
2999
2986
|
else
|
|
3000
2987
|
selectionEnd = Math.min($input.value.length, selectionEnd);
|
|
3001
2988
|
// If available (thus IE), use the createTextRange method
|
|
3002
|
-
// @ts-ignore
|
|
3003
2989
|
if (typeof $input.createTextRange == "function") {
|
|
3004
|
-
|
|
2990
|
+
const range = $input.createTextRange();
|
|
3005
2991
|
range.collapse(true);
|
|
3006
2992
|
range.moveStart("character", selectionStart);
|
|
3007
2993
|
range.moveEnd("character", selectionEnd - selectionStart);
|
|
3008
2994
|
return range.getBoundingClientRect();
|
|
3009
2995
|
}
|
|
3010
2996
|
// createTextRange is not supported, create a fake text range
|
|
3011
|
-
|
|
2997
|
+
const offset = getInputOffset(), width = getInputCSS("width", true), height = getInputCSS("height", true);
|
|
2998
|
+
let topPos = offset.top;
|
|
2999
|
+
let leftPos = offset.left;
|
|
3012
3000
|
// Styles to simulate a node in an input field
|
|
3013
|
-
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;"
|
|
3001
|
+
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;";
|
|
3002
|
+
const listOfModifiers = [
|
|
3014
3003
|
"direction",
|
|
3015
3004
|
"font-family",
|
|
3016
3005
|
"font-size",
|
|
@@ -3032,16 +3021,15 @@
|
|
|
3032
3021
|
leftPos += getInputCSS("border-left-width", true);
|
|
3033
3022
|
leftPos += 1; //Seems to be necessary
|
|
3034
3023
|
for (let index = 0; index < listOfModifiers.length; index++) {
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
cssDefaultStyles += property + ":" + getInputCSS(property) + ";";
|
|
3024
|
+
const property = listOfModifiers[index];
|
|
3025
|
+
cssDefaultStyles += property + ":" + getInputCSS(property, false) + ";";
|
|
3038
3026
|
}
|
|
3039
3027
|
// End of CSS variable checks
|
|
3040
3028
|
// 不能为空,不然获取不到高度
|
|
3041
|
-
|
|
3029
|
+
const text = $input.value || "G", textLen = text.length, fakeClone = DOMUtilsContext.windowApi.document.createElement("div");
|
|
3042
3030
|
if (selectionStart > 0)
|
|
3043
3031
|
appendPart(0, selectionStart);
|
|
3044
|
-
|
|
3032
|
+
const fakeRange = appendPart(selectionStart, selectionEnd);
|
|
3045
3033
|
if (textLen > selectionEnd)
|
|
3046
3034
|
appendPart(selectionEnd, textLen);
|
|
3047
3035
|
// Styles to inherit the font styles of the element
|
|
@@ -3053,7 +3041,7 @@
|
|
|
3053
3041
|
fakeClone.style.width = width + "px";
|
|
3054
3042
|
fakeClone.style.height = height + "px";
|
|
3055
3043
|
DOMUtilsContext.windowApi.document.body.appendChild(fakeClone);
|
|
3056
|
-
|
|
3044
|
+
const returnValue = fakeRange.getBoundingClientRect(); //Get rect
|
|
3057
3045
|
fakeClone?.parentNode?.removeChild(fakeClone); //Remove temp
|
|
3058
3046
|
return returnValue;
|
|
3059
3047
|
// Local functions for readability of the previous code
|
|
@@ -3064,7 +3052,7 @@
|
|
|
3064
3052
|
* @returns
|
|
3065
3053
|
*/
|
|
3066
3054
|
function appendPart(start, end) {
|
|
3067
|
-
|
|
3055
|
+
const span = DOMUtilsContext.windowApi.document.createElement("span");
|
|
3068
3056
|
span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
|
|
3069
3057
|
span.textContent = text.substring(start, end);
|
|
3070
3058
|
fakeClone.appendChild(span);
|
|
@@ -3072,13 +3060,13 @@
|
|
|
3072
3060
|
}
|
|
3073
3061
|
// Computing offset position
|
|
3074
3062
|
function getInputOffset() {
|
|
3075
|
-
|
|
3063
|
+
const body = DOMUtilsContext.windowApi.document.body, win = DOMUtilsContext.windowApi.document.defaultView, docElem = DOMUtilsContext.windowApi.document.documentElement, $box = DOMUtilsContext.windowApi.document.createElement("div");
|
|
3076
3064
|
$box.style.paddingLeft = $box.style.width = "1px";
|
|
3077
3065
|
body.appendChild($box);
|
|
3078
|
-
|
|
3066
|
+
const isBoxModel = $box.offsetWidth == 2;
|
|
3079
3067
|
body.removeChild($box);
|
|
3080
|
-
|
|
3081
|
-
|
|
3068
|
+
const $boxRect = $input.getBoundingClientRect();
|
|
3069
|
+
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;
|
|
3082
3070
|
return {
|
|
3083
3071
|
top: $boxRect.top + scrollTop - clientTop,
|
|
3084
3072
|
left: $boxRect.left + scrollLeft - clientLeft,
|
|
@@ -3091,10 +3079,13 @@
|
|
|
3091
3079
|
* @returns
|
|
3092
3080
|
*/
|
|
3093
3081
|
function getInputCSS(prop, isNumber) {
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3082
|
+
const val = DOMUtilsContext.windowApi.document.defaultView.getComputedStyle($input, null).getPropertyValue(prop);
|
|
3083
|
+
if (isNumber) {
|
|
3084
|
+
return parseFloat(val);
|
|
3085
|
+
}
|
|
3086
|
+
else {
|
|
3087
|
+
return val;
|
|
3088
|
+
}
|
|
3098
3089
|
}
|
|
3099
3090
|
}
|
|
3100
3091
|
/** 获取 animationend 在各个浏览器的兼容名 */
|
|
@@ -3106,7 +3097,7 @@
|
|
|
3106
3097
|
return DOMUtilsCommonUtils.getTransitionEndNameList();
|
|
3107
3098
|
}
|
|
3108
3099
|
}
|
|
3109
|
-
|
|
3100
|
+
const domUtils = new DOMUtils();
|
|
3110
3101
|
|
|
3111
3102
|
return domUtils;
|
|
3112
3103
|
|