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