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