@whitesev/pops 4.1.0 → 4.2.1
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 +250 -227
- 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 +250 -227
- 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 +250 -227
- 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 +250 -227
- 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 +250 -227
- 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 +250 -227
- 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 +17 -16
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +3 -3
- package/dist/types/src/types/mask.d.ts +6 -6
- package/dist/types/src/utils/PopsDOMUtils.d.ts +6 -18
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +22 -0
- package/dist/types/src/utils/PopsUtils.d.ts +1 -1
- package/package.json +1 -1
- package/src/Pops.ts +9 -12
- package/src/components/panel/handlerComponents.ts +4 -4
- package/src/handler/PopsHandler.ts +9 -21
- package/src/handler/PopsInstHandler.ts +3 -2
- package/src/types/PopsDOMUtilsEventType.d.ts +3 -3
- package/src/types/mask.d.ts +6 -6
- package/src/utils/PopsDOMUtils.ts +105 -113
- package/src/utils/PopsInstanceUtils.ts +50 -0
- package/src/utils/PopsUtils.ts +2 -2
- package/dist/types/src/utils/PopsDOMUtilsEventsConfig.d.ts +0 -4
- package/src/utils/PopsDOMUtilsEventsConfig.ts +0 -4
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const version = "4.1
|
|
1
|
+
const version = "4.2.1";
|
|
2
2
|
|
|
3
3
|
const GlobalConfig = {
|
|
4
4
|
config: {},
|
|
@@ -242,11 +242,6 @@ const PopsIcon = {
|
|
|
242
242
|
},
|
|
243
243
|
};
|
|
244
244
|
|
|
245
|
-
/**
|
|
246
|
-
* 存储在元素属性上的事件名
|
|
247
|
-
*/
|
|
248
|
-
const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
|
|
249
|
-
|
|
250
245
|
const OriginPrototype = {
|
|
251
246
|
Object: {
|
|
252
247
|
defineProperty: Object.defineProperty,
|
|
@@ -296,31 +291,31 @@ const PopsCore = {
|
|
|
296
291
|
},
|
|
297
292
|
};
|
|
298
293
|
|
|
299
|
-
|
|
294
|
+
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}
|
|
300
295
|
|
|
301
|
-
|
|
296
|
+
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};
|
|
302
297
|
|
|
303
|
-
function
|
|
298
|
+
function p$2(){let n=0,e=0;return function(o,r){const{prevVecotr:i,startVecotr:a,activeVecotr:c}=r;return c&&(e=Math.round(s(c,i)),n=Math.round(s(c,a))),{angle:n,deltaAngle:e}}}function d(){return function(t){const{prevInput:e}=t;let o$1=0,r=0,i=0;if(void 0!==e&&(o$1=t.x-e.x,r=t.y-e.y,0!==o$1||0!==r)){const t=Math.sqrt(Math.pow(o$1,2)+Math.pow(r,2));i=Math.round(o(Math.acos(Math.abs(o$1)/t)));}return {deltaX:o$1,deltaY:r,deltaXYAngle:i}}}function h$2(){let t,n=0,u=0,s=0,p=0,d=0;return function(h){const{phase:l,startInput:f}=h;return c$3===l?(n=0,u=0,s=0,p=0,d=0):o$1===l&&(n=Math.round(h.points[0][n$1]-f.points[0][n$1]),u=Math.round(h.points[0][e$2]-f.points[0][e$2]),s=Math.abs(n),p=Math.abs(u),d=Math.round(x({x:s,y:p})),t=u$2(n,u)),{displacementX:n,displacementY:u,distanceX:s,distanceY:p,distance:d,overallDirection:t}}}function l$1(){let t=1;return function(n,o){let r=1;const{prevVecotr:i,startVecotr:a,activeVecotr:c}=o;return c&&(r=p$3(x(c)/x(i)),t=p$3(x(c)/x(a))),{scale:t,deltaScale:r}}}function f(){let t,n,e=0,r=0,i=0,a=0;return function(c){if(void 0!==c){n=n||c.startInput;const u=c.timestamp-n.timestamp;if(t$1<u){const s=c.x-n.x,p=c.y-n.y;i=Math.round(s/u*100)/100,a=Math.round(p/u*100)/100,e=Math.abs(i),r=Math.abs(a),t=u$2(s,p),n=c;}}return {velocityX:e,velocityY:r,speedX:i,speedY:a,direction:t}}}function M(){let t=0;return function(n){const{phase:e}=n;return c$3===e&&(t=n.pointLength),{maxPointLength:t}}}function v(t){return {x:t.points[1][n$1]-t.points[0][n$1],y:t.points[1][e$2]-t.points[0][e$2]}}function m$1(){let t,n,e;return function(o){const{prevInput:r,startMultiInput:i}=o;return void 0!==i&&void 0!==r&&o.id!==i.id&&1<r.pointLength&&1<o.pointLength?(t=v(i),n=v(r),e=v(o)):e=void 0,{startVecotr:t,prevVecotr:n,activeVecotr:e}}}
|
|
304
299
|
|
|
305
|
-
|
|
300
|
+
const m={name:"tap",pointLength:1,tapTimes:1,waitNextTapTime:300,maxDistance:2,maxDistanceFromPrevTap:9,maxPressTime:250};function r$3(r,s){const c=O(m,s);let p,u,x$1,T=0;function f(){T=0,p=void 0,u=void 0;}return r.compute([h$2,M],(t=>{if(j(c))return;const{phase:i,x:o,y:m}=t;u$3===i&&(c.state=0,!function(){const{startInput:e,pointLength:n,timestamp:a}=t,i=a-e.timestamp,{distance:o,maxPointLength:m}=t;return m===c.pointLength&&0===n&&c.maxDistance>=o&&c.maxPressTime>i}()?(f(),c.state=2):(clearTimeout(x$1),function(t,e){if(void 0!==p){const n=x({x:t.x-p.x,y:t.y-p.y});return p=t,e.maxDistanceFromPrevTap>=n}return p=t,true}({x:o,y:m},c)&&function(t){const e=performance.now();if(void 0===u)return u=e,true;{const n=e-u;return u=e,n<t}}(c.waitNextTapTime)?T++:T=1,0==T%c.tapTimes?(c.state=1,r.emit2(c.name,t,c),f()):x$1=setTimeout((()=>{c.state=2,f();}),c.waitNextTapTime)));})),c}
|
|
306
301
|
|
|
307
|
-
function
|
|
302
|
+
function e(e){e.use(r$3,{name:"doubletap",tapTimes:2});const a=e.get("doubletap");let o;return e.beforeEach(((t,e)=>{"tap"===t?(clearTimeout(o),o=setTimeout((()=>{[0,2].includes(a.state)&&e();}),300)):e();})),a}
|
|
308
303
|
|
|
309
|
-
|
|
304
|
+
class t{constructor(){this.__map={};}beforeEach(t){this.__interceptor=t;}on(t,i){const s=Array.isArray(t)?t:[t];for(const t of s){this.__map[t]=this.__map[t]||[];const s=this.__map[t];s&&s.push(i);}return this}emit(t,i,s){ void 0!==this.__interceptor?this.__interceptor(t,(()=>{this.__emit(t,i),s&&s();})):(this.__emit(t,i),s&&s());}__emit(t,i){const s=this.__map[t];if(Array.isArray(s)&&(null==s?void 0:s.length))for(const _ of s)_(i,t);this.event=i;}off(t,i){const s=this.__map[t];if(void 0!==s)if(void 0===i)delete this.__map[t];else {const t=s.findIndex((t=>t===i));s.splice(t,1);}}destroy(){this.__map={};}}
|
|
310
305
|
|
|
311
|
-
const
|
|
306
|
+
function r$2(){let t,o,i,r,a=0;return function(u){if(t=o,void 0!==u){a=Number.MAX_SAFE_INTEGER>a?++a:1;const h=function(t,o){const{phase:i,points:r,changedPoints:a,nativeEvent:u}=t,h=r.length,p=c$3===i,g=u$3===i&&0===h||s$1===i,l=Date.now(),{x:d,y:m}=c$2(r)||c$2(a),{currentTarget:v}=u;return Object.assign(t,{id:o,x:d,y:m,timestamp:l,isStart:p,isEnd:g,pointLength:h,currentTarget:v,getOffset(t=v){const e=t.getBoundingClientRect();return {x:d-Math.round(e.left),y:m-Math.round(e.top)}}})}(u,a);o=h;const{isStart:p,pointLength:g}=h;return p&&(i=h,t=void 0,r=1<g?h:void 0),Object.assign(Object.assign({},h),{prevInput:t,startMultiInput:r,startInput:i})}}}function c$2(t){const{length:e}=t;if(0<e){if(1===e){const{clientX:e,clientY:n}=t[0];return {x:Math.round(e),y:Math.round(n)}}const n=t.reduce(((t,e)=>(t.x+=e[n$1],t.y+=e[e$2],t)),{x:0,y:0});return {x:Math.round(n.x/e),y:Math.round(n.y/e)}}}function a$1(t,e,n,s){const o={};for(const t in n)["target","currentTarget","type"].includes(t)||(o[t]=n[t]);let i;return document.createEvent?(i=document.createEvent("HTMLEvents"),i.initEvent(t,null==s?void 0:s.bubbles,null==s?void 0:s.cancelable)):i=new Event(t,s),Object.assign(i,o,{match:()=>n.targets&&0<n.targets.length&&n.targets.every((t=>i.currentTarget.contains(t)))}),e.dispatchEvent(i)}function u$1(t,e){const{preventDefault:n}=e;return s=n,"[object Function]"===Object.prototype.toString.call(s)?n(t):!!n;var s;}const h$1=["touchstart","touchmove","touchend","touchcancel","mousedown"],p$1=["mousemove","mouseup"];const g={domEvents:{bubbles:true,cancelable:true},preventDefault:t=>{if(t.target&&"tagName"in t.target){const{tagName:e}=t.target;return !/^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(e)}return false}};class l extends t{constructor(t,e){super(),this.v="2.1.3",this.__computeFunctionList=[],this.__computeFunctionCreatorList=[],this.__pluginContexts=[],this.__isIgnoreMouse=false,this.el=t,this.c={},this.__options=Object.assign(Object.assign({},g),e);const n=function(t){const e=r$2();return function(n){const s=[],o=[];Array.from(n.touches).forEach((({clientX:e,clientY:n,target:i})=>{(null==t?void 0:t.contains(i))&&(s.push(i),o.push({clientX:e,clientY:n,target:i}));}));const i=Array.from(n.changedTouches).map((({clientX:t,clientY:e,target:n})=>({clientX:t,clientY:e,target:n})));return e({phase:n.type.replace("touch",""),changedPoints:i,points:o,nativeEvent:n,target:n.target,targets:s})}}(this.el),s=function(){let t,e=false,n=null;const s=r$2();return function(o){const{clientX:i,clientY:r,type:c,button:a,target:u}=o;let h,p=[{clientX:i,clientY:r,target:u}];if("mousedown"===c&&0===a)n=u,e=true,h="start";else {if(!e)return;"mousemove"===c?h="move":"mouseup"===c&&(p=[],h="end",e=false);}const g=t||[{clientX:i,clientY:r,target:u}];if(t=[{clientX:i,clientY:r,target:u}],void 0!==h)return s({phase:h,changedPoints:g,points:p,target:n,targets:[n],nativeEvent:o})}}();if(this.__inputCreatorMap={touchstart:n,touchmove:n,touchend:n,touchcancel:n,mousedown:s,mousemove:s,mouseup:s},this.on("at:after",(t=>{const{target:e,__type:n}=t,{domEvents:s}=this.__options;s&&void 0!==this.el&&e&&(a$1(n,e,t,s),a$1("at:after",e,t,s));})),void 0!==t){t.style.webkitTapHighlightColor="rgba(0,0,0,0)";let e=false;try{const t={};Object.defineProperty(t,"passive",{get(){e=!0;}}),window.addEventListener("_",(()=>{}),t);}catch(t){}this.on("u",function(t,e,n){return h$1.forEach((s=>{t.addEventListener(s,e,n);})),p$1.forEach((t=>{window.addEventListener(t,e,n);})),()=>{h$1.forEach((n=>{t.removeEventListener(n,e);})),p$1.forEach((t=>{window.removeEventListener(t,e);}));}}(t,this.catchEvent.bind(this),false===this.__options.preventDefault&&e?{passive:true}:{passive:false}));}}use(t,e){this.__pluginContexts.push(t(this,e));}catchEvent(t){const e=this.__inputCreatorMap[t.type](t);if(void 0!==e){const n=()=>t.stopPropagation(),s=()=>t.stopImmediatePropagation(),o=()=>t.preventDefault();if(u$1(t,this.__options))o();else if("touchstart"===t.type?this.__isIgnoreMouse=true:"touchmove"===t.type&&(this.__isIgnoreMouse=false),this.__isIgnoreMouse&&t.type.startsWith("mouse"))return void("mouseup"===t.type&&(this.__isIgnoreMouse=false));this.emit("input",e),this.emit2(`at:${e.phase}`,e,{});const i={};this.__computeFunctionList.forEach((t=>{const n=t(e,i);if(void 0!==n)for(const t in n)i[t]=n[t];})),this.emit("computed",Object.assign(Object.assign(Object.assign({},e),i),{stopPropagation:n,stopImmediatePropagation:s,preventDefault:o}));}}compute(t,e){for(const e of t)this.__computeFunctionCreatorList.includes(e)||(this.__computeFunctionCreatorList.push(e),this.__computeFunctionList.push(e()));this.on("computed",e);}beforeEach(t){super.beforeEach(((e,n)=>{var s;(null===(s=this.c)||void 0===s?void 0:s.name)?t(e,n):n();}));}get(t){return this.__pluginContexts.find((e=>t===e.name))}set(t){this.__options=Object.assign(Object.assign({},this.__options),t);}emit2(t,e,n){this.c=n,this.emit(t,Object.assign(Object.assign({},e),{type:t}),(()=>{this.emit("at:after",Object.assign(Object.assign({},e),{name:t,__type:t}));}));}destroy(){this.emit("u"),super.destroy();}}
|
|
312
307
|
|
|
313
|
-
const
|
|
308
|
+
const p={name:"pan",threshold:10,pointLength:1};function u(u,d$1){const f$1=O(p,d$1);return u.compute([f,h$2,d],(t=>{if(g$1(f$1),j(f$1))return;const c=function(){const{pointLength:e,distance:n}=t;return f$1.pointLength===e&&f$1.threshold<=n}();if(f$1.state=b(c,f$1.state,t.phase),c||h$3(f$1.state)){const{name:e}=f$1;u.emit2(e,t,f$1),u.emit2(e+v$1(f$1.state),t,f$1),![u$3,s$1].includes(t.phase)&&t.direction&&u.emit2(e+t.direction,t,f$1);}})),f$1}
|
|
314
309
|
|
|
315
|
-
const
|
|
310
|
+
const c$1={name:"swipe",threshold:10,velocity:.3,pointLength:1};function a(a,r){const s=O(c$1,r);return a.compute([h$2,f,M],(t=>{if(s.state=0,!s.disabled&&function(){if(u$3!==t.phase)return false;const{velocityX:o,velocityY:n,distance:i,maxPointLength:c}=t;return c===s.pointLength&&0===t.points.length&&s.threshold<i&&s.velocity<Math.max(o,n)}()){const{name:e}=s;s.state=1,a.emit2(e,t,s),a.emit2(e+t.direction,t,s);}})),s}
|
|
316
311
|
|
|
317
|
-
const
|
|
312
|
+
const r$1={name:"press",pointLength:1,maxDistance:9,minPressTime:251};function c(c,u){const p=O(r$1,u);let f=0;return c.compute([h$2],(t=>{if(j(p))return;const{phase:o,startInput:r,pointLength:u}=t;if(c$3===o&&p.pointLength===u)g$1(p),clearTimeout(f),f=setTimeout((()=>{p.state=1,c.emit2(p.name,t,p);}),p.minPressTime);else if(u$3===o&&1===p.state)c.emit2(`${p.name}${r$4}`,t,p);else if(1!==p.state){const e=t.timestamp-r.timestamp;(!function(){const{distance:e}=t;return e&&p.maxDistance>e}()||p.minPressTime>e&&[u$3,s$1].includes(o))&&(clearTimeout(f),p.state=2);}})),p}
|
|
318
313
|
|
|
319
|
-
const
|
|
314
|
+
const i$2={name:"pinch",threshold:0,pointLength:2};function r(r,m){const p=O(i$2,m);return r.compute([m$1,l$1],(t=>{if(g$1(p),j(p))return;const c=function(){const{pointLength:e,scale:n,deltaScale:o,phase:a}=t;return p.pointLength===e&&p.threshold<Math.abs(n-1)}();p.state=b(c,p.state,t.phase);const{name:h}=p;if(c||h$3(p.state)){r.emit2(h,t,p);const{deltaScale:e}=t;1!==e&&r.emit2(h+(1<e?"in":"out"),t,p);}const i=v$1(p.state);i&&r.emit2(h+i,t,p);})),p}
|
|
320
315
|
|
|
321
|
-
|
|
316
|
+
const h={name:"rotate",threshold:0,pointLength:2};function i$1(i,m){const u=O(h,m);return i.compute([m$1,p$2],(t=>{if(j(u))return;g$1(u);const r=function(){const{pointLength:e,angle:n}=t;return u.pointLength===e&&u.threshold<Math.abs(n)}();u.state=b(r,u.state,t.phase);const{name:c}=u;(r||h$3(u.state))&&i.emit2(c,t,u);const h=v$1(u.state);h&&i.emit2(c+h,t,u);})),u}
|
|
322
317
|
|
|
323
|
-
class i extends l
|
|
318
|
+
class i extends l{constructor(t,u$1){super(t,u$1),this.use(r$3),this.use(u),this.use(a),this.use(c),this.use(r),this.use(i$1);}}i.STATE_POSSIBLE=0,i.STATE_START=4,i.STATE_MOVE=5,i.STATE_END=1,i.STATE_CANCELLED=3,i.STATE_FAILED=2,i.STATE_RECOGNIZED=1,i.tap=r$3,i.pan=u,i.swipe=a,i.press=c,i.rotate=i$1,i.pinch=r,i.doubletap=e;
|
|
324
319
|
|
|
325
320
|
class PopsUtils {
|
|
326
321
|
/**
|
|
@@ -807,6 +802,10 @@ const PopsCommonCSSClassName = {
|
|
|
807
802
|
textIsDisabledImportant: "pops-text-is-disabled-important",
|
|
808
803
|
};
|
|
809
804
|
|
|
805
|
+
/**
|
|
806
|
+
* 存储在元素属性上的事件名
|
|
807
|
+
*/
|
|
808
|
+
const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
|
|
810
809
|
class PopsDOMUtilsEvent {
|
|
811
810
|
on(element, eventType, selector, callback, option) {
|
|
812
811
|
/**
|
|
@@ -815,7 +814,7 @@ class PopsDOMUtilsEvent {
|
|
|
815
814
|
* @param startIndex
|
|
816
815
|
* @param option
|
|
817
816
|
*/
|
|
818
|
-
function
|
|
817
|
+
const getOption = function (args, startIndex, option) {
|
|
819
818
|
const currentParam = args[startIndex];
|
|
820
819
|
if (typeof currentParam === "boolean") {
|
|
821
820
|
option.capture = currentParam;
|
|
@@ -837,7 +836,7 @@ class PopsDOMUtilsEvent {
|
|
|
837
836
|
option.isComposedPath = currentParam.isComposedPath;
|
|
838
837
|
}
|
|
839
838
|
return option;
|
|
840
|
-
}
|
|
839
|
+
};
|
|
841
840
|
const that = this;
|
|
842
841
|
// eslint-disable-next-line prefer-rest-params
|
|
843
842
|
const args = arguments;
|
|
@@ -852,8 +851,7 @@ class PopsDOMUtilsEvent {
|
|
|
852
851
|
}
|
|
853
852
|
let $elList = [];
|
|
854
853
|
if (element instanceof NodeList || Array.isArray(element)) {
|
|
855
|
-
|
|
856
|
-
$elList = [...element];
|
|
854
|
+
$elList = $elList.concat(Array.from(element));
|
|
857
855
|
}
|
|
858
856
|
else {
|
|
859
857
|
$elList.push(element);
|
|
@@ -861,15 +859,15 @@ class PopsDOMUtilsEvent {
|
|
|
861
859
|
// 事件名
|
|
862
860
|
let eventTypeList = [];
|
|
863
861
|
if (Array.isArray(eventType)) {
|
|
864
|
-
eventTypeList = eventTypeList.concat(eventType.filter((
|
|
862
|
+
eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
865
863
|
}
|
|
866
864
|
else if (typeof eventType === "string") {
|
|
867
|
-
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((
|
|
865
|
+
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
|
|
868
866
|
}
|
|
869
867
|
// 子元素选择器
|
|
870
868
|
let selectorList = [];
|
|
871
869
|
if (Array.isArray(selector)) {
|
|
872
|
-
selectorList = selectorList.concat(selector.filter((
|
|
870
|
+
selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
873
871
|
}
|
|
874
872
|
else if (typeof selector === "string") {
|
|
875
873
|
selectorList.push(selector);
|
|
@@ -896,39 +894,52 @@ class PopsDOMUtilsEvent {
|
|
|
896
894
|
/**
|
|
897
895
|
* 如果是once,那么删除该监听和元素上的事件和监听
|
|
898
896
|
*/
|
|
899
|
-
|
|
897
|
+
const checkOptionOnceToRemoveEventListener = ($el) => {
|
|
900
898
|
if (listenerOption.once) {
|
|
901
|
-
|
|
899
|
+
this.off($el, eventTypeList, selector, callback, option);
|
|
902
900
|
}
|
|
903
|
-
}
|
|
904
|
-
$elList.forEach((
|
|
901
|
+
};
|
|
902
|
+
$elList.forEach(($elItem) => {
|
|
905
903
|
/**
|
|
906
904
|
* 事件回调
|
|
907
905
|
* @param event
|
|
908
906
|
*/
|
|
909
|
-
function
|
|
907
|
+
const handlerCallBack = function (event) {
|
|
908
|
+
let call_this = void 0;
|
|
909
|
+
let call_event = void 0;
|
|
910
|
+
let call_$selector = void 0;
|
|
911
|
+
let execCallback = false;
|
|
910
912
|
if (selectorList.length) {
|
|
911
913
|
// 存在子元素选择器
|
|
912
914
|
// 这时候的this和target都是子元素选择器的元素
|
|
913
|
-
let
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
totalParent = PopsCore.document.documentElement;
|
|
915
|
+
let $target;
|
|
916
|
+
if (listenerOption.isComposedPath) {
|
|
917
|
+
// 可能为空
|
|
918
|
+
const composedPath = event.composedPath();
|
|
919
|
+
if (!composedPath.length && event.target) {
|
|
920
|
+
composedPath.push(event.target);
|
|
920
921
|
}
|
|
922
|
+
$target = composedPath[0];
|
|
923
|
+
}
|
|
924
|
+
else {
|
|
925
|
+
$target = event.target;
|
|
926
|
+
}
|
|
927
|
+
let $parent = $elItem;
|
|
928
|
+
if (popsUtils.isWin($parent)) {
|
|
929
|
+
// window和document共用一个对象
|
|
930
|
+
// 这样就能处理子元素选择器无法匹配的问题
|
|
931
|
+
$parent = PopsCore.document.documentElement;
|
|
921
932
|
}
|
|
922
|
-
const findValue = selectorList.find((
|
|
933
|
+
const findValue = selectorList.find((selectors) => {
|
|
923
934
|
// 判断目标元素是否匹配选择器
|
|
924
|
-
if (that.matches(
|
|
935
|
+
if (that.matches($target, selectors)) {
|
|
925
936
|
// 当前目标可以被selector所匹配到
|
|
926
937
|
return true;
|
|
927
938
|
}
|
|
928
939
|
// 在上层与主元素之间寻找可以被selector所匹配到的
|
|
929
|
-
const $closestMatches = that.closest(
|
|
930
|
-
if ($closestMatches &&
|
|
931
|
-
|
|
940
|
+
const $closestMatches = that.closest($target, selectors);
|
|
941
|
+
if ($closestMatches && $parent?.contains?.($closestMatches)) {
|
|
942
|
+
$target = $closestMatches;
|
|
932
943
|
return true;
|
|
933
944
|
}
|
|
934
945
|
return false;
|
|
@@ -938,38 +949,47 @@ class PopsDOMUtilsEvent {
|
|
|
938
949
|
try {
|
|
939
950
|
OriginPrototype.Object.defineProperty(event, "target", {
|
|
940
951
|
get() {
|
|
941
|
-
return
|
|
952
|
+
return $target;
|
|
942
953
|
},
|
|
943
954
|
});
|
|
955
|
+
// oxlint-disable-next-line no-empty
|
|
944
956
|
}
|
|
945
|
-
catch {
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
957
|
+
catch { }
|
|
958
|
+
execCallback = true;
|
|
959
|
+
call_this = $target;
|
|
960
|
+
call_event = event;
|
|
961
|
+
call_$selector = $target;
|
|
950
962
|
}
|
|
951
963
|
}
|
|
952
964
|
else {
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
965
|
+
execCallback = true;
|
|
966
|
+
call_this = $elItem;
|
|
967
|
+
call_event = event;
|
|
968
|
+
}
|
|
969
|
+
if (execCallback) {
|
|
970
|
+
const result = listenerCallBack.call(call_this, call_event, call_$selector);
|
|
971
|
+
checkOptionOnceToRemoveEventListener($elItem);
|
|
972
|
+
if (typeof result === "boolean" && !result) {
|
|
973
|
+
return false;
|
|
974
|
+
}
|
|
956
975
|
}
|
|
957
|
-
}
|
|
976
|
+
};
|
|
958
977
|
// 遍历事件名设置元素事件
|
|
959
978
|
eventTypeList.forEach((eventName) => {
|
|
960
|
-
|
|
979
|
+
// add listener
|
|
980
|
+
$elItem.addEventListener(eventName, handlerCallBack, listenerOption);
|
|
961
981
|
// 获取对象上的事件
|
|
962
|
-
const elementEvents = Reflect.get(
|
|
982
|
+
const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
|
|
963
983
|
// 初始化对象上的xx事件
|
|
964
984
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
965
985
|
elementEvents[eventName].push({
|
|
966
986
|
selector: selectorList,
|
|
967
987
|
option: listenerOption,
|
|
968
|
-
|
|
969
|
-
|
|
988
|
+
handlerCallBack: handlerCallBack,
|
|
989
|
+
callback: listenerCallBack,
|
|
970
990
|
});
|
|
971
991
|
// 覆盖事件
|
|
972
|
-
Reflect.set(
|
|
992
|
+
Reflect.set($elItem, SymbolEvents, elementEvents);
|
|
973
993
|
});
|
|
974
994
|
});
|
|
975
995
|
return {
|
|
@@ -982,11 +1002,11 @@ class PopsDOMUtilsEvent {
|
|
|
982
1002
|
},
|
|
983
1003
|
/**
|
|
984
1004
|
* 主动触发事件
|
|
985
|
-
* @param
|
|
986
|
-
* @param
|
|
1005
|
+
* @param extraDetails 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
1006
|
+
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了`$selector`的没有值
|
|
987
1007
|
*/
|
|
988
|
-
emit: (
|
|
989
|
-
that.emit($elList, eventTypeList,
|
|
1008
|
+
emit: (extraDetails, useDispatchToTriggerEvent) => {
|
|
1009
|
+
that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
|
|
990
1010
|
},
|
|
991
1011
|
};
|
|
992
1012
|
}
|
|
@@ -997,7 +1017,7 @@ class PopsDOMUtilsEvent {
|
|
|
997
1017
|
* @param startIndex
|
|
998
1018
|
* @param option
|
|
999
1019
|
*/
|
|
1000
|
-
function
|
|
1020
|
+
const getOption = function (args1, startIndex, option) {
|
|
1001
1021
|
const currentParam = args1[startIndex];
|
|
1002
1022
|
if (typeof currentParam === "boolean") {
|
|
1003
1023
|
option.capture = currentParam;
|
|
@@ -1006,12 +1026,12 @@ class PopsDOMUtilsEvent {
|
|
|
1006
1026
|
option.capture = currentParam.capture;
|
|
1007
1027
|
}
|
|
1008
1028
|
return option;
|
|
1009
|
-
}
|
|
1010
|
-
const
|
|
1029
|
+
};
|
|
1030
|
+
const that = this;
|
|
1011
1031
|
// eslint-disable-next-line prefer-rest-params
|
|
1012
1032
|
const args = arguments;
|
|
1013
1033
|
if (typeof element === "string") {
|
|
1014
|
-
element =
|
|
1034
|
+
element = that.selectorAll(element);
|
|
1015
1035
|
}
|
|
1016
1036
|
if (element == null) {
|
|
1017
1037
|
return;
|
|
@@ -1019,22 +1039,22 @@ class PopsDOMUtilsEvent {
|
|
|
1019
1039
|
let $elList = [];
|
|
1020
1040
|
if (element instanceof NodeList || Array.isArray(element)) {
|
|
1021
1041
|
element = element;
|
|
1022
|
-
$elList = $elList.concat(element);
|
|
1042
|
+
$elList = $elList.concat(Array.from(element));
|
|
1023
1043
|
}
|
|
1024
1044
|
else {
|
|
1025
1045
|
$elList.push(element);
|
|
1026
1046
|
}
|
|
1027
1047
|
let eventTypeList = [];
|
|
1028
1048
|
if (Array.isArray(eventType)) {
|
|
1029
|
-
eventTypeList = eventTypeList.concat(eventType.filter((
|
|
1049
|
+
eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
1030
1050
|
}
|
|
1031
1051
|
else if (typeof eventType === "string") {
|
|
1032
|
-
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((
|
|
1052
|
+
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
|
|
1033
1053
|
}
|
|
1034
1054
|
// 子元素选择器
|
|
1035
1055
|
let selectorList = [];
|
|
1036
1056
|
if (Array.isArray(selector)) {
|
|
1037
|
-
selectorList = selectorList.concat(selector.filter((
|
|
1057
|
+
selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
1038
1058
|
}
|
|
1039
1059
|
else if (typeof selector === "string") {
|
|
1040
1060
|
selectorList.push(selector);
|
|
@@ -1063,16 +1083,16 @@ class PopsDOMUtilsEvent {
|
|
|
1063
1083
|
// 目标函数、事件名、回调函数、事件配置、过滤函数
|
|
1064
1084
|
filter = option;
|
|
1065
1085
|
}
|
|
1066
|
-
$elList.forEach((
|
|
1086
|
+
$elList.forEach(($elItem) => {
|
|
1067
1087
|
// 获取对象上的事件
|
|
1068
|
-
const elementEvents = Reflect.get(
|
|
1088
|
+
const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
|
|
1069
1089
|
eventTypeList.forEach((eventName) => {
|
|
1070
1090
|
const handlers = elementEvents[eventName] || [];
|
|
1071
1091
|
const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
|
|
1072
1092
|
for (let index = 0; index < filterHandler.length; index++) {
|
|
1073
1093
|
const handler = filterHandler[index];
|
|
1074
1094
|
let flag = true;
|
|
1075
|
-
if (flag && listenerCallBack && handler.
|
|
1095
|
+
if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
|
|
1076
1096
|
// callback不同
|
|
1077
1097
|
flag = false;
|
|
1078
1098
|
}
|
|
@@ -1089,7 +1109,7 @@ class PopsDOMUtilsEvent {
|
|
|
1089
1109
|
flag = false;
|
|
1090
1110
|
}
|
|
1091
1111
|
if (flag) {
|
|
1092
|
-
|
|
1112
|
+
$elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
|
|
1093
1113
|
const findIndex = handlers.findIndex((item) => item === handler);
|
|
1094
1114
|
if (findIndex !== -1) {
|
|
1095
1115
|
handlers.splice(findIndex, 1);
|
|
@@ -1101,7 +1121,7 @@ class PopsDOMUtilsEvent {
|
|
|
1101
1121
|
popsUtils.delete(elementEvents, eventType);
|
|
1102
1122
|
}
|
|
1103
1123
|
});
|
|
1104
|
-
Reflect.set(
|
|
1124
|
+
Reflect.set($elItem, SymbolEvents, elementEvents);
|
|
1105
1125
|
});
|
|
1106
1126
|
}
|
|
1107
1127
|
/**
|
|
@@ -1485,11 +1505,11 @@ class PopsDOMUtilsEvent {
|
|
|
1485
1505
|
* 阻止事件的默认行为发生,并阻止事件传播
|
|
1486
1506
|
*/
|
|
1487
1507
|
const stopEvent = (event, onlyStopPropagation) => {
|
|
1508
|
+
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1509
|
+
event?.stopPropagation();
|
|
1510
|
+
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1511
|
+
event?.stopImmediatePropagation();
|
|
1488
1512
|
if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
|
|
1489
|
-
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1490
|
-
event?.stopPropagation();
|
|
1491
|
-
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1492
|
-
event?.stopImmediatePropagation();
|
|
1493
1513
|
return;
|
|
1494
1514
|
}
|
|
1495
1515
|
// 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字
|
|
@@ -1705,35 +1725,6 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1705
1725
|
getTransitionEndNameList() {
|
|
1706
1726
|
return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
|
|
1707
1727
|
}
|
|
1708
|
-
/**
|
|
1709
|
-
* 是否是隐藏状态
|
|
1710
|
-
*
|
|
1711
|
-
* 检测以下项:
|
|
1712
|
-
*
|
|
1713
|
-
* + `display`: none
|
|
1714
|
-
* + `visibility`: hidden
|
|
1715
|
-
* + `opacity`: 0
|
|
1716
|
-
* + `使用了pops的自定义的隐藏class类`
|
|
1717
|
-
* @param $el 需要检测的元素
|
|
1718
|
-
*/
|
|
1719
|
-
isHide($el) {
|
|
1720
|
-
let flag = false;
|
|
1721
|
-
if (this.containsClassName($el, PopsCommonCSSClassName.hide) ||
|
|
1722
|
-
this.containsClassName($el, PopsCommonCSSClassName.hideImportant)) {
|
|
1723
|
-
flag = true;
|
|
1724
|
-
}
|
|
1725
|
-
else {
|
|
1726
|
-
if ($el instanceof HTMLElement) {
|
|
1727
|
-
const style = $el.style;
|
|
1728
|
-
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
1729
|
-
}
|
|
1730
|
-
if (!flag) {
|
|
1731
|
-
const style = globalThis.getComputedStyle($el);
|
|
1732
|
-
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
1733
|
-
}
|
|
1734
|
-
}
|
|
1735
|
-
return flag;
|
|
1736
|
-
}
|
|
1737
1728
|
/**
|
|
1738
1729
|
* 实现jQuery中的$().offset();
|
|
1739
1730
|
* @param element
|
|
@@ -3180,6 +3171,134 @@ const PopsInstData = {
|
|
|
3180
3171
|
tooltip: [],
|
|
3181
3172
|
};
|
|
3182
3173
|
|
|
3174
|
+
const PopsInstanceUtils = {
|
|
3175
|
+
/**
|
|
3176
|
+
* 获取pops所有弹窗中的最大的z-index
|
|
3177
|
+
* @param deviation
|
|
3178
|
+
*/
|
|
3179
|
+
getPopsMaxZIndex(deviation = 1) {
|
|
3180
|
+
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
3181
|
+
// 最大值 2147483647
|
|
3182
|
+
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
3183
|
+
// 比较值 2000000000
|
|
3184
|
+
const maxZIndex = 2 * Math.pow(10, 9);
|
|
3185
|
+
// 当前页面最大的z-index
|
|
3186
|
+
let zIndex = 0;
|
|
3187
|
+
// 当前的最大z-index的元素,调试使用
|
|
3188
|
+
let maxZIndexNode = null;
|
|
3189
|
+
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
3190
|
+
const instData = PopsInstData[instKeyName];
|
|
3191
|
+
for (let index = 0; index < instData.length; index++) {
|
|
3192
|
+
const inst = instData[index];
|
|
3193
|
+
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
3194
|
+
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
3195
|
+
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
3196
|
+
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
3197
|
+
if (maxNodeZIndexInfo) {
|
|
3198
|
+
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
3199
|
+
if (nodeZIndex > zIndex) {
|
|
3200
|
+
zIndex = nodeZIndex;
|
|
3201
|
+
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
3202
|
+
}
|
|
3203
|
+
}
|
|
3204
|
+
}
|
|
3205
|
+
});
|
|
3206
|
+
zIndex += deviation;
|
|
3207
|
+
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
3208
|
+
if (isOverMaxZIndex) {
|
|
3209
|
+
// 超出z-index最大值
|
|
3210
|
+
zIndex = maxZIndex;
|
|
3211
|
+
}
|
|
3212
|
+
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
3213
|
+
},
|
|
3214
|
+
/**
|
|
3215
|
+
* 排序数组
|
|
3216
|
+
* @param getBeforeValueFun
|
|
3217
|
+
* @param getAfterValueFun
|
|
3218
|
+
* @param sortByDesc 排序是否降序,默认降序
|
|
3219
|
+
*/
|
|
3220
|
+
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
3221
|
+
if (typeof sortByDesc !== "boolean") {
|
|
3222
|
+
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
3223
|
+
}
|
|
3224
|
+
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
3225
|
+
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
3226
|
+
}
|
|
3227
|
+
return function (after_obj, before_obj) {
|
|
3228
|
+
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
3229
|
+
const afterValue = getAfterValueFun(after_obj); // 后
|
|
3230
|
+
if (sortByDesc) {
|
|
3231
|
+
if (afterValue > beforeValue) {
|
|
3232
|
+
return -1;
|
|
3233
|
+
}
|
|
3234
|
+
else if (afterValue < beforeValue) {
|
|
3235
|
+
return 1;
|
|
3236
|
+
}
|
|
3237
|
+
else {
|
|
3238
|
+
return 0;
|
|
3239
|
+
}
|
|
3240
|
+
}
|
|
3241
|
+
else {
|
|
3242
|
+
if (afterValue < beforeValue) {
|
|
3243
|
+
return -1;
|
|
3244
|
+
}
|
|
3245
|
+
else if (afterValue > beforeValue) {
|
|
3246
|
+
return 1;
|
|
3247
|
+
}
|
|
3248
|
+
else {
|
|
3249
|
+
return 0;
|
|
3250
|
+
}
|
|
3251
|
+
}
|
|
3252
|
+
};
|
|
3253
|
+
},
|
|
3254
|
+
/**
|
|
3255
|
+
* 是否是隐藏状态
|
|
3256
|
+
*
|
|
3257
|
+
* 检测以下项:
|
|
3258
|
+
*
|
|
3259
|
+
* + `display`: none
|
|
3260
|
+
* + `visibility`: hidden
|
|
3261
|
+
* + `opacity`: 0
|
|
3262
|
+
* + `使用了pops的自定义的隐藏class类`
|
|
3263
|
+
* @param $el 需要检测的元素
|
|
3264
|
+
*/
|
|
3265
|
+
isHide($el) {
|
|
3266
|
+
let flag = false;
|
|
3267
|
+
if ($el?.classList?.contains(PopsCommonCSSClassName.hide) ||
|
|
3268
|
+
$el?.classList?.contains(PopsCommonCSSClassName.hideImportant)) {
|
|
3269
|
+
flag = true;
|
|
3270
|
+
}
|
|
3271
|
+
else {
|
|
3272
|
+
if ($el instanceof HTMLElement) {
|
|
3273
|
+
const style = $el.style;
|
|
3274
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3275
|
+
}
|
|
3276
|
+
if (!flag) {
|
|
3277
|
+
const style = globalThis.getComputedStyle($el);
|
|
3278
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3279
|
+
}
|
|
3280
|
+
}
|
|
3281
|
+
return flag;
|
|
3282
|
+
},
|
|
3283
|
+
/**
|
|
3284
|
+
* 判断元素是否是在`.pops`内
|
|
3285
|
+
* @param $el 目标元素
|
|
3286
|
+
*/
|
|
3287
|
+
isNodeInPopsNode($el) {
|
|
3288
|
+
return !!($el.closest(".pops") || $el.matches(".pops"));
|
|
3289
|
+
},
|
|
3290
|
+
/**
|
|
3291
|
+
* 判断是否是`.pops-anim`元素
|
|
3292
|
+
* @param $el 目标元素
|
|
3293
|
+
*/
|
|
3294
|
+
isAnimNode($el) {
|
|
3295
|
+
return !!($el?.localName?.toLowerCase() === "div" &&
|
|
3296
|
+
$el.className &&
|
|
3297
|
+
$el.className === "pops-anim" &&
|
|
3298
|
+
$el.hasAttribute("anim"));
|
|
3299
|
+
},
|
|
3300
|
+
};
|
|
3301
|
+
|
|
3183
3302
|
const PopsInstHandler = {
|
|
3184
3303
|
/**
|
|
3185
3304
|
* 删除配置中对应的对象
|
|
@@ -3260,7 +3379,7 @@ const PopsInstHandler = {
|
|
|
3260
3379
|
// 先设置好动画状态
|
|
3261
3380
|
// 再显示,会自执行动画
|
|
3262
3381
|
const checkVisible = () => {
|
|
3263
|
-
if (!
|
|
3382
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3264
3383
|
return true;
|
|
3265
3384
|
}
|
|
3266
3385
|
else {
|
|
@@ -3350,7 +3469,7 @@ const PopsInstHandler = {
|
|
|
3350
3469
|
// 再隐藏
|
|
3351
3470
|
// 存在实例
|
|
3352
3471
|
const checkVisible = () => {
|
|
3353
|
-
if (!
|
|
3472
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3354
3473
|
return true;
|
|
3355
3474
|
}
|
|
3356
3475
|
else {
|
|
@@ -3778,11 +3897,11 @@ const PopsHandler = {
|
|
|
3778
3897
|
* 点击其它区域的事件
|
|
3779
3898
|
* @param event
|
|
3780
3899
|
*/
|
|
3781
|
-
|
|
3900
|
+
const clickEvent = (event) => {
|
|
3782
3901
|
popsDOMUtils.preventEvent(event);
|
|
3783
3902
|
// 获取该类型实例存储列表
|
|
3784
3903
|
const targetInst = PopsInstData[config.type];
|
|
3785
|
-
|
|
3904
|
+
const continueExec = () => {
|
|
3786
3905
|
if (config.config.mask.clickEvent.toClose) {
|
|
3787
3906
|
// 关闭
|
|
3788
3907
|
return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
|
|
@@ -3791,37 +3910,26 @@ const PopsHandler = {
|
|
|
3791
3910
|
// 隐藏
|
|
3792
3911
|
return PopsInstHandler.hide(config.config, config.type, targetInst, config.guid, config.animElement, result.maskElement);
|
|
3793
3912
|
}
|
|
3794
|
-
}
|
|
3913
|
+
};
|
|
3795
3914
|
if (typeof config.config.mask.clickCallBack === "function") {
|
|
3796
|
-
config.config.mask.clickCallBack(
|
|
3915
|
+
config.config.mask.clickCallBack(continueExec, config.config);
|
|
3797
3916
|
}
|
|
3798
3917
|
else {
|
|
3799
|
-
|
|
3918
|
+
continueExec();
|
|
3800
3919
|
}
|
|
3801
3920
|
return false;
|
|
3802
|
-
}
|
|
3921
|
+
};
|
|
3803
3922
|
// 判断是否启用了遮罩层点击动作
|
|
3804
3923
|
if (config.config.mask.clickEvent.toClose || config.config.mask.clickEvent.toHide) {
|
|
3805
|
-
/**
|
|
3806
|
-
* 判断点击的元素是否是动画层的元素
|
|
3807
|
-
* @param element
|
|
3808
|
-
* @returns
|
|
3809
|
-
*/
|
|
3810
|
-
function isAnimElement(element) {
|
|
3811
|
-
return Boolean(element?.localName?.toLowerCase() === "div" &&
|
|
3812
|
-
element.className &&
|
|
3813
|
-
element.className === "pops-anim" &&
|
|
3814
|
-
element.hasAttribute("anim"));
|
|
3815
|
-
}
|
|
3816
3924
|
// 判断按下的元素是否是pops-anim
|
|
3817
3925
|
popsDOMUtils.on(config.animElement, "pointerup", (event) => {
|
|
3818
3926
|
const $click = event.composedPath()[0];
|
|
3819
|
-
isMaskClick =
|
|
3927
|
+
isMaskClick = PopsInstanceUtils.isAnimNode($click);
|
|
3820
3928
|
});
|
|
3821
3929
|
// 如果有动画层,在动画层上监听点击事件
|
|
3822
3930
|
popsDOMUtils.on(config.animElement, "click", (event) => {
|
|
3823
3931
|
const $click = event.composedPath()[0];
|
|
3824
|
-
if (isMaskClick &&
|
|
3932
|
+
if (isMaskClick && PopsInstanceUtils.isAnimNode($click)) {
|
|
3825
3933
|
return clickEvent(event);
|
|
3826
3934
|
}
|
|
3827
3935
|
});
|
|
@@ -9727,12 +9835,12 @@ const PanelHandlerComponents = () => {
|
|
|
9727
9835
|
},
|
|
9728
9836
|
mask: {
|
|
9729
9837
|
enable: true,
|
|
9730
|
-
clickCallBack(
|
|
9838
|
+
clickCallBack(continueExec) {
|
|
9731
9839
|
const ret = dialogCloseCallback();
|
|
9732
9840
|
if (typeof ret === "boolean" && !ret) {
|
|
9733
9841
|
return;
|
|
9734
9842
|
}
|
|
9735
|
-
|
|
9843
|
+
continueExec();
|
|
9736
9844
|
},
|
|
9737
9845
|
clickEvent: {
|
|
9738
9846
|
toClose: true,
|
|
@@ -10944,8 +11052,8 @@ const PanelHandlerComponents = () => {
|
|
|
10944
11052
|
},
|
|
10945
11053
|
mask: {
|
|
10946
11054
|
enable: true,
|
|
10947
|
-
clickCallBack(
|
|
10948
|
-
|
|
11055
|
+
clickCallBack(continueExec) {
|
|
11056
|
+
continueExec();
|
|
10949
11057
|
dialogCloseCallback();
|
|
10950
11058
|
},
|
|
10951
11059
|
clickEvent: {
|
|
@@ -13590,93 +13698,12 @@ const PopsSearchSuggestion = {
|
|
|
13590
13698
|
},
|
|
13591
13699
|
};
|
|
13592
13700
|
|
|
13593
|
-
const PopsInstanceUtils = {
|
|
13594
|
-
/**
|
|
13595
|
-
* 获取pops所有弹窗中的最大的z-index
|
|
13596
|
-
* @param deviation
|
|
13597
|
-
*/
|
|
13598
|
-
getPopsMaxZIndex(deviation = 1) {
|
|
13599
|
-
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
13600
|
-
// 最大值 2147483647
|
|
13601
|
-
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
13602
|
-
// 比较值 2000000000
|
|
13603
|
-
const maxZIndex = 2 * Math.pow(10, 9);
|
|
13604
|
-
// 当前页面最大的z-index
|
|
13605
|
-
let zIndex = 0;
|
|
13606
|
-
// 当前的最大z-index的元素,调试使用
|
|
13607
|
-
let maxZIndexNode = null;
|
|
13608
|
-
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
13609
|
-
const instData = PopsInstData[instKeyName];
|
|
13610
|
-
for (let index = 0; index < instData.length; index++) {
|
|
13611
|
-
const inst = instData[index];
|
|
13612
|
-
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
13613
|
-
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
13614
|
-
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
13615
|
-
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
13616
|
-
if (maxNodeZIndexInfo) {
|
|
13617
|
-
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
13618
|
-
if (nodeZIndex > zIndex) {
|
|
13619
|
-
zIndex = nodeZIndex;
|
|
13620
|
-
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
13621
|
-
}
|
|
13622
|
-
}
|
|
13623
|
-
}
|
|
13624
|
-
});
|
|
13625
|
-
zIndex += deviation;
|
|
13626
|
-
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
13627
|
-
if (isOverMaxZIndex) {
|
|
13628
|
-
// 超出z-index最大值
|
|
13629
|
-
zIndex = maxZIndex;
|
|
13630
|
-
}
|
|
13631
|
-
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
13632
|
-
},
|
|
13633
|
-
/**
|
|
13634
|
-
* 排序数组
|
|
13635
|
-
* @param getBeforeValueFun
|
|
13636
|
-
* @param getAfterValueFun
|
|
13637
|
-
* @param sortByDesc 排序是否降序,默认降序
|
|
13638
|
-
*/
|
|
13639
|
-
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
13640
|
-
if (typeof sortByDesc !== "boolean") {
|
|
13641
|
-
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
13642
|
-
}
|
|
13643
|
-
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
13644
|
-
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
13645
|
-
}
|
|
13646
|
-
return function (after_obj, before_obj) {
|
|
13647
|
-
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
13648
|
-
const afterValue = getAfterValueFun(after_obj); // 后
|
|
13649
|
-
if (sortByDesc) {
|
|
13650
|
-
if (afterValue > beforeValue) {
|
|
13651
|
-
return -1;
|
|
13652
|
-
}
|
|
13653
|
-
else if (afterValue < beforeValue) {
|
|
13654
|
-
return 1;
|
|
13655
|
-
}
|
|
13656
|
-
else {
|
|
13657
|
-
return 0;
|
|
13658
|
-
}
|
|
13659
|
-
}
|
|
13660
|
-
else {
|
|
13661
|
-
if (afterValue < beforeValue) {
|
|
13662
|
-
return -1;
|
|
13663
|
-
}
|
|
13664
|
-
else if (afterValue > beforeValue) {
|
|
13665
|
-
return 1;
|
|
13666
|
-
}
|
|
13667
|
-
else {
|
|
13668
|
-
return 0;
|
|
13669
|
-
}
|
|
13670
|
-
}
|
|
13671
|
-
};
|
|
13672
|
-
},
|
|
13673
|
-
};
|
|
13674
|
-
|
|
13675
13701
|
class Pops {
|
|
13676
13702
|
/** 配置 */
|
|
13677
13703
|
config = {
|
|
13678
13704
|
/** 版本号 */
|
|
13679
13705
|
version: version,
|
|
13706
|
+
/** 样式配置 */
|
|
13680
13707
|
cssText: PopsCSS,
|
|
13681
13708
|
/** icon图标的svg代码 */
|
|
13682
13709
|
iconSVG: PopsIcon.$data,
|
|
@@ -13684,12 +13711,9 @@ class Pops {
|
|
|
13684
13711
|
animation: PopsAnimation.$data,
|
|
13685
13712
|
/** 存储已创建的元素 */
|
|
13686
13713
|
instData: PopsInstData,
|
|
13687
|
-
|
|
13688
|
-
|
|
13689
|
-
|
|
13690
|
-
return popsDOMUtils.preventEvent(event);
|
|
13691
|
-
},
|
|
13692
|
-
},
|
|
13714
|
+
};
|
|
13715
|
+
/** 导出的函数 */
|
|
13716
|
+
fn = {
|
|
13693
13717
|
/** pops使用的工具类 */
|
|
13694
13718
|
Utils: popsUtils,
|
|
13695
13719
|
/** pops使用的DOM工具类 */
|
|
@@ -13699,17 +13723,16 @@ class Pops {
|
|
|
13699
13723
|
/** pops处理float类型使用的工具类 */
|
|
13700
13724
|
MathFloatUtils: PopsMathFloatUtils,
|
|
13701
13725
|
/** 实例处理函数 */
|
|
13702
|
-
PopsInstHandler,
|
|
13726
|
+
InstHandler: PopsInstHandler,
|
|
13703
13727
|
/** pops.panel中用于处理各个类型的工具 */
|
|
13704
|
-
PanelHandlerComponents,
|
|
13728
|
+
PanelHandlerComponents: PanelHandlerComponents,
|
|
13705
13729
|
/** pops.panel中的动画 */
|
|
13706
|
-
PopsAnimation,
|
|
13730
|
+
Animation: PopsAnimation,
|
|
13707
13731
|
/** 事件类 */
|
|
13708
|
-
EventEmiter,
|
|
13732
|
+
EventEmiter: EventEmiter,
|
|
13709
13733
|
/** 通用的CSS类名 */
|
|
13710
|
-
PopsCommonCSSClassName,
|
|
13734
|
+
CommonCSSClassName: PopsCommonCSSClassName,
|
|
13711
13735
|
};
|
|
13712
|
-
init() { }
|
|
13713
13736
|
/**
|
|
13714
13737
|
* 释放原有的pops控制权
|
|
13715
13738
|
* @example
|