@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.amd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
define((function () { 'use strict';
|
|
2
2
|
|
|
3
|
-
const version = "4.
|
|
3
|
+
const version = "4.2.0";
|
|
4
4
|
|
|
5
5
|
const GlobalConfig = {
|
|
6
6
|
config: {},
|
|
@@ -244,11 +244,6 @@ define((function () { 'use strict';
|
|
|
244
244
|
},
|
|
245
245
|
};
|
|
246
246
|
|
|
247
|
-
/**
|
|
248
|
-
* 存储在元素属性上的事件名
|
|
249
|
-
*/
|
|
250
|
-
const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
|
|
251
|
-
|
|
252
247
|
const OriginPrototype = {
|
|
253
248
|
Object: {
|
|
254
249
|
defineProperty: Object.defineProperty,
|
|
@@ -298,31 +293,31 @@ define((function () { 'use strict';
|
|
|
298
293
|
},
|
|
299
294
|
};
|
|
300
295
|
|
|
301
|
-
|
|
296
|
+
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}
|
|
302
297
|
|
|
303
|
-
|
|
298
|
+
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};
|
|
304
299
|
|
|
305
|
-
function
|
|
300
|
+
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}}}
|
|
306
301
|
|
|
307
|
-
|
|
302
|
+
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}
|
|
308
303
|
|
|
309
|
-
function
|
|
304
|
+
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}
|
|
310
305
|
|
|
311
|
-
|
|
306
|
+
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={};}}
|
|
312
307
|
|
|
313
|
-
const
|
|
308
|
+
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();}}
|
|
314
309
|
|
|
315
|
-
const
|
|
310
|
+
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}
|
|
316
311
|
|
|
317
|
-
const
|
|
312
|
+
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}
|
|
318
313
|
|
|
319
|
-
const
|
|
314
|
+
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}
|
|
320
315
|
|
|
321
|
-
const
|
|
316
|
+
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}
|
|
322
317
|
|
|
323
|
-
|
|
318
|
+
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}
|
|
324
319
|
|
|
325
|
-
class i extends l
|
|
320
|
+
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;
|
|
326
321
|
|
|
327
322
|
class PopsUtils {
|
|
328
323
|
/**
|
|
@@ -809,6 +804,10 @@ define((function () { 'use strict';
|
|
|
809
804
|
textIsDisabledImportant: "pops-text-is-disabled-important",
|
|
810
805
|
};
|
|
811
806
|
|
|
807
|
+
/**
|
|
808
|
+
* 存储在元素属性上的事件名
|
|
809
|
+
*/
|
|
810
|
+
const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
|
|
812
811
|
class PopsDOMUtilsEvent {
|
|
813
812
|
on(element, eventType, selector, callback, option) {
|
|
814
813
|
/**
|
|
@@ -1707,35 +1706,6 @@ define((function () { 'use strict';
|
|
|
1707
1706
|
getTransitionEndNameList() {
|
|
1708
1707
|
return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
|
|
1709
1708
|
}
|
|
1710
|
-
/**
|
|
1711
|
-
* 是否是隐藏状态
|
|
1712
|
-
*
|
|
1713
|
-
* 检测以下项:
|
|
1714
|
-
*
|
|
1715
|
-
* + `display`: none
|
|
1716
|
-
* + `visibility`: hidden
|
|
1717
|
-
* + `opacity`: 0
|
|
1718
|
-
* + `使用了pops的自定义的隐藏class类`
|
|
1719
|
-
* @param $el 需要检测的元素
|
|
1720
|
-
*/
|
|
1721
|
-
isHide($el) {
|
|
1722
|
-
let flag = false;
|
|
1723
|
-
if (this.containsClassName($el, PopsCommonCSSClassName.hide) ||
|
|
1724
|
-
this.containsClassName($el, PopsCommonCSSClassName.hideImportant)) {
|
|
1725
|
-
flag = true;
|
|
1726
|
-
}
|
|
1727
|
-
else {
|
|
1728
|
-
if ($el instanceof HTMLElement) {
|
|
1729
|
-
const style = $el.style;
|
|
1730
|
-
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
1731
|
-
}
|
|
1732
|
-
if (!flag) {
|
|
1733
|
-
const style = globalThis.getComputedStyle($el);
|
|
1734
|
-
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
1735
|
-
}
|
|
1736
|
-
}
|
|
1737
|
-
return flag;
|
|
1738
|
-
}
|
|
1739
1709
|
/**
|
|
1740
1710
|
* 实现jQuery中的$().offset();
|
|
1741
1711
|
* @param element
|
|
@@ -3182,6 +3152,134 @@ define((function () { 'use strict';
|
|
|
3182
3152
|
tooltip: [],
|
|
3183
3153
|
};
|
|
3184
3154
|
|
|
3155
|
+
const PopsInstanceUtils = {
|
|
3156
|
+
/**
|
|
3157
|
+
* 获取pops所有弹窗中的最大的z-index
|
|
3158
|
+
* @param deviation
|
|
3159
|
+
*/
|
|
3160
|
+
getPopsMaxZIndex(deviation = 1) {
|
|
3161
|
+
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
3162
|
+
// 最大值 2147483647
|
|
3163
|
+
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
3164
|
+
// 比较值 2000000000
|
|
3165
|
+
const maxZIndex = 2 * Math.pow(10, 9);
|
|
3166
|
+
// 当前页面最大的z-index
|
|
3167
|
+
let zIndex = 0;
|
|
3168
|
+
// 当前的最大z-index的元素,调试使用
|
|
3169
|
+
let maxZIndexNode = null;
|
|
3170
|
+
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
3171
|
+
const instData = PopsInstData[instKeyName];
|
|
3172
|
+
for (let index = 0; index < instData.length; index++) {
|
|
3173
|
+
const inst = instData[index];
|
|
3174
|
+
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
3175
|
+
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
3176
|
+
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
3177
|
+
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
3178
|
+
if (maxNodeZIndexInfo) {
|
|
3179
|
+
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
3180
|
+
if (nodeZIndex > zIndex) {
|
|
3181
|
+
zIndex = nodeZIndex;
|
|
3182
|
+
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
3183
|
+
}
|
|
3184
|
+
}
|
|
3185
|
+
}
|
|
3186
|
+
});
|
|
3187
|
+
zIndex += deviation;
|
|
3188
|
+
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
3189
|
+
if (isOverMaxZIndex) {
|
|
3190
|
+
// 超出z-index最大值
|
|
3191
|
+
zIndex = maxZIndex;
|
|
3192
|
+
}
|
|
3193
|
+
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
3194
|
+
},
|
|
3195
|
+
/**
|
|
3196
|
+
* 排序数组
|
|
3197
|
+
* @param getBeforeValueFun
|
|
3198
|
+
* @param getAfterValueFun
|
|
3199
|
+
* @param sortByDesc 排序是否降序,默认降序
|
|
3200
|
+
*/
|
|
3201
|
+
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
3202
|
+
if (typeof sortByDesc !== "boolean") {
|
|
3203
|
+
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
3204
|
+
}
|
|
3205
|
+
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
3206
|
+
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
3207
|
+
}
|
|
3208
|
+
return function (after_obj, before_obj) {
|
|
3209
|
+
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
3210
|
+
const afterValue = getAfterValueFun(after_obj); // 后
|
|
3211
|
+
if (sortByDesc) {
|
|
3212
|
+
if (afterValue > beforeValue) {
|
|
3213
|
+
return -1;
|
|
3214
|
+
}
|
|
3215
|
+
else if (afterValue < beforeValue) {
|
|
3216
|
+
return 1;
|
|
3217
|
+
}
|
|
3218
|
+
else {
|
|
3219
|
+
return 0;
|
|
3220
|
+
}
|
|
3221
|
+
}
|
|
3222
|
+
else {
|
|
3223
|
+
if (afterValue < beforeValue) {
|
|
3224
|
+
return -1;
|
|
3225
|
+
}
|
|
3226
|
+
else if (afterValue > beforeValue) {
|
|
3227
|
+
return 1;
|
|
3228
|
+
}
|
|
3229
|
+
else {
|
|
3230
|
+
return 0;
|
|
3231
|
+
}
|
|
3232
|
+
}
|
|
3233
|
+
};
|
|
3234
|
+
},
|
|
3235
|
+
/**
|
|
3236
|
+
* 是否是隐藏状态
|
|
3237
|
+
*
|
|
3238
|
+
* 检测以下项:
|
|
3239
|
+
*
|
|
3240
|
+
* + `display`: none
|
|
3241
|
+
* + `visibility`: hidden
|
|
3242
|
+
* + `opacity`: 0
|
|
3243
|
+
* + `使用了pops的自定义的隐藏class类`
|
|
3244
|
+
* @param $el 需要检测的元素
|
|
3245
|
+
*/
|
|
3246
|
+
isHide($el) {
|
|
3247
|
+
let flag = false;
|
|
3248
|
+
if ($el?.classList?.contains(PopsCommonCSSClassName.hide) ||
|
|
3249
|
+
$el?.classList?.contains(PopsCommonCSSClassName.hideImportant)) {
|
|
3250
|
+
flag = true;
|
|
3251
|
+
}
|
|
3252
|
+
else {
|
|
3253
|
+
if ($el instanceof HTMLElement) {
|
|
3254
|
+
const style = $el.style;
|
|
3255
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3256
|
+
}
|
|
3257
|
+
if (!flag) {
|
|
3258
|
+
const style = globalThis.getComputedStyle($el);
|
|
3259
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3260
|
+
}
|
|
3261
|
+
}
|
|
3262
|
+
return flag;
|
|
3263
|
+
},
|
|
3264
|
+
/**
|
|
3265
|
+
* 判断元素是否是在`.pops`内
|
|
3266
|
+
* @param $el 目标元素
|
|
3267
|
+
*/
|
|
3268
|
+
isNodeInPopsNode($el) {
|
|
3269
|
+
return !!($el.closest(".pops") || $el.matches(".pops"));
|
|
3270
|
+
},
|
|
3271
|
+
/**
|
|
3272
|
+
* 判断是否是`.pops-anim`元素
|
|
3273
|
+
* @param $el 目标元素
|
|
3274
|
+
*/
|
|
3275
|
+
isAnimNode($el) {
|
|
3276
|
+
return !!($el?.localName?.toLowerCase() === "div" &&
|
|
3277
|
+
$el.className &&
|
|
3278
|
+
$el.className === "pops-anim" &&
|
|
3279
|
+
$el.hasAttribute("anim"));
|
|
3280
|
+
},
|
|
3281
|
+
};
|
|
3282
|
+
|
|
3185
3283
|
const PopsInstHandler = {
|
|
3186
3284
|
/**
|
|
3187
3285
|
* 删除配置中对应的对象
|
|
@@ -3262,7 +3360,7 @@ define((function () { 'use strict';
|
|
|
3262
3360
|
// 先设置好动画状态
|
|
3263
3361
|
// 再显示,会自执行动画
|
|
3264
3362
|
const checkVisible = () => {
|
|
3265
|
-
if (!
|
|
3363
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3266
3364
|
return true;
|
|
3267
3365
|
}
|
|
3268
3366
|
else {
|
|
@@ -3352,7 +3450,7 @@ define((function () { 'use strict';
|
|
|
3352
3450
|
// 再隐藏
|
|
3353
3451
|
// 存在实例
|
|
3354
3452
|
const checkVisible = () => {
|
|
3355
|
-
if (!
|
|
3453
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3356
3454
|
return true;
|
|
3357
3455
|
}
|
|
3358
3456
|
else {
|
|
@@ -3780,11 +3878,11 @@ define((function () { 'use strict';
|
|
|
3780
3878
|
* 点击其它区域的事件
|
|
3781
3879
|
* @param event
|
|
3782
3880
|
*/
|
|
3783
|
-
|
|
3881
|
+
const clickEvent = (event) => {
|
|
3784
3882
|
popsDOMUtils.preventEvent(event);
|
|
3785
3883
|
// 获取该类型实例存储列表
|
|
3786
3884
|
const targetInst = PopsInstData[config.type];
|
|
3787
|
-
|
|
3885
|
+
const continueExec = () => {
|
|
3788
3886
|
if (config.config.mask.clickEvent.toClose) {
|
|
3789
3887
|
// 关闭
|
|
3790
3888
|
return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
|
|
@@ -3793,37 +3891,26 @@ define((function () { 'use strict';
|
|
|
3793
3891
|
// 隐藏
|
|
3794
3892
|
return PopsInstHandler.hide(config.config, config.type, targetInst, config.guid, config.animElement, result.maskElement);
|
|
3795
3893
|
}
|
|
3796
|
-
}
|
|
3894
|
+
};
|
|
3797
3895
|
if (typeof config.config.mask.clickCallBack === "function") {
|
|
3798
|
-
config.config.mask.clickCallBack(
|
|
3896
|
+
config.config.mask.clickCallBack(continueExec, config.config);
|
|
3799
3897
|
}
|
|
3800
3898
|
else {
|
|
3801
|
-
|
|
3899
|
+
continueExec();
|
|
3802
3900
|
}
|
|
3803
3901
|
return false;
|
|
3804
|
-
}
|
|
3902
|
+
};
|
|
3805
3903
|
// 判断是否启用了遮罩层点击动作
|
|
3806
3904
|
if (config.config.mask.clickEvent.toClose || config.config.mask.clickEvent.toHide) {
|
|
3807
|
-
/**
|
|
3808
|
-
* 判断点击的元素是否是动画层的元素
|
|
3809
|
-
* @param element
|
|
3810
|
-
* @returns
|
|
3811
|
-
*/
|
|
3812
|
-
function isAnimElement(element) {
|
|
3813
|
-
return Boolean(element?.localName?.toLowerCase() === "div" &&
|
|
3814
|
-
element.className &&
|
|
3815
|
-
element.className === "pops-anim" &&
|
|
3816
|
-
element.hasAttribute("anim"));
|
|
3817
|
-
}
|
|
3818
3905
|
// 判断按下的元素是否是pops-anim
|
|
3819
3906
|
popsDOMUtils.on(config.animElement, "pointerup", (event) => {
|
|
3820
3907
|
const $click = event.composedPath()[0];
|
|
3821
|
-
isMaskClick =
|
|
3908
|
+
isMaskClick = PopsInstanceUtils.isAnimNode($click);
|
|
3822
3909
|
});
|
|
3823
3910
|
// 如果有动画层,在动画层上监听点击事件
|
|
3824
3911
|
popsDOMUtils.on(config.animElement, "click", (event) => {
|
|
3825
3912
|
const $click = event.composedPath()[0];
|
|
3826
|
-
if (isMaskClick &&
|
|
3913
|
+
if (isMaskClick && PopsInstanceUtils.isAnimNode($click)) {
|
|
3827
3914
|
return clickEvent(event);
|
|
3828
3915
|
}
|
|
3829
3916
|
});
|
|
@@ -9729,12 +9816,12 @@ define((function () { 'use strict';
|
|
|
9729
9816
|
},
|
|
9730
9817
|
mask: {
|
|
9731
9818
|
enable: true,
|
|
9732
|
-
clickCallBack(
|
|
9819
|
+
clickCallBack(continueExec) {
|
|
9733
9820
|
const ret = dialogCloseCallback();
|
|
9734
9821
|
if (typeof ret === "boolean" && !ret) {
|
|
9735
9822
|
return;
|
|
9736
9823
|
}
|
|
9737
|
-
|
|
9824
|
+
continueExec();
|
|
9738
9825
|
},
|
|
9739
9826
|
clickEvent: {
|
|
9740
9827
|
toClose: true,
|
|
@@ -10946,8 +11033,8 @@ define((function () { 'use strict';
|
|
|
10946
11033
|
},
|
|
10947
11034
|
mask: {
|
|
10948
11035
|
enable: true,
|
|
10949
|
-
clickCallBack(
|
|
10950
|
-
|
|
11036
|
+
clickCallBack(continueExec) {
|
|
11037
|
+
continueExec();
|
|
10951
11038
|
dialogCloseCallback();
|
|
10952
11039
|
},
|
|
10953
11040
|
clickEvent: {
|
|
@@ -13592,93 +13679,12 @@ define((function () { 'use strict';
|
|
|
13592
13679
|
},
|
|
13593
13680
|
};
|
|
13594
13681
|
|
|
13595
|
-
const PopsInstanceUtils = {
|
|
13596
|
-
/**
|
|
13597
|
-
* 获取pops所有弹窗中的最大的z-index
|
|
13598
|
-
* @param deviation
|
|
13599
|
-
*/
|
|
13600
|
-
getPopsMaxZIndex(deviation = 1) {
|
|
13601
|
-
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
13602
|
-
// 最大值 2147483647
|
|
13603
|
-
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
13604
|
-
// 比较值 2000000000
|
|
13605
|
-
const maxZIndex = 2 * Math.pow(10, 9);
|
|
13606
|
-
// 当前页面最大的z-index
|
|
13607
|
-
let zIndex = 0;
|
|
13608
|
-
// 当前的最大z-index的元素,调试使用
|
|
13609
|
-
let maxZIndexNode = null;
|
|
13610
|
-
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
13611
|
-
const instData = PopsInstData[instKeyName];
|
|
13612
|
-
for (let index = 0; index < instData.length; index++) {
|
|
13613
|
-
const inst = instData[index];
|
|
13614
|
-
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
13615
|
-
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
13616
|
-
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
13617
|
-
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
13618
|
-
if (maxNodeZIndexInfo) {
|
|
13619
|
-
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
13620
|
-
if (nodeZIndex > zIndex) {
|
|
13621
|
-
zIndex = nodeZIndex;
|
|
13622
|
-
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
13623
|
-
}
|
|
13624
|
-
}
|
|
13625
|
-
}
|
|
13626
|
-
});
|
|
13627
|
-
zIndex += deviation;
|
|
13628
|
-
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
13629
|
-
if (isOverMaxZIndex) {
|
|
13630
|
-
// 超出z-index最大值
|
|
13631
|
-
zIndex = maxZIndex;
|
|
13632
|
-
}
|
|
13633
|
-
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
13634
|
-
},
|
|
13635
|
-
/**
|
|
13636
|
-
* 排序数组
|
|
13637
|
-
* @param getBeforeValueFun
|
|
13638
|
-
* @param getAfterValueFun
|
|
13639
|
-
* @param sortByDesc 排序是否降序,默认降序
|
|
13640
|
-
*/
|
|
13641
|
-
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
13642
|
-
if (typeof sortByDesc !== "boolean") {
|
|
13643
|
-
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
13644
|
-
}
|
|
13645
|
-
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
13646
|
-
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
13647
|
-
}
|
|
13648
|
-
return function (after_obj, before_obj) {
|
|
13649
|
-
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
13650
|
-
const afterValue = getAfterValueFun(after_obj); // 后
|
|
13651
|
-
if (sortByDesc) {
|
|
13652
|
-
if (afterValue > beforeValue) {
|
|
13653
|
-
return -1;
|
|
13654
|
-
}
|
|
13655
|
-
else if (afterValue < beforeValue) {
|
|
13656
|
-
return 1;
|
|
13657
|
-
}
|
|
13658
|
-
else {
|
|
13659
|
-
return 0;
|
|
13660
|
-
}
|
|
13661
|
-
}
|
|
13662
|
-
else {
|
|
13663
|
-
if (afterValue < beforeValue) {
|
|
13664
|
-
return -1;
|
|
13665
|
-
}
|
|
13666
|
-
else if (afterValue > beforeValue) {
|
|
13667
|
-
return 1;
|
|
13668
|
-
}
|
|
13669
|
-
else {
|
|
13670
|
-
return 0;
|
|
13671
|
-
}
|
|
13672
|
-
}
|
|
13673
|
-
};
|
|
13674
|
-
},
|
|
13675
|
-
};
|
|
13676
|
-
|
|
13677
13682
|
class Pops {
|
|
13678
13683
|
/** 配置 */
|
|
13679
13684
|
config = {
|
|
13680
13685
|
/** 版本号 */
|
|
13681
13686
|
version: version,
|
|
13687
|
+
/** 样式配置 */
|
|
13682
13688
|
cssText: PopsCSS,
|
|
13683
13689
|
/** icon图标的svg代码 */
|
|
13684
13690
|
iconSVG: PopsIcon.$data,
|
|
@@ -13686,12 +13692,9 @@ define((function () { 'use strict';
|
|
|
13686
13692
|
animation: PopsAnimation.$data,
|
|
13687
13693
|
/** 存储已创建的元素 */
|
|
13688
13694
|
instData: PopsInstData,
|
|
13689
|
-
|
|
13690
|
-
|
|
13691
|
-
|
|
13692
|
-
return popsDOMUtils.preventEvent(event);
|
|
13693
|
-
},
|
|
13694
|
-
},
|
|
13695
|
+
};
|
|
13696
|
+
/** 导出的函数 */
|
|
13697
|
+
fn = {
|
|
13695
13698
|
/** pops使用的工具类 */
|
|
13696
13699
|
Utils: popsUtils,
|
|
13697
13700
|
/** pops使用的DOM工具类 */
|
|
@@ -13701,17 +13704,16 @@ define((function () { 'use strict';
|
|
|
13701
13704
|
/** pops处理float类型使用的工具类 */
|
|
13702
13705
|
MathFloatUtils: PopsMathFloatUtils,
|
|
13703
13706
|
/** 实例处理函数 */
|
|
13704
|
-
PopsInstHandler,
|
|
13707
|
+
InstHandler: PopsInstHandler,
|
|
13705
13708
|
/** pops.panel中用于处理各个类型的工具 */
|
|
13706
|
-
PanelHandlerComponents,
|
|
13709
|
+
PanelHandlerComponents: PanelHandlerComponents,
|
|
13707
13710
|
/** pops.panel中的动画 */
|
|
13708
|
-
PopsAnimation,
|
|
13711
|
+
Animation: PopsAnimation,
|
|
13709
13712
|
/** 事件类 */
|
|
13710
|
-
EventEmiter,
|
|
13713
|
+
EventEmiter: EventEmiter,
|
|
13711
13714
|
/** 通用的CSS类名 */
|
|
13712
|
-
PopsCommonCSSClassName,
|
|
13715
|
+
CommonCSSClassName: PopsCommonCSSClassName,
|
|
13713
13716
|
};
|
|
13714
|
-
init() { }
|
|
13715
13717
|
/**
|
|
13716
13718
|
* 释放原有的pops控制权
|
|
13717
13719
|
* @example
|