@whitesev/pops 4.2.1 → 4.2.2
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 +131 -128
- package/dist/index.amd.js.map +1 -1
- package/dist/index.amd.min.js +1 -1
- package/dist/index.amd.min.js.map +1 -1
- package/dist/index.cjs.js +131 -128
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.cjs.min.js.map +1 -1
- package/dist/index.esm.js +131 -128
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +131 -128
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +1 -1
- package/dist/index.iife.min.js.map +1 -1
- package/dist/index.system.js +131 -128
- package/dist/index.system.js.map +1 -1
- package/dist/index.system.min.js +1 -1
- package/dist/index.system.min.js.map +1 -1
- package/dist/index.umd.js +131 -128
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/dist/types/src/Pops.d.ts +8 -8
- package/dist/types/src/utils/PopsDOMUtils.d.ts +9 -9
- package/package.json +1 -1
- package/src/utils/PopsDOMUtils.ts +103 -101
package/dist/index.umd.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.pops = factory());
|
|
5
5
|
})(this, (function () { 'use strict';
|
|
6
6
|
|
|
7
|
-
const version = "4.2.
|
|
7
|
+
const version = "4.2.2";
|
|
8
8
|
|
|
9
9
|
const GlobalConfig = {
|
|
10
10
|
config: {},
|
|
@@ -248,6 +248,24 @@
|
|
|
248
248
|
},
|
|
249
249
|
};
|
|
250
250
|
|
|
251
|
+
/**
|
|
252
|
+
* 通用的CSS类名
|
|
253
|
+
*/
|
|
254
|
+
const PopsCommonCSSClassName = {
|
|
255
|
+
flexCenter: "pops-flex-items-center",
|
|
256
|
+
flexYCenter: "pops-flex-y-center",
|
|
257
|
+
flexXCenter: "pops-flex-x-center",
|
|
258
|
+
hide: "pops-hide",
|
|
259
|
+
hideImportant: "pops-hide-important",
|
|
260
|
+
noBorder: "pops-no-border",
|
|
261
|
+
noBorderImportant: "pops-no-border-important",
|
|
262
|
+
userSelectNone: "pops-user-select-none",
|
|
263
|
+
lineHeightCenter: "pops-line-height-center",
|
|
264
|
+
widthFill: "pops-width-fill",
|
|
265
|
+
textIsDisabled: "pops-text-is-disabled",
|
|
266
|
+
textIsDisabledImportant: "pops-text-is-disabled-important",
|
|
267
|
+
};
|
|
268
|
+
|
|
251
269
|
const OriginPrototype = {
|
|
252
270
|
Object: {
|
|
253
271
|
defineProperty: Object.defineProperty,
|
|
@@ -297,6 +315,30 @@
|
|
|
297
315
|
},
|
|
298
316
|
};
|
|
299
317
|
|
|
318
|
+
const PopsSafeUtils = {
|
|
319
|
+
/**
|
|
320
|
+
* 获取安全的html
|
|
321
|
+
*/
|
|
322
|
+
getSafeHTML(text) {
|
|
323
|
+
if (window.trustedTypes) {
|
|
324
|
+
const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
|
|
325
|
+
createHTML: (html) => html,
|
|
326
|
+
});
|
|
327
|
+
return policy.createHTML(text);
|
|
328
|
+
}
|
|
329
|
+
else {
|
|
330
|
+
return text;
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
/**
|
|
334
|
+
* 设置安全的html
|
|
335
|
+
*/
|
|
336
|
+
setSafeHTML($el, text) {
|
|
337
|
+
// 创建 TrustedHTML 策略(需 CSP 允许)
|
|
338
|
+
$el.innerHTML = this.getSafeHTML(text);
|
|
339
|
+
},
|
|
340
|
+
};
|
|
341
|
+
|
|
300
342
|
const n$1="clientX",e$2="clientY",t$1=16,c$3="start",o$1="move",s$1="cancel",u$3="end",a$2="left",i$3="right",r$4="up",d$1="down",m$2={4:"start",5:"move",1:"end",3:"cancel"};function v$1(n){return m$2[n]}function b(n,e,t){const c={1:{0:{move:4},4:{move:5,end:1,cancel:3},5:{move:5,end:1,cancel:3}},0:{4:{move:2,end:1,cancel:3},5:{start:2,move:2,end:1,cancel:3}}}[Number(n)][e];return void 0!==c&&c[t]||0}function g$1(n){[1,3,2].includes(n.state)&&(n.state=0);}function h$3(n){return [5,1,3].includes(n)}function j(n){if(n.disabled)return n.state=0,true}function O(n,e){return Object.assign(Object.assign(Object.assign({},n),e),{state:0,disabled:false})}function p$3(n){return Math.round(100*n)/100}
|
|
301
343
|
|
|
302
344
|
var x=r=>Math.sqrt(r.x*r.x+r.y*r.y),y=(r,a)=>r.x*a.x+r.y*a.y,e$1=(r,a)=>{var t=x(r)*x(a);if(0===t)return 0;var h=y(r,a)/t;return h>1&&(h=1),Math.acos(h)},n=(r,a)=>r.x*a.y-a.x*r.y,o=r=>r/Math.PI*180,s=(r,a)=>{var t=e$1(r,a);return n(r,a)>0&&(t*=-1),o(t)},u$2=(x,y)=>{if(0!==x||0!==y)return Math.abs(x)>=Math.abs(y)?0<x?i$3:a$2:0<y?d$1:r$4};
|
|
@@ -766,48 +808,6 @@
|
|
|
766
808
|
}
|
|
767
809
|
const popsUtils = new PopsUtils();
|
|
768
810
|
|
|
769
|
-
const PopsSafeUtils = {
|
|
770
|
-
/**
|
|
771
|
-
* 获取安全的html
|
|
772
|
-
*/
|
|
773
|
-
getSafeHTML(text) {
|
|
774
|
-
if (window.trustedTypes) {
|
|
775
|
-
const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
|
|
776
|
-
createHTML: (html) => html,
|
|
777
|
-
});
|
|
778
|
-
return policy.createHTML(text);
|
|
779
|
-
}
|
|
780
|
-
else {
|
|
781
|
-
return text;
|
|
782
|
-
}
|
|
783
|
-
},
|
|
784
|
-
/**
|
|
785
|
-
* 设置安全的html
|
|
786
|
-
*/
|
|
787
|
-
setSafeHTML($el, text) {
|
|
788
|
-
// 创建 TrustedHTML 策略(需 CSP 允许)
|
|
789
|
-
$el.innerHTML = this.getSafeHTML(text);
|
|
790
|
-
},
|
|
791
|
-
};
|
|
792
|
-
|
|
793
|
-
/**
|
|
794
|
-
* 通用的CSS类名
|
|
795
|
-
*/
|
|
796
|
-
const PopsCommonCSSClassName = {
|
|
797
|
-
flexCenter: "pops-flex-items-center",
|
|
798
|
-
flexYCenter: "pops-flex-y-center",
|
|
799
|
-
flexXCenter: "pops-flex-x-center",
|
|
800
|
-
hide: "pops-hide",
|
|
801
|
-
hideImportant: "pops-hide-important",
|
|
802
|
-
noBorder: "pops-no-border",
|
|
803
|
-
noBorderImportant: "pops-no-border-important",
|
|
804
|
-
userSelectNone: "pops-user-select-none",
|
|
805
|
-
lineHeightCenter: "pops-line-height-center",
|
|
806
|
-
widthFill: "pops-width-fill",
|
|
807
|
-
textIsDisabled: "pops-text-is-disabled",
|
|
808
|
-
textIsDisabledImportant: "pops-text-is-disabled-important",
|
|
809
|
-
};
|
|
810
|
-
|
|
811
811
|
/**
|
|
812
812
|
* 存储在元素属性上的事件名
|
|
813
813
|
*/
|
|
@@ -897,91 +897,91 @@
|
|
|
897
897
|
// 这是存在selector的情况
|
|
898
898
|
listenerOption = getOption(args, 4, listenerOption);
|
|
899
899
|
}
|
|
900
|
-
/**
|
|
901
|
-
* 如果是once,那么删除该监听和元素上的事件和监听
|
|
902
|
-
*/
|
|
903
|
-
const checkOptionOnceToRemoveEventListener = ($el) => {
|
|
904
|
-
if (listenerOption.once) {
|
|
905
|
-
this.off($el, eventTypeList, selector, callback, option);
|
|
906
|
-
}
|
|
907
|
-
};
|
|
908
900
|
$elList.forEach(($elItem) => {
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
let execCallback = false;
|
|
918
|
-
if (selectorList.length) {
|
|
919
|
-
// 存在子元素选择器
|
|
920
|
-
// 这时候的this和target都是子元素选择器的元素
|
|
921
|
-
let $target;
|
|
922
|
-
if (listenerOption.isComposedPath) {
|
|
923
|
-
// 可能为空
|
|
924
|
-
const composedPath = event.composedPath();
|
|
925
|
-
if (!composedPath.length && event.target) {
|
|
926
|
-
composedPath.push(event.target);
|
|
927
|
-
}
|
|
928
|
-
$target = composedPath[0];
|
|
901
|
+
// 遍历事件名设置元素事件
|
|
902
|
+
eventTypeList.forEach((eventName) => {
|
|
903
|
+
/**
|
|
904
|
+
* 如果是option.once,那么删除该监听和元素上的事件和监听
|
|
905
|
+
*/
|
|
906
|
+
const checkOptionOnceToRemoveEventListener = () => {
|
|
907
|
+
if (listenerOption.once) {
|
|
908
|
+
this.off($elItem, eventName, selector, callback, option);
|
|
929
909
|
}
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
910
|
+
};
|
|
911
|
+
/**
|
|
912
|
+
* 事件回调
|
|
913
|
+
* @param event
|
|
914
|
+
*/
|
|
915
|
+
const handlerCallBack = function (event) {
|
|
916
|
+
let call_this = void 0;
|
|
917
|
+
let call_event = void 0;
|
|
918
|
+
let call_$selector = void 0;
|
|
919
|
+
let execCallback = false;
|
|
920
|
+
if (selectorList.length) {
|
|
921
|
+
// 存在子元素选择器
|
|
922
|
+
// 这时候的this和target都是子元素选择器的元素
|
|
923
|
+
let $target;
|
|
924
|
+
if (listenerOption.isComposedPath) {
|
|
925
|
+
// 可能为空
|
|
926
|
+
const composedPath = event.composedPath();
|
|
927
|
+
if (!composedPath.length && event.target) {
|
|
928
|
+
composedPath.push(event.target);
|
|
929
|
+
}
|
|
930
|
+
$target = composedPath[0];
|
|
944
931
|
}
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
if ($closestMatches && $parent?.contains?.($closestMatches)) {
|
|
948
|
-
$target = $closestMatches;
|
|
949
|
-
return true;
|
|
932
|
+
else {
|
|
933
|
+
$target = event.target;
|
|
950
934
|
}
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
OriginPrototype.Object.defineProperty(event, "target", {
|
|
957
|
-
get() {
|
|
958
|
-
return $target;
|
|
959
|
-
},
|
|
960
|
-
});
|
|
961
|
-
// oxlint-disable-next-line no-empty
|
|
935
|
+
let $parent = $elItem;
|
|
936
|
+
if (popsUtils.isWin($parent)) {
|
|
937
|
+
// window和document共用一个对象
|
|
938
|
+
// 这样就能处理子元素选择器无法匹配的问题
|
|
939
|
+
$parent = PopsCore.document.documentElement;
|
|
962
940
|
}
|
|
963
|
-
|
|
941
|
+
const findValue = selectorList.find((selectors) => {
|
|
942
|
+
// 判断目标元素是否匹配选择器
|
|
943
|
+
if (that.matches($target, selectors)) {
|
|
944
|
+
// 当前目标可以被selector所匹配到
|
|
945
|
+
return true;
|
|
946
|
+
}
|
|
947
|
+
// 在上层与主元素之间寻找可以被selector所匹配到的
|
|
948
|
+
const $closestMatches = that.closest($target, selectors);
|
|
949
|
+
if ($closestMatches && $parent?.contains?.($closestMatches)) {
|
|
950
|
+
$target = $closestMatches;
|
|
951
|
+
return true;
|
|
952
|
+
}
|
|
953
|
+
return false;
|
|
954
|
+
});
|
|
955
|
+
if (findValue) {
|
|
956
|
+
// 这里尝试使用defineProperty修改event的target值
|
|
957
|
+
try {
|
|
958
|
+
OriginPrototype.Object.defineProperty(event, "target", {
|
|
959
|
+
get() {
|
|
960
|
+
return $target;
|
|
961
|
+
},
|
|
962
|
+
});
|
|
963
|
+
// oxlint-disable-next-line no-empty
|
|
964
|
+
}
|
|
965
|
+
catch { }
|
|
966
|
+
execCallback = true;
|
|
967
|
+
call_this = $target;
|
|
968
|
+
call_event = event;
|
|
969
|
+
call_$selector = $target;
|
|
970
|
+
}
|
|
971
|
+
}
|
|
972
|
+
else {
|
|
964
973
|
execCallback = true;
|
|
965
|
-
call_this = $
|
|
974
|
+
call_this = $elItem;
|
|
966
975
|
call_event = event;
|
|
967
|
-
call_$selector = $target;
|
|
968
976
|
}
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
if (execCallback) {
|
|
976
|
-
const result = listenerCallBack.call(call_this, call_event, call_$selector);
|
|
977
|
-
checkOptionOnceToRemoveEventListener($elItem);
|
|
978
|
-
if (typeof result === "boolean" && !result) {
|
|
979
|
-
return false;
|
|
977
|
+
if (execCallback) {
|
|
978
|
+
const result = listenerCallBack.call(call_this, call_event, call_$selector);
|
|
979
|
+
checkOptionOnceToRemoveEventListener();
|
|
980
|
+
if (typeof result === "boolean" && !result) {
|
|
981
|
+
return false;
|
|
982
|
+
}
|
|
980
983
|
}
|
|
981
|
-
}
|
|
982
|
-
};
|
|
983
|
-
// 遍历事件名设置元素事件
|
|
984
|
-
eventTypeList.forEach((eventName) => {
|
|
984
|
+
};
|
|
985
985
|
// add listener
|
|
986
986
|
$elItem.addEventListener(eventName, handlerCallBack, listenerOption);
|
|
987
987
|
// 获取对象上的事件
|
|
@@ -1094,31 +1094,34 @@
|
|
|
1094
1094
|
const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
|
|
1095
1095
|
eventTypeList.forEach((eventName) => {
|
|
1096
1096
|
const handlers = elementEvents[eventName] || [];
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1097
|
+
// 过滤出需要删除的事件
|
|
1098
|
+
const handlersFiltered = typeof filter === "function" ? handlers.filter(filter) : handlers;
|
|
1099
|
+
for (let index = 0; index < handlersFiltered.length; index++) {
|
|
1100
|
+
const handler = handlersFiltered[index];
|
|
1101
|
+
// 过滤出的事件再根据下面的条件进行判断处理移除
|
|
1102
|
+
// 1. callback内存地址必须相同
|
|
1103
|
+
// 2. selector必须相同
|
|
1104
|
+
// 3. option.capture必须相同
|
|
1100
1105
|
let flag = true;
|
|
1101
1106
|
if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
|
|
1102
|
-
// callback不同
|
|
1103
1107
|
flag = false;
|
|
1104
1108
|
}
|
|
1105
1109
|
if (flag && selectorList.length && Array.isArray(handler.selector)) {
|
|
1106
1110
|
if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
|
|
1107
|
-
// 子元素选择器不同
|
|
1108
1111
|
flag = false;
|
|
1109
1112
|
}
|
|
1110
1113
|
}
|
|
1111
1114
|
if (flag &&
|
|
1112
1115
|
typeof handler.option.capture === "boolean" &&
|
|
1113
1116
|
listenerOption.capture !== handler.option.capture) {
|
|
1114
|
-
// 事件的配置项不同
|
|
1115
1117
|
flag = false;
|
|
1116
1118
|
}
|
|
1117
1119
|
if (flag) {
|
|
1118
1120
|
$elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1121
|
+
for (let i = handlers.length - 1; i >= 0; i--) {
|
|
1122
|
+
if (handlers[i] === handler) {
|
|
1123
|
+
handlers.splice(i, 1);
|
|
1124
|
+
}
|
|
1122
1125
|
}
|
|
1123
1126
|
}
|
|
1124
1127
|
}
|