@whitesev/pops 4.1.0 → 4.2.0
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 +169 -167
- 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 +169 -167
- 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 +169 -167
- 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 +169 -167
- 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 +169 -167
- 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 +169 -167
- 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 +11 -10
- package/dist/types/src/types/mask.d.ts +6 -6
- package/dist/types/src/utils/PopsDOMUtils.d.ts +0 -12
- 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/mask.d.ts +6 -6
- package/src/utils/PopsDOMUtils.ts +4 -31
- 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.
|
|
7
|
+
const version = "4.2.0";
|
|
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
|
/**
|
|
@@ -1711,35 +1710,6 @@
|
|
|
1711
1710
|
getTransitionEndNameList() {
|
|
1712
1711
|
return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
|
|
1713
1712
|
}
|
|
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
1713
|
/**
|
|
1744
1714
|
* 实现jQuery中的$().offset();
|
|
1745
1715
|
* @param element
|
|
@@ -3186,6 +3156,134 @@
|
|
|
3186
3156
|
tooltip: [],
|
|
3187
3157
|
};
|
|
3188
3158
|
|
|
3159
|
+
const PopsInstanceUtils = {
|
|
3160
|
+
/**
|
|
3161
|
+
* 获取pops所有弹窗中的最大的z-index
|
|
3162
|
+
* @param deviation
|
|
3163
|
+
*/
|
|
3164
|
+
getPopsMaxZIndex(deviation = 1) {
|
|
3165
|
+
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
3166
|
+
// 最大值 2147483647
|
|
3167
|
+
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
3168
|
+
// 比较值 2000000000
|
|
3169
|
+
const maxZIndex = 2 * Math.pow(10, 9);
|
|
3170
|
+
// 当前页面最大的z-index
|
|
3171
|
+
let zIndex = 0;
|
|
3172
|
+
// 当前的最大z-index的元素,调试使用
|
|
3173
|
+
let maxZIndexNode = null;
|
|
3174
|
+
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
3175
|
+
const instData = PopsInstData[instKeyName];
|
|
3176
|
+
for (let index = 0; index < instData.length; index++) {
|
|
3177
|
+
const inst = instData[index];
|
|
3178
|
+
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
3179
|
+
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
3180
|
+
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
3181
|
+
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
3182
|
+
if (maxNodeZIndexInfo) {
|
|
3183
|
+
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
3184
|
+
if (nodeZIndex > zIndex) {
|
|
3185
|
+
zIndex = nodeZIndex;
|
|
3186
|
+
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
3187
|
+
}
|
|
3188
|
+
}
|
|
3189
|
+
}
|
|
3190
|
+
});
|
|
3191
|
+
zIndex += deviation;
|
|
3192
|
+
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
3193
|
+
if (isOverMaxZIndex) {
|
|
3194
|
+
// 超出z-index最大值
|
|
3195
|
+
zIndex = maxZIndex;
|
|
3196
|
+
}
|
|
3197
|
+
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
3198
|
+
},
|
|
3199
|
+
/**
|
|
3200
|
+
* 排序数组
|
|
3201
|
+
* @param getBeforeValueFun
|
|
3202
|
+
* @param getAfterValueFun
|
|
3203
|
+
* @param sortByDesc 排序是否降序,默认降序
|
|
3204
|
+
*/
|
|
3205
|
+
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
3206
|
+
if (typeof sortByDesc !== "boolean") {
|
|
3207
|
+
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
3208
|
+
}
|
|
3209
|
+
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
3210
|
+
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
3211
|
+
}
|
|
3212
|
+
return function (after_obj, before_obj) {
|
|
3213
|
+
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
3214
|
+
const afterValue = getAfterValueFun(after_obj); // 后
|
|
3215
|
+
if (sortByDesc) {
|
|
3216
|
+
if (afterValue > beforeValue) {
|
|
3217
|
+
return -1;
|
|
3218
|
+
}
|
|
3219
|
+
else if (afterValue < beforeValue) {
|
|
3220
|
+
return 1;
|
|
3221
|
+
}
|
|
3222
|
+
else {
|
|
3223
|
+
return 0;
|
|
3224
|
+
}
|
|
3225
|
+
}
|
|
3226
|
+
else {
|
|
3227
|
+
if (afterValue < beforeValue) {
|
|
3228
|
+
return -1;
|
|
3229
|
+
}
|
|
3230
|
+
else if (afterValue > beforeValue) {
|
|
3231
|
+
return 1;
|
|
3232
|
+
}
|
|
3233
|
+
else {
|
|
3234
|
+
return 0;
|
|
3235
|
+
}
|
|
3236
|
+
}
|
|
3237
|
+
};
|
|
3238
|
+
},
|
|
3239
|
+
/**
|
|
3240
|
+
* 是否是隐藏状态
|
|
3241
|
+
*
|
|
3242
|
+
* 检测以下项:
|
|
3243
|
+
*
|
|
3244
|
+
* + `display`: none
|
|
3245
|
+
* + `visibility`: hidden
|
|
3246
|
+
* + `opacity`: 0
|
|
3247
|
+
* + `使用了pops的自定义的隐藏class类`
|
|
3248
|
+
* @param $el 需要检测的元素
|
|
3249
|
+
*/
|
|
3250
|
+
isHide($el) {
|
|
3251
|
+
let flag = false;
|
|
3252
|
+
if ($el?.classList?.contains(PopsCommonCSSClassName.hide) ||
|
|
3253
|
+
$el?.classList?.contains(PopsCommonCSSClassName.hideImportant)) {
|
|
3254
|
+
flag = true;
|
|
3255
|
+
}
|
|
3256
|
+
else {
|
|
3257
|
+
if ($el instanceof HTMLElement) {
|
|
3258
|
+
const style = $el.style;
|
|
3259
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3260
|
+
}
|
|
3261
|
+
if (!flag) {
|
|
3262
|
+
const style = globalThis.getComputedStyle($el);
|
|
3263
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3264
|
+
}
|
|
3265
|
+
}
|
|
3266
|
+
return flag;
|
|
3267
|
+
},
|
|
3268
|
+
/**
|
|
3269
|
+
* 判断元素是否是在`.pops`内
|
|
3270
|
+
* @param $el 目标元素
|
|
3271
|
+
*/
|
|
3272
|
+
isNodeInPopsNode($el) {
|
|
3273
|
+
return !!($el.closest(".pops") || $el.matches(".pops"));
|
|
3274
|
+
},
|
|
3275
|
+
/**
|
|
3276
|
+
* 判断是否是`.pops-anim`元素
|
|
3277
|
+
* @param $el 目标元素
|
|
3278
|
+
*/
|
|
3279
|
+
isAnimNode($el) {
|
|
3280
|
+
return !!($el?.localName?.toLowerCase() === "div" &&
|
|
3281
|
+
$el.className &&
|
|
3282
|
+
$el.className === "pops-anim" &&
|
|
3283
|
+
$el.hasAttribute("anim"));
|
|
3284
|
+
},
|
|
3285
|
+
};
|
|
3286
|
+
|
|
3189
3287
|
const PopsInstHandler = {
|
|
3190
3288
|
/**
|
|
3191
3289
|
* 删除配置中对应的对象
|
|
@@ -3266,7 +3364,7 @@
|
|
|
3266
3364
|
// 先设置好动画状态
|
|
3267
3365
|
// 再显示,会自执行动画
|
|
3268
3366
|
const checkVisible = () => {
|
|
3269
|
-
if (!
|
|
3367
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3270
3368
|
return true;
|
|
3271
3369
|
}
|
|
3272
3370
|
else {
|
|
@@ -3356,7 +3454,7 @@
|
|
|
3356
3454
|
// 再隐藏
|
|
3357
3455
|
// 存在实例
|
|
3358
3456
|
const checkVisible = () => {
|
|
3359
|
-
if (!
|
|
3457
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3360
3458
|
return true;
|
|
3361
3459
|
}
|
|
3362
3460
|
else {
|
|
@@ -3784,11 +3882,11 @@
|
|
|
3784
3882
|
* 点击其它区域的事件
|
|
3785
3883
|
* @param event
|
|
3786
3884
|
*/
|
|
3787
|
-
|
|
3885
|
+
const clickEvent = (event) => {
|
|
3788
3886
|
popsDOMUtils.preventEvent(event);
|
|
3789
3887
|
// 获取该类型实例存储列表
|
|
3790
3888
|
const targetInst = PopsInstData[config.type];
|
|
3791
|
-
|
|
3889
|
+
const continueExec = () => {
|
|
3792
3890
|
if (config.config.mask.clickEvent.toClose) {
|
|
3793
3891
|
// 关闭
|
|
3794
3892
|
return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
|
|
@@ -3797,37 +3895,26 @@
|
|
|
3797
3895
|
// 隐藏
|
|
3798
3896
|
return PopsInstHandler.hide(config.config, config.type, targetInst, config.guid, config.animElement, result.maskElement);
|
|
3799
3897
|
}
|
|
3800
|
-
}
|
|
3898
|
+
};
|
|
3801
3899
|
if (typeof config.config.mask.clickCallBack === "function") {
|
|
3802
|
-
config.config.mask.clickCallBack(
|
|
3900
|
+
config.config.mask.clickCallBack(continueExec, config.config);
|
|
3803
3901
|
}
|
|
3804
3902
|
else {
|
|
3805
|
-
|
|
3903
|
+
continueExec();
|
|
3806
3904
|
}
|
|
3807
3905
|
return false;
|
|
3808
|
-
}
|
|
3906
|
+
};
|
|
3809
3907
|
// 判断是否启用了遮罩层点击动作
|
|
3810
3908
|
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
3909
|
// 判断按下的元素是否是pops-anim
|
|
3823
3910
|
popsDOMUtils.on(config.animElement, "pointerup", (event) => {
|
|
3824
3911
|
const $click = event.composedPath()[0];
|
|
3825
|
-
isMaskClick =
|
|
3912
|
+
isMaskClick = PopsInstanceUtils.isAnimNode($click);
|
|
3826
3913
|
});
|
|
3827
3914
|
// 如果有动画层,在动画层上监听点击事件
|
|
3828
3915
|
popsDOMUtils.on(config.animElement, "click", (event) => {
|
|
3829
3916
|
const $click = event.composedPath()[0];
|
|
3830
|
-
if (isMaskClick &&
|
|
3917
|
+
if (isMaskClick && PopsInstanceUtils.isAnimNode($click)) {
|
|
3831
3918
|
return clickEvent(event);
|
|
3832
3919
|
}
|
|
3833
3920
|
});
|
|
@@ -9733,12 +9820,12 @@
|
|
|
9733
9820
|
},
|
|
9734
9821
|
mask: {
|
|
9735
9822
|
enable: true,
|
|
9736
|
-
clickCallBack(
|
|
9823
|
+
clickCallBack(continueExec) {
|
|
9737
9824
|
const ret = dialogCloseCallback();
|
|
9738
9825
|
if (typeof ret === "boolean" && !ret) {
|
|
9739
9826
|
return;
|
|
9740
9827
|
}
|
|
9741
|
-
|
|
9828
|
+
continueExec();
|
|
9742
9829
|
},
|
|
9743
9830
|
clickEvent: {
|
|
9744
9831
|
toClose: true,
|
|
@@ -10950,8 +11037,8 @@
|
|
|
10950
11037
|
},
|
|
10951
11038
|
mask: {
|
|
10952
11039
|
enable: true,
|
|
10953
|
-
clickCallBack(
|
|
10954
|
-
|
|
11040
|
+
clickCallBack(continueExec) {
|
|
11041
|
+
continueExec();
|
|
10955
11042
|
dialogCloseCallback();
|
|
10956
11043
|
},
|
|
10957
11044
|
clickEvent: {
|
|
@@ -13596,93 +13683,12 @@
|
|
|
13596
13683
|
},
|
|
13597
13684
|
};
|
|
13598
13685
|
|
|
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
13686
|
class Pops {
|
|
13682
13687
|
/** 配置 */
|
|
13683
13688
|
config = {
|
|
13684
13689
|
/** 版本号 */
|
|
13685
13690
|
version: version,
|
|
13691
|
+
/** 样式配置 */
|
|
13686
13692
|
cssText: PopsCSS,
|
|
13687
13693
|
/** icon图标的svg代码 */
|
|
13688
13694
|
iconSVG: PopsIcon.$data,
|
|
@@ -13690,12 +13696,9 @@
|
|
|
13690
13696
|
animation: PopsAnimation.$data,
|
|
13691
13697
|
/** 存储已创建的元素 */
|
|
13692
13698
|
instData: PopsInstData,
|
|
13693
|
-
|
|
13694
|
-
|
|
13695
|
-
|
|
13696
|
-
return popsDOMUtils.preventEvent(event);
|
|
13697
|
-
},
|
|
13698
|
-
},
|
|
13699
|
+
};
|
|
13700
|
+
/** 导出的函数 */
|
|
13701
|
+
fn = {
|
|
13699
13702
|
/** pops使用的工具类 */
|
|
13700
13703
|
Utils: popsUtils,
|
|
13701
13704
|
/** pops使用的DOM工具类 */
|
|
@@ -13705,17 +13708,16 @@
|
|
|
13705
13708
|
/** pops处理float类型使用的工具类 */
|
|
13706
13709
|
MathFloatUtils: PopsMathFloatUtils,
|
|
13707
13710
|
/** 实例处理函数 */
|
|
13708
|
-
PopsInstHandler,
|
|
13711
|
+
InstHandler: PopsInstHandler,
|
|
13709
13712
|
/** pops.panel中用于处理各个类型的工具 */
|
|
13710
|
-
PanelHandlerComponents,
|
|
13713
|
+
PanelHandlerComponents: PanelHandlerComponents,
|
|
13711
13714
|
/** pops.panel中的动画 */
|
|
13712
|
-
PopsAnimation,
|
|
13715
|
+
Animation: PopsAnimation,
|
|
13713
13716
|
/** 事件类 */
|
|
13714
|
-
EventEmiter,
|
|
13717
|
+
EventEmiter: EventEmiter,
|
|
13715
13718
|
/** 通用的CSS类名 */
|
|
13716
|
-
PopsCommonCSSClassName,
|
|
13719
|
+
CommonCSSClassName: PopsCommonCSSClassName,
|
|
13717
13720
|
};
|
|
13718
|
-
init() { }
|
|
13719
13721
|
/**
|
|
13720
13722
|
* 释放原有的pops控制权
|
|
13721
13723
|
* @example
|