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