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