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