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