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