@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.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.1
|
|
7
|
+
const version = "4.2.1";
|
|
8
8
|
|
|
9
9
|
const GlobalConfig = {
|
|
10
10
|
config: {},
|
|
@@ -248,11 +248,6 @@
|
|
|
248
248
|
},
|
|
249
249
|
};
|
|
250
250
|
|
|
251
|
-
/**
|
|
252
|
-
* 存储在元素属性上的事件名
|
|
253
|
-
*/
|
|
254
|
-
const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
|
|
255
|
-
|
|
256
251
|
const OriginPrototype = {
|
|
257
252
|
Object: {
|
|
258
253
|
defineProperty: Object.defineProperty,
|
|
@@ -302,31 +297,31 @@
|
|
|
302
297
|
},
|
|
303
298
|
};
|
|
304
299
|
|
|
305
|
-
|
|
300
|
+
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}
|
|
306
301
|
|
|
307
|
-
|
|
302
|
+
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};
|
|
308
303
|
|
|
309
|
-
function
|
|
304
|
+
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}}}
|
|
310
305
|
|
|
311
|
-
|
|
306
|
+
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}
|
|
312
307
|
|
|
313
|
-
function
|
|
308
|
+
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}
|
|
314
309
|
|
|
315
|
-
|
|
310
|
+
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={};}}
|
|
316
311
|
|
|
317
|
-
const
|
|
312
|
+
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();}}
|
|
318
313
|
|
|
319
|
-
const
|
|
314
|
+
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}
|
|
320
315
|
|
|
321
|
-
const
|
|
316
|
+
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}
|
|
322
317
|
|
|
323
|
-
const
|
|
318
|
+
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}
|
|
324
319
|
|
|
325
|
-
const
|
|
320
|
+
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}
|
|
326
321
|
|
|
327
|
-
|
|
322
|
+
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}
|
|
328
323
|
|
|
329
|
-
class i extends l
|
|
324
|
+
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;
|
|
330
325
|
|
|
331
326
|
class PopsUtils {
|
|
332
327
|
/**
|
|
@@ -813,6 +808,10 @@
|
|
|
813
808
|
textIsDisabledImportant: "pops-text-is-disabled-important",
|
|
814
809
|
};
|
|
815
810
|
|
|
811
|
+
/**
|
|
812
|
+
* 存储在元素属性上的事件名
|
|
813
|
+
*/
|
|
814
|
+
const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
|
|
816
815
|
class PopsDOMUtilsEvent {
|
|
817
816
|
on(element, eventType, selector, callback, option) {
|
|
818
817
|
/**
|
|
@@ -821,7 +820,7 @@
|
|
|
821
820
|
* @param startIndex
|
|
822
821
|
* @param option
|
|
823
822
|
*/
|
|
824
|
-
function
|
|
823
|
+
const getOption = function (args, startIndex, option) {
|
|
825
824
|
const currentParam = args[startIndex];
|
|
826
825
|
if (typeof currentParam === "boolean") {
|
|
827
826
|
option.capture = currentParam;
|
|
@@ -843,7 +842,7 @@
|
|
|
843
842
|
option.isComposedPath = currentParam.isComposedPath;
|
|
844
843
|
}
|
|
845
844
|
return option;
|
|
846
|
-
}
|
|
845
|
+
};
|
|
847
846
|
const that = this;
|
|
848
847
|
// eslint-disable-next-line prefer-rest-params
|
|
849
848
|
const args = arguments;
|
|
@@ -858,8 +857,7 @@
|
|
|
858
857
|
}
|
|
859
858
|
let $elList = [];
|
|
860
859
|
if (element instanceof NodeList || Array.isArray(element)) {
|
|
861
|
-
|
|
862
|
-
$elList = [...element];
|
|
860
|
+
$elList = $elList.concat(Array.from(element));
|
|
863
861
|
}
|
|
864
862
|
else {
|
|
865
863
|
$elList.push(element);
|
|
@@ -867,15 +865,15 @@
|
|
|
867
865
|
// 事件名
|
|
868
866
|
let eventTypeList = [];
|
|
869
867
|
if (Array.isArray(eventType)) {
|
|
870
|
-
eventTypeList = eventTypeList.concat(eventType.filter((
|
|
868
|
+
eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
871
869
|
}
|
|
872
870
|
else if (typeof eventType === "string") {
|
|
873
|
-
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((
|
|
871
|
+
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
|
|
874
872
|
}
|
|
875
873
|
// 子元素选择器
|
|
876
874
|
let selectorList = [];
|
|
877
875
|
if (Array.isArray(selector)) {
|
|
878
|
-
selectorList = selectorList.concat(selector.filter((
|
|
876
|
+
selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
879
877
|
}
|
|
880
878
|
else if (typeof selector === "string") {
|
|
881
879
|
selectorList.push(selector);
|
|
@@ -902,39 +900,52 @@
|
|
|
902
900
|
/**
|
|
903
901
|
* 如果是once,那么删除该监听和元素上的事件和监听
|
|
904
902
|
*/
|
|
905
|
-
|
|
903
|
+
const checkOptionOnceToRemoveEventListener = ($el) => {
|
|
906
904
|
if (listenerOption.once) {
|
|
907
|
-
|
|
905
|
+
this.off($el, eventTypeList, selector, callback, option);
|
|
908
906
|
}
|
|
909
|
-
}
|
|
910
|
-
$elList.forEach((
|
|
907
|
+
};
|
|
908
|
+
$elList.forEach(($elItem) => {
|
|
911
909
|
/**
|
|
912
910
|
* 事件回调
|
|
913
911
|
* @param event
|
|
914
912
|
*/
|
|
915
|
-
function
|
|
913
|
+
const handlerCallBack = function (event) {
|
|
914
|
+
let call_this = void 0;
|
|
915
|
+
let call_event = void 0;
|
|
916
|
+
let call_$selector = void 0;
|
|
917
|
+
let execCallback = false;
|
|
916
918
|
if (selectorList.length) {
|
|
917
919
|
// 存在子元素选择器
|
|
918
920
|
// 这时候的this和target都是子元素选择器的元素
|
|
919
|
-
let
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
totalParent = PopsCore.document.documentElement;
|
|
921
|
+
let $target;
|
|
922
|
+
if (listenerOption.isComposedPath) {
|
|
923
|
+
// 可能为空
|
|
924
|
+
const composedPath = event.composedPath();
|
|
925
|
+
if (!composedPath.length && event.target) {
|
|
926
|
+
composedPath.push(event.target);
|
|
926
927
|
}
|
|
928
|
+
$target = composedPath[0];
|
|
929
|
+
}
|
|
930
|
+
else {
|
|
931
|
+
$target = event.target;
|
|
932
|
+
}
|
|
933
|
+
let $parent = $elItem;
|
|
934
|
+
if (popsUtils.isWin($parent)) {
|
|
935
|
+
// window和document共用一个对象
|
|
936
|
+
// 这样就能处理子元素选择器无法匹配的问题
|
|
937
|
+
$parent = PopsCore.document.documentElement;
|
|
927
938
|
}
|
|
928
|
-
const findValue = selectorList.find((
|
|
939
|
+
const findValue = selectorList.find((selectors) => {
|
|
929
940
|
// 判断目标元素是否匹配选择器
|
|
930
|
-
if (that.matches(
|
|
941
|
+
if (that.matches($target, selectors)) {
|
|
931
942
|
// 当前目标可以被selector所匹配到
|
|
932
943
|
return true;
|
|
933
944
|
}
|
|
934
945
|
// 在上层与主元素之间寻找可以被selector所匹配到的
|
|
935
|
-
const $closestMatches = that.closest(
|
|
936
|
-
if ($closestMatches &&
|
|
937
|
-
|
|
946
|
+
const $closestMatches = that.closest($target, selectors);
|
|
947
|
+
if ($closestMatches && $parent?.contains?.($closestMatches)) {
|
|
948
|
+
$target = $closestMatches;
|
|
938
949
|
return true;
|
|
939
950
|
}
|
|
940
951
|
return false;
|
|
@@ -944,38 +955,47 @@
|
|
|
944
955
|
try {
|
|
945
956
|
OriginPrototype.Object.defineProperty(event, "target", {
|
|
946
957
|
get() {
|
|
947
|
-
return
|
|
958
|
+
return $target;
|
|
948
959
|
},
|
|
949
960
|
});
|
|
961
|
+
// oxlint-disable-next-line no-empty
|
|
950
962
|
}
|
|
951
|
-
catch {
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
963
|
+
catch { }
|
|
964
|
+
execCallback = true;
|
|
965
|
+
call_this = $target;
|
|
966
|
+
call_event = event;
|
|
967
|
+
call_$selector = $target;
|
|
956
968
|
}
|
|
957
969
|
}
|
|
958
970
|
else {
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
971
|
+
execCallback = true;
|
|
972
|
+
call_this = $elItem;
|
|
973
|
+
call_event = event;
|
|
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;
|
|
980
|
+
}
|
|
962
981
|
}
|
|
963
|
-
}
|
|
982
|
+
};
|
|
964
983
|
// 遍历事件名设置元素事件
|
|
965
984
|
eventTypeList.forEach((eventName) => {
|
|
966
|
-
|
|
985
|
+
// add listener
|
|
986
|
+
$elItem.addEventListener(eventName, handlerCallBack, listenerOption);
|
|
967
987
|
// 获取对象上的事件
|
|
968
|
-
const elementEvents = Reflect.get(
|
|
988
|
+
const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
|
|
969
989
|
// 初始化对象上的xx事件
|
|
970
990
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
971
991
|
elementEvents[eventName].push({
|
|
972
992
|
selector: selectorList,
|
|
973
993
|
option: listenerOption,
|
|
974
|
-
|
|
975
|
-
|
|
994
|
+
handlerCallBack: handlerCallBack,
|
|
995
|
+
callback: listenerCallBack,
|
|
976
996
|
});
|
|
977
997
|
// 覆盖事件
|
|
978
|
-
Reflect.set(
|
|
998
|
+
Reflect.set($elItem, SymbolEvents, elementEvents);
|
|
979
999
|
});
|
|
980
1000
|
});
|
|
981
1001
|
return {
|
|
@@ -988,11 +1008,11 @@
|
|
|
988
1008
|
},
|
|
989
1009
|
/**
|
|
990
1010
|
* 主动触发事件
|
|
991
|
-
* @param
|
|
992
|
-
* @param
|
|
1011
|
+
* @param extraDetails 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
1012
|
+
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了`$selector`的没有值
|
|
993
1013
|
*/
|
|
994
|
-
emit: (
|
|
995
|
-
that.emit($elList, eventTypeList,
|
|
1014
|
+
emit: (extraDetails, useDispatchToTriggerEvent) => {
|
|
1015
|
+
that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
|
|
996
1016
|
},
|
|
997
1017
|
};
|
|
998
1018
|
}
|
|
@@ -1003,7 +1023,7 @@
|
|
|
1003
1023
|
* @param startIndex
|
|
1004
1024
|
* @param option
|
|
1005
1025
|
*/
|
|
1006
|
-
function
|
|
1026
|
+
const getOption = function (args1, startIndex, option) {
|
|
1007
1027
|
const currentParam = args1[startIndex];
|
|
1008
1028
|
if (typeof currentParam === "boolean") {
|
|
1009
1029
|
option.capture = currentParam;
|
|
@@ -1012,12 +1032,12 @@
|
|
|
1012
1032
|
option.capture = currentParam.capture;
|
|
1013
1033
|
}
|
|
1014
1034
|
return option;
|
|
1015
|
-
}
|
|
1016
|
-
const
|
|
1035
|
+
};
|
|
1036
|
+
const that = this;
|
|
1017
1037
|
// eslint-disable-next-line prefer-rest-params
|
|
1018
1038
|
const args = arguments;
|
|
1019
1039
|
if (typeof element === "string") {
|
|
1020
|
-
element =
|
|
1040
|
+
element = that.selectorAll(element);
|
|
1021
1041
|
}
|
|
1022
1042
|
if (element == null) {
|
|
1023
1043
|
return;
|
|
@@ -1025,22 +1045,22 @@
|
|
|
1025
1045
|
let $elList = [];
|
|
1026
1046
|
if (element instanceof NodeList || Array.isArray(element)) {
|
|
1027
1047
|
element = element;
|
|
1028
|
-
$elList = $elList.concat(element);
|
|
1048
|
+
$elList = $elList.concat(Array.from(element));
|
|
1029
1049
|
}
|
|
1030
1050
|
else {
|
|
1031
1051
|
$elList.push(element);
|
|
1032
1052
|
}
|
|
1033
1053
|
let eventTypeList = [];
|
|
1034
1054
|
if (Array.isArray(eventType)) {
|
|
1035
|
-
eventTypeList = eventTypeList.concat(eventType.filter((
|
|
1055
|
+
eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
1036
1056
|
}
|
|
1037
1057
|
else if (typeof eventType === "string") {
|
|
1038
|
-
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((
|
|
1058
|
+
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
|
|
1039
1059
|
}
|
|
1040
1060
|
// 子元素选择器
|
|
1041
1061
|
let selectorList = [];
|
|
1042
1062
|
if (Array.isArray(selector)) {
|
|
1043
|
-
selectorList = selectorList.concat(selector.filter((
|
|
1063
|
+
selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
1044
1064
|
}
|
|
1045
1065
|
else if (typeof selector === "string") {
|
|
1046
1066
|
selectorList.push(selector);
|
|
@@ -1069,16 +1089,16 @@
|
|
|
1069
1089
|
// 目标函数、事件名、回调函数、事件配置、过滤函数
|
|
1070
1090
|
filter = option;
|
|
1071
1091
|
}
|
|
1072
|
-
$elList.forEach((
|
|
1092
|
+
$elList.forEach(($elItem) => {
|
|
1073
1093
|
// 获取对象上的事件
|
|
1074
|
-
const elementEvents = Reflect.get(
|
|
1094
|
+
const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
|
|
1075
1095
|
eventTypeList.forEach((eventName) => {
|
|
1076
1096
|
const handlers = elementEvents[eventName] || [];
|
|
1077
1097
|
const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
|
|
1078
1098
|
for (let index = 0; index < filterHandler.length; index++) {
|
|
1079
1099
|
const handler = filterHandler[index];
|
|
1080
1100
|
let flag = true;
|
|
1081
|
-
if (flag && listenerCallBack && handler.
|
|
1101
|
+
if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
|
|
1082
1102
|
// callback不同
|
|
1083
1103
|
flag = false;
|
|
1084
1104
|
}
|
|
@@ -1095,7 +1115,7 @@
|
|
|
1095
1115
|
flag = false;
|
|
1096
1116
|
}
|
|
1097
1117
|
if (flag) {
|
|
1098
|
-
|
|
1118
|
+
$elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
|
|
1099
1119
|
const findIndex = handlers.findIndex((item) => item === handler);
|
|
1100
1120
|
if (findIndex !== -1) {
|
|
1101
1121
|
handlers.splice(findIndex, 1);
|
|
@@ -1107,7 +1127,7 @@
|
|
|
1107
1127
|
popsUtils.delete(elementEvents, eventType);
|
|
1108
1128
|
}
|
|
1109
1129
|
});
|
|
1110
|
-
Reflect.set(
|
|
1130
|
+
Reflect.set($elItem, SymbolEvents, elementEvents);
|
|
1111
1131
|
});
|
|
1112
1132
|
}
|
|
1113
1133
|
/**
|
|
@@ -1491,11 +1511,11 @@
|
|
|
1491
1511
|
* 阻止事件的默认行为发生,并阻止事件传播
|
|
1492
1512
|
*/
|
|
1493
1513
|
const stopEvent = (event, onlyStopPropagation) => {
|
|
1514
|
+
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1515
|
+
event?.stopPropagation();
|
|
1516
|
+
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1517
|
+
event?.stopImmediatePropagation();
|
|
1494
1518
|
if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
|
|
1495
|
-
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1496
|
-
event?.stopPropagation();
|
|
1497
|
-
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1498
|
-
event?.stopImmediatePropagation();
|
|
1499
1519
|
return;
|
|
1500
1520
|
}
|
|
1501
1521
|
// 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字
|
|
@@ -1711,35 +1731,6 @@
|
|
|
1711
1731
|
getTransitionEndNameList() {
|
|
1712
1732
|
return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
|
|
1713
1733
|
}
|
|
1714
|
-
/**
|
|
1715
|
-
* 是否是隐藏状态
|
|
1716
|
-
*
|
|
1717
|
-
* 检测以下项:
|
|
1718
|
-
*
|
|
1719
|
-
* + `display`: none
|
|
1720
|
-
* + `visibility`: hidden
|
|
1721
|
-
* + `opacity`: 0
|
|
1722
|
-
* + `使用了pops的自定义的隐藏class类`
|
|
1723
|
-
* @param $el 需要检测的元素
|
|
1724
|
-
*/
|
|
1725
|
-
isHide($el) {
|
|
1726
|
-
let flag = false;
|
|
1727
|
-
if (this.containsClassName($el, PopsCommonCSSClassName.hide) ||
|
|
1728
|
-
this.containsClassName($el, PopsCommonCSSClassName.hideImportant)) {
|
|
1729
|
-
flag = true;
|
|
1730
|
-
}
|
|
1731
|
-
else {
|
|
1732
|
-
if ($el instanceof HTMLElement) {
|
|
1733
|
-
const style = $el.style;
|
|
1734
|
-
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
1735
|
-
}
|
|
1736
|
-
if (!flag) {
|
|
1737
|
-
const style = globalThis.getComputedStyle($el);
|
|
1738
|
-
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
1739
|
-
}
|
|
1740
|
-
}
|
|
1741
|
-
return flag;
|
|
1742
|
-
}
|
|
1743
1734
|
/**
|
|
1744
1735
|
* 实现jQuery中的$().offset();
|
|
1745
1736
|
* @param element
|
|
@@ -3186,6 +3177,134 @@
|
|
|
3186
3177
|
tooltip: [],
|
|
3187
3178
|
};
|
|
3188
3179
|
|
|
3180
|
+
const PopsInstanceUtils = {
|
|
3181
|
+
/**
|
|
3182
|
+
* 获取pops所有弹窗中的最大的z-index
|
|
3183
|
+
* @param deviation
|
|
3184
|
+
*/
|
|
3185
|
+
getPopsMaxZIndex(deviation = 1) {
|
|
3186
|
+
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
3187
|
+
// 最大值 2147483647
|
|
3188
|
+
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
3189
|
+
// 比较值 2000000000
|
|
3190
|
+
const maxZIndex = 2 * Math.pow(10, 9);
|
|
3191
|
+
// 当前页面最大的z-index
|
|
3192
|
+
let zIndex = 0;
|
|
3193
|
+
// 当前的最大z-index的元素,调试使用
|
|
3194
|
+
let maxZIndexNode = null;
|
|
3195
|
+
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
3196
|
+
const instData = PopsInstData[instKeyName];
|
|
3197
|
+
for (let index = 0; index < instData.length; index++) {
|
|
3198
|
+
const inst = instData[index];
|
|
3199
|
+
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
3200
|
+
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
3201
|
+
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
3202
|
+
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
3203
|
+
if (maxNodeZIndexInfo) {
|
|
3204
|
+
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
3205
|
+
if (nodeZIndex > zIndex) {
|
|
3206
|
+
zIndex = nodeZIndex;
|
|
3207
|
+
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
3208
|
+
}
|
|
3209
|
+
}
|
|
3210
|
+
}
|
|
3211
|
+
});
|
|
3212
|
+
zIndex += deviation;
|
|
3213
|
+
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
3214
|
+
if (isOverMaxZIndex) {
|
|
3215
|
+
// 超出z-index最大值
|
|
3216
|
+
zIndex = maxZIndex;
|
|
3217
|
+
}
|
|
3218
|
+
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
3219
|
+
},
|
|
3220
|
+
/**
|
|
3221
|
+
* 排序数组
|
|
3222
|
+
* @param getBeforeValueFun
|
|
3223
|
+
* @param getAfterValueFun
|
|
3224
|
+
* @param sortByDesc 排序是否降序,默认降序
|
|
3225
|
+
*/
|
|
3226
|
+
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
3227
|
+
if (typeof sortByDesc !== "boolean") {
|
|
3228
|
+
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
3229
|
+
}
|
|
3230
|
+
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
3231
|
+
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
3232
|
+
}
|
|
3233
|
+
return function (after_obj, before_obj) {
|
|
3234
|
+
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
3235
|
+
const afterValue = getAfterValueFun(after_obj); // 后
|
|
3236
|
+
if (sortByDesc) {
|
|
3237
|
+
if (afterValue > beforeValue) {
|
|
3238
|
+
return -1;
|
|
3239
|
+
}
|
|
3240
|
+
else if (afterValue < beforeValue) {
|
|
3241
|
+
return 1;
|
|
3242
|
+
}
|
|
3243
|
+
else {
|
|
3244
|
+
return 0;
|
|
3245
|
+
}
|
|
3246
|
+
}
|
|
3247
|
+
else {
|
|
3248
|
+
if (afterValue < beforeValue) {
|
|
3249
|
+
return -1;
|
|
3250
|
+
}
|
|
3251
|
+
else if (afterValue > beforeValue) {
|
|
3252
|
+
return 1;
|
|
3253
|
+
}
|
|
3254
|
+
else {
|
|
3255
|
+
return 0;
|
|
3256
|
+
}
|
|
3257
|
+
}
|
|
3258
|
+
};
|
|
3259
|
+
},
|
|
3260
|
+
/**
|
|
3261
|
+
* 是否是隐藏状态
|
|
3262
|
+
*
|
|
3263
|
+
* 检测以下项:
|
|
3264
|
+
*
|
|
3265
|
+
* + `display`: none
|
|
3266
|
+
* + `visibility`: hidden
|
|
3267
|
+
* + `opacity`: 0
|
|
3268
|
+
* + `使用了pops的自定义的隐藏class类`
|
|
3269
|
+
* @param $el 需要检测的元素
|
|
3270
|
+
*/
|
|
3271
|
+
isHide($el) {
|
|
3272
|
+
let flag = false;
|
|
3273
|
+
if ($el?.classList?.contains(PopsCommonCSSClassName.hide) ||
|
|
3274
|
+
$el?.classList?.contains(PopsCommonCSSClassName.hideImportant)) {
|
|
3275
|
+
flag = true;
|
|
3276
|
+
}
|
|
3277
|
+
else {
|
|
3278
|
+
if ($el instanceof HTMLElement) {
|
|
3279
|
+
const style = $el.style;
|
|
3280
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3281
|
+
}
|
|
3282
|
+
if (!flag) {
|
|
3283
|
+
const style = globalThis.getComputedStyle($el);
|
|
3284
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3285
|
+
}
|
|
3286
|
+
}
|
|
3287
|
+
return flag;
|
|
3288
|
+
},
|
|
3289
|
+
/**
|
|
3290
|
+
* 判断元素是否是在`.pops`内
|
|
3291
|
+
* @param $el 目标元素
|
|
3292
|
+
*/
|
|
3293
|
+
isNodeInPopsNode($el) {
|
|
3294
|
+
return !!($el.closest(".pops") || $el.matches(".pops"));
|
|
3295
|
+
},
|
|
3296
|
+
/**
|
|
3297
|
+
* 判断是否是`.pops-anim`元素
|
|
3298
|
+
* @param $el 目标元素
|
|
3299
|
+
*/
|
|
3300
|
+
isAnimNode($el) {
|
|
3301
|
+
return !!($el?.localName?.toLowerCase() === "div" &&
|
|
3302
|
+
$el.className &&
|
|
3303
|
+
$el.className === "pops-anim" &&
|
|
3304
|
+
$el.hasAttribute("anim"));
|
|
3305
|
+
},
|
|
3306
|
+
};
|
|
3307
|
+
|
|
3189
3308
|
const PopsInstHandler = {
|
|
3190
3309
|
/**
|
|
3191
3310
|
* 删除配置中对应的对象
|
|
@@ -3266,7 +3385,7 @@
|
|
|
3266
3385
|
// 先设置好动画状态
|
|
3267
3386
|
// 再显示,会自执行动画
|
|
3268
3387
|
const checkVisible = () => {
|
|
3269
|
-
if (!
|
|
3388
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3270
3389
|
return true;
|
|
3271
3390
|
}
|
|
3272
3391
|
else {
|
|
@@ -3356,7 +3475,7 @@
|
|
|
3356
3475
|
// 再隐藏
|
|
3357
3476
|
// 存在实例
|
|
3358
3477
|
const checkVisible = () => {
|
|
3359
|
-
if (!
|
|
3478
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3360
3479
|
return true;
|
|
3361
3480
|
}
|
|
3362
3481
|
else {
|
|
@@ -3784,11 +3903,11 @@
|
|
|
3784
3903
|
* 点击其它区域的事件
|
|
3785
3904
|
* @param event
|
|
3786
3905
|
*/
|
|
3787
|
-
|
|
3906
|
+
const clickEvent = (event) => {
|
|
3788
3907
|
popsDOMUtils.preventEvent(event);
|
|
3789
3908
|
// 获取该类型实例存储列表
|
|
3790
3909
|
const targetInst = PopsInstData[config.type];
|
|
3791
|
-
|
|
3910
|
+
const continueExec = () => {
|
|
3792
3911
|
if (config.config.mask.clickEvent.toClose) {
|
|
3793
3912
|
// 关闭
|
|
3794
3913
|
return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
|
|
@@ -3797,37 +3916,26 @@
|
|
|
3797
3916
|
// 隐藏
|
|
3798
3917
|
return PopsInstHandler.hide(config.config, config.type, targetInst, config.guid, config.animElement, result.maskElement);
|
|
3799
3918
|
}
|
|
3800
|
-
}
|
|
3919
|
+
};
|
|
3801
3920
|
if (typeof config.config.mask.clickCallBack === "function") {
|
|
3802
|
-
config.config.mask.clickCallBack(
|
|
3921
|
+
config.config.mask.clickCallBack(continueExec, config.config);
|
|
3803
3922
|
}
|
|
3804
3923
|
else {
|
|
3805
|
-
|
|
3924
|
+
continueExec();
|
|
3806
3925
|
}
|
|
3807
3926
|
return false;
|
|
3808
|
-
}
|
|
3927
|
+
};
|
|
3809
3928
|
// 判断是否启用了遮罩层点击动作
|
|
3810
3929
|
if (config.config.mask.clickEvent.toClose || config.config.mask.clickEvent.toHide) {
|
|
3811
|
-
/**
|
|
3812
|
-
* 判断点击的元素是否是动画层的元素
|
|
3813
|
-
* @param element
|
|
3814
|
-
* @returns
|
|
3815
|
-
*/
|
|
3816
|
-
function isAnimElement(element) {
|
|
3817
|
-
return Boolean(element?.localName?.toLowerCase() === "div" &&
|
|
3818
|
-
element.className &&
|
|
3819
|
-
element.className === "pops-anim" &&
|
|
3820
|
-
element.hasAttribute("anim"));
|
|
3821
|
-
}
|
|
3822
3930
|
// 判断按下的元素是否是pops-anim
|
|
3823
3931
|
popsDOMUtils.on(config.animElement, "pointerup", (event) => {
|
|
3824
3932
|
const $click = event.composedPath()[0];
|
|
3825
|
-
isMaskClick =
|
|
3933
|
+
isMaskClick = PopsInstanceUtils.isAnimNode($click);
|
|
3826
3934
|
});
|
|
3827
3935
|
// 如果有动画层,在动画层上监听点击事件
|
|
3828
3936
|
popsDOMUtils.on(config.animElement, "click", (event) => {
|
|
3829
3937
|
const $click = event.composedPath()[0];
|
|
3830
|
-
if (isMaskClick &&
|
|
3938
|
+
if (isMaskClick && PopsInstanceUtils.isAnimNode($click)) {
|
|
3831
3939
|
return clickEvent(event);
|
|
3832
3940
|
}
|
|
3833
3941
|
});
|
|
@@ -9733,12 +9841,12 @@
|
|
|
9733
9841
|
},
|
|
9734
9842
|
mask: {
|
|
9735
9843
|
enable: true,
|
|
9736
|
-
clickCallBack(
|
|
9844
|
+
clickCallBack(continueExec) {
|
|
9737
9845
|
const ret = dialogCloseCallback();
|
|
9738
9846
|
if (typeof ret === "boolean" && !ret) {
|
|
9739
9847
|
return;
|
|
9740
9848
|
}
|
|
9741
|
-
|
|
9849
|
+
continueExec();
|
|
9742
9850
|
},
|
|
9743
9851
|
clickEvent: {
|
|
9744
9852
|
toClose: true,
|
|
@@ -10950,8 +11058,8 @@
|
|
|
10950
11058
|
},
|
|
10951
11059
|
mask: {
|
|
10952
11060
|
enable: true,
|
|
10953
|
-
clickCallBack(
|
|
10954
|
-
|
|
11061
|
+
clickCallBack(continueExec) {
|
|
11062
|
+
continueExec();
|
|
10955
11063
|
dialogCloseCallback();
|
|
10956
11064
|
},
|
|
10957
11065
|
clickEvent: {
|
|
@@ -13596,93 +13704,12 @@
|
|
|
13596
13704
|
},
|
|
13597
13705
|
};
|
|
13598
13706
|
|
|
13599
|
-
const PopsInstanceUtils = {
|
|
13600
|
-
/**
|
|
13601
|
-
* 获取pops所有弹窗中的最大的z-index
|
|
13602
|
-
* @param deviation
|
|
13603
|
-
*/
|
|
13604
|
-
getPopsMaxZIndex(deviation = 1) {
|
|
13605
|
-
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
13606
|
-
// 最大值 2147483647
|
|
13607
|
-
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
13608
|
-
// 比较值 2000000000
|
|
13609
|
-
const maxZIndex = 2 * Math.pow(10, 9);
|
|
13610
|
-
// 当前页面最大的z-index
|
|
13611
|
-
let zIndex = 0;
|
|
13612
|
-
// 当前的最大z-index的元素,调试使用
|
|
13613
|
-
let maxZIndexNode = null;
|
|
13614
|
-
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
13615
|
-
const instData = PopsInstData[instKeyName];
|
|
13616
|
-
for (let index = 0; index < instData.length; index++) {
|
|
13617
|
-
const inst = instData[index];
|
|
13618
|
-
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
13619
|
-
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
13620
|
-
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
13621
|
-
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
13622
|
-
if (maxNodeZIndexInfo) {
|
|
13623
|
-
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
13624
|
-
if (nodeZIndex > zIndex) {
|
|
13625
|
-
zIndex = nodeZIndex;
|
|
13626
|
-
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
13627
|
-
}
|
|
13628
|
-
}
|
|
13629
|
-
}
|
|
13630
|
-
});
|
|
13631
|
-
zIndex += deviation;
|
|
13632
|
-
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
13633
|
-
if (isOverMaxZIndex) {
|
|
13634
|
-
// 超出z-index最大值
|
|
13635
|
-
zIndex = maxZIndex;
|
|
13636
|
-
}
|
|
13637
|
-
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
13638
|
-
},
|
|
13639
|
-
/**
|
|
13640
|
-
* 排序数组
|
|
13641
|
-
* @param getBeforeValueFun
|
|
13642
|
-
* @param getAfterValueFun
|
|
13643
|
-
* @param sortByDesc 排序是否降序,默认降序
|
|
13644
|
-
*/
|
|
13645
|
-
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
13646
|
-
if (typeof sortByDesc !== "boolean") {
|
|
13647
|
-
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
13648
|
-
}
|
|
13649
|
-
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
13650
|
-
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
13651
|
-
}
|
|
13652
|
-
return function (after_obj, before_obj) {
|
|
13653
|
-
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
13654
|
-
const afterValue = getAfterValueFun(after_obj); // 后
|
|
13655
|
-
if (sortByDesc) {
|
|
13656
|
-
if (afterValue > beforeValue) {
|
|
13657
|
-
return -1;
|
|
13658
|
-
}
|
|
13659
|
-
else if (afterValue < beforeValue) {
|
|
13660
|
-
return 1;
|
|
13661
|
-
}
|
|
13662
|
-
else {
|
|
13663
|
-
return 0;
|
|
13664
|
-
}
|
|
13665
|
-
}
|
|
13666
|
-
else {
|
|
13667
|
-
if (afterValue < beforeValue) {
|
|
13668
|
-
return -1;
|
|
13669
|
-
}
|
|
13670
|
-
else if (afterValue > beforeValue) {
|
|
13671
|
-
return 1;
|
|
13672
|
-
}
|
|
13673
|
-
else {
|
|
13674
|
-
return 0;
|
|
13675
|
-
}
|
|
13676
|
-
}
|
|
13677
|
-
};
|
|
13678
|
-
},
|
|
13679
|
-
};
|
|
13680
|
-
|
|
13681
13707
|
class Pops {
|
|
13682
13708
|
/** 配置 */
|
|
13683
13709
|
config = {
|
|
13684
13710
|
/** 版本号 */
|
|
13685
13711
|
version: version,
|
|
13712
|
+
/** 样式配置 */
|
|
13686
13713
|
cssText: PopsCSS,
|
|
13687
13714
|
/** icon图标的svg代码 */
|
|
13688
13715
|
iconSVG: PopsIcon.$data,
|
|
@@ -13690,12 +13717,9 @@
|
|
|
13690
13717
|
animation: PopsAnimation.$data,
|
|
13691
13718
|
/** 存储已创建的元素 */
|
|
13692
13719
|
instData: PopsInstData,
|
|
13693
|
-
|
|
13694
|
-
|
|
13695
|
-
|
|
13696
|
-
return popsDOMUtils.preventEvent(event);
|
|
13697
|
-
},
|
|
13698
|
-
},
|
|
13720
|
+
};
|
|
13721
|
+
/** 导出的函数 */
|
|
13722
|
+
fn = {
|
|
13699
13723
|
/** pops使用的工具类 */
|
|
13700
13724
|
Utils: popsUtils,
|
|
13701
13725
|
/** pops使用的DOM工具类 */
|
|
@@ -13705,17 +13729,16 @@
|
|
|
13705
13729
|
/** pops处理float类型使用的工具类 */
|
|
13706
13730
|
MathFloatUtils: PopsMathFloatUtils,
|
|
13707
13731
|
/** 实例处理函数 */
|
|
13708
|
-
PopsInstHandler,
|
|
13732
|
+
InstHandler: PopsInstHandler,
|
|
13709
13733
|
/** pops.panel中用于处理各个类型的工具 */
|
|
13710
|
-
PanelHandlerComponents,
|
|
13734
|
+
PanelHandlerComponents: PanelHandlerComponents,
|
|
13711
13735
|
/** pops.panel中的动画 */
|
|
13712
|
-
PopsAnimation,
|
|
13736
|
+
Animation: PopsAnimation,
|
|
13713
13737
|
/** 事件类 */
|
|
13714
|
-
EventEmiter,
|
|
13738
|
+
EventEmiter: EventEmiter,
|
|
13715
13739
|
/** 通用的CSS类名 */
|
|
13716
|
-
PopsCommonCSSClassName,
|
|
13740
|
+
CommonCSSClassName: PopsCommonCSSClassName,
|
|
13717
13741
|
};
|
|
13718
|
-
init() { }
|
|
13719
13742
|
/**
|
|
13720
13743
|
* 释放原有的pops控制权
|
|
13721
13744
|
* @example
|