@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.cjs.js
CHANGED
|
@@ -325,10 +325,8 @@ const DOMUtilsCommonUtils = {
|
|
|
325
325
|
* 获取安全的html
|
|
326
326
|
*/
|
|
327
327
|
getSafeHTML(text) {
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
// @ts-ignore
|
|
331
|
-
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
328
|
+
if (window.trustedTypes) {
|
|
329
|
+
const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
|
|
332
330
|
createHTML: (html) => html,
|
|
333
331
|
});
|
|
334
332
|
return policy.createHTML(text);
|
|
@@ -351,7 +349,7 @@ const DOMUtilsCommonUtils = {
|
|
|
351
349
|
* @param element
|
|
352
350
|
*/
|
|
353
351
|
showElement(element) {
|
|
354
|
-
|
|
352
|
+
const dupNode = element.cloneNode(true);
|
|
355
353
|
dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
|
|
356
354
|
this.windowApi.document.documentElement.appendChild(dupNode);
|
|
357
355
|
return {
|
|
@@ -382,7 +380,7 @@ const DOMUtilsCommonUtils = {
|
|
|
382
380
|
}
|
|
383
381
|
styles = view.getComputedStyle(element);
|
|
384
382
|
}
|
|
385
|
-
|
|
383
|
+
const value = parseFloat(styles[styleName]);
|
|
386
384
|
if (isNaN(value)) {
|
|
387
385
|
return 0;
|
|
388
386
|
}
|
|
@@ -433,8 +431,8 @@ const DOMUtilsCommonUtils = {
|
|
|
433
431
|
* @param propName
|
|
434
432
|
*/
|
|
435
433
|
delete(target, propName) {
|
|
436
|
-
if (typeof Reflect === "object" && Reflect.deleteProperty) {
|
|
437
|
-
Reflect.deleteProperty(target, propName);
|
|
434
|
+
if (typeof Reflect === "object" && Reflect != null && Reflect.deleteProperty) {
|
|
435
|
+
return Reflect.deleteProperty(target, propName);
|
|
438
436
|
}
|
|
439
437
|
else {
|
|
440
438
|
delete target[propName];
|
|
@@ -447,7 +445,7 @@ const DOMUtilsCommonUtils = {
|
|
|
447
445
|
try {
|
|
448
446
|
return setTimeout$1(callback, timeout);
|
|
449
447
|
}
|
|
450
|
-
catch
|
|
448
|
+
catch {
|
|
451
449
|
return this.windowApi.setTimeout(callback, timeout);
|
|
452
450
|
}
|
|
453
451
|
},
|
|
@@ -460,7 +458,8 @@ const DOMUtilsCommonUtils = {
|
|
|
460
458
|
clearTimeout$1(timeId);
|
|
461
459
|
}
|
|
462
460
|
}
|
|
463
|
-
catch
|
|
461
|
+
catch {
|
|
462
|
+
// TODO
|
|
464
463
|
}
|
|
465
464
|
finally {
|
|
466
465
|
this.windowApi.clearTimeout(timeId);
|
|
@@ -473,7 +472,7 @@ const DOMUtilsCommonUtils = {
|
|
|
473
472
|
try {
|
|
474
473
|
return setInterval$1(callback, timeout);
|
|
475
474
|
}
|
|
476
|
-
catch
|
|
475
|
+
catch {
|
|
477
476
|
return this.windowApi.setInterval(callback, timeout);
|
|
478
477
|
}
|
|
479
478
|
},
|
|
@@ -486,7 +485,8 @@ const DOMUtilsCommonUtils = {
|
|
|
486
485
|
clearInterval$1(timeId);
|
|
487
486
|
}
|
|
488
487
|
}
|
|
489
|
-
catch
|
|
488
|
+
catch {
|
|
489
|
+
// TODO
|
|
490
490
|
}
|
|
491
491
|
finally {
|
|
492
492
|
this.windowApi.clearInterval(timeId);
|
|
@@ -534,7 +534,7 @@ class DOMUtilsEvent {
|
|
|
534
534
|
* @param option
|
|
535
535
|
*/
|
|
536
536
|
function getOption(args, startIndex, option) {
|
|
537
|
-
|
|
537
|
+
const currentParam = args[startIndex];
|
|
538
538
|
if (typeof currentParam === "boolean") {
|
|
539
539
|
option.capture = currentParam;
|
|
540
540
|
if (typeof args[startIndex + 1] === "boolean") {
|
|
@@ -556,8 +556,9 @@ class DOMUtilsEvent {
|
|
|
556
556
|
}
|
|
557
557
|
return option;
|
|
558
558
|
}
|
|
559
|
-
|
|
560
|
-
|
|
559
|
+
const DOMUtilsContext = this;
|
|
560
|
+
// eslint-disable-next-line prefer-rest-params
|
|
561
|
+
const args = arguments;
|
|
561
562
|
if (typeof element === "string") {
|
|
562
563
|
element = DOMUtilsContext.selectorAll(element);
|
|
563
564
|
}
|
|
@@ -633,14 +634,14 @@ class DOMUtilsEvent {
|
|
|
633
634
|
totalParent = DOMUtilsContext.windowApi.document.documentElement;
|
|
634
635
|
}
|
|
635
636
|
}
|
|
636
|
-
|
|
637
|
+
const findValue = selectorList.find((selectorItem) => {
|
|
637
638
|
// 判断目标元素是否匹配选择器
|
|
638
639
|
if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
|
|
639
640
|
/* 当前目标可以被selector所匹配到 */
|
|
640
641
|
return true;
|
|
641
642
|
}
|
|
642
643
|
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
|
|
643
|
-
|
|
644
|
+
const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
|
|
644
645
|
if ($closestMatches && totalParent?.contains($closestMatches)) {
|
|
645
646
|
eventTarget = $closestMatches;
|
|
646
647
|
return true;
|
|
@@ -656,7 +657,9 @@ class DOMUtilsEvent {
|
|
|
656
657
|
},
|
|
657
658
|
});
|
|
658
659
|
}
|
|
659
|
-
catch
|
|
660
|
+
catch {
|
|
661
|
+
// TODO
|
|
662
|
+
}
|
|
660
663
|
listenerCallBack.call(eventTarget, event, eventTarget);
|
|
661
664
|
checkOptionOnceToRemoveEventListener();
|
|
662
665
|
}
|
|
@@ -671,7 +674,7 @@ class DOMUtilsEvent {
|
|
|
671
674
|
eventTypeList.forEach((eventName) => {
|
|
672
675
|
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
673
676
|
/* 获取对象上的事件 */
|
|
674
|
-
|
|
677
|
+
const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
|
|
675
678
|
/* 初始化对象上的xx事件 */
|
|
676
679
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
677
680
|
elementEvents[eventName].push({
|
|
@@ -693,17 +696,18 @@ class DOMUtilsEvent {
|
|
|
693
696
|
* @param option
|
|
694
697
|
*/
|
|
695
698
|
function getOption(args1, startIndex, option) {
|
|
696
|
-
|
|
699
|
+
const currentParam = args1[startIndex];
|
|
697
700
|
if (typeof currentParam === "boolean") {
|
|
698
701
|
option.capture = currentParam;
|
|
699
702
|
}
|
|
700
|
-
else if (typeof currentParam === "object" && "capture" in currentParam) {
|
|
703
|
+
else if (typeof currentParam === "object" && currentParam != null && "capture" in currentParam) {
|
|
701
704
|
option.capture = currentParam.capture;
|
|
702
705
|
}
|
|
703
706
|
return option;
|
|
704
707
|
}
|
|
705
|
-
|
|
706
|
-
|
|
708
|
+
const DOMUtilsContext = this;
|
|
709
|
+
// eslint-disable-next-line prefer-rest-params
|
|
710
|
+
const args = arguments;
|
|
707
711
|
if (typeof element === "string") {
|
|
708
712
|
element = DOMUtilsContext.selectorAll(element);
|
|
709
713
|
}
|
|
@@ -763,16 +767,18 @@ class DOMUtilsEvent {
|
|
|
763
767
|
// 目标函数、事件名、子元素选择器
|
|
764
768
|
isRemoveAll = true;
|
|
765
769
|
}
|
|
770
|
+
if (args.length === 5 && typeof args[4] === "function" && typeof filter !== "function") {
|
|
771
|
+
// 目标函数、事件名、回调函数、事件配置、过滤函数
|
|
772
|
+
filter = option;
|
|
773
|
+
}
|
|
766
774
|
elementList.forEach((elementItem) => {
|
|
767
775
|
/* 获取对象上的事件 */
|
|
768
|
-
|
|
776
|
+
const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
|
|
769
777
|
eventTypeList.forEach((eventName) => {
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
for (let index = 0; index < handlers.length; index++) {
|
|
775
|
-
let handler = handlers[index];
|
|
778
|
+
const handlers = elementEvents[eventName] || [];
|
|
779
|
+
const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
|
|
780
|
+
for (let index = 0; index < filterHandler.length; index++) {
|
|
781
|
+
const handler = filterHandler[index];
|
|
776
782
|
let flag = true;
|
|
777
783
|
if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
|
|
778
784
|
// callback不同
|
|
@@ -784,13 +790,18 @@ class DOMUtilsEvent {
|
|
|
784
790
|
flag = false;
|
|
785
791
|
}
|
|
786
792
|
}
|
|
787
|
-
if (flag &&
|
|
793
|
+
if (flag &&
|
|
794
|
+
typeof handler.option.capture === "boolean" &&
|
|
795
|
+
listenerOption.capture !== handler.option.capture) {
|
|
788
796
|
// 事件的配置项不同
|
|
789
797
|
flag = false;
|
|
790
798
|
}
|
|
791
799
|
if (flag || isRemoveAll) {
|
|
792
800
|
elementItem.removeEventListener(eventName, handler.callback, handler.option);
|
|
793
|
-
handlers.
|
|
801
|
+
const findIndex = handlers.findIndex((item) => item === handler);
|
|
802
|
+
if (findIndex !== -1) {
|
|
803
|
+
handlers.splice(findIndex, 1);
|
|
804
|
+
}
|
|
794
805
|
}
|
|
795
806
|
}
|
|
796
807
|
if (handlers.length === 0) {
|
|
@@ -807,7 +818,7 @@ class DOMUtilsEvent {
|
|
|
807
818
|
* @param eventType (可选)需要取消监听的事件
|
|
808
819
|
*/
|
|
809
820
|
offAll(element, eventType) {
|
|
810
|
-
|
|
821
|
+
const DOMUtilsContext = this;
|
|
811
822
|
if (typeof element === "string") {
|
|
812
823
|
element = DOMUtilsContext.selectorAll(element);
|
|
813
824
|
}
|
|
@@ -833,10 +844,10 @@ class DOMUtilsEvent {
|
|
|
833
844
|
if (!symbolEvents.toString().startsWith("Symbol(events_")) {
|
|
834
845
|
return;
|
|
835
846
|
}
|
|
836
|
-
|
|
837
|
-
|
|
847
|
+
const elementEvents = elementItem[symbolEvents] || {};
|
|
848
|
+
const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
|
|
838
849
|
iterEventNameList.forEach((eventName) => {
|
|
839
|
-
|
|
850
|
+
const handlers = elementEvents[eventName];
|
|
840
851
|
if (!handlers) {
|
|
841
852
|
return;
|
|
842
853
|
}
|
|
@@ -845,7 +856,7 @@ class DOMUtilsEvent {
|
|
|
845
856
|
capture: handler["option"]["capture"],
|
|
846
857
|
});
|
|
847
858
|
}
|
|
848
|
-
|
|
859
|
+
const events = Reflect.get(elementItem, symbolEvents);
|
|
849
860
|
DOMUtilsCommonUtils.delete(events, eventName);
|
|
850
861
|
});
|
|
851
862
|
});
|
|
@@ -863,7 +874,7 @@ class DOMUtilsEvent {
|
|
|
863
874
|
if (typeof callback !== "function") {
|
|
864
875
|
return;
|
|
865
876
|
}
|
|
866
|
-
|
|
877
|
+
const DOMUtilsContext = this;
|
|
867
878
|
/**
|
|
868
879
|
* 检测文档是否加载完毕
|
|
869
880
|
*/
|
|
@@ -878,7 +889,7 @@ class DOMUtilsEvent {
|
|
|
878
889
|
return false;
|
|
879
890
|
}
|
|
880
891
|
}
|
|
881
|
-
catch
|
|
892
|
+
catch {
|
|
882
893
|
return false;
|
|
883
894
|
}
|
|
884
895
|
}
|
|
@@ -889,7 +900,7 @@ class DOMUtilsEvent {
|
|
|
889
900
|
removeDomReadyListener();
|
|
890
901
|
callback();
|
|
891
902
|
}
|
|
892
|
-
|
|
903
|
+
const targetList = [
|
|
893
904
|
{
|
|
894
905
|
target: DOMUtilsContext.windowApi.document,
|
|
895
906
|
eventType: "DOMContentLoaded",
|
|
@@ -906,7 +917,7 @@ class DOMUtilsEvent {
|
|
|
906
917
|
*/
|
|
907
918
|
function addDomReadyListener() {
|
|
908
919
|
for (let index = 0; index < targetList.length; index++) {
|
|
909
|
-
|
|
920
|
+
const item = targetList[index];
|
|
910
921
|
item.target.addEventListener(item.eventType, item.callback);
|
|
911
922
|
}
|
|
912
923
|
}
|
|
@@ -915,7 +926,7 @@ class DOMUtilsEvent {
|
|
|
915
926
|
*/
|
|
916
927
|
function removeDomReadyListener() {
|
|
917
928
|
for (let index = 0; index < targetList.length; index++) {
|
|
918
|
-
|
|
929
|
+
const item = targetList[index];
|
|
919
930
|
item.target.removeEventListener(item.eventType, item.callback);
|
|
920
931
|
}
|
|
921
932
|
}
|
|
@@ -943,7 +954,7 @@ class DOMUtilsEvent {
|
|
|
943
954
|
* DOMUtils.trigger("a.xx",["click","tap","hover"])
|
|
944
955
|
*/
|
|
945
956
|
trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
|
|
946
|
-
|
|
957
|
+
const DOMUtilsContext = this;
|
|
947
958
|
if (typeof element === "string") {
|
|
948
959
|
element = DOMUtilsContext.selectorAll(element);
|
|
949
960
|
}
|
|
@@ -967,7 +978,7 @@ class DOMUtilsEvent {
|
|
|
967
978
|
}
|
|
968
979
|
elementList.forEach((elementItem) => {
|
|
969
980
|
/* 获取对象上的事件 */
|
|
970
|
-
|
|
981
|
+
const events = elementItem[DOMUtilsData.SymbolEvents] || {};
|
|
971
982
|
eventTypeList.forEach((_eventType_) => {
|
|
972
983
|
let event = null;
|
|
973
984
|
if (details && details instanceof Event) {
|
|
@@ -1007,7 +1018,7 @@ class DOMUtilsEvent {
|
|
|
1007
1018
|
* })
|
|
1008
1019
|
* */
|
|
1009
1020
|
click(element, handler, details, useDispatchToTriggerEvent) {
|
|
1010
|
-
|
|
1021
|
+
const DOMUtilsContext = this;
|
|
1011
1022
|
if (typeof element === "string") {
|
|
1012
1023
|
element = DOMUtilsContext.selectorAll(element);
|
|
1013
1024
|
}
|
|
@@ -1043,7 +1054,7 @@ class DOMUtilsEvent {
|
|
|
1043
1054
|
* })
|
|
1044
1055
|
* */
|
|
1045
1056
|
blur(element, handler, details, useDispatchToTriggerEvent) {
|
|
1046
|
-
|
|
1057
|
+
const DOMUtilsContext = this;
|
|
1047
1058
|
if (typeof element === "string") {
|
|
1048
1059
|
element = DOMUtilsContext.selectorAll(element);
|
|
1049
1060
|
}
|
|
@@ -1079,7 +1090,7 @@ class DOMUtilsEvent {
|
|
|
1079
1090
|
* })
|
|
1080
1091
|
* */
|
|
1081
1092
|
focus(element, handler, details, useDispatchToTriggerEvent) {
|
|
1082
|
-
|
|
1093
|
+
const DOMUtilsContext = this;
|
|
1083
1094
|
if (typeof element === "string") {
|
|
1084
1095
|
element = DOMUtilsContext.selectorAll(element);
|
|
1085
1096
|
}
|
|
@@ -1115,7 +1126,7 @@ class DOMUtilsEvent {
|
|
|
1115
1126
|
* })
|
|
1116
1127
|
*/
|
|
1117
1128
|
hover(element, handler, option) {
|
|
1118
|
-
|
|
1129
|
+
const DOMUtilsContext = this;
|
|
1119
1130
|
if (typeof element === "string") {
|
|
1120
1131
|
element = DOMUtilsContext.selectorAll(element);
|
|
1121
1132
|
}
|
|
@@ -1139,7 +1150,7 @@ class DOMUtilsEvent {
|
|
|
1139
1150
|
* @param option 配置项,这里默认配置once为true
|
|
1140
1151
|
*/
|
|
1141
1152
|
animationend(element, handler, option) {
|
|
1142
|
-
|
|
1153
|
+
const DOMUtilsContext = this;
|
|
1143
1154
|
if (typeof element === "string") {
|
|
1144
1155
|
element = DOMUtilsContext.selector(element);
|
|
1145
1156
|
}
|
|
@@ -1174,7 +1185,7 @@ class DOMUtilsEvent {
|
|
|
1174
1185
|
* @param option 配置项,这里默认配置once为true
|
|
1175
1186
|
*/
|
|
1176
1187
|
transitionend(element, handler, option) {
|
|
1177
|
-
|
|
1188
|
+
const DOMUtilsContext = this;
|
|
1178
1189
|
if (typeof element === "string") {
|
|
1179
1190
|
element = DOMUtilsContext.selector(element);
|
|
1180
1191
|
}
|
|
@@ -1218,7 +1229,7 @@ class DOMUtilsEvent {
|
|
|
1218
1229
|
* })
|
|
1219
1230
|
*/
|
|
1220
1231
|
keyup(element, handler, option) {
|
|
1221
|
-
|
|
1232
|
+
const DOMUtilsContext = this;
|
|
1222
1233
|
if (element == null) {
|
|
1223
1234
|
return;
|
|
1224
1235
|
}
|
|
@@ -1250,7 +1261,7 @@ class DOMUtilsEvent {
|
|
|
1250
1261
|
* })
|
|
1251
1262
|
*/
|
|
1252
1263
|
keydown(element, handler, option) {
|
|
1253
|
-
|
|
1264
|
+
const DOMUtilsContext = this;
|
|
1254
1265
|
if (element == null) {
|
|
1255
1266
|
return;
|
|
1256
1267
|
}
|
|
@@ -1282,7 +1293,7 @@ class DOMUtilsEvent {
|
|
|
1282
1293
|
* })
|
|
1283
1294
|
*/
|
|
1284
1295
|
keypress(element, handler, option) {
|
|
1285
|
-
|
|
1296
|
+
const DOMUtilsContext = this;
|
|
1286
1297
|
if (element == null) {
|
|
1287
1298
|
return;
|
|
1288
1299
|
}
|
|
@@ -1299,80 +1310,80 @@ class DOMUtilsEvent {
|
|
|
1299
1310
|
DOMUtilsContext.on(element, "keypress", null, handler, option);
|
|
1300
1311
|
}
|
|
1301
1312
|
/**
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1313
|
+
* 监听某个元素键盘按键事件或window全局按键事件
|
|
1314
|
+
* 按下有值的键时触发,按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件,再触发keypress事件。
|
|
1315
|
+
* @param element 需要监听的对象,可以是全局Window或者某个元素
|
|
1316
|
+
* @param eventName 事件名,默认keypress
|
|
1317
|
+
* @param callback 自己定义的回调事件,参数1为当前的key,参数2为组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
|
|
1318
|
+
* @param options 监听事件的配置
|
|
1319
|
+
* @example
|
|
1320
|
+
Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
|
|
1321
|
+
if(keyName === "Enter"){
|
|
1322
|
+
console.log("回车按键的值是:"+keyValue)
|
|
1323
|
+
}
|
|
1324
|
+
if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
|
|
1325
|
+
console.log("Ctrl和回车键");
|
|
1326
|
+
}
|
|
1327
|
+
})
|
|
1328
|
+
* @example
|
|
1329
|
+
字母和数字键的键码值(keyCode)
|
|
1330
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1331
|
+
A 65 J 74 S 83 1 49
|
|
1332
|
+
B 66 K 75 T 84 2 50
|
|
1333
|
+
C 67 L 76 U 85 3 51
|
|
1334
|
+
D 68 M 77 V 86 4 52
|
|
1335
|
+
E 69 N 78 W 87 5 53
|
|
1336
|
+
F 70 O 79 X 88 6 54
|
|
1337
|
+
G 71 P 80 Y 89 7 55
|
|
1338
|
+
H 72 Q 81 Z 90 8 56
|
|
1339
|
+
I 73 R 82 0 48 9 57
|
|
1340
|
+
|
|
1341
|
+
数字键盘上的键的键码值(keyCode)
|
|
1342
|
+
功能键键码值(keyCode)
|
|
1343
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1344
|
+
0 96 8 104 F1 112 F7 118
|
|
1345
|
+
1 97 9 105 F2 113 F8 119
|
|
1346
|
+
2 98 * 106 F3 114 F9 120
|
|
1347
|
+
3 99 + 107 F4 115 F10 121
|
|
1348
|
+
4 100 Enter 108 F5 116 F11 122
|
|
1349
|
+
5 101 - 109 F6 117 F12 123
|
|
1350
|
+
6 102 . 110
|
|
1351
|
+
7 103 / 111
|
|
1352
|
+
|
|
1353
|
+
控制键键码值(keyCode)
|
|
1354
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1355
|
+
BackSpace 8 Esc 27 → 39 -_ 189
|
|
1356
|
+
Tab 9 Spacebar 32 ↓ 40 .> 190
|
|
1357
|
+
Clear 12 Page Up 33 Insert 45 /? 191
|
|
1358
|
+
Enter 13 Page Down 34 Delete 46 `~ 192
|
|
1359
|
+
Shift 16 End 35 Num Lock 144 [{ 219
|
|
1360
|
+
Control 17 Home 36 ;: 186 \| 220
|
|
1361
|
+
Alt 18 ← 37 =+ 187 ]} 221
|
|
1362
|
+
Cape Lock 20 ↑ 38 ,< 188 '" 222
|
|
1363
|
+
|
|
1364
|
+
多媒体键码值(keyCode)
|
|
1365
|
+
按键 键码
|
|
1366
|
+
音量加 175
|
|
1367
|
+
音量减 174
|
|
1368
|
+
停止 179
|
|
1369
|
+
静音 173
|
|
1370
|
+
浏览器 172
|
|
1371
|
+
邮件 180
|
|
1372
|
+
搜索 170
|
|
1373
|
+
收藏 171
|
|
1374
|
+
**/
|
|
1364
1375
|
listenKeyboard(element, eventName = "keypress", callback, options) {
|
|
1365
|
-
|
|
1376
|
+
const DOMUtilsContext = this;
|
|
1366
1377
|
if (typeof element === "string") {
|
|
1367
1378
|
element = DOMUtilsContext.selectorAll(element);
|
|
1368
1379
|
}
|
|
1369
|
-
|
|
1380
|
+
const keyboardEventCallBack = function (event) {
|
|
1370
1381
|
/** 键名 */
|
|
1371
|
-
|
|
1382
|
+
const keyName = event.key || event.code;
|
|
1372
1383
|
/** 键值 */
|
|
1373
|
-
|
|
1384
|
+
const keyValue = event.charCode || event.keyCode || event.which;
|
|
1374
1385
|
/** 组合键列表 */
|
|
1375
|
-
|
|
1386
|
+
const otherCodeList = [];
|
|
1376
1387
|
if (event.ctrlKey) {
|
|
1377
1388
|
otherCodeList.push("ctrl");
|
|
1378
1389
|
}
|
|
@@ -1410,29 +1421,27 @@ class DOMUtilsEvent {
|
|
|
1410
1421
|
return $ele?.innerHTML?.trim() === "";
|
|
1411
1422
|
});
|
|
1412
1423
|
}
|
|
1413
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1414
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1424
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1415
1425
|
// contains 语法
|
|
1416
|
-
|
|
1417
|
-
|
|
1426
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1427
|
+
const text = textMatch[2];
|
|
1418
1428
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1419
1429
|
return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
|
|
1420
1430
|
// @ts-ignore
|
|
1421
1431
|
return ($ele?.textContent || $ele?.innerText)?.includes(text);
|
|
1422
1432
|
});
|
|
1423
1433
|
}
|
|
1424
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1425
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1434
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1426
1435
|
// regexp 语法
|
|
1427
|
-
|
|
1436
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1428
1437
|
let pattern = textMatch[2];
|
|
1429
|
-
|
|
1438
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1430
1439
|
let flags = "";
|
|
1431
1440
|
if (flagMatch) {
|
|
1432
1441
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1433
1442
|
flags = flagMatch[3];
|
|
1434
1443
|
}
|
|
1435
|
-
|
|
1444
|
+
const regexp = new RegExp(pattern, flags);
|
|
1436
1445
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1437
1446
|
return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
|
|
1438
1447
|
// @ts-ignore
|
|
@@ -1475,11 +1484,10 @@ class DOMUtilsEvent {
|
|
|
1475
1484
|
selector = selector.replace(/:empty$/gi, "");
|
|
1476
1485
|
return $el.matches(selector) && $el?.innerHTML?.trim() === "";
|
|
1477
1486
|
}
|
|
1478
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1479
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1487
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1480
1488
|
// contains 语法
|
|
1481
|
-
|
|
1482
|
-
|
|
1489
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1490
|
+
const text = textMatch[2];
|
|
1483
1491
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1484
1492
|
// @ts-ignore
|
|
1485
1493
|
let content = $el?.textContent || $el?.innerText;
|
|
@@ -1488,18 +1496,17 @@ class DOMUtilsEvent {
|
|
|
1488
1496
|
}
|
|
1489
1497
|
return $el.matches(selector) && content?.includes(text);
|
|
1490
1498
|
}
|
|
1491
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1492
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1499
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1493
1500
|
// regexp 语法
|
|
1494
|
-
|
|
1501
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1495
1502
|
let pattern = textMatch[2];
|
|
1496
|
-
|
|
1503
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1497
1504
|
let flags = "";
|
|
1498
1505
|
if (flagMatch) {
|
|
1499
1506
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1500
1507
|
flags = flagMatch[3];
|
|
1501
1508
|
}
|
|
1502
|
-
|
|
1509
|
+
const regexp = new RegExp(pattern, flags);
|
|
1503
1510
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1504
1511
|
// @ts-ignore
|
|
1505
1512
|
let content = $el?.textContent || $el?.innerText;
|
|
@@ -1518,45 +1525,43 @@ class DOMUtilsEvent {
|
|
|
1518
1525
|
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1519
1526
|
// empty 语法
|
|
1520
1527
|
selector = selector.replace(/:empty$/gi, "");
|
|
1521
|
-
|
|
1528
|
+
const $closest = $el?.closest(selector);
|
|
1522
1529
|
if ($closest && $closest?.innerHTML?.trim() === "") {
|
|
1523
1530
|
return $closest;
|
|
1524
1531
|
}
|
|
1525
1532
|
return null;
|
|
1526
1533
|
}
|
|
1527
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1528
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1534
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1529
1535
|
// contains 语法
|
|
1530
|
-
|
|
1531
|
-
|
|
1536
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1537
|
+
const text = textMatch[2];
|
|
1532
1538
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1533
|
-
|
|
1539
|
+
const $closest = $el?.closest(selector);
|
|
1534
1540
|
if ($closest) {
|
|
1535
1541
|
// @ts-ignore
|
|
1536
|
-
|
|
1542
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1537
1543
|
if (typeof content === "string" && content.includes(text)) {
|
|
1538
1544
|
return $closest;
|
|
1539
1545
|
}
|
|
1540
1546
|
}
|
|
1541
1547
|
return null;
|
|
1542
1548
|
}
|
|
1543
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1544
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1549
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1545
1550
|
// regexp 语法
|
|
1546
|
-
|
|
1551
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1547
1552
|
let pattern = textMatch[2];
|
|
1548
|
-
|
|
1553
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1549
1554
|
let flags = "";
|
|
1550
1555
|
if (flagMatch) {
|
|
1551
1556
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1552
1557
|
flags = flagMatch[3];
|
|
1553
1558
|
}
|
|
1554
|
-
|
|
1559
|
+
const regexp = new RegExp(pattern, flags);
|
|
1555
1560
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1556
|
-
|
|
1561
|
+
const $closest = $el?.closest(selector);
|
|
1557
1562
|
if ($closest) {
|
|
1558
1563
|
// @ts-ignore
|
|
1559
|
-
|
|
1564
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1560
1565
|
if (typeof content === "string" && content.match(regexp)) {
|
|
1561
1566
|
return $closest;
|
|
1562
1567
|
}
|
|
@@ -1565,20 +1570,22 @@ class DOMUtilsEvent {
|
|
|
1565
1570
|
}
|
|
1566
1571
|
else {
|
|
1567
1572
|
// 普通语法
|
|
1568
|
-
|
|
1573
|
+
const $closest = $el?.closest(selector);
|
|
1569
1574
|
return $closest;
|
|
1570
1575
|
}
|
|
1571
1576
|
}
|
|
1572
1577
|
}
|
|
1573
1578
|
|
|
1579
|
+
const version = "1.6.8";
|
|
1580
|
+
|
|
1574
1581
|
class DOMUtils extends DOMUtilsEvent {
|
|
1575
1582
|
constructor(option) {
|
|
1576
1583
|
super(option);
|
|
1577
1584
|
}
|
|
1578
1585
|
/** 版本号 */
|
|
1579
|
-
version =
|
|
1586
|
+
version = version;
|
|
1580
1587
|
attr(element, attrName, attrValue) {
|
|
1581
|
-
|
|
1588
|
+
const DOMUtilsContext = this;
|
|
1582
1589
|
if (typeof element === "string") {
|
|
1583
1590
|
element = DOMUtilsContext.selectorAll(element);
|
|
1584
1591
|
}
|
|
@@ -1612,8 +1619,8 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1612
1619
|
property,
|
|
1613
1620
|
/** 自定义属性 */
|
|
1614
1621
|
attributes) {
|
|
1615
|
-
|
|
1616
|
-
|
|
1622
|
+
const DOMUtilsContext = this;
|
|
1623
|
+
const tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
|
|
1617
1624
|
if (typeof property === "string") {
|
|
1618
1625
|
DOMUtilsContext.html(tempElement, property);
|
|
1619
1626
|
return tempElement;
|
|
@@ -1625,7 +1632,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1625
1632
|
attributes = {};
|
|
1626
1633
|
}
|
|
1627
1634
|
Object.keys(property).forEach((key) => {
|
|
1628
|
-
|
|
1635
|
+
const value = property[key];
|
|
1629
1636
|
if (key === "innerHTML") {
|
|
1630
1637
|
DOMUtilsContext.html(tempElement, value);
|
|
1631
1638
|
return;
|
|
@@ -1647,18 +1654,16 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1647
1654
|
return tempElement;
|
|
1648
1655
|
}
|
|
1649
1656
|
css(element, property, value) {
|
|
1650
|
-
|
|
1657
|
+
const DOMUtilsContext = this;
|
|
1651
1658
|
/**
|
|
1652
1659
|
* 把纯数字没有px的加上
|
|
1653
1660
|
*/
|
|
1654
1661
|
function handlePixe(propertyName, propertyValue) {
|
|
1655
|
-
|
|
1662
|
+
const allowAddPixe = ["width", "height", "top", "left", "right", "bottom", "font-size"];
|
|
1656
1663
|
if (typeof propertyValue === "number") {
|
|
1657
1664
|
propertyValue = propertyValue.toString();
|
|
1658
1665
|
}
|
|
1659
|
-
if (typeof propertyValue === "string" &&
|
|
1660
|
-
allowAddPixe.includes(propertyName) &&
|
|
1661
|
-
propertyValue.match(/[0-9]$/gi)) {
|
|
1666
|
+
if (typeof propertyValue === "string" && allowAddPixe.includes(propertyName) && propertyValue.match(/[0-9]$/gi)) {
|
|
1662
1667
|
propertyValue = propertyValue + "px";
|
|
1663
1668
|
}
|
|
1664
1669
|
return propertyValue;
|
|
@@ -1690,10 +1695,9 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1690
1695
|
});
|
|
1691
1696
|
return;
|
|
1692
1697
|
}
|
|
1693
|
-
else ;
|
|
1694
1698
|
return;
|
|
1695
1699
|
}
|
|
1696
|
-
|
|
1700
|
+
const setStyleProperty = (propertyName, propertyValue) => {
|
|
1697
1701
|
if (typeof propertyValue === "string" && propertyValue.trim().endsWith("!important")) {
|
|
1698
1702
|
propertyValue = propertyValue
|
|
1699
1703
|
.trim()
|
|
@@ -1715,8 +1719,8 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1715
1719
|
}
|
|
1716
1720
|
}
|
|
1717
1721
|
else if (typeof property === "object") {
|
|
1718
|
-
for (
|
|
1719
|
-
|
|
1722
|
+
for (const prop in property) {
|
|
1723
|
+
const value = property[prop];
|
|
1720
1724
|
setStyleProperty(prop, value);
|
|
1721
1725
|
}
|
|
1722
1726
|
}
|
|
@@ -1726,7 +1730,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1726
1730
|
}
|
|
1727
1731
|
}
|
|
1728
1732
|
text(element, text) {
|
|
1729
|
-
|
|
1733
|
+
const DOMUtilsContext = this;
|
|
1730
1734
|
if (typeof element === "string") {
|
|
1731
1735
|
element = DOMUtilsContext.selectorAll(element);
|
|
1732
1736
|
}
|
|
@@ -1762,7 +1766,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1762
1766
|
}
|
|
1763
1767
|
}
|
|
1764
1768
|
html(element, html) {
|
|
1765
|
-
|
|
1769
|
+
const DOMUtilsContext = this;
|
|
1766
1770
|
if (typeof element === "string") {
|
|
1767
1771
|
element = DOMUtilsContext.selectorAll(element);
|
|
1768
1772
|
}
|
|
@@ -1800,19 +1804,19 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1800
1804
|
* 获取移动元素的transform偏移
|
|
1801
1805
|
*/
|
|
1802
1806
|
getTransform(element, isShow = false) {
|
|
1803
|
-
|
|
1807
|
+
const DOMUtilsContext = this;
|
|
1804
1808
|
let transform_left = 0;
|
|
1805
1809
|
let transform_top = 0;
|
|
1806
1810
|
if (!(isShow || (!isShow && DOMUtilsCommonUtils.isShow(element)))) {
|
|
1807
1811
|
/* 未显示 */
|
|
1808
|
-
|
|
1809
|
-
|
|
1812
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
1813
|
+
const transformInfo = DOMUtilsContext.getTransform(element, true);
|
|
1810
1814
|
recovery();
|
|
1811
1815
|
return transformInfo;
|
|
1812
1816
|
}
|
|
1813
|
-
|
|
1817
|
+
const elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
|
|
1814
1818
|
if (elementTransform != null && elementTransform !== "none" && elementTransform !== "") {
|
|
1815
|
-
|
|
1819
|
+
const elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
|
|
1816
1820
|
if (elementTransformSplit) {
|
|
1817
1821
|
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
1818
1822
|
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
@@ -1828,7 +1832,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1828
1832
|
};
|
|
1829
1833
|
}
|
|
1830
1834
|
val(element, value) {
|
|
1831
|
-
|
|
1835
|
+
const DOMUtilsContext = this;
|
|
1832
1836
|
if (typeof element === "string") {
|
|
1833
1837
|
element = DOMUtilsContext.selectorAll(element);
|
|
1834
1838
|
}
|
|
@@ -1868,7 +1872,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1868
1872
|
}
|
|
1869
1873
|
}
|
|
1870
1874
|
prop(element, propName, propValue) {
|
|
1871
|
-
|
|
1875
|
+
const DOMUtilsContext = this;
|
|
1872
1876
|
if (typeof element === "string") {
|
|
1873
1877
|
element = DOMUtilsContext.selectorAll(element);
|
|
1874
1878
|
}
|
|
@@ -1910,7 +1914,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1910
1914
|
* DOMUtils.removeAttr("a.xx","data-value")
|
|
1911
1915
|
* */
|
|
1912
1916
|
removeAttr(element, attrName) {
|
|
1913
|
-
|
|
1917
|
+
const DOMUtilsContext = this;
|
|
1914
1918
|
if (typeof element === "string") {
|
|
1915
1919
|
element = DOMUtilsContext.selectorAll(element);
|
|
1916
1920
|
}
|
|
@@ -1936,7 +1940,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1936
1940
|
* DOMUtils.removeClass("a.xx","xx")
|
|
1937
1941
|
*/
|
|
1938
1942
|
removeClass(element, className) {
|
|
1939
|
-
|
|
1943
|
+
const DOMUtilsContext = this;
|
|
1940
1944
|
if (typeof element === "string") {
|
|
1941
1945
|
element = DOMUtilsContext.selectorAll(element);
|
|
1942
1946
|
}
|
|
@@ -1973,7 +1977,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1973
1977
|
* DOMUtils.removeProp("a.xx","href")
|
|
1974
1978
|
* */
|
|
1975
1979
|
removeProp(element, propName) {
|
|
1976
|
-
|
|
1980
|
+
const DOMUtilsContext = this;
|
|
1977
1981
|
if (typeof element === "string") {
|
|
1978
1982
|
element = DOMUtilsContext.selectorAll(element);
|
|
1979
1983
|
}
|
|
@@ -1999,7 +2003,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
1999
2003
|
* DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
|
|
2000
2004
|
*/
|
|
2001
2005
|
replaceWith(element, newElement) {
|
|
2002
|
-
|
|
2006
|
+
const DOMUtilsContext = this;
|
|
2003
2007
|
if (typeof element === "string") {
|
|
2004
2008
|
element = DOMUtilsContext.selectorAll(element);
|
|
2005
2009
|
}
|
|
@@ -2016,7 +2020,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2016
2020
|
if (typeof newElement === "string") {
|
|
2017
2021
|
newElement = DOMUtilsContext.parseHTML(newElement, false, false);
|
|
2018
2022
|
}
|
|
2019
|
-
|
|
2023
|
+
const $parent = element.parentElement;
|
|
2020
2024
|
if ($parent) {
|
|
2021
2025
|
$parent.replaceChild(newElement, element);
|
|
2022
2026
|
}
|
|
@@ -2035,7 +2039,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2035
2039
|
* DOMUtils.addClass("a.xx","_vue_")
|
|
2036
2040
|
* */
|
|
2037
2041
|
addClass(element, className) {
|
|
2038
|
-
|
|
2042
|
+
const DOMUtilsContext = this;
|
|
2039
2043
|
if (typeof element === "string") {
|
|
2040
2044
|
element = DOMUtilsContext.selectorAll(element);
|
|
2041
2045
|
}
|
|
@@ -2065,7 +2069,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2065
2069
|
* @param className
|
|
2066
2070
|
*/
|
|
2067
2071
|
hasClass(element, className) {
|
|
2068
|
-
|
|
2072
|
+
const DOMUtilsContext = this;
|
|
2069
2073
|
if (typeof element === "string") {
|
|
2070
2074
|
element = DOMUtilsContext.selectorAll(element);
|
|
2071
2075
|
}
|
|
@@ -2104,7 +2108,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2104
2108
|
* DOMUtils.append("a.xx","'<b class="xx"></b>")
|
|
2105
2109
|
* */
|
|
2106
2110
|
append(element, content) {
|
|
2107
|
-
|
|
2111
|
+
const DOMUtilsContext = this;
|
|
2108
2112
|
if (typeof element === "string") {
|
|
2109
2113
|
element = DOMUtilsContext.selectorAll(element);
|
|
2110
2114
|
}
|
|
@@ -2136,7 +2140,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2136
2140
|
}
|
|
2137
2141
|
if (Array.isArray(content) || content instanceof NodeList) {
|
|
2138
2142
|
/* 数组 */
|
|
2139
|
-
|
|
2143
|
+
const fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
|
|
2140
2144
|
content.forEach((ele) => {
|
|
2141
2145
|
if (typeof ele === "string") {
|
|
2142
2146
|
// 转为元素
|
|
@@ -2160,7 +2164,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2160
2164
|
* DOMUtils.prepend("a.xx","'<b class="xx"></b>")
|
|
2161
2165
|
* */
|
|
2162
2166
|
prepend(element, content) {
|
|
2163
|
-
|
|
2167
|
+
const DOMUtilsContext = this;
|
|
2164
2168
|
if (typeof element === "string") {
|
|
2165
2169
|
element = DOMUtilsContext.selectorAll(element);
|
|
2166
2170
|
}
|
|
@@ -2184,12 +2188,12 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2184
2188
|
}
|
|
2185
2189
|
}
|
|
2186
2190
|
else {
|
|
2187
|
-
|
|
2191
|
+
const $firstChild = element.firstChild;
|
|
2188
2192
|
if ($firstChild == null) {
|
|
2189
2193
|
element.prepend(content);
|
|
2190
2194
|
}
|
|
2191
2195
|
else {
|
|
2192
|
-
element.insertBefore(content,
|
|
2196
|
+
element.insertBefore(content, $firstChild);
|
|
2193
2197
|
}
|
|
2194
2198
|
}
|
|
2195
2199
|
}
|
|
@@ -2203,7 +2207,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2203
2207
|
* DOMUtils.after("a.xx","'<b class="xx"></b>")
|
|
2204
2208
|
* */
|
|
2205
2209
|
after(element, content) {
|
|
2206
|
-
|
|
2210
|
+
const DOMUtilsContext = this;
|
|
2207
2211
|
if (typeof element === "string") {
|
|
2208
2212
|
element = DOMUtilsContext.selectorAll(element);
|
|
2209
2213
|
}
|
|
@@ -2221,14 +2225,14 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2221
2225
|
element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
2222
2226
|
}
|
|
2223
2227
|
else {
|
|
2224
|
-
|
|
2225
|
-
|
|
2228
|
+
const $parent = element.parentElement;
|
|
2229
|
+
const $nextSlibling = element.nextSibling;
|
|
2226
2230
|
if (!$parent || $nextSlibling) {
|
|
2227
2231
|
// 任意一个不行
|
|
2228
2232
|
element.after(content);
|
|
2229
2233
|
}
|
|
2230
2234
|
else {
|
|
2231
|
-
|
|
2235
|
+
$parent.insertBefore(content, $nextSlibling);
|
|
2232
2236
|
}
|
|
2233
2237
|
}
|
|
2234
2238
|
}
|
|
@@ -2242,7 +2246,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2242
2246
|
* DOMUtils.before("a.xx","'<b class="xx"></b>")
|
|
2243
2247
|
* */
|
|
2244
2248
|
before(element, content) {
|
|
2245
|
-
|
|
2249
|
+
const DOMUtilsContext = this;
|
|
2246
2250
|
if (typeof element === "string") {
|
|
2247
2251
|
element = DOMUtilsContext.selectorAll(element);
|
|
2248
2252
|
}
|
|
@@ -2260,7 +2264,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2260
2264
|
element.insertAdjacentHTML("beforebegin", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
2261
2265
|
}
|
|
2262
2266
|
else {
|
|
2263
|
-
|
|
2267
|
+
const $parent = element.parentElement;
|
|
2264
2268
|
if (!$parent) {
|
|
2265
2269
|
element.before(content);
|
|
2266
2270
|
}
|
|
@@ -2279,7 +2283,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2279
2283
|
* DOMUtils.remove("a.xx")
|
|
2280
2284
|
* */
|
|
2281
2285
|
remove(element) {
|
|
2282
|
-
|
|
2286
|
+
const DOMUtilsContext = this;
|
|
2283
2287
|
if (typeof element === "string") {
|
|
2284
2288
|
element = DOMUtilsContext.selectorAll(element);
|
|
2285
2289
|
}
|
|
@@ -2311,7 +2315,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2311
2315
|
* DOMUtils.empty("a.xx")
|
|
2312
2316
|
* */
|
|
2313
2317
|
empty(element) {
|
|
2314
|
-
|
|
2318
|
+
const DOMUtilsContext = this;
|
|
2315
2319
|
if (typeof element === "string") {
|
|
2316
2320
|
element = DOMUtilsContext.selectorAll(element);
|
|
2317
2321
|
}
|
|
@@ -2342,14 +2346,14 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2342
2346
|
* > 0
|
|
2343
2347
|
*/
|
|
2344
2348
|
offset(element) {
|
|
2345
|
-
|
|
2349
|
+
const DOMUtilsContext = this;
|
|
2346
2350
|
if (typeof element === "string") {
|
|
2347
2351
|
element = DOMUtilsContext.selector(element);
|
|
2348
2352
|
}
|
|
2349
2353
|
if (element == null) {
|
|
2350
2354
|
return;
|
|
2351
2355
|
}
|
|
2352
|
-
|
|
2356
|
+
const rect = element.getBoundingClientRect();
|
|
2353
2357
|
return {
|
|
2354
2358
|
/** y轴偏移 */
|
|
2355
2359
|
top: rect.top + DOMUtilsContext.windowApi.globalThis.scrollY,
|
|
@@ -2358,14 +2362,10 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2358
2362
|
};
|
|
2359
2363
|
}
|
|
2360
2364
|
width(element, isShow = false) {
|
|
2361
|
-
|
|
2365
|
+
const DOMUtilsContext = this;
|
|
2362
2366
|
if (typeof element === "string") {
|
|
2363
2367
|
element = DOMUtilsContext.selector(element);
|
|
2364
2368
|
}
|
|
2365
|
-
if (element == null) {
|
|
2366
|
-
// @ts-ignore
|
|
2367
|
-
return;
|
|
2368
|
-
}
|
|
2369
2369
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2370
2370
|
return DOMUtilsContext.windowApi.window.document.documentElement.clientWidth;
|
|
2371
2371
|
}
|
|
@@ -2384,11 +2384,11 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2384
2384
|
}
|
|
2385
2385
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
|
|
2386
2386
|
if (element.offsetWidth > 0) {
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2387
|
+
const borderLeftWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderLeftWidth");
|
|
2388
|
+
const borderRightWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderRightWidth");
|
|
2389
|
+
const paddingLeft = DOMUtilsCommonUtils.getStyleValue(element, "paddingLeft");
|
|
2390
|
+
const paddingRight = DOMUtilsCommonUtils.getStyleValue(element, "paddingRight");
|
|
2391
|
+
const backHeight = parseFloat(element.offsetWidth.toString()) -
|
|
2392
2392
|
parseFloat(borderLeftWidth.toString()) -
|
|
2393
2393
|
parseFloat(borderRightWidth.toString()) -
|
|
2394
2394
|
parseFloat(paddingLeft.toString()) -
|
|
@@ -2400,24 +2400,20 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2400
2400
|
else {
|
|
2401
2401
|
/* 未显示 */
|
|
2402
2402
|
element = element;
|
|
2403
|
-
|
|
2404
|
-
|
|
2403
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2404
|
+
const width = DOMUtilsContext.width(element, true);
|
|
2405
2405
|
recovery();
|
|
2406
2406
|
return width;
|
|
2407
2407
|
}
|
|
2408
2408
|
}
|
|
2409
2409
|
height(element, isShow = false) {
|
|
2410
|
-
|
|
2410
|
+
const DOMUtilsContext = this;
|
|
2411
2411
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2412
2412
|
return DOMUtilsContext.windowApi.window.document.documentElement.clientHeight;
|
|
2413
2413
|
}
|
|
2414
2414
|
if (typeof element === "string") {
|
|
2415
2415
|
element = DOMUtilsContext.selector(element);
|
|
2416
2416
|
}
|
|
2417
|
-
if (element == null) {
|
|
2418
|
-
// @ts-ignore
|
|
2419
|
-
return;
|
|
2420
|
-
}
|
|
2421
2417
|
if (element.nodeType === 9) {
|
|
2422
2418
|
element = element;
|
|
2423
2419
|
/* Document文档节点 */
|
|
@@ -2433,11 +2429,11 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2433
2429
|
}
|
|
2434
2430
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
|
|
2435
2431
|
if (element.offsetHeight > 0) {
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2432
|
+
const borderTopWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderTopWidth");
|
|
2433
|
+
const borderBottomWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderBottomWidth");
|
|
2434
|
+
const paddingTop = DOMUtilsCommonUtils.getStyleValue(element, "paddingTop");
|
|
2435
|
+
const paddingBottom = DOMUtilsCommonUtils.getStyleValue(element, "paddingBottom");
|
|
2436
|
+
const backHeight = parseFloat(element.offsetHeight.toString()) -
|
|
2441
2437
|
parseFloat(borderTopWidth.toString()) -
|
|
2442
2438
|
parseFloat(borderBottomWidth.toString()) -
|
|
2443
2439
|
parseFloat(paddingTop.toString()) -
|
|
@@ -2449,60 +2445,52 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2449
2445
|
else {
|
|
2450
2446
|
/* 未显示 */
|
|
2451
2447
|
element = element;
|
|
2452
|
-
|
|
2453
|
-
|
|
2448
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2449
|
+
const height = DOMUtilsContext.height(element, true);
|
|
2454
2450
|
recovery();
|
|
2455
2451
|
return height;
|
|
2456
2452
|
}
|
|
2457
2453
|
}
|
|
2458
2454
|
outerWidth(element, isShow = false) {
|
|
2459
|
-
|
|
2455
|
+
const DOMUtilsContext = this;
|
|
2460
2456
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2461
2457
|
return DOMUtilsContext.windowApi.window.innerWidth;
|
|
2462
2458
|
}
|
|
2463
2459
|
if (typeof element === "string") {
|
|
2464
2460
|
element = DOMUtilsContext.selector(element);
|
|
2465
2461
|
}
|
|
2466
|
-
if (element == null) {
|
|
2467
|
-
// @ts-ignore
|
|
2468
|
-
return;
|
|
2469
|
-
}
|
|
2470
2462
|
element = element;
|
|
2471
2463
|
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2464
|
+
const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
|
|
2465
|
+
const marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
|
|
2466
|
+
const marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
|
|
2475
2467
|
return element.offsetWidth + marginLeft + marginRight;
|
|
2476
2468
|
}
|
|
2477
2469
|
else {
|
|
2478
|
-
|
|
2479
|
-
|
|
2470
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2471
|
+
const outerWidth = DOMUtilsContext.outerWidth(element, true);
|
|
2480
2472
|
recovery();
|
|
2481
2473
|
return outerWidth;
|
|
2482
2474
|
}
|
|
2483
2475
|
}
|
|
2484
2476
|
outerHeight(element, isShow = false) {
|
|
2485
|
-
|
|
2477
|
+
const DOMUtilsContext = this;
|
|
2486
2478
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2487
2479
|
return DOMUtilsContext.windowApi.window.innerHeight;
|
|
2488
2480
|
}
|
|
2489
2481
|
if (typeof element === "string") {
|
|
2490
2482
|
element = DOMUtilsContext.selector(element);
|
|
2491
2483
|
}
|
|
2492
|
-
if (element == null) {
|
|
2493
|
-
// @ts-ignore
|
|
2494
|
-
return;
|
|
2495
|
-
}
|
|
2496
2484
|
element = element;
|
|
2497
2485
|
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2486
|
+
const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
|
|
2487
|
+
const marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
|
|
2488
|
+
const marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
|
|
2501
2489
|
return element.offsetHeight + marginTop + marginBottom;
|
|
2502
2490
|
}
|
|
2503
2491
|
else {
|
|
2504
|
-
|
|
2505
|
-
|
|
2492
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2493
|
+
const outerHeight = DOMUtilsContext.outerHeight(element, true);
|
|
2506
2494
|
recovery();
|
|
2507
2495
|
return outerHeight;
|
|
2508
2496
|
}
|
|
@@ -2520,7 +2508,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2520
2508
|
* })
|
|
2521
2509
|
*/
|
|
2522
2510
|
animate(element, styles, duration = 1000, callback = null) {
|
|
2523
|
-
|
|
2511
|
+
const DOMUtilsContext = this;
|
|
2524
2512
|
if (typeof element === "string") {
|
|
2525
2513
|
element = DOMUtilsContext.selectorAll(element);
|
|
2526
2514
|
}
|
|
@@ -2546,21 +2534,20 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2546
2534
|
if (Object.keys(styles).length === 0) {
|
|
2547
2535
|
throw new Error("styles must contain at least one property");
|
|
2548
2536
|
}
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
for (
|
|
2553
|
-
from[prop] =
|
|
2554
|
-
element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
2537
|
+
const start = performance.now();
|
|
2538
|
+
const from = {};
|
|
2539
|
+
const to = {};
|
|
2540
|
+
for (const prop in styles) {
|
|
2541
|
+
from[prop] = element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
2555
2542
|
to[prop] = styles[prop];
|
|
2556
2543
|
}
|
|
2557
|
-
|
|
2558
|
-
|
|
2544
|
+
const timer = DOMUtilsCommonUtils.setInterval(function () {
|
|
2545
|
+
const timePassed = performance.now() - start;
|
|
2559
2546
|
let progress = timePassed / duration;
|
|
2560
2547
|
if (progress > 1) {
|
|
2561
2548
|
progress = 1;
|
|
2562
2549
|
}
|
|
2563
|
-
for (
|
|
2550
|
+
for (const prop in styles) {
|
|
2564
2551
|
element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
|
|
2565
2552
|
}
|
|
2566
2553
|
if (progress === 1) {
|
|
@@ -2580,7 +2567,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2580
2567
|
* DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
|
|
2581
2568
|
*/
|
|
2582
2569
|
wrap(element, wrapperHTML) {
|
|
2583
|
-
|
|
2570
|
+
const DOMUtilsContext = this;
|
|
2584
2571
|
if (typeof element === "string") {
|
|
2585
2572
|
element = DOMUtilsContext.selectorAll(element);
|
|
2586
2573
|
}
|
|
@@ -2596,17 +2583,17 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2596
2583
|
}
|
|
2597
2584
|
element = element;
|
|
2598
2585
|
// 创建一个新的div元素,并将wrapperHTML作为其innerHTML
|
|
2599
|
-
|
|
2586
|
+
const wrapper = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2600
2587
|
DOMUtilsContext.html(wrapper, wrapperHTML);
|
|
2601
|
-
|
|
2588
|
+
const wrapperFirstChild = wrapper.firstChild;
|
|
2602
2589
|
// 将要包裹的元素插入目标元素前面
|
|
2603
|
-
|
|
2590
|
+
const parentElement = element.parentElement;
|
|
2604
2591
|
parentElement.insertBefore(wrapperFirstChild, element);
|
|
2605
2592
|
// 将要包裹的元素移动到wrapper中
|
|
2606
2593
|
wrapperFirstChild.appendChild(element);
|
|
2607
2594
|
}
|
|
2608
2595
|
prev(element) {
|
|
2609
|
-
|
|
2596
|
+
const DOMUtilsContext = this;
|
|
2610
2597
|
if (typeof element === "string") {
|
|
2611
2598
|
element = DOMUtilsContext.selector(element);
|
|
2612
2599
|
}
|
|
@@ -2616,7 +2603,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2616
2603
|
return element.previousElementSibling;
|
|
2617
2604
|
}
|
|
2618
2605
|
next(element) {
|
|
2619
|
-
|
|
2606
|
+
const DOMUtilsContext = this;
|
|
2620
2607
|
if (typeof element === "string") {
|
|
2621
2608
|
element = DOMUtilsContext.selector(element);
|
|
2622
2609
|
}
|
|
@@ -2631,7 +2618,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2631
2618
|
* let DOMUtils = window.DOMUtils.noConflict()
|
|
2632
2619
|
*/
|
|
2633
2620
|
noConflict() {
|
|
2634
|
-
|
|
2621
|
+
const DOMUtilsContext = this;
|
|
2635
2622
|
if (DOMUtilsContext.windowApi.window.DOMUtils) {
|
|
2636
2623
|
DOMUtilsCommonUtils.delete(window, "DOMUtils");
|
|
2637
2624
|
}
|
|
@@ -2639,7 +2626,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2639
2626
|
return this;
|
|
2640
2627
|
}
|
|
2641
2628
|
siblings(element) {
|
|
2642
|
-
|
|
2629
|
+
const DOMUtilsContext = this;
|
|
2643
2630
|
if (typeof element === "string") {
|
|
2644
2631
|
element = DOMUtilsContext.selector(element);
|
|
2645
2632
|
}
|
|
@@ -2659,7 +2646,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2659
2646
|
* > <div ...>....</div>
|
|
2660
2647
|
*/
|
|
2661
2648
|
parent(element) {
|
|
2662
|
-
|
|
2649
|
+
const DOMUtilsContext = this;
|
|
2663
2650
|
if (typeof element === "string") {
|
|
2664
2651
|
element = DOMUtilsContext.selector(element);
|
|
2665
2652
|
}
|
|
@@ -2667,7 +2654,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2667
2654
|
return;
|
|
2668
2655
|
}
|
|
2669
2656
|
if (DOMUtilsCommonUtils.isNodeList(element)) {
|
|
2670
|
-
|
|
2657
|
+
const resultArray = [];
|
|
2671
2658
|
element.forEach(($ele) => {
|
|
2672
2659
|
resultArray.push(DOMUtilsContext.parent($ele));
|
|
2673
2660
|
});
|
|
@@ -2678,11 +2665,11 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2678
2665
|
}
|
|
2679
2666
|
}
|
|
2680
2667
|
parseHTML(html, useParser = false, isComplete = false) {
|
|
2681
|
-
|
|
2668
|
+
const DOMUtilsContext = this;
|
|
2682
2669
|
// 去除html前后的空格
|
|
2683
2670
|
html = html.trim();
|
|
2684
2671
|
function parseHTMLByDOMParser() {
|
|
2685
|
-
|
|
2672
|
+
const parser = new DOMParser();
|
|
2686
2673
|
if (isComplete) {
|
|
2687
2674
|
return parser.parseFromString(html, "text/html");
|
|
2688
2675
|
}
|
|
@@ -2691,7 +2678,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2691
2678
|
}
|
|
2692
2679
|
}
|
|
2693
2680
|
function parseHTMLByCreateDom() {
|
|
2694
|
-
|
|
2681
|
+
const tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2695
2682
|
DOMUtilsContext.html(tempDIV, html);
|
|
2696
2683
|
if (isComplete) {
|
|
2697
2684
|
return tempDIV;
|
|
@@ -2716,7 +2703,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2716
2703
|
*/
|
|
2717
2704
|
serialize($form) {
|
|
2718
2705
|
const elements = $form.elements;
|
|
2719
|
-
|
|
2706
|
+
const serializedArray = [];
|
|
2720
2707
|
for (let i = 0; i < elements.length; i++) {
|
|
2721
2708
|
const element = elements[i];
|
|
2722
2709
|
if (element.name &&
|
|
@@ -2755,7 +2742,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2755
2742
|
* DOMUtils.show("a.xx")
|
|
2756
2743
|
*/
|
|
2757
2744
|
show(target, checkVisiblie = true) {
|
|
2758
|
-
|
|
2745
|
+
const DOMUtilsContext = this;
|
|
2759
2746
|
if (target == null) {
|
|
2760
2747
|
return;
|
|
2761
2748
|
}
|
|
@@ -2792,7 +2779,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2792
2779
|
* DOMUtils.hide("a.xx")
|
|
2793
2780
|
*/
|
|
2794
2781
|
hide(target, checkVisiblie = true) {
|
|
2795
|
-
|
|
2782
|
+
const DOMUtilsContext = this;
|
|
2796
2783
|
if (target == null) {
|
|
2797
2784
|
return;
|
|
2798
2785
|
}
|
|
@@ -2834,7 +2821,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2834
2821
|
if (element == null) {
|
|
2835
2822
|
return;
|
|
2836
2823
|
}
|
|
2837
|
-
|
|
2824
|
+
const DOMUtilsContext = this;
|
|
2838
2825
|
if (typeof element === "string") {
|
|
2839
2826
|
element = DOMUtilsContext.selectorAll(element);
|
|
2840
2827
|
}
|
|
@@ -2852,7 +2839,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2852
2839
|
function step(timestamp) {
|
|
2853
2840
|
if (!start)
|
|
2854
2841
|
start = timestamp;
|
|
2855
|
-
|
|
2842
|
+
const progress = timestamp - start;
|
|
2856
2843
|
element = element;
|
|
2857
2844
|
element.style.opacity = Math.min(progress / duration, 1).toString();
|
|
2858
2845
|
if (progress < duration) {
|
|
@@ -2882,7 +2869,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2882
2869
|
* })
|
|
2883
2870
|
*/
|
|
2884
2871
|
fadeOut(element, duration = 400, callback) {
|
|
2885
|
-
|
|
2872
|
+
const DOMUtilsContext = this;
|
|
2886
2873
|
if (element == null) {
|
|
2887
2874
|
return;
|
|
2888
2875
|
}
|
|
@@ -2902,7 +2889,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2902
2889
|
function step(timestamp) {
|
|
2903
2890
|
if (!start)
|
|
2904
2891
|
start = timestamp;
|
|
2905
|
-
|
|
2892
|
+
const progress = timestamp - start;
|
|
2906
2893
|
element = element;
|
|
2907
2894
|
element.style.opacity = Math.max(1 - progress / duration, 0).toString();
|
|
2908
2895
|
if (progress < duration) {
|
|
@@ -2928,7 +2915,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2928
2915
|
* DOMUtils.toggle("a.xx")
|
|
2929
2916
|
*/
|
|
2930
2917
|
toggle(element, checkVisiblie) {
|
|
2931
|
-
|
|
2918
|
+
const DOMUtilsContext = this;
|
|
2932
2919
|
if (typeof element === "string") {
|
|
2933
2920
|
element = DOMUtilsContext.selectorAll(element);
|
|
2934
2921
|
}
|
|
@@ -2966,7 +2953,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2966
2953
|
* DOMUtils.getTextBoundingRect(document.querySelector("input"));
|
|
2967
2954
|
*/
|
|
2968
2955
|
getTextBoundingRect($input, selectionStart, selectionEnd) {
|
|
2969
|
-
|
|
2956
|
+
const DOMUtilsContext = this;
|
|
2970
2957
|
// Basic parameter validation
|
|
2971
2958
|
if (!$input || !("value" in $input))
|
|
2972
2959
|
return $input;
|
|
@@ -2995,18 +2982,20 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
2995
2982
|
else
|
|
2996
2983
|
selectionEnd = Math.min($input.value.length, selectionEnd);
|
|
2997
2984
|
// If available (thus IE), use the createTextRange method
|
|
2998
|
-
// @ts-ignore
|
|
2999
2985
|
if (typeof $input.createTextRange == "function") {
|
|
3000
|
-
|
|
2986
|
+
const range = $input.createTextRange();
|
|
3001
2987
|
range.collapse(true);
|
|
3002
2988
|
range.moveStart("character", selectionStart);
|
|
3003
2989
|
range.moveEnd("character", selectionEnd - selectionStart);
|
|
3004
2990
|
return range.getBoundingClientRect();
|
|
3005
2991
|
}
|
|
3006
2992
|
// createTextRange is not supported, create a fake text range
|
|
3007
|
-
|
|
2993
|
+
const offset = getInputOffset(), width = getInputCSS("width", true), height = getInputCSS("height", true);
|
|
2994
|
+
let topPos = offset.top;
|
|
2995
|
+
let leftPos = offset.left;
|
|
3008
2996
|
// Styles to simulate a node in an input field
|
|
3009
|
-
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;"
|
|
2997
|
+
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;";
|
|
2998
|
+
const listOfModifiers = [
|
|
3010
2999
|
"direction",
|
|
3011
3000
|
"font-family",
|
|
3012
3001
|
"font-size",
|
|
@@ -3028,16 +3017,15 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3028
3017
|
leftPos += getInputCSS("border-left-width", true);
|
|
3029
3018
|
leftPos += 1; //Seems to be necessary
|
|
3030
3019
|
for (let index = 0; index < listOfModifiers.length; index++) {
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
cssDefaultStyles += property + ":" + getInputCSS(property) + ";";
|
|
3020
|
+
const property = listOfModifiers[index];
|
|
3021
|
+
cssDefaultStyles += property + ":" + getInputCSS(property, false) + ";";
|
|
3034
3022
|
}
|
|
3035
3023
|
// End of CSS variable checks
|
|
3036
3024
|
// 不能为空,不然获取不到高度
|
|
3037
|
-
|
|
3025
|
+
const text = $input.value || "G", textLen = text.length, fakeClone = DOMUtilsContext.windowApi.document.createElement("div");
|
|
3038
3026
|
if (selectionStart > 0)
|
|
3039
3027
|
appendPart(0, selectionStart);
|
|
3040
|
-
|
|
3028
|
+
const fakeRange = appendPart(selectionStart, selectionEnd);
|
|
3041
3029
|
if (textLen > selectionEnd)
|
|
3042
3030
|
appendPart(selectionEnd, textLen);
|
|
3043
3031
|
// Styles to inherit the font styles of the element
|
|
@@ -3049,7 +3037,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3049
3037
|
fakeClone.style.width = width + "px";
|
|
3050
3038
|
fakeClone.style.height = height + "px";
|
|
3051
3039
|
DOMUtilsContext.windowApi.document.body.appendChild(fakeClone);
|
|
3052
|
-
|
|
3040
|
+
const returnValue = fakeRange.getBoundingClientRect(); //Get rect
|
|
3053
3041
|
fakeClone?.parentNode?.removeChild(fakeClone); //Remove temp
|
|
3054
3042
|
return returnValue;
|
|
3055
3043
|
// Local functions for readability of the previous code
|
|
@@ -3060,7 +3048,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3060
3048
|
* @returns
|
|
3061
3049
|
*/
|
|
3062
3050
|
function appendPart(start, end) {
|
|
3063
|
-
|
|
3051
|
+
const span = DOMUtilsContext.windowApi.document.createElement("span");
|
|
3064
3052
|
span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
|
|
3065
3053
|
span.textContent = text.substring(start, end);
|
|
3066
3054
|
fakeClone.appendChild(span);
|
|
@@ -3068,13 +3056,13 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3068
3056
|
}
|
|
3069
3057
|
// Computing offset position
|
|
3070
3058
|
function getInputOffset() {
|
|
3071
|
-
|
|
3059
|
+
const body = DOMUtilsContext.windowApi.document.body, win = DOMUtilsContext.windowApi.document.defaultView, docElem = DOMUtilsContext.windowApi.document.documentElement, $box = DOMUtilsContext.windowApi.document.createElement("div");
|
|
3072
3060
|
$box.style.paddingLeft = $box.style.width = "1px";
|
|
3073
3061
|
body.appendChild($box);
|
|
3074
|
-
|
|
3062
|
+
const isBoxModel = $box.offsetWidth == 2;
|
|
3075
3063
|
body.removeChild($box);
|
|
3076
|
-
|
|
3077
|
-
|
|
3064
|
+
const $boxRect = $input.getBoundingClientRect();
|
|
3065
|
+
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;
|
|
3078
3066
|
return {
|
|
3079
3067
|
top: $boxRect.top + scrollTop - clientTop,
|
|
3080
3068
|
left: $boxRect.left + scrollLeft - clientLeft,
|
|
@@ -3087,10 +3075,13 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3087
3075
|
* @returns
|
|
3088
3076
|
*/
|
|
3089
3077
|
function getInputCSS(prop, isNumber) {
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3078
|
+
const val = DOMUtilsContext.windowApi.document.defaultView.getComputedStyle($input, null).getPropertyValue(prop);
|
|
3079
|
+
if (isNumber) {
|
|
3080
|
+
return parseFloat(val);
|
|
3081
|
+
}
|
|
3082
|
+
else {
|
|
3083
|
+
return val;
|
|
3084
|
+
}
|
|
3094
3085
|
}
|
|
3095
3086
|
}
|
|
3096
3087
|
/** 获取 animationend 在各个浏览器的兼容名 */
|
|
@@ -3102,7 +3093,7 @@ class DOMUtils extends DOMUtilsEvent {
|
|
|
3102
3093
|
return DOMUtilsCommonUtils.getTransitionEndNameList();
|
|
3103
3094
|
}
|
|
3104
3095
|
}
|
|
3105
|
-
|
|
3096
|
+
const domUtils = new DOMUtils();
|
|
3106
3097
|
|
|
3107
3098
|
module.exports = domUtils;
|
|
3108
3099
|
//# sourceMappingURL=index.cjs.js.map
|