@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.system.js
CHANGED
|
@@ -328,10 +328,8 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
328
328
|
* 获取安全的html
|
|
329
329
|
*/
|
|
330
330
|
getSafeHTML(text) {
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
// @ts-ignore
|
|
334
|
-
const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
|
|
331
|
+
if (window.trustedTypes) {
|
|
332
|
+
const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
|
|
335
333
|
createHTML: (html) => html,
|
|
336
334
|
});
|
|
337
335
|
return policy.createHTML(text);
|
|
@@ -354,7 +352,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
354
352
|
* @param element
|
|
355
353
|
*/
|
|
356
354
|
showElement(element) {
|
|
357
|
-
|
|
355
|
+
const dupNode = element.cloneNode(true);
|
|
358
356
|
dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
|
|
359
357
|
this.windowApi.document.documentElement.appendChild(dupNode);
|
|
360
358
|
return {
|
|
@@ -385,7 +383,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
385
383
|
}
|
|
386
384
|
styles = view.getComputedStyle(element);
|
|
387
385
|
}
|
|
388
|
-
|
|
386
|
+
const value = parseFloat(styles[styleName]);
|
|
389
387
|
if (isNaN(value)) {
|
|
390
388
|
return 0;
|
|
391
389
|
}
|
|
@@ -450,7 +448,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
450
448
|
try {
|
|
451
449
|
return setTimeout$1(callback, timeout);
|
|
452
450
|
}
|
|
453
|
-
catch
|
|
451
|
+
catch {
|
|
454
452
|
return this.windowApi.setTimeout(callback, timeout);
|
|
455
453
|
}
|
|
456
454
|
},
|
|
@@ -463,7 +461,8 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
463
461
|
clearTimeout$1(timeId);
|
|
464
462
|
}
|
|
465
463
|
}
|
|
466
|
-
catch
|
|
464
|
+
catch {
|
|
465
|
+
// TODO
|
|
467
466
|
}
|
|
468
467
|
finally {
|
|
469
468
|
this.windowApi.clearTimeout(timeId);
|
|
@@ -476,7 +475,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
476
475
|
try {
|
|
477
476
|
return setInterval$1(callback, timeout);
|
|
478
477
|
}
|
|
479
|
-
catch
|
|
478
|
+
catch {
|
|
480
479
|
return this.windowApi.setInterval(callback, timeout);
|
|
481
480
|
}
|
|
482
481
|
},
|
|
@@ -489,7 +488,8 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
489
488
|
clearInterval$1(timeId);
|
|
490
489
|
}
|
|
491
490
|
}
|
|
492
|
-
catch
|
|
491
|
+
catch {
|
|
492
|
+
// TODO
|
|
493
493
|
}
|
|
494
494
|
finally {
|
|
495
495
|
this.windowApi.clearInterval(timeId);
|
|
@@ -537,7 +537,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
537
537
|
* @param option
|
|
538
538
|
*/
|
|
539
539
|
function getOption(args, startIndex, option) {
|
|
540
|
-
|
|
540
|
+
const currentParam = args[startIndex];
|
|
541
541
|
if (typeof currentParam === "boolean") {
|
|
542
542
|
option.capture = currentParam;
|
|
543
543
|
if (typeof args[startIndex + 1] === "boolean") {
|
|
@@ -559,8 +559,9 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
559
559
|
}
|
|
560
560
|
return option;
|
|
561
561
|
}
|
|
562
|
-
|
|
563
|
-
|
|
562
|
+
const DOMUtilsContext = this;
|
|
563
|
+
// eslint-disable-next-line prefer-rest-params
|
|
564
|
+
const args = arguments;
|
|
564
565
|
if (typeof element === "string") {
|
|
565
566
|
element = DOMUtilsContext.selectorAll(element);
|
|
566
567
|
}
|
|
@@ -636,14 +637,14 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
636
637
|
totalParent = DOMUtilsContext.windowApi.document.documentElement;
|
|
637
638
|
}
|
|
638
639
|
}
|
|
639
|
-
|
|
640
|
+
const findValue = selectorList.find((selectorItem) => {
|
|
640
641
|
// 判断目标元素是否匹配选择器
|
|
641
642
|
if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
|
|
642
643
|
/* 当前目标可以被selector所匹配到 */
|
|
643
644
|
return true;
|
|
644
645
|
}
|
|
645
646
|
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
|
|
646
|
-
|
|
647
|
+
const $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
|
|
647
648
|
if ($closestMatches && totalParent?.contains($closestMatches)) {
|
|
648
649
|
eventTarget = $closestMatches;
|
|
649
650
|
return true;
|
|
@@ -659,7 +660,9 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
659
660
|
},
|
|
660
661
|
});
|
|
661
662
|
}
|
|
662
|
-
catch
|
|
663
|
+
catch {
|
|
664
|
+
// TODO
|
|
665
|
+
}
|
|
663
666
|
listenerCallBack.call(eventTarget, event, eventTarget);
|
|
664
667
|
checkOptionOnceToRemoveEventListener();
|
|
665
668
|
}
|
|
@@ -674,7 +677,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
674
677
|
eventTypeList.forEach((eventName) => {
|
|
675
678
|
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
676
679
|
/* 获取对象上的事件 */
|
|
677
|
-
|
|
680
|
+
const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
|
|
678
681
|
/* 初始化对象上的xx事件 */
|
|
679
682
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
680
683
|
elementEvents[eventName].push({
|
|
@@ -696,7 +699,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
696
699
|
* @param option
|
|
697
700
|
*/
|
|
698
701
|
function getOption(args1, startIndex, option) {
|
|
699
|
-
|
|
702
|
+
const currentParam = args1[startIndex];
|
|
700
703
|
if (typeof currentParam === "boolean") {
|
|
701
704
|
option.capture = currentParam;
|
|
702
705
|
}
|
|
@@ -705,8 +708,9 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
705
708
|
}
|
|
706
709
|
return option;
|
|
707
710
|
}
|
|
708
|
-
|
|
709
|
-
|
|
711
|
+
const DOMUtilsContext = this;
|
|
712
|
+
// eslint-disable-next-line prefer-rest-params
|
|
713
|
+
const args = arguments;
|
|
710
714
|
if (typeof element === "string") {
|
|
711
715
|
element = DOMUtilsContext.selectorAll(element);
|
|
712
716
|
}
|
|
@@ -768,14 +772,14 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
768
772
|
}
|
|
769
773
|
elementList.forEach((elementItem) => {
|
|
770
774
|
/* 获取对象上的事件 */
|
|
771
|
-
|
|
775
|
+
const elementEvents = Reflect.get(elementItem, DOMUtilsData.SymbolEvents) || {};
|
|
772
776
|
eventTypeList.forEach((eventName) => {
|
|
773
777
|
let handlers = elementEvents[eventName] || [];
|
|
774
778
|
if (typeof filter === "function") {
|
|
775
779
|
handlers = handlers.filter(filter);
|
|
776
780
|
}
|
|
777
781
|
for (let index = 0; index < handlers.length; index++) {
|
|
778
|
-
|
|
782
|
+
const handler = handlers[index];
|
|
779
783
|
let flag = true;
|
|
780
784
|
if (flag && listenerCallBack && handler.originCallBack !== listenerCallBack) {
|
|
781
785
|
// callback不同
|
|
@@ -810,7 +814,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
810
814
|
* @param eventType (可选)需要取消监听的事件
|
|
811
815
|
*/
|
|
812
816
|
offAll(element, eventType) {
|
|
813
|
-
|
|
817
|
+
const DOMUtilsContext = this;
|
|
814
818
|
if (typeof element === "string") {
|
|
815
819
|
element = DOMUtilsContext.selectorAll(element);
|
|
816
820
|
}
|
|
@@ -836,10 +840,10 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
836
840
|
if (!symbolEvents.toString().startsWith("Symbol(events_")) {
|
|
837
841
|
return;
|
|
838
842
|
}
|
|
839
|
-
|
|
840
|
-
|
|
843
|
+
const elementEvents = elementItem[symbolEvents] || {};
|
|
844
|
+
const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
|
|
841
845
|
iterEventNameList.forEach((eventName) => {
|
|
842
|
-
|
|
846
|
+
const handlers = elementEvents[eventName];
|
|
843
847
|
if (!handlers) {
|
|
844
848
|
return;
|
|
845
849
|
}
|
|
@@ -848,7 +852,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
848
852
|
capture: handler["option"]["capture"],
|
|
849
853
|
});
|
|
850
854
|
}
|
|
851
|
-
|
|
855
|
+
const events = Reflect.get(elementItem, symbolEvents);
|
|
852
856
|
DOMUtilsCommonUtils.delete(events, eventName);
|
|
853
857
|
});
|
|
854
858
|
});
|
|
@@ -866,7 +870,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
866
870
|
if (typeof callback !== "function") {
|
|
867
871
|
return;
|
|
868
872
|
}
|
|
869
|
-
|
|
873
|
+
const DOMUtilsContext = this;
|
|
870
874
|
/**
|
|
871
875
|
* 检测文档是否加载完毕
|
|
872
876
|
*/
|
|
@@ -881,7 +885,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
881
885
|
return false;
|
|
882
886
|
}
|
|
883
887
|
}
|
|
884
|
-
catch
|
|
888
|
+
catch {
|
|
885
889
|
return false;
|
|
886
890
|
}
|
|
887
891
|
}
|
|
@@ -892,7 +896,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
892
896
|
removeDomReadyListener();
|
|
893
897
|
callback();
|
|
894
898
|
}
|
|
895
|
-
|
|
899
|
+
const targetList = [
|
|
896
900
|
{
|
|
897
901
|
target: DOMUtilsContext.windowApi.document,
|
|
898
902
|
eventType: "DOMContentLoaded",
|
|
@@ -909,7 +913,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
909
913
|
*/
|
|
910
914
|
function addDomReadyListener() {
|
|
911
915
|
for (let index = 0; index < targetList.length; index++) {
|
|
912
|
-
|
|
916
|
+
const item = targetList[index];
|
|
913
917
|
item.target.addEventListener(item.eventType, item.callback);
|
|
914
918
|
}
|
|
915
919
|
}
|
|
@@ -918,7 +922,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
918
922
|
*/
|
|
919
923
|
function removeDomReadyListener() {
|
|
920
924
|
for (let index = 0; index < targetList.length; index++) {
|
|
921
|
-
|
|
925
|
+
const item = targetList[index];
|
|
922
926
|
item.target.removeEventListener(item.eventType, item.callback);
|
|
923
927
|
}
|
|
924
928
|
}
|
|
@@ -946,7 +950,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
946
950
|
* DOMUtils.trigger("a.xx",["click","tap","hover"])
|
|
947
951
|
*/
|
|
948
952
|
trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
|
|
949
|
-
|
|
953
|
+
const DOMUtilsContext = this;
|
|
950
954
|
if (typeof element === "string") {
|
|
951
955
|
element = DOMUtilsContext.selectorAll(element);
|
|
952
956
|
}
|
|
@@ -970,7 +974,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
970
974
|
}
|
|
971
975
|
elementList.forEach((elementItem) => {
|
|
972
976
|
/* 获取对象上的事件 */
|
|
973
|
-
|
|
977
|
+
const events = elementItem[DOMUtilsData.SymbolEvents] || {};
|
|
974
978
|
eventTypeList.forEach((_eventType_) => {
|
|
975
979
|
let event = null;
|
|
976
980
|
if (details && details instanceof Event) {
|
|
@@ -1010,7 +1014,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1010
1014
|
* })
|
|
1011
1015
|
* */
|
|
1012
1016
|
click(element, handler, details, useDispatchToTriggerEvent) {
|
|
1013
|
-
|
|
1017
|
+
const DOMUtilsContext = this;
|
|
1014
1018
|
if (typeof element === "string") {
|
|
1015
1019
|
element = DOMUtilsContext.selectorAll(element);
|
|
1016
1020
|
}
|
|
@@ -1046,7 +1050,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1046
1050
|
* })
|
|
1047
1051
|
* */
|
|
1048
1052
|
blur(element, handler, details, useDispatchToTriggerEvent) {
|
|
1049
|
-
|
|
1053
|
+
const DOMUtilsContext = this;
|
|
1050
1054
|
if (typeof element === "string") {
|
|
1051
1055
|
element = DOMUtilsContext.selectorAll(element);
|
|
1052
1056
|
}
|
|
@@ -1082,7 +1086,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1082
1086
|
* })
|
|
1083
1087
|
* */
|
|
1084
1088
|
focus(element, handler, details, useDispatchToTriggerEvent) {
|
|
1085
|
-
|
|
1089
|
+
const DOMUtilsContext = this;
|
|
1086
1090
|
if (typeof element === "string") {
|
|
1087
1091
|
element = DOMUtilsContext.selectorAll(element);
|
|
1088
1092
|
}
|
|
@@ -1118,7 +1122,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1118
1122
|
* })
|
|
1119
1123
|
*/
|
|
1120
1124
|
hover(element, handler, option) {
|
|
1121
|
-
|
|
1125
|
+
const DOMUtilsContext = this;
|
|
1122
1126
|
if (typeof element === "string") {
|
|
1123
1127
|
element = DOMUtilsContext.selectorAll(element);
|
|
1124
1128
|
}
|
|
@@ -1142,7 +1146,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1142
1146
|
* @param option 配置项,这里默认配置once为true
|
|
1143
1147
|
*/
|
|
1144
1148
|
animationend(element, handler, option) {
|
|
1145
|
-
|
|
1149
|
+
const DOMUtilsContext = this;
|
|
1146
1150
|
if (typeof element === "string") {
|
|
1147
1151
|
element = DOMUtilsContext.selector(element);
|
|
1148
1152
|
}
|
|
@@ -1177,7 +1181,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1177
1181
|
* @param option 配置项,这里默认配置once为true
|
|
1178
1182
|
*/
|
|
1179
1183
|
transitionend(element, handler, option) {
|
|
1180
|
-
|
|
1184
|
+
const DOMUtilsContext = this;
|
|
1181
1185
|
if (typeof element === "string") {
|
|
1182
1186
|
element = DOMUtilsContext.selector(element);
|
|
1183
1187
|
}
|
|
@@ -1221,7 +1225,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1221
1225
|
* })
|
|
1222
1226
|
*/
|
|
1223
1227
|
keyup(element, handler, option) {
|
|
1224
|
-
|
|
1228
|
+
const DOMUtilsContext = this;
|
|
1225
1229
|
if (element == null) {
|
|
1226
1230
|
return;
|
|
1227
1231
|
}
|
|
@@ -1253,7 +1257,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1253
1257
|
* })
|
|
1254
1258
|
*/
|
|
1255
1259
|
keydown(element, handler, option) {
|
|
1256
|
-
|
|
1260
|
+
const DOMUtilsContext = this;
|
|
1257
1261
|
if (element == null) {
|
|
1258
1262
|
return;
|
|
1259
1263
|
}
|
|
@@ -1285,7 +1289,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1285
1289
|
* })
|
|
1286
1290
|
*/
|
|
1287
1291
|
keypress(element, handler, option) {
|
|
1288
|
-
|
|
1292
|
+
const DOMUtilsContext = this;
|
|
1289
1293
|
if (element == null) {
|
|
1290
1294
|
return;
|
|
1291
1295
|
}
|
|
@@ -1302,80 +1306,80 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1302
1306
|
DOMUtilsContext.on(element, "keypress", null, handler, option);
|
|
1303
1307
|
}
|
|
1304
1308
|
/**
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1309
|
+
* 监听某个元素键盘按键事件或window全局按键事件
|
|
1310
|
+
* 按下有值的键时触发,按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件,再触发keypress事件。
|
|
1311
|
+
* @param element 需要监听的对象,可以是全局Window或者某个元素
|
|
1312
|
+
* @param eventName 事件名,默认keypress
|
|
1313
|
+
* @param callback 自己定义的回调事件,参数1为当前的key,参数2为组合按键,数组类型,包含ctrl、shift、alt和meta(win键或mac的cmd键)
|
|
1314
|
+
* @param options 监听事件的配置
|
|
1315
|
+
* @example
|
|
1316
|
+
Utils.listenKeyboard(window,(keyName,keyValue,otherKey,event)=>{
|
|
1317
|
+
if(keyName === "Enter"){
|
|
1318
|
+
console.log("回车按键的值是:"+keyValue)
|
|
1319
|
+
}
|
|
1320
|
+
if(otherKey.indexOf("ctrl") && keyName === "Enter" ){
|
|
1321
|
+
console.log("Ctrl和回车键");
|
|
1322
|
+
}
|
|
1323
|
+
})
|
|
1324
|
+
* @example
|
|
1325
|
+
字母和数字键的键码值(keyCode)
|
|
1326
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1327
|
+
A 65 J 74 S 83 1 49
|
|
1328
|
+
B 66 K 75 T 84 2 50
|
|
1329
|
+
C 67 L 76 U 85 3 51
|
|
1330
|
+
D 68 M 77 V 86 4 52
|
|
1331
|
+
E 69 N 78 W 87 5 53
|
|
1332
|
+
F 70 O 79 X 88 6 54
|
|
1333
|
+
G 71 P 80 Y 89 7 55
|
|
1334
|
+
H 72 Q 81 Z 90 8 56
|
|
1335
|
+
I 73 R 82 0 48 9 57
|
|
1336
|
+
|
|
1337
|
+
数字键盘上的键的键码值(keyCode)
|
|
1338
|
+
功能键键码值(keyCode)
|
|
1339
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1340
|
+
0 96 8 104 F1 112 F7 118
|
|
1341
|
+
1 97 9 105 F2 113 F8 119
|
|
1342
|
+
2 98 * 106 F3 114 F9 120
|
|
1343
|
+
3 99 + 107 F4 115 F10 121
|
|
1344
|
+
4 100 Enter 108 F5 116 F11 122
|
|
1345
|
+
5 101 - 109 F6 117 F12 123
|
|
1346
|
+
6 102 . 110
|
|
1347
|
+
7 103 / 111
|
|
1348
|
+
|
|
1349
|
+
控制键键码值(keyCode)
|
|
1350
|
+
按键 键码 按键 键码 按键 键码 按键 键码
|
|
1351
|
+
BackSpace 8 Esc 27 → 39 -_ 189
|
|
1352
|
+
Tab 9 Spacebar 32 ↓ 40 .> 190
|
|
1353
|
+
Clear 12 Page Up 33 Insert 45 /? 191
|
|
1354
|
+
Enter 13 Page Down 34 Delete 46 `~ 192
|
|
1355
|
+
Shift 16 End 35 Num Lock 144 [{ 219
|
|
1356
|
+
Control 17 Home 36 ;: 186 \| 220
|
|
1357
|
+
Alt 18 ← 37 =+ 187 ]} 221
|
|
1358
|
+
Cape Lock 20 ↑ 38 ,< 188 '" 222
|
|
1359
|
+
|
|
1360
|
+
多媒体键码值(keyCode)
|
|
1361
|
+
按键 键码
|
|
1362
|
+
音量加 175
|
|
1363
|
+
音量减 174
|
|
1364
|
+
停止 179
|
|
1365
|
+
静音 173
|
|
1366
|
+
浏览器 172
|
|
1367
|
+
邮件 180
|
|
1368
|
+
搜索 170
|
|
1369
|
+
收藏 171
|
|
1370
|
+
**/
|
|
1367
1371
|
listenKeyboard(element, eventName = "keypress", callback, options) {
|
|
1368
|
-
|
|
1372
|
+
const DOMUtilsContext = this;
|
|
1369
1373
|
if (typeof element === "string") {
|
|
1370
1374
|
element = DOMUtilsContext.selectorAll(element);
|
|
1371
1375
|
}
|
|
1372
|
-
|
|
1376
|
+
const keyboardEventCallBack = function (event) {
|
|
1373
1377
|
/** 键名 */
|
|
1374
|
-
|
|
1378
|
+
const keyName = event.key || event.code;
|
|
1375
1379
|
/** 键值 */
|
|
1376
|
-
|
|
1380
|
+
const keyValue = event.charCode || event.keyCode || event.which;
|
|
1377
1381
|
/** 组合键列表 */
|
|
1378
|
-
|
|
1382
|
+
const otherCodeList = [];
|
|
1379
1383
|
if (event.ctrlKey) {
|
|
1380
1384
|
otherCodeList.push("ctrl");
|
|
1381
1385
|
}
|
|
@@ -1413,29 +1417,27 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1413
1417
|
return $ele?.innerHTML?.trim() === "";
|
|
1414
1418
|
});
|
|
1415
1419
|
}
|
|
1416
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1417
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1420
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1418
1421
|
// contains 语法
|
|
1419
|
-
|
|
1420
|
-
|
|
1422
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1423
|
+
const text = textMatch[2];
|
|
1421
1424
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1422
1425
|
return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
|
|
1423
1426
|
// @ts-ignore
|
|
1424
1427
|
return ($ele?.textContent || $ele?.innerText)?.includes(text);
|
|
1425
1428
|
});
|
|
1426
1429
|
}
|
|
1427
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1428
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1430
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1429
1431
|
// regexp 语法
|
|
1430
|
-
|
|
1432
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1431
1433
|
let pattern = textMatch[2];
|
|
1432
|
-
|
|
1434
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1433
1435
|
let flags = "";
|
|
1434
1436
|
if (flagMatch) {
|
|
1435
1437
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1436
1438
|
flags = flagMatch[3];
|
|
1437
1439
|
}
|
|
1438
|
-
|
|
1440
|
+
const regexp = new RegExp(pattern, flags);
|
|
1439
1441
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1440
1442
|
return Array.from(parent.querySelectorAll(selector)).filter(($ele) => {
|
|
1441
1443
|
// @ts-ignore
|
|
@@ -1478,11 +1480,10 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1478
1480
|
selector = selector.replace(/:empty$/gi, "");
|
|
1479
1481
|
return $el.matches(selector) && $el?.innerHTML?.trim() === "";
|
|
1480
1482
|
}
|
|
1481
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1482
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1483
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1483
1484
|
// contains 语法
|
|
1484
|
-
|
|
1485
|
-
|
|
1485
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1486
|
+
const text = textMatch[2];
|
|
1486
1487
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1487
1488
|
// @ts-ignore
|
|
1488
1489
|
let content = $el?.textContent || $el?.innerText;
|
|
@@ -1491,18 +1492,17 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1491
1492
|
}
|
|
1492
1493
|
return $el.matches(selector) && content?.includes(text);
|
|
1493
1494
|
}
|
|
1494
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1495
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1495
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1496
1496
|
// regexp 语法
|
|
1497
|
-
|
|
1497
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1498
1498
|
let pattern = textMatch[2];
|
|
1499
|
-
|
|
1499
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1500
1500
|
let flags = "";
|
|
1501
1501
|
if (flagMatch) {
|
|
1502
1502
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1503
1503
|
flags = flagMatch[3];
|
|
1504
1504
|
}
|
|
1505
|
-
|
|
1505
|
+
const regexp = new RegExp(pattern, flags);
|
|
1506
1506
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1507
1507
|
// @ts-ignore
|
|
1508
1508
|
let content = $el?.textContent || $el?.innerText;
|
|
@@ -1521,45 +1521,43 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1521
1521
|
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1522
1522
|
// empty 语法
|
|
1523
1523
|
selector = selector.replace(/:empty$/gi, "");
|
|
1524
|
-
|
|
1524
|
+
const $closest = $el?.closest(selector);
|
|
1525
1525
|
if ($closest && $closest?.innerHTML?.trim() === "") {
|
|
1526
1526
|
return $closest;
|
|
1527
1527
|
}
|
|
1528
1528
|
return null;
|
|
1529
1529
|
}
|
|
1530
|
-
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1531
|
-
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1530
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) || selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1532
1531
|
// contains 语法
|
|
1533
|
-
|
|
1534
|
-
|
|
1532
|
+
const textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1533
|
+
const text = textMatch[2];
|
|
1535
1534
|
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1536
|
-
|
|
1535
|
+
const $closest = $el?.closest(selector);
|
|
1537
1536
|
if ($closest) {
|
|
1538
1537
|
// @ts-ignore
|
|
1539
|
-
|
|
1538
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1540
1539
|
if (typeof content === "string" && content.includes(text)) {
|
|
1541
1540
|
return $closest;
|
|
1542
1541
|
}
|
|
1543
1542
|
}
|
|
1544
1543
|
return null;
|
|
1545
1544
|
}
|
|
1546
|
-
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1547
|
-
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1545
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) || selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1548
1546
|
// regexp 语法
|
|
1549
|
-
|
|
1547
|
+
const textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1550
1548
|
let pattern = textMatch[2];
|
|
1551
|
-
|
|
1549
|
+
const flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1552
1550
|
let flags = "";
|
|
1553
1551
|
if (flagMatch) {
|
|
1554
1552
|
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1555
1553
|
flags = flagMatch[3];
|
|
1556
1554
|
}
|
|
1557
|
-
|
|
1555
|
+
const regexp = new RegExp(pattern, flags);
|
|
1558
1556
|
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1559
|
-
|
|
1557
|
+
const $closest = $el?.closest(selector);
|
|
1560
1558
|
if ($closest) {
|
|
1561
1559
|
// @ts-ignore
|
|
1562
|
-
|
|
1560
|
+
const content = $el?.textContent || $el?.innerText;
|
|
1563
1561
|
if (typeof content === "string" && content.match(regexp)) {
|
|
1564
1562
|
return $closest;
|
|
1565
1563
|
}
|
|
@@ -1568,20 +1566,22 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1568
1566
|
}
|
|
1569
1567
|
else {
|
|
1570
1568
|
// 普通语法
|
|
1571
|
-
|
|
1569
|
+
const $closest = $el?.closest(selector);
|
|
1572
1570
|
return $closest;
|
|
1573
1571
|
}
|
|
1574
1572
|
}
|
|
1575
1573
|
}
|
|
1576
1574
|
|
|
1575
|
+
const version = "1.6.6";
|
|
1576
|
+
|
|
1577
1577
|
class DOMUtils extends DOMUtilsEvent {
|
|
1578
1578
|
constructor(option) {
|
|
1579
1579
|
super(option);
|
|
1580
1580
|
}
|
|
1581
1581
|
/** 版本号 */
|
|
1582
|
-
version =
|
|
1582
|
+
version = version;
|
|
1583
1583
|
attr(element, attrName, attrValue) {
|
|
1584
|
-
|
|
1584
|
+
const DOMUtilsContext = this;
|
|
1585
1585
|
if (typeof element === "string") {
|
|
1586
1586
|
element = DOMUtilsContext.selectorAll(element);
|
|
1587
1587
|
}
|
|
@@ -1615,8 +1615,8 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1615
1615
|
property,
|
|
1616
1616
|
/** 自定义属性 */
|
|
1617
1617
|
attributes) {
|
|
1618
|
-
|
|
1619
|
-
|
|
1618
|
+
const DOMUtilsContext = this;
|
|
1619
|
+
const tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
|
|
1620
1620
|
if (typeof property === "string") {
|
|
1621
1621
|
DOMUtilsContext.html(tempElement, property);
|
|
1622
1622
|
return tempElement;
|
|
@@ -1628,7 +1628,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1628
1628
|
attributes = {};
|
|
1629
1629
|
}
|
|
1630
1630
|
Object.keys(property).forEach((key) => {
|
|
1631
|
-
|
|
1631
|
+
const value = property[key];
|
|
1632
1632
|
if (key === "innerHTML") {
|
|
1633
1633
|
DOMUtilsContext.html(tempElement, value);
|
|
1634
1634
|
return;
|
|
@@ -1650,18 +1650,16 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1650
1650
|
return tempElement;
|
|
1651
1651
|
}
|
|
1652
1652
|
css(element, property, value) {
|
|
1653
|
-
|
|
1653
|
+
const DOMUtilsContext = this;
|
|
1654
1654
|
/**
|
|
1655
1655
|
* 把纯数字没有px的加上
|
|
1656
1656
|
*/
|
|
1657
1657
|
function handlePixe(propertyName, propertyValue) {
|
|
1658
|
-
|
|
1658
|
+
const allowAddPixe = ["width", "height", "top", "left", "right", "bottom", "font-size"];
|
|
1659
1659
|
if (typeof propertyValue === "number") {
|
|
1660
1660
|
propertyValue = propertyValue.toString();
|
|
1661
1661
|
}
|
|
1662
|
-
if (typeof propertyValue === "string" &&
|
|
1663
|
-
allowAddPixe.includes(propertyName) &&
|
|
1664
|
-
propertyValue.match(/[0-9]$/gi)) {
|
|
1662
|
+
if (typeof propertyValue === "string" && allowAddPixe.includes(propertyName) && propertyValue.match(/[0-9]$/gi)) {
|
|
1665
1663
|
propertyValue = propertyValue + "px";
|
|
1666
1664
|
}
|
|
1667
1665
|
return propertyValue;
|
|
@@ -1693,10 +1691,9 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1693
1691
|
});
|
|
1694
1692
|
return;
|
|
1695
1693
|
}
|
|
1696
|
-
else ;
|
|
1697
1694
|
return;
|
|
1698
1695
|
}
|
|
1699
|
-
|
|
1696
|
+
const setStyleProperty = (propertyName, propertyValue) => {
|
|
1700
1697
|
if (typeof propertyValue === "string" && propertyValue.trim().endsWith("!important")) {
|
|
1701
1698
|
propertyValue = propertyValue
|
|
1702
1699
|
.trim()
|
|
@@ -1718,8 +1715,8 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1718
1715
|
}
|
|
1719
1716
|
}
|
|
1720
1717
|
else if (typeof property === "object") {
|
|
1721
|
-
for (
|
|
1722
|
-
|
|
1718
|
+
for (const prop in property) {
|
|
1719
|
+
const value = property[prop];
|
|
1723
1720
|
setStyleProperty(prop, value);
|
|
1724
1721
|
}
|
|
1725
1722
|
}
|
|
@@ -1729,7 +1726,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1729
1726
|
}
|
|
1730
1727
|
}
|
|
1731
1728
|
text(element, text) {
|
|
1732
|
-
|
|
1729
|
+
const DOMUtilsContext = this;
|
|
1733
1730
|
if (typeof element === "string") {
|
|
1734
1731
|
element = DOMUtilsContext.selectorAll(element);
|
|
1735
1732
|
}
|
|
@@ -1765,7 +1762,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1765
1762
|
}
|
|
1766
1763
|
}
|
|
1767
1764
|
html(element, html) {
|
|
1768
|
-
|
|
1765
|
+
const DOMUtilsContext = this;
|
|
1769
1766
|
if (typeof element === "string") {
|
|
1770
1767
|
element = DOMUtilsContext.selectorAll(element);
|
|
1771
1768
|
}
|
|
@@ -1803,19 +1800,19 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1803
1800
|
* 获取移动元素的transform偏移
|
|
1804
1801
|
*/
|
|
1805
1802
|
getTransform(element, isShow = false) {
|
|
1806
|
-
|
|
1803
|
+
const DOMUtilsContext = this;
|
|
1807
1804
|
let transform_left = 0;
|
|
1808
1805
|
let transform_top = 0;
|
|
1809
1806
|
if (!(isShow || (!isShow && DOMUtilsCommonUtils.isShow(element)))) {
|
|
1810
1807
|
/* 未显示 */
|
|
1811
|
-
|
|
1812
|
-
|
|
1808
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
1809
|
+
const transformInfo = DOMUtilsContext.getTransform(element, true);
|
|
1813
1810
|
recovery();
|
|
1814
1811
|
return transformInfo;
|
|
1815
1812
|
}
|
|
1816
|
-
|
|
1813
|
+
const elementTransform = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element).transform;
|
|
1817
1814
|
if (elementTransform != null && elementTransform !== "none" && elementTransform !== "") {
|
|
1818
|
-
|
|
1815
|
+
const elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
|
|
1819
1816
|
if (elementTransformSplit) {
|
|
1820
1817
|
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
|
|
1821
1818
|
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
|
|
@@ -1831,7 +1828,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1831
1828
|
};
|
|
1832
1829
|
}
|
|
1833
1830
|
val(element, value) {
|
|
1834
|
-
|
|
1831
|
+
const DOMUtilsContext = this;
|
|
1835
1832
|
if (typeof element === "string") {
|
|
1836
1833
|
element = DOMUtilsContext.selectorAll(element);
|
|
1837
1834
|
}
|
|
@@ -1871,7 +1868,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1871
1868
|
}
|
|
1872
1869
|
}
|
|
1873
1870
|
prop(element, propName, propValue) {
|
|
1874
|
-
|
|
1871
|
+
const DOMUtilsContext = this;
|
|
1875
1872
|
if (typeof element === "string") {
|
|
1876
1873
|
element = DOMUtilsContext.selectorAll(element);
|
|
1877
1874
|
}
|
|
@@ -1913,7 +1910,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1913
1910
|
* DOMUtils.removeAttr("a.xx","data-value")
|
|
1914
1911
|
* */
|
|
1915
1912
|
removeAttr(element, attrName) {
|
|
1916
|
-
|
|
1913
|
+
const DOMUtilsContext = this;
|
|
1917
1914
|
if (typeof element === "string") {
|
|
1918
1915
|
element = DOMUtilsContext.selectorAll(element);
|
|
1919
1916
|
}
|
|
@@ -1939,7 +1936,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1939
1936
|
* DOMUtils.removeClass("a.xx","xx")
|
|
1940
1937
|
*/
|
|
1941
1938
|
removeClass(element, className) {
|
|
1942
|
-
|
|
1939
|
+
const DOMUtilsContext = this;
|
|
1943
1940
|
if (typeof element === "string") {
|
|
1944
1941
|
element = DOMUtilsContext.selectorAll(element);
|
|
1945
1942
|
}
|
|
@@ -1976,7 +1973,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
1976
1973
|
* DOMUtils.removeProp("a.xx","href")
|
|
1977
1974
|
* */
|
|
1978
1975
|
removeProp(element, propName) {
|
|
1979
|
-
|
|
1976
|
+
const DOMUtilsContext = this;
|
|
1980
1977
|
if (typeof element === "string") {
|
|
1981
1978
|
element = DOMUtilsContext.selectorAll(element);
|
|
1982
1979
|
}
|
|
@@ -2002,7 +1999,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2002
1999
|
* DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
|
|
2003
2000
|
*/
|
|
2004
2001
|
replaceWith(element, newElement) {
|
|
2005
|
-
|
|
2002
|
+
const DOMUtilsContext = this;
|
|
2006
2003
|
if (typeof element === "string") {
|
|
2007
2004
|
element = DOMUtilsContext.selectorAll(element);
|
|
2008
2005
|
}
|
|
@@ -2019,7 +2016,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2019
2016
|
if (typeof newElement === "string") {
|
|
2020
2017
|
newElement = DOMUtilsContext.parseHTML(newElement, false, false);
|
|
2021
2018
|
}
|
|
2022
|
-
|
|
2019
|
+
const $parent = element.parentElement;
|
|
2023
2020
|
if ($parent) {
|
|
2024
2021
|
$parent.replaceChild(newElement, element);
|
|
2025
2022
|
}
|
|
@@ -2038,7 +2035,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2038
2035
|
* DOMUtils.addClass("a.xx","_vue_")
|
|
2039
2036
|
* */
|
|
2040
2037
|
addClass(element, className) {
|
|
2041
|
-
|
|
2038
|
+
const DOMUtilsContext = this;
|
|
2042
2039
|
if (typeof element === "string") {
|
|
2043
2040
|
element = DOMUtilsContext.selectorAll(element);
|
|
2044
2041
|
}
|
|
@@ -2068,7 +2065,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2068
2065
|
* @param className
|
|
2069
2066
|
*/
|
|
2070
2067
|
hasClass(element, className) {
|
|
2071
|
-
|
|
2068
|
+
const DOMUtilsContext = this;
|
|
2072
2069
|
if (typeof element === "string") {
|
|
2073
2070
|
element = DOMUtilsContext.selectorAll(element);
|
|
2074
2071
|
}
|
|
@@ -2107,7 +2104,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2107
2104
|
* DOMUtils.append("a.xx","'<b class="xx"></b>")
|
|
2108
2105
|
* */
|
|
2109
2106
|
append(element, content) {
|
|
2110
|
-
|
|
2107
|
+
const DOMUtilsContext = this;
|
|
2111
2108
|
if (typeof element === "string") {
|
|
2112
2109
|
element = DOMUtilsContext.selectorAll(element);
|
|
2113
2110
|
}
|
|
@@ -2139,7 +2136,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2139
2136
|
}
|
|
2140
2137
|
if (Array.isArray(content) || content instanceof NodeList) {
|
|
2141
2138
|
/* 数组 */
|
|
2142
|
-
|
|
2139
|
+
const fragment = DOMUtilsContext.windowApi.document.createDocumentFragment();
|
|
2143
2140
|
content.forEach((ele) => {
|
|
2144
2141
|
if (typeof ele === "string") {
|
|
2145
2142
|
// 转为元素
|
|
@@ -2163,7 +2160,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2163
2160
|
* DOMUtils.prepend("a.xx","'<b class="xx"></b>")
|
|
2164
2161
|
* */
|
|
2165
2162
|
prepend(element, content) {
|
|
2166
|
-
|
|
2163
|
+
const DOMUtilsContext = this;
|
|
2167
2164
|
if (typeof element === "string") {
|
|
2168
2165
|
element = DOMUtilsContext.selectorAll(element);
|
|
2169
2166
|
}
|
|
@@ -2187,7 +2184,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2187
2184
|
}
|
|
2188
2185
|
}
|
|
2189
2186
|
else {
|
|
2190
|
-
|
|
2187
|
+
const $firstChild = element.firstChild;
|
|
2191
2188
|
if ($firstChild == null) {
|
|
2192
2189
|
element.prepend(content);
|
|
2193
2190
|
}
|
|
@@ -2206,7 +2203,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2206
2203
|
* DOMUtils.after("a.xx","'<b class="xx"></b>")
|
|
2207
2204
|
* */
|
|
2208
2205
|
after(element, content) {
|
|
2209
|
-
|
|
2206
|
+
const DOMUtilsContext = this;
|
|
2210
2207
|
if (typeof element === "string") {
|
|
2211
2208
|
element = DOMUtilsContext.selectorAll(element);
|
|
2212
2209
|
}
|
|
@@ -2224,8 +2221,8 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2224
2221
|
element.insertAdjacentHTML("afterend", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
2225
2222
|
}
|
|
2226
2223
|
else {
|
|
2227
|
-
|
|
2228
|
-
|
|
2224
|
+
const $parent = element.parentElement;
|
|
2225
|
+
const $nextSlibling = element.nextSibling;
|
|
2229
2226
|
if (!$parent || $nextSlibling) {
|
|
2230
2227
|
// 任意一个不行
|
|
2231
2228
|
element.after(content);
|
|
@@ -2245,7 +2242,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2245
2242
|
* DOMUtils.before("a.xx","'<b class="xx"></b>")
|
|
2246
2243
|
* */
|
|
2247
2244
|
before(element, content) {
|
|
2248
|
-
|
|
2245
|
+
const DOMUtilsContext = this;
|
|
2249
2246
|
if (typeof element === "string") {
|
|
2250
2247
|
element = DOMUtilsContext.selectorAll(element);
|
|
2251
2248
|
}
|
|
@@ -2263,7 +2260,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2263
2260
|
element.insertAdjacentHTML("beforebegin", DOMUtilsCommonUtils.getSafeHTML(content));
|
|
2264
2261
|
}
|
|
2265
2262
|
else {
|
|
2266
|
-
|
|
2263
|
+
const $parent = element.parentElement;
|
|
2267
2264
|
if (!$parent) {
|
|
2268
2265
|
element.before(content);
|
|
2269
2266
|
}
|
|
@@ -2282,7 +2279,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2282
2279
|
* DOMUtils.remove("a.xx")
|
|
2283
2280
|
* */
|
|
2284
2281
|
remove(element) {
|
|
2285
|
-
|
|
2282
|
+
const DOMUtilsContext = this;
|
|
2286
2283
|
if (typeof element === "string") {
|
|
2287
2284
|
element = DOMUtilsContext.selectorAll(element);
|
|
2288
2285
|
}
|
|
@@ -2314,7 +2311,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2314
2311
|
* DOMUtils.empty("a.xx")
|
|
2315
2312
|
* */
|
|
2316
2313
|
empty(element) {
|
|
2317
|
-
|
|
2314
|
+
const DOMUtilsContext = this;
|
|
2318
2315
|
if (typeof element === "string") {
|
|
2319
2316
|
element = DOMUtilsContext.selectorAll(element);
|
|
2320
2317
|
}
|
|
@@ -2345,14 +2342,14 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2345
2342
|
* > 0
|
|
2346
2343
|
*/
|
|
2347
2344
|
offset(element) {
|
|
2348
|
-
|
|
2345
|
+
const DOMUtilsContext = this;
|
|
2349
2346
|
if (typeof element === "string") {
|
|
2350
2347
|
element = DOMUtilsContext.selector(element);
|
|
2351
2348
|
}
|
|
2352
2349
|
if (element == null) {
|
|
2353
2350
|
return;
|
|
2354
2351
|
}
|
|
2355
|
-
|
|
2352
|
+
const rect = element.getBoundingClientRect();
|
|
2356
2353
|
return {
|
|
2357
2354
|
/** y轴偏移 */
|
|
2358
2355
|
top: rect.top + DOMUtilsContext.windowApi.globalThis.scrollY,
|
|
@@ -2361,14 +2358,10 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2361
2358
|
};
|
|
2362
2359
|
}
|
|
2363
2360
|
width(element, isShow = false) {
|
|
2364
|
-
|
|
2361
|
+
const DOMUtilsContext = this;
|
|
2365
2362
|
if (typeof element === "string") {
|
|
2366
2363
|
element = DOMUtilsContext.selector(element);
|
|
2367
2364
|
}
|
|
2368
|
-
if (element == null) {
|
|
2369
|
-
// @ts-ignore
|
|
2370
|
-
return;
|
|
2371
|
-
}
|
|
2372
2365
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2373
2366
|
return DOMUtilsContext.windowApi.window.document.documentElement.clientWidth;
|
|
2374
2367
|
}
|
|
@@ -2387,11 +2380,11 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2387
2380
|
}
|
|
2388
2381
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
|
|
2389
2382
|
if (element.offsetWidth > 0) {
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2383
|
+
const borderLeftWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderLeftWidth");
|
|
2384
|
+
const borderRightWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderRightWidth");
|
|
2385
|
+
const paddingLeft = DOMUtilsCommonUtils.getStyleValue(element, "paddingLeft");
|
|
2386
|
+
const paddingRight = DOMUtilsCommonUtils.getStyleValue(element, "paddingRight");
|
|
2387
|
+
const backHeight = parseFloat(element.offsetWidth.toString()) -
|
|
2395
2388
|
parseFloat(borderLeftWidth.toString()) -
|
|
2396
2389
|
parseFloat(borderRightWidth.toString()) -
|
|
2397
2390
|
parseFloat(paddingLeft.toString()) -
|
|
@@ -2403,24 +2396,20 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2403
2396
|
else {
|
|
2404
2397
|
/* 未显示 */
|
|
2405
2398
|
element = element;
|
|
2406
|
-
|
|
2407
|
-
|
|
2399
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2400
|
+
const width = DOMUtilsContext.width(element, true);
|
|
2408
2401
|
recovery();
|
|
2409
2402
|
return width;
|
|
2410
2403
|
}
|
|
2411
2404
|
}
|
|
2412
2405
|
height(element, isShow = false) {
|
|
2413
|
-
|
|
2406
|
+
const DOMUtilsContext = this;
|
|
2414
2407
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2415
2408
|
return DOMUtilsContext.windowApi.window.document.documentElement.clientHeight;
|
|
2416
2409
|
}
|
|
2417
2410
|
if (typeof element === "string") {
|
|
2418
2411
|
element = DOMUtilsContext.selector(element);
|
|
2419
2412
|
}
|
|
2420
|
-
if (element == null) {
|
|
2421
|
-
// @ts-ignore
|
|
2422
|
-
return;
|
|
2423
|
-
}
|
|
2424
2413
|
if (element.nodeType === 9) {
|
|
2425
2414
|
element = element;
|
|
2426
2415
|
/* Document文档节点 */
|
|
@@ -2436,11 +2425,11 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2436
2425
|
}
|
|
2437
2426
|
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
|
|
2438
2427
|
if (element.offsetHeight > 0) {
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2428
|
+
const borderTopWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderTopWidth");
|
|
2429
|
+
const borderBottomWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderBottomWidth");
|
|
2430
|
+
const paddingTop = DOMUtilsCommonUtils.getStyleValue(element, "paddingTop");
|
|
2431
|
+
const paddingBottom = DOMUtilsCommonUtils.getStyleValue(element, "paddingBottom");
|
|
2432
|
+
const backHeight = parseFloat(element.offsetHeight.toString()) -
|
|
2444
2433
|
parseFloat(borderTopWidth.toString()) -
|
|
2445
2434
|
parseFloat(borderBottomWidth.toString()) -
|
|
2446
2435
|
parseFloat(paddingTop.toString()) -
|
|
@@ -2452,60 +2441,52 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2452
2441
|
else {
|
|
2453
2442
|
/* 未显示 */
|
|
2454
2443
|
element = element;
|
|
2455
|
-
|
|
2456
|
-
|
|
2444
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2445
|
+
const height = DOMUtilsContext.height(element, true);
|
|
2457
2446
|
recovery();
|
|
2458
2447
|
return height;
|
|
2459
2448
|
}
|
|
2460
2449
|
}
|
|
2461
2450
|
outerWidth(element, isShow = false) {
|
|
2462
|
-
|
|
2451
|
+
const DOMUtilsContext = this;
|
|
2463
2452
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2464
2453
|
return DOMUtilsContext.windowApi.window.innerWidth;
|
|
2465
2454
|
}
|
|
2466
2455
|
if (typeof element === "string") {
|
|
2467
2456
|
element = DOMUtilsContext.selector(element);
|
|
2468
2457
|
}
|
|
2469
|
-
if (element == null) {
|
|
2470
|
-
// @ts-ignore
|
|
2471
|
-
return;
|
|
2472
|
-
}
|
|
2473
2458
|
element = element;
|
|
2474
2459
|
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2460
|
+
const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
|
|
2461
|
+
const marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
|
|
2462
|
+
const marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
|
|
2478
2463
|
return element.offsetWidth + marginLeft + marginRight;
|
|
2479
2464
|
}
|
|
2480
2465
|
else {
|
|
2481
|
-
|
|
2482
|
-
|
|
2466
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2467
|
+
const outerWidth = DOMUtilsContext.outerWidth(element, true);
|
|
2483
2468
|
recovery();
|
|
2484
2469
|
return outerWidth;
|
|
2485
2470
|
}
|
|
2486
2471
|
}
|
|
2487
2472
|
outerHeight(element, isShow = false) {
|
|
2488
|
-
|
|
2473
|
+
const DOMUtilsContext = this;
|
|
2489
2474
|
if (DOMUtilsCommonUtils.isWin(element)) {
|
|
2490
2475
|
return DOMUtilsContext.windowApi.window.innerHeight;
|
|
2491
2476
|
}
|
|
2492
2477
|
if (typeof element === "string") {
|
|
2493
2478
|
element = DOMUtilsContext.selector(element);
|
|
2494
2479
|
}
|
|
2495
|
-
if (element == null) {
|
|
2496
|
-
// @ts-ignore
|
|
2497
|
-
return;
|
|
2498
|
-
}
|
|
2499
2480
|
element = element;
|
|
2500
2481
|
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2482
|
+
const style = DOMUtilsContext.windowApi.globalThis.getComputedStyle(element, null);
|
|
2483
|
+
const marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
|
|
2484
|
+
const marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
|
|
2504
2485
|
return element.offsetHeight + marginTop + marginBottom;
|
|
2505
2486
|
}
|
|
2506
2487
|
else {
|
|
2507
|
-
|
|
2508
|
-
|
|
2488
|
+
const { recovery } = DOMUtilsCommonUtils.showElement(element);
|
|
2489
|
+
const outerHeight = DOMUtilsContext.outerHeight(element, true);
|
|
2509
2490
|
recovery();
|
|
2510
2491
|
return outerHeight;
|
|
2511
2492
|
}
|
|
@@ -2523,7 +2504,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2523
2504
|
* })
|
|
2524
2505
|
*/
|
|
2525
2506
|
animate(element, styles, duration = 1000, callback = null) {
|
|
2526
|
-
|
|
2507
|
+
const DOMUtilsContext = this;
|
|
2527
2508
|
if (typeof element === "string") {
|
|
2528
2509
|
element = DOMUtilsContext.selectorAll(element);
|
|
2529
2510
|
}
|
|
@@ -2549,21 +2530,20 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2549
2530
|
if (Object.keys(styles).length === 0) {
|
|
2550
2531
|
throw new Error("styles must contain at least one property");
|
|
2551
2532
|
}
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
for (
|
|
2556
|
-
from[prop] =
|
|
2557
|
-
element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
2533
|
+
const start = performance.now();
|
|
2534
|
+
const from = {};
|
|
2535
|
+
const to = {};
|
|
2536
|
+
for (const prop in styles) {
|
|
2537
|
+
from[prop] = element.style[prop] || DOMUtilsContext.windowApi.globalThis.getComputedStyle(element)[prop];
|
|
2558
2538
|
to[prop] = styles[prop];
|
|
2559
2539
|
}
|
|
2560
|
-
|
|
2561
|
-
|
|
2540
|
+
const timer = DOMUtilsCommonUtils.setInterval(function () {
|
|
2541
|
+
const timePassed = performance.now() - start;
|
|
2562
2542
|
let progress = timePassed / duration;
|
|
2563
2543
|
if (progress > 1) {
|
|
2564
2544
|
progress = 1;
|
|
2565
2545
|
}
|
|
2566
|
-
for (
|
|
2546
|
+
for (const prop in styles) {
|
|
2567
2547
|
element.style[prop] = from[prop] + (to[prop] - from[prop]) * progress + "px";
|
|
2568
2548
|
}
|
|
2569
2549
|
if (progress === 1) {
|
|
@@ -2583,7 +2563,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2583
2563
|
* DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
|
|
2584
2564
|
*/
|
|
2585
2565
|
wrap(element, wrapperHTML) {
|
|
2586
|
-
|
|
2566
|
+
const DOMUtilsContext = this;
|
|
2587
2567
|
if (typeof element === "string") {
|
|
2588
2568
|
element = DOMUtilsContext.selectorAll(element);
|
|
2589
2569
|
}
|
|
@@ -2599,17 +2579,17 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2599
2579
|
}
|
|
2600
2580
|
element = element;
|
|
2601
2581
|
// 创建一个新的div元素,并将wrapperHTML作为其innerHTML
|
|
2602
|
-
|
|
2582
|
+
const wrapper = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2603
2583
|
DOMUtilsContext.html(wrapper, wrapperHTML);
|
|
2604
|
-
|
|
2584
|
+
const wrapperFirstChild = wrapper.firstChild;
|
|
2605
2585
|
// 将要包裹的元素插入目标元素前面
|
|
2606
|
-
|
|
2586
|
+
const parentElement = element.parentElement;
|
|
2607
2587
|
parentElement.insertBefore(wrapperFirstChild, element);
|
|
2608
2588
|
// 将要包裹的元素移动到wrapper中
|
|
2609
2589
|
wrapperFirstChild.appendChild(element);
|
|
2610
2590
|
}
|
|
2611
2591
|
prev(element) {
|
|
2612
|
-
|
|
2592
|
+
const DOMUtilsContext = this;
|
|
2613
2593
|
if (typeof element === "string") {
|
|
2614
2594
|
element = DOMUtilsContext.selector(element);
|
|
2615
2595
|
}
|
|
@@ -2619,7 +2599,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2619
2599
|
return element.previousElementSibling;
|
|
2620
2600
|
}
|
|
2621
2601
|
next(element) {
|
|
2622
|
-
|
|
2602
|
+
const DOMUtilsContext = this;
|
|
2623
2603
|
if (typeof element === "string") {
|
|
2624
2604
|
element = DOMUtilsContext.selector(element);
|
|
2625
2605
|
}
|
|
@@ -2634,7 +2614,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2634
2614
|
* let DOMUtils = window.DOMUtils.noConflict()
|
|
2635
2615
|
*/
|
|
2636
2616
|
noConflict() {
|
|
2637
|
-
|
|
2617
|
+
const DOMUtilsContext = this;
|
|
2638
2618
|
if (DOMUtilsContext.windowApi.window.DOMUtils) {
|
|
2639
2619
|
DOMUtilsCommonUtils.delete(window, "DOMUtils");
|
|
2640
2620
|
}
|
|
@@ -2642,7 +2622,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2642
2622
|
return this;
|
|
2643
2623
|
}
|
|
2644
2624
|
siblings(element) {
|
|
2645
|
-
|
|
2625
|
+
const DOMUtilsContext = this;
|
|
2646
2626
|
if (typeof element === "string") {
|
|
2647
2627
|
element = DOMUtilsContext.selector(element);
|
|
2648
2628
|
}
|
|
@@ -2662,7 +2642,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2662
2642
|
* > <div ...>....</div>
|
|
2663
2643
|
*/
|
|
2664
2644
|
parent(element) {
|
|
2665
|
-
|
|
2645
|
+
const DOMUtilsContext = this;
|
|
2666
2646
|
if (typeof element === "string") {
|
|
2667
2647
|
element = DOMUtilsContext.selector(element);
|
|
2668
2648
|
}
|
|
@@ -2670,7 +2650,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2670
2650
|
return;
|
|
2671
2651
|
}
|
|
2672
2652
|
if (DOMUtilsCommonUtils.isNodeList(element)) {
|
|
2673
|
-
|
|
2653
|
+
const resultArray = [];
|
|
2674
2654
|
element.forEach(($ele) => {
|
|
2675
2655
|
resultArray.push(DOMUtilsContext.parent($ele));
|
|
2676
2656
|
});
|
|
@@ -2681,11 +2661,11 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2681
2661
|
}
|
|
2682
2662
|
}
|
|
2683
2663
|
parseHTML(html, useParser = false, isComplete = false) {
|
|
2684
|
-
|
|
2664
|
+
const DOMUtilsContext = this;
|
|
2685
2665
|
// 去除html前后的空格
|
|
2686
2666
|
html = html.trim();
|
|
2687
2667
|
function parseHTMLByDOMParser() {
|
|
2688
|
-
|
|
2668
|
+
const parser = new DOMParser();
|
|
2689
2669
|
if (isComplete) {
|
|
2690
2670
|
return parser.parseFromString(html, "text/html");
|
|
2691
2671
|
}
|
|
@@ -2694,7 +2674,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2694
2674
|
}
|
|
2695
2675
|
}
|
|
2696
2676
|
function parseHTMLByCreateDom() {
|
|
2697
|
-
|
|
2677
|
+
const tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
|
|
2698
2678
|
DOMUtilsContext.html(tempDIV, html);
|
|
2699
2679
|
if (isComplete) {
|
|
2700
2680
|
return tempDIV;
|
|
@@ -2719,7 +2699,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2719
2699
|
*/
|
|
2720
2700
|
serialize($form) {
|
|
2721
2701
|
const elements = $form.elements;
|
|
2722
|
-
|
|
2702
|
+
const serializedArray = [];
|
|
2723
2703
|
for (let i = 0; i < elements.length; i++) {
|
|
2724
2704
|
const element = elements[i];
|
|
2725
2705
|
if (element.name &&
|
|
@@ -2758,7 +2738,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2758
2738
|
* DOMUtils.show("a.xx")
|
|
2759
2739
|
*/
|
|
2760
2740
|
show(target, checkVisiblie = true) {
|
|
2761
|
-
|
|
2741
|
+
const DOMUtilsContext = this;
|
|
2762
2742
|
if (target == null) {
|
|
2763
2743
|
return;
|
|
2764
2744
|
}
|
|
@@ -2795,7 +2775,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2795
2775
|
* DOMUtils.hide("a.xx")
|
|
2796
2776
|
*/
|
|
2797
2777
|
hide(target, checkVisiblie = true) {
|
|
2798
|
-
|
|
2778
|
+
const DOMUtilsContext = this;
|
|
2799
2779
|
if (target == null) {
|
|
2800
2780
|
return;
|
|
2801
2781
|
}
|
|
@@ -2837,7 +2817,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2837
2817
|
if (element == null) {
|
|
2838
2818
|
return;
|
|
2839
2819
|
}
|
|
2840
|
-
|
|
2820
|
+
const DOMUtilsContext = this;
|
|
2841
2821
|
if (typeof element === "string") {
|
|
2842
2822
|
element = DOMUtilsContext.selectorAll(element);
|
|
2843
2823
|
}
|
|
@@ -2855,7 +2835,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2855
2835
|
function step(timestamp) {
|
|
2856
2836
|
if (!start)
|
|
2857
2837
|
start = timestamp;
|
|
2858
|
-
|
|
2838
|
+
const progress = timestamp - start;
|
|
2859
2839
|
element = element;
|
|
2860
2840
|
element.style.opacity = Math.min(progress / duration, 1).toString();
|
|
2861
2841
|
if (progress < duration) {
|
|
@@ -2885,7 +2865,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2885
2865
|
* })
|
|
2886
2866
|
*/
|
|
2887
2867
|
fadeOut(element, duration = 400, callback) {
|
|
2888
|
-
|
|
2868
|
+
const DOMUtilsContext = this;
|
|
2889
2869
|
if (element == null) {
|
|
2890
2870
|
return;
|
|
2891
2871
|
}
|
|
@@ -2905,7 +2885,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2905
2885
|
function step(timestamp) {
|
|
2906
2886
|
if (!start)
|
|
2907
2887
|
start = timestamp;
|
|
2908
|
-
|
|
2888
|
+
const progress = timestamp - start;
|
|
2909
2889
|
element = element;
|
|
2910
2890
|
element.style.opacity = Math.max(1 - progress / duration, 0).toString();
|
|
2911
2891
|
if (progress < duration) {
|
|
@@ -2931,7 +2911,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2931
2911
|
* DOMUtils.toggle("a.xx")
|
|
2932
2912
|
*/
|
|
2933
2913
|
toggle(element, checkVisiblie) {
|
|
2934
|
-
|
|
2914
|
+
const DOMUtilsContext = this;
|
|
2935
2915
|
if (typeof element === "string") {
|
|
2936
2916
|
element = DOMUtilsContext.selectorAll(element);
|
|
2937
2917
|
}
|
|
@@ -2969,7 +2949,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2969
2949
|
* DOMUtils.getTextBoundingRect(document.querySelector("input"));
|
|
2970
2950
|
*/
|
|
2971
2951
|
getTextBoundingRect($input, selectionStart, selectionEnd) {
|
|
2972
|
-
|
|
2952
|
+
const DOMUtilsContext = this;
|
|
2973
2953
|
// Basic parameter validation
|
|
2974
2954
|
if (!$input || !("value" in $input))
|
|
2975
2955
|
return $input;
|
|
@@ -2998,18 +2978,20 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
2998
2978
|
else
|
|
2999
2979
|
selectionEnd = Math.min($input.value.length, selectionEnd);
|
|
3000
2980
|
// If available (thus IE), use the createTextRange method
|
|
3001
|
-
// @ts-ignore
|
|
3002
2981
|
if (typeof $input.createTextRange == "function") {
|
|
3003
|
-
|
|
2982
|
+
const range = $input.createTextRange();
|
|
3004
2983
|
range.collapse(true);
|
|
3005
2984
|
range.moveStart("character", selectionStart);
|
|
3006
2985
|
range.moveEnd("character", selectionEnd - selectionStart);
|
|
3007
2986
|
return range.getBoundingClientRect();
|
|
3008
2987
|
}
|
|
3009
2988
|
// createTextRange is not supported, create a fake text range
|
|
3010
|
-
|
|
2989
|
+
const offset = getInputOffset(), width = getInputCSS("width", true), height = getInputCSS("height", true);
|
|
2990
|
+
let topPos = offset.top;
|
|
2991
|
+
let leftPos = offset.left;
|
|
3011
2992
|
// Styles to simulate a node in an input field
|
|
3012
|
-
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;"
|
|
2993
|
+
let cssDefaultStyles = "white-space:pre;padding:0;margin:0;";
|
|
2994
|
+
const listOfModifiers = [
|
|
3013
2995
|
"direction",
|
|
3014
2996
|
"font-family",
|
|
3015
2997
|
"font-size",
|
|
@@ -3031,16 +3013,15 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
3031
3013
|
leftPos += getInputCSS("border-left-width", true);
|
|
3032
3014
|
leftPos += 1; //Seems to be necessary
|
|
3033
3015
|
for (let index = 0; index < listOfModifiers.length; index++) {
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
cssDefaultStyles += property + ":" + getInputCSS(property) + ";";
|
|
3016
|
+
const property = listOfModifiers[index];
|
|
3017
|
+
cssDefaultStyles += property + ":" + getInputCSS(property, false) + ";";
|
|
3037
3018
|
}
|
|
3038
3019
|
// End of CSS variable checks
|
|
3039
3020
|
// 不能为空,不然获取不到高度
|
|
3040
|
-
|
|
3021
|
+
const text = $input.value || "G", textLen = text.length, fakeClone = DOMUtilsContext.windowApi.document.createElement("div");
|
|
3041
3022
|
if (selectionStart > 0)
|
|
3042
3023
|
appendPart(0, selectionStart);
|
|
3043
|
-
|
|
3024
|
+
const fakeRange = appendPart(selectionStart, selectionEnd);
|
|
3044
3025
|
if (textLen > selectionEnd)
|
|
3045
3026
|
appendPart(selectionEnd, textLen);
|
|
3046
3027
|
// Styles to inherit the font styles of the element
|
|
@@ -3052,7 +3033,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
3052
3033
|
fakeClone.style.width = width + "px";
|
|
3053
3034
|
fakeClone.style.height = height + "px";
|
|
3054
3035
|
DOMUtilsContext.windowApi.document.body.appendChild(fakeClone);
|
|
3055
|
-
|
|
3036
|
+
const returnValue = fakeRange.getBoundingClientRect(); //Get rect
|
|
3056
3037
|
fakeClone?.parentNode?.removeChild(fakeClone); //Remove temp
|
|
3057
3038
|
return returnValue;
|
|
3058
3039
|
// Local functions for readability of the previous code
|
|
@@ -3063,7 +3044,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
3063
3044
|
* @returns
|
|
3064
3045
|
*/
|
|
3065
3046
|
function appendPart(start, end) {
|
|
3066
|
-
|
|
3047
|
+
const span = DOMUtilsContext.windowApi.document.createElement("span");
|
|
3067
3048
|
span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
|
|
3068
3049
|
span.textContent = text.substring(start, end);
|
|
3069
3050
|
fakeClone.appendChild(span);
|
|
@@ -3071,13 +3052,13 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
3071
3052
|
}
|
|
3072
3053
|
// Computing offset position
|
|
3073
3054
|
function getInputOffset() {
|
|
3074
|
-
|
|
3055
|
+
const body = DOMUtilsContext.windowApi.document.body, win = DOMUtilsContext.windowApi.document.defaultView, docElem = DOMUtilsContext.windowApi.document.documentElement, $box = DOMUtilsContext.windowApi.document.createElement("div");
|
|
3075
3056
|
$box.style.paddingLeft = $box.style.width = "1px";
|
|
3076
3057
|
body.appendChild($box);
|
|
3077
|
-
|
|
3058
|
+
const isBoxModel = $box.offsetWidth == 2;
|
|
3078
3059
|
body.removeChild($box);
|
|
3079
|
-
|
|
3080
|
-
|
|
3060
|
+
const $boxRect = $input.getBoundingClientRect();
|
|
3061
|
+
const clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop = win.pageYOffset || (isBoxModel && docElem.scrollTop) || body.scrollTop, scrollLeft = win.pageXOffset || (isBoxModel && docElem.scrollLeft) || body.scrollLeft;
|
|
3081
3062
|
return {
|
|
3082
3063
|
top: $boxRect.top + scrollTop - clientTop,
|
|
3083
3064
|
left: $boxRect.left + scrollLeft - clientLeft,
|
|
@@ -3090,10 +3071,13 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
3090
3071
|
* @returns
|
|
3091
3072
|
*/
|
|
3092
3073
|
function getInputCSS(prop, isNumber) {
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3074
|
+
const val = DOMUtilsContext.windowApi.document.defaultView.getComputedStyle($input, null).getPropertyValue(prop);
|
|
3075
|
+
if (isNumber) {
|
|
3076
|
+
return parseFloat(val);
|
|
3077
|
+
}
|
|
3078
|
+
else {
|
|
3079
|
+
return val;
|
|
3080
|
+
}
|
|
3097
3081
|
}
|
|
3098
3082
|
}
|
|
3099
3083
|
/** 获取 animationend 在各个浏览器的兼容名 */
|
|
@@ -3105,7 +3089,7 @@ System.register('DOMUtils', [], (function (exports) {
|
|
|
3105
3089
|
return DOMUtilsCommonUtils.getTransitionEndNameList();
|
|
3106
3090
|
}
|
|
3107
3091
|
}
|
|
3108
|
-
|
|
3092
|
+
const domUtils = exports("default", new DOMUtils());
|
|
3109
3093
|
|
|
3110
3094
|
})
|
|
3111
3095
|
};
|