@whitesev/pops 2.0.11 → 2.0.13
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/dist/index.amd.js +336 -103
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +336 -103
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +336 -103
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +336 -103
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +336 -103
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +336 -103
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +16 -12
- package/dist/types/src/components/rightClickMenu/index.d.ts +1 -1
- package/dist/types/src/components/rightClickMenu/indexType.d.ts +2 -1
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +19 -6
- package/dist/types/src/utils/PopsDOMUtils.d.ts +108 -26
- package/package.json +2 -1
- package/src/Pops.ts +1 -1
- package/src/components/rightClickMenu/index.ts +39 -24
- package/src/components/rightClickMenu/indexType.ts +3 -1
- package/src/types/PopsDOMUtilsEventType.d.ts +19 -6
- package/src/utils/PopsDOMUtils.ts +534 -169
package/dist/index.umd.js
CHANGED
|
@@ -628,8 +628,9 @@
|
|
|
628
628
|
* @param option
|
|
629
629
|
*/
|
|
630
630
|
function getOption(args, startIndex, option) {
|
|
631
|
-
|
|
632
|
-
|
|
631
|
+
let currentParam = args[startIndex];
|
|
632
|
+
if (typeof currentParam === "boolean") {
|
|
633
|
+
option.capture = currentParam;
|
|
633
634
|
if (typeof args[startIndex + 1] === "boolean") {
|
|
634
635
|
option.once = args[startIndex + 1];
|
|
635
636
|
}
|
|
@@ -637,20 +638,22 @@
|
|
|
637
638
|
option.passive = args[startIndex + 2];
|
|
638
639
|
}
|
|
639
640
|
}
|
|
640
|
-
else if (typeof
|
|
641
|
-
("capture" in
|
|
642
|
-
"once" in
|
|
643
|
-
"passive" in
|
|
644
|
-
|
|
645
|
-
option.
|
|
646
|
-
option.
|
|
641
|
+
else if (typeof currentParam === "object" &&
|
|
642
|
+
("capture" in currentParam ||
|
|
643
|
+
"once" in currentParam ||
|
|
644
|
+
"passive" in currentParam ||
|
|
645
|
+
"isComposedPath" in currentParam)) {
|
|
646
|
+
option.capture = currentParam.capture;
|
|
647
|
+
option.once = currentParam.once;
|
|
648
|
+
option.passive = currentParam.passive;
|
|
649
|
+
option.isComposedPath = currentParam.isComposedPath;
|
|
647
650
|
}
|
|
648
651
|
return option;
|
|
649
652
|
}
|
|
650
653
|
let DOMUtilsContext = this;
|
|
651
654
|
let args = arguments;
|
|
652
655
|
if (typeof element === "string") {
|
|
653
|
-
element =
|
|
656
|
+
element = DOMUtilsContext.selectorAll(element);
|
|
654
657
|
}
|
|
655
658
|
if (element == null) {
|
|
656
659
|
return;
|
|
@@ -663,88 +666,116 @@
|
|
|
663
666
|
else {
|
|
664
667
|
elementList.push(element);
|
|
665
668
|
}
|
|
669
|
+
// 事件名
|
|
666
670
|
let eventTypeList = [];
|
|
667
671
|
if (Array.isArray(eventType)) {
|
|
668
|
-
eventTypeList = eventTypeList.concat(eventType);
|
|
672
|
+
eventTypeList = eventTypeList.concat(eventType.filter((eventTypeItem) => typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""));
|
|
669
673
|
}
|
|
670
674
|
else if (typeof eventType === "string") {
|
|
671
|
-
eventTypeList = eventTypeList.concat(eventType.split(" "));
|
|
675
|
+
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== ""));
|
|
676
|
+
}
|
|
677
|
+
// 子元素选择器
|
|
678
|
+
let selectorList = [];
|
|
679
|
+
if (Array.isArray(selector)) {
|
|
680
|
+
selectorList = selectorList.concat(selector.filter((selectorItem) => typeof selectorItem === "string" && selectorItem.toString() !== ""));
|
|
681
|
+
}
|
|
682
|
+
else if (typeof selector === "string") {
|
|
683
|
+
selectorList.push(selector);
|
|
672
684
|
}
|
|
673
|
-
|
|
674
|
-
let
|
|
675
|
-
|
|
685
|
+
// 事件回调
|
|
686
|
+
let listenerCallBack = callback;
|
|
687
|
+
// 事件配置
|
|
688
|
+
let listenerOption = {
|
|
676
689
|
capture: false,
|
|
677
690
|
once: false,
|
|
678
691
|
passive: false,
|
|
692
|
+
isComposedPath: false,
|
|
679
693
|
};
|
|
680
694
|
if (typeof selector === "function") {
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
695
|
+
// 这是为没有selector的情况
|
|
696
|
+
// 那么它就是callback
|
|
697
|
+
listenerCallBack = selector;
|
|
698
|
+
listenerOption = getOption(args, 3, listenerOption);
|
|
685
699
|
}
|
|
686
700
|
else {
|
|
687
|
-
|
|
688
|
-
|
|
701
|
+
// 这是存在selector的情况
|
|
702
|
+
listenerOption = getOption(args, 4, listenerOption);
|
|
689
703
|
}
|
|
690
704
|
/**
|
|
691
705
|
* 如果是once,那么删除该监听和元素上的事件和监听
|
|
692
706
|
*/
|
|
693
707
|
function checkOptionOnceToRemoveEventListener() {
|
|
694
|
-
if (
|
|
708
|
+
if (listenerOption.once) {
|
|
695
709
|
DOMUtilsContext.off(element, eventType, selector, callback, option);
|
|
696
710
|
}
|
|
697
711
|
}
|
|
698
712
|
elementList.forEach((elementItem) => {
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
713
|
+
/**
|
|
714
|
+
* 事件回调
|
|
715
|
+
* @param event
|
|
716
|
+
*/
|
|
717
|
+
function domUtilsEventCallBack(event) {
|
|
718
|
+
if (selectorList.length) {
|
|
719
|
+
/* 存在子元素选择器 */
|
|
720
|
+
// 这时候的this和target都是子元素选择器的元素
|
|
721
|
+
let eventTarget = listenerOption.isComposedPath
|
|
722
|
+
? event.composedPath()[0]
|
|
723
|
+
: event.target;
|
|
724
|
+
let totalParent = elementItem;
|
|
725
|
+
if (popsUtils.isWin(totalParent)) {
|
|
726
|
+
if (totalParent === PopsCore.document) {
|
|
727
|
+
totalParent = PopsCore.document.documentElement;
|
|
728
|
+
}
|
|
710
729
|
}
|
|
711
|
-
|
|
712
|
-
|
|
730
|
+
let findValue = selectorList.find((selectorItem) => {
|
|
731
|
+
// 判断目标元素是否匹配选择器
|
|
732
|
+
if (DOMUtilsContext.matches(eventTarget, selectorItem)) {
|
|
733
|
+
/* 当前目标可以被selector所匹配到 */
|
|
734
|
+
return true;
|
|
735
|
+
}
|
|
713
736
|
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
|
|
714
|
-
let
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
737
|
+
let $closestMatches = DOMUtilsContext.closest(eventTarget, selectorItem);
|
|
738
|
+
if ($closestMatches && totalParent?.contains($closestMatches)) {
|
|
739
|
+
eventTarget = $closestMatches;
|
|
740
|
+
return true;
|
|
741
|
+
}
|
|
742
|
+
return false;
|
|
743
|
+
});
|
|
744
|
+
if (findValue) {
|
|
745
|
+
// 这里尝试使用defineProperty修改event的target值
|
|
746
|
+
try {
|
|
747
|
+
OriginPrototype.Object.defineProperty(event, "target", {
|
|
748
|
+
get() {
|
|
749
|
+
return eventTarget;
|
|
750
|
+
},
|
|
751
|
+
});
|
|
752
|
+
}
|
|
753
|
+
catch (error) { }
|
|
754
|
+
listenerCallBack.call(eventTarget, event, eventTarget);
|
|
722
755
|
checkOptionOnceToRemoveEventListener();
|
|
723
756
|
}
|
|
724
757
|
}
|
|
725
758
|
else {
|
|
726
|
-
|
|
759
|
+
// 这时候的this指向监听的元素
|
|
760
|
+
listenerCallBack.call(elementItem, event);
|
|
727
761
|
checkOptionOnceToRemoveEventListener();
|
|
728
762
|
}
|
|
729
763
|
}
|
|
730
764
|
/* 遍历事件名设置元素事件 */
|
|
731
765
|
eventTypeList.forEach((eventName) => {
|
|
732
|
-
elementItem.addEventListener(eventName,
|
|
733
|
-
if (_callback_ && _callback_.delegate) {
|
|
734
|
-
elementItem.setAttribute("data-delegate", _selector_);
|
|
735
|
-
}
|
|
766
|
+
elementItem.addEventListener(eventName, domUtilsEventCallBack, listenerOption);
|
|
736
767
|
/* 获取对象上的事件 */
|
|
737
|
-
let elementEvents = elementItem
|
|
768
|
+
let elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
|
|
738
769
|
/* 初始化对象上的xx事件 */
|
|
739
770
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
740
771
|
elementEvents[eventName].push({
|
|
741
|
-
selector:
|
|
742
|
-
option:
|
|
743
|
-
callback:
|
|
744
|
-
originCallBack:
|
|
772
|
+
selector: selectorList,
|
|
773
|
+
option: listenerOption,
|
|
774
|
+
callback: domUtilsEventCallBack,
|
|
775
|
+
originCallBack: listenerCallBack,
|
|
745
776
|
});
|
|
746
777
|
/* 覆盖事件 */
|
|
747
|
-
elementItem
|
|
778
|
+
Reflect.set(elementItem, SymbolEvents, elementEvents);
|
|
748
779
|
});
|
|
749
780
|
});
|
|
750
781
|
}
|
|
@@ -756,18 +787,20 @@
|
|
|
756
787
|
* @param option
|
|
757
788
|
*/
|
|
758
789
|
function getOption(args1, startIndex, option) {
|
|
759
|
-
|
|
760
|
-
|
|
790
|
+
let currentParam = args1[startIndex];
|
|
791
|
+
if (typeof currentParam === "boolean") {
|
|
792
|
+
option.capture = currentParam;
|
|
761
793
|
}
|
|
762
|
-
else if (typeof
|
|
763
|
-
"capture" in
|
|
764
|
-
option.capture =
|
|
794
|
+
else if (typeof currentParam === "object" &&
|
|
795
|
+
"capture" in currentParam) {
|
|
796
|
+
option.capture = currentParam.capture;
|
|
765
797
|
}
|
|
766
798
|
return option;
|
|
767
799
|
}
|
|
800
|
+
let DOMUtilsContext = this;
|
|
768
801
|
let args = arguments;
|
|
769
802
|
if (typeof element === "string") {
|
|
770
|
-
element =
|
|
803
|
+
element = DOMUtilsContext.selectorAll(element);
|
|
771
804
|
}
|
|
772
805
|
if (element == null) {
|
|
773
806
|
return;
|
|
@@ -782,37 +815,53 @@
|
|
|
782
815
|
}
|
|
783
816
|
let eventTypeList = [];
|
|
784
817
|
if (Array.isArray(eventType)) {
|
|
785
|
-
eventTypeList = eventTypeList.concat(eventType);
|
|
818
|
+
eventTypeList = eventTypeList.concat(eventType.filter((eventTypeItem) => typeof eventTypeItem === "string" && eventTypeItem.toString() !== ""));
|
|
786
819
|
}
|
|
787
820
|
else if (typeof eventType === "string") {
|
|
788
|
-
eventTypeList = eventTypeList.concat(eventType.split(" "));
|
|
821
|
+
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((eventTypeItem) => eventTypeItem !== ""));
|
|
822
|
+
}
|
|
823
|
+
// 子元素选择器
|
|
824
|
+
let selectorList = [];
|
|
825
|
+
if (Array.isArray(selector)) {
|
|
826
|
+
selectorList = selectorList.concat(selector.filter((selectorItem) => typeof selectorItem === "string" && selectorItem.toString() !== ""));
|
|
827
|
+
}
|
|
828
|
+
else if (typeof selector === "string") {
|
|
829
|
+
selectorList.push(selector);
|
|
789
830
|
}
|
|
790
|
-
/**
|
|
791
|
-
* 子元素选择器
|
|
792
|
-
*/
|
|
793
|
-
let _selector_ = selector;
|
|
794
831
|
/**
|
|
795
832
|
* 事件的回调函数
|
|
796
833
|
*/
|
|
797
|
-
let
|
|
834
|
+
let listenerCallBack = callback;
|
|
798
835
|
/**
|
|
799
836
|
* 事件的配置
|
|
800
837
|
*/
|
|
801
|
-
let
|
|
838
|
+
let listenerOption = {
|
|
802
839
|
capture: false,
|
|
803
840
|
};
|
|
804
841
|
if (typeof selector === "function") {
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
842
|
+
// 这是为没有selector的情况
|
|
843
|
+
// 那么它就是callback
|
|
844
|
+
listenerCallBack = selector;
|
|
845
|
+
listenerOption = getOption(args, 3, listenerOption);
|
|
809
846
|
}
|
|
810
847
|
else {
|
|
811
|
-
|
|
848
|
+
// 这是存在selector的情况
|
|
849
|
+
listenerOption = getOption(args, 4, listenerOption);
|
|
850
|
+
}
|
|
851
|
+
// 是否移除所有事件
|
|
852
|
+
let isRemoveAll = false;
|
|
853
|
+
if (args.length === 2) {
|
|
854
|
+
// 目标函数、事件名
|
|
855
|
+
isRemoveAll = true;
|
|
856
|
+
}
|
|
857
|
+
else if ((args.length === 3 && typeof args[2] === "string") ||
|
|
858
|
+
Array.isArray(args[2])) {
|
|
859
|
+
// 目标函数、事件名、子元素选择器
|
|
860
|
+
isRemoveAll = true;
|
|
812
861
|
}
|
|
813
862
|
elementList.forEach((elementItem) => {
|
|
814
863
|
/* 获取对象上的事件 */
|
|
815
|
-
let elementEvents = elementItem
|
|
864
|
+
let elementEvents = Reflect.get(elementItem, SymbolEvents) || {};
|
|
816
865
|
eventTypeList.forEach((eventName) => {
|
|
817
866
|
let handlers = elementEvents[eventName] || [];
|
|
818
867
|
if (typeof filter === "function") {
|
|
@@ -820,19 +869,25 @@
|
|
|
820
869
|
}
|
|
821
870
|
for (let index = 0; index < handlers.length; index++) {
|
|
822
871
|
let handler = handlers[index];
|
|
823
|
-
let flag =
|
|
824
|
-
if (
|
|
825
|
-
|
|
826
|
-
|
|
872
|
+
let flag = true;
|
|
873
|
+
if (flag &&
|
|
874
|
+
listenerCallBack &&
|
|
875
|
+
handler.originCallBack !== listenerCallBack) {
|
|
876
|
+
// callback不同
|
|
877
|
+
flag = false;
|
|
827
878
|
}
|
|
828
|
-
if (
|
|
829
|
-
handler.
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
879
|
+
if (flag && selectorList.length && Array.isArray(handler.selector)) {
|
|
880
|
+
if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
|
|
881
|
+
// 子元素选择器不同
|
|
882
|
+
flag = false;
|
|
883
|
+
}
|
|
833
884
|
}
|
|
834
|
-
if (flag) {
|
|
835
|
-
|
|
885
|
+
if (flag && listenerOption.capture !== handler.option.capture) {
|
|
886
|
+
// 事件的配置项不同
|
|
887
|
+
flag = false;
|
|
888
|
+
}
|
|
889
|
+
if (flag || isRemoveAll) {
|
|
890
|
+
elementItem.removeEventListener(eventName, handler.callback, handler.option);
|
|
836
891
|
handlers.splice(index--, 1);
|
|
837
892
|
}
|
|
838
893
|
}
|
|
@@ -841,7 +896,7 @@
|
|
|
841
896
|
popsUtils.delete(elementEvents, eventType);
|
|
842
897
|
}
|
|
843
898
|
});
|
|
844
|
-
elementItem
|
|
899
|
+
Reflect.set(elementItem, SymbolEvents, elementEvents);
|
|
845
900
|
});
|
|
846
901
|
}
|
|
847
902
|
/**
|
|
@@ -1246,6 +1301,177 @@
|
|
|
1246
1301
|
});
|
|
1247
1302
|
}
|
|
1248
1303
|
}
|
|
1304
|
+
selector(selector) {
|
|
1305
|
+
return this.selectorAll(selector)[0];
|
|
1306
|
+
}
|
|
1307
|
+
selectorAll(selector) {
|
|
1308
|
+
selector = selector.trim();
|
|
1309
|
+
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1310
|
+
// empty 语法
|
|
1311
|
+
selector = selector.replace(/:empty$/gi, "");
|
|
1312
|
+
return Array.from(PopsCore.document.querySelectorAll(selector)).filter(($ele) => {
|
|
1313
|
+
return $ele?.innerHTML?.trim() === "";
|
|
1314
|
+
});
|
|
1315
|
+
}
|
|
1316
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1317
|
+
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1318
|
+
// contains 语法
|
|
1319
|
+
let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1320
|
+
let text = textMatch[2];
|
|
1321
|
+
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1322
|
+
return Array.from(PopsCore.document.querySelectorAll(selector)).filter(($ele) => {
|
|
1323
|
+
// @ts-ignore
|
|
1324
|
+
return ($ele?.textContent || $ele?.innerText)?.includes(text);
|
|
1325
|
+
});
|
|
1326
|
+
}
|
|
1327
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1328
|
+
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1329
|
+
// regexp 语法
|
|
1330
|
+
let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1331
|
+
let pattern = textMatch[2];
|
|
1332
|
+
let flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1333
|
+
let flags = "";
|
|
1334
|
+
if (flagMatch) {
|
|
1335
|
+
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1336
|
+
flags = flagMatch[3];
|
|
1337
|
+
}
|
|
1338
|
+
let regexp = new RegExp(pattern, flags);
|
|
1339
|
+
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1340
|
+
return Array.from(PopsCore.document.querySelectorAll(selector)).filter(($ele) => {
|
|
1341
|
+
// @ts-ignore
|
|
1342
|
+
return Boolean(($ele?.textContent || $ele?.innerText)?.match(regexp));
|
|
1343
|
+
});
|
|
1344
|
+
}
|
|
1345
|
+
else {
|
|
1346
|
+
// 普通语法
|
|
1347
|
+
return Array.from(PopsCore.document.querySelectorAll(selector));
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
/**
|
|
1351
|
+
* 匹配元素,可使用以下的额外语法
|
|
1352
|
+
*
|
|
1353
|
+
* + :contains([text]) 作用: 找到包含指定文本内容的指定元素
|
|
1354
|
+
* + :empty 作用:找到既没有文本内容也没有子元素的指定元素
|
|
1355
|
+
* + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
|
|
1356
|
+
* @param $el 元素
|
|
1357
|
+
* @param selector 选择器
|
|
1358
|
+
* @example
|
|
1359
|
+
* DOMUtils.matches("div:contains('测试')")
|
|
1360
|
+
* > true
|
|
1361
|
+
* @example
|
|
1362
|
+
* DOMUtils.matches("div:empty")
|
|
1363
|
+
* > true
|
|
1364
|
+
* @example
|
|
1365
|
+
* DOMUtils.matches("div:regexp('^xxxx$')")
|
|
1366
|
+
* > true
|
|
1367
|
+
* @example
|
|
1368
|
+
* DOMUtils.matches("div:regexp(/^xxx/ig)")
|
|
1369
|
+
* > false
|
|
1370
|
+
*/
|
|
1371
|
+
matches($el, selector) {
|
|
1372
|
+
selector = selector.trim();
|
|
1373
|
+
if ($el == null) {
|
|
1374
|
+
return false;
|
|
1375
|
+
}
|
|
1376
|
+
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1377
|
+
// empty 语法
|
|
1378
|
+
selector = selector.replace(/:empty$/gi, "");
|
|
1379
|
+
return $el.matches(selector) && $el?.innerHTML?.trim() === "";
|
|
1380
|
+
}
|
|
1381
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1382
|
+
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1383
|
+
// contains 语法
|
|
1384
|
+
let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1385
|
+
let text = textMatch[2];
|
|
1386
|
+
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1387
|
+
// @ts-ignore
|
|
1388
|
+
let content = $el?.textContent || $el?.innerText;
|
|
1389
|
+
if (typeof content !== "string") {
|
|
1390
|
+
content = "";
|
|
1391
|
+
}
|
|
1392
|
+
return $el.matches(selector) && content?.includes(text);
|
|
1393
|
+
}
|
|
1394
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1395
|
+
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1396
|
+
// regexp 语法
|
|
1397
|
+
let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1398
|
+
let pattern = textMatch[2];
|
|
1399
|
+
let flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1400
|
+
let flags = "";
|
|
1401
|
+
if (flagMatch) {
|
|
1402
|
+
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1403
|
+
flags = flagMatch[3];
|
|
1404
|
+
}
|
|
1405
|
+
let regexp = new RegExp(pattern, flags);
|
|
1406
|
+
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1407
|
+
// @ts-ignore
|
|
1408
|
+
let content = $el?.textContent || $el?.innerText;
|
|
1409
|
+
if (typeof content !== "string") {
|
|
1410
|
+
content = "";
|
|
1411
|
+
}
|
|
1412
|
+
return $el.matches(selector) && Boolean(content?.match(regexp));
|
|
1413
|
+
}
|
|
1414
|
+
else {
|
|
1415
|
+
// 普通语法
|
|
1416
|
+
return $el.matches(selector);
|
|
1417
|
+
}
|
|
1418
|
+
}
|
|
1419
|
+
closest($el, selector) {
|
|
1420
|
+
selector = selector.trim();
|
|
1421
|
+
if (selector.match(/[^\s]{1}:empty$/gi)) {
|
|
1422
|
+
// empty 语法
|
|
1423
|
+
selector = selector.replace(/:empty$/gi, "");
|
|
1424
|
+
let $closest = $el?.closest(selector);
|
|
1425
|
+
if ($closest && $closest?.innerHTML?.trim() === "") {
|
|
1426
|
+
return $closest;
|
|
1427
|
+
}
|
|
1428
|
+
return null;
|
|
1429
|
+
}
|
|
1430
|
+
else if (selector.match(/[^\s]{1}:contains\("(.*)"\)$/i) ||
|
|
1431
|
+
selector.match(/[^\s]{1}:contains\('(.*)'\)$/i)) {
|
|
1432
|
+
// contains 语法
|
|
1433
|
+
let textMatch = selector.match(/:contains\(("|')(.*)("|')\)$/i);
|
|
1434
|
+
let text = textMatch[2];
|
|
1435
|
+
selector = selector.replace(/:contains\(("|')(.*)("|')\)$/gi, "");
|
|
1436
|
+
let $closest = $el?.closest(selector);
|
|
1437
|
+
if ($closest) {
|
|
1438
|
+
// @ts-ignore
|
|
1439
|
+
let content = $el?.textContent || $el?.innerText;
|
|
1440
|
+
if (typeof content === "string" && content.includes(text)) {
|
|
1441
|
+
return $closest;
|
|
1442
|
+
}
|
|
1443
|
+
}
|
|
1444
|
+
return null;
|
|
1445
|
+
}
|
|
1446
|
+
else if (selector.match(/[^\s]{1}:regexp\("(.*)"\)$/i) ||
|
|
1447
|
+
selector.match(/[^\s]{1}:regexp\('(.*)'\)$/i)) {
|
|
1448
|
+
// regexp 语法
|
|
1449
|
+
let textMatch = selector.match(/:regexp\(("|')(.*)("|')\)$/i);
|
|
1450
|
+
let pattern = textMatch[2];
|
|
1451
|
+
let flagMatch = pattern.match(/("|'),[\s]*("|')([igm]{0,3})$/i);
|
|
1452
|
+
let flags = "";
|
|
1453
|
+
if (flagMatch) {
|
|
1454
|
+
pattern = pattern.replace(/("|'),[\s]*("|')([igm]{0,3})$/gi, "");
|
|
1455
|
+
flags = flagMatch[3];
|
|
1456
|
+
}
|
|
1457
|
+
let regexp = new RegExp(pattern, flags);
|
|
1458
|
+
selector = selector.replace(/:regexp\(("|')(.*)("|')\)$/gi, "");
|
|
1459
|
+
let $closest = $el?.closest(selector);
|
|
1460
|
+
if ($closest) {
|
|
1461
|
+
// @ts-ignore
|
|
1462
|
+
let content = $el?.textContent || $el?.innerText;
|
|
1463
|
+
if (typeof content === "string" && content.match(regexp)) {
|
|
1464
|
+
return $closest;
|
|
1465
|
+
}
|
|
1466
|
+
}
|
|
1467
|
+
return null;
|
|
1468
|
+
}
|
|
1469
|
+
else {
|
|
1470
|
+
// 普通语法
|
|
1471
|
+
let $closest = $el?.closest(selector);
|
|
1472
|
+
return $closest;
|
|
1473
|
+
}
|
|
1474
|
+
}
|
|
1249
1475
|
}
|
|
1250
1476
|
class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
1251
1477
|
/** 获取 animationend 在各个浏览器的兼容名 */
|
|
@@ -9800,8 +10026,9 @@
|
|
|
9800
10026
|
/**
|
|
9801
10027
|
* contextmenu事件
|
|
9802
10028
|
* @param event
|
|
10029
|
+
* @param selectorTarget
|
|
9803
10030
|
*/
|
|
9804
|
-
contextMenuEvent(event) {
|
|
10031
|
+
contextMenuEvent(event, selectorTarget) {
|
|
9805
10032
|
if (config.preventDefault) {
|
|
9806
10033
|
popsDOMUtils.preventEvent(event);
|
|
9807
10034
|
}
|
|
@@ -9809,7 +10036,7 @@
|
|
|
9809
10036
|
if (PopsContextMenu.rootElement) {
|
|
9810
10037
|
PopsContextMenu.closeAllMenu(PopsContextMenu.rootElement);
|
|
9811
10038
|
}
|
|
9812
|
-
let rootElement = PopsContextMenu.showMenu(event, config.data);
|
|
10039
|
+
let rootElement = PopsContextMenu.showMenu(event, config.data, selectorTarget);
|
|
9813
10040
|
PopsContextMenu.rootElement = rootElement;
|
|
9814
10041
|
if (config.only) {
|
|
9815
10042
|
PopsHandler.handlePush(PopsType, {
|
|
@@ -9849,14 +10076,14 @@
|
|
|
9849
10076
|
* 动画结束触发的事件
|
|
9850
10077
|
*/
|
|
9851
10078
|
function transitionEndEvent(event) {
|
|
9852
|
-
popsDOMUtils.off(element, popsDOMUtils.getTransitionEndNameList(),
|
|
10079
|
+
popsDOMUtils.off(element, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
|
|
9853
10080
|
capture: true,
|
|
9854
10081
|
});
|
|
9855
10082
|
element.remove();
|
|
9856
10083
|
}
|
|
9857
10084
|
if (element.classList.contains(`pops-${PopsType}-anim-show`)) {
|
|
9858
10085
|
/* 有动画 */
|
|
9859
|
-
popsDOMUtils.on(element, popsDOMUtils.getTransitionEndNameList(),
|
|
10086
|
+
popsDOMUtils.on(element, popsDOMUtils.getTransitionEndNameList(), transitionEndEvent, {
|
|
9860
10087
|
capture: true,
|
|
9861
10088
|
});
|
|
9862
10089
|
element.classList.remove(`pops-${PopsType}-anim-show`);
|
|
@@ -9947,13 +10174,14 @@
|
|
|
9947
10174
|
* 显示菜单
|
|
9948
10175
|
* @param menuEvent 触发的事件
|
|
9949
10176
|
* @param _config_
|
|
10177
|
+
* @param menuListenerRootNode 右键菜单监听的元素
|
|
9950
10178
|
*/
|
|
9951
|
-
showMenu(menuEvent, _config_) {
|
|
10179
|
+
showMenu(menuEvent, _config_, menuListenerRootNode) {
|
|
9952
10180
|
let menuElement = this.getMenuContainerElement(false);
|
|
9953
10181
|
Reflect.set(menuElement, "__menuData__", {
|
|
9954
10182
|
child: [],
|
|
9955
10183
|
});
|
|
9956
|
-
PopsContextMenu.addMenuLiELement(menuEvent, menuElement, menuElement, _config_);
|
|
10184
|
+
PopsContextMenu.addMenuLiELement(menuEvent, menuElement, menuElement, _config_, menuListenerRootNode);
|
|
9957
10185
|
/* 先隐藏 */
|
|
9958
10186
|
popsDOMUtils.css(menuElement, {
|
|
9959
10187
|
display: "none",
|
|
@@ -9985,8 +10213,9 @@
|
|
|
9985
10213
|
* @param _config_
|
|
9986
10214
|
* @param rootElement 根菜单元素
|
|
9987
10215
|
* @param targetLiElement 父li项元素
|
|
10216
|
+
* @param menuListenerRootNode 右键菜单监听的元素
|
|
9988
10217
|
*/
|
|
9989
|
-
showClildMenu(menuEvent, posInfo, _config_, rootElement, targetLiElement) {
|
|
10218
|
+
showClildMenu(menuEvent, posInfo, _config_, rootElement, targetLiElement, menuListenerRootNode) {
|
|
9990
10219
|
let menuElement = this.getMenuContainerElement(true);
|
|
9991
10220
|
Reflect.set(menuElement, "__menuData__", {
|
|
9992
10221
|
parent: targetLiElement,
|
|
@@ -9995,7 +10224,7 @@
|
|
|
9995
10224
|
// 根菜单数据
|
|
9996
10225
|
let rootElementMenuData = Reflect.get(rootElement, "__menuData__");
|
|
9997
10226
|
rootElementMenuData.child.push(menuElement);
|
|
9998
|
-
PopsContextMenu.addMenuLiELement(menuEvent, rootElement, menuElement, _config_);
|
|
10227
|
+
PopsContextMenu.addMenuLiELement(menuEvent, rootElement, menuElement, _config_, menuListenerRootNode);
|
|
9999
10228
|
/* 先隐藏 */
|
|
10000
10229
|
popsDOMUtils.css(menuElement, {
|
|
10001
10230
|
display: "none",
|
|
@@ -10020,8 +10249,9 @@
|
|
|
10020
10249
|
* @param rootElement 根元素
|
|
10021
10250
|
* @param menuElement 菜单元素
|
|
10022
10251
|
* @param _config_ 配置
|
|
10252
|
+
* @param menuListenerRootNode 右键菜单监听的元素
|
|
10023
10253
|
*/
|
|
10024
|
-
addMenuLiELement(menuEvent, rootElement, menuElement, _config_) {
|
|
10254
|
+
addMenuLiELement(menuEvent, rootElement, menuElement, _config_, menuListenerRootNode) {
|
|
10025
10255
|
let menuEventTarget = menuEvent.target;
|
|
10026
10256
|
let menuULElement = menuElement.querySelector("ul");
|
|
10027
10257
|
_config_.forEach((item) => {
|
|
@@ -10075,7 +10305,7 @@
|
|
|
10075
10305
|
let childMenu = PopsContextMenu.showClildMenu(menuEvent, {
|
|
10076
10306
|
clientX: rect.left + popsDOMUtils.outerWidth(menuLiElement),
|
|
10077
10307
|
clientY: rect.top,
|
|
10078
|
-
}, item.item, rootElement, menuLiElement);
|
|
10308
|
+
}, item.item, rootElement, menuLiElement, menuListenerRootNode);
|
|
10079
10309
|
menuLiElement.__menuData__ = {
|
|
10080
10310
|
child: childMenu,
|
|
10081
10311
|
};
|
|
@@ -10087,12 +10317,15 @@
|
|
|
10087
10317
|
*/
|
|
10088
10318
|
async function liElementClickEvent(clickEvent) {
|
|
10089
10319
|
if (typeof item.callback === "function") {
|
|
10090
|
-
|
|
10091
|
-
|
|
10092
|
-
|
|
10093
|
-
|
|
10094
|
-
|
|
10095
|
-
|
|
10320
|
+
try {
|
|
10321
|
+
OriginPrototype.Object.defineProperty(menuEvent, "target", {
|
|
10322
|
+
get() {
|
|
10323
|
+
return menuEventTarget;
|
|
10324
|
+
},
|
|
10325
|
+
});
|
|
10326
|
+
}
|
|
10327
|
+
catch (error) { }
|
|
10328
|
+
let callbackResult = await item.callback(clickEvent, menuEvent, menuLiElement, menuListenerRootNode);
|
|
10096
10329
|
if (typeof callbackResult === "boolean" &&
|
|
10097
10330
|
callbackResult == false) {
|
|
10098
10331
|
return;
|
|
@@ -10729,7 +10962,7 @@
|
|
|
10729
10962
|
/** 配置 */
|
|
10730
10963
|
config = {
|
|
10731
10964
|
/** 版本号 */
|
|
10732
|
-
version: "2025.6.
|
|
10965
|
+
version: "2025.6.6",
|
|
10733
10966
|
cssText: PopsCSS,
|
|
10734
10967
|
/** icon图标的svg代码 */
|
|
10735
10968
|
iconSVG: PopsIcon.$data,
|