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