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