@whitesev/pops 4.1.0 → 4.2.1
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 +250 -227
- 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 +250 -227
- 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 +250 -227
- 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 +250 -227
- 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 +250 -227
- 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 +250 -227
- 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 +17 -16
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +3 -3
- package/dist/types/src/types/mask.d.ts +6 -6
- package/dist/types/src/utils/PopsDOMUtils.d.ts +6 -18
- 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/PopsDOMUtilsEventType.d.ts +3 -3
- package/src/types/mask.d.ts +6 -6
- package/src/utils/PopsDOMUtils.ts +105 -113
- 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.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const version = "4.1
|
|
3
|
+
const version = "4.2.1";
|
|
4
4
|
|
|
5
5
|
const GlobalConfig = {
|
|
6
6
|
config: {},
|
|
@@ -244,11 +244,6 @@ const PopsIcon = {
|
|
|
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 @@ const PopsCore = {
|
|
|
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 @@ const PopsCommonCSSClassName = {
|
|
|
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
|
/**
|
|
@@ -817,7 +816,7 @@ class PopsDOMUtilsEvent {
|
|
|
817
816
|
* @param startIndex
|
|
818
817
|
* @param option
|
|
819
818
|
*/
|
|
820
|
-
function
|
|
819
|
+
const getOption = function (args, startIndex, option) {
|
|
821
820
|
const currentParam = args[startIndex];
|
|
822
821
|
if (typeof currentParam === "boolean") {
|
|
823
822
|
option.capture = currentParam;
|
|
@@ -839,7 +838,7 @@ class PopsDOMUtilsEvent {
|
|
|
839
838
|
option.isComposedPath = currentParam.isComposedPath;
|
|
840
839
|
}
|
|
841
840
|
return option;
|
|
842
|
-
}
|
|
841
|
+
};
|
|
843
842
|
const that = this;
|
|
844
843
|
// eslint-disable-next-line prefer-rest-params
|
|
845
844
|
const args = arguments;
|
|
@@ -854,8 +853,7 @@ class PopsDOMUtilsEvent {
|
|
|
854
853
|
}
|
|
855
854
|
let $elList = [];
|
|
856
855
|
if (element instanceof NodeList || Array.isArray(element)) {
|
|
857
|
-
|
|
858
|
-
$elList = [...element];
|
|
856
|
+
$elList = $elList.concat(Array.from(element));
|
|
859
857
|
}
|
|
860
858
|
else {
|
|
861
859
|
$elList.push(element);
|
|
@@ -863,15 +861,15 @@ class PopsDOMUtilsEvent {
|
|
|
863
861
|
// 事件名
|
|
864
862
|
let eventTypeList = [];
|
|
865
863
|
if (Array.isArray(eventType)) {
|
|
866
|
-
eventTypeList = eventTypeList.concat(eventType.filter((
|
|
864
|
+
eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
867
865
|
}
|
|
868
866
|
else if (typeof eventType === "string") {
|
|
869
|
-
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((
|
|
867
|
+
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
|
|
870
868
|
}
|
|
871
869
|
// 子元素选择器
|
|
872
870
|
let selectorList = [];
|
|
873
871
|
if (Array.isArray(selector)) {
|
|
874
|
-
selectorList = selectorList.concat(selector.filter((
|
|
872
|
+
selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
875
873
|
}
|
|
876
874
|
else if (typeof selector === "string") {
|
|
877
875
|
selectorList.push(selector);
|
|
@@ -898,39 +896,52 @@ class PopsDOMUtilsEvent {
|
|
|
898
896
|
/**
|
|
899
897
|
* 如果是once,那么删除该监听和元素上的事件和监听
|
|
900
898
|
*/
|
|
901
|
-
|
|
899
|
+
const checkOptionOnceToRemoveEventListener = ($el) => {
|
|
902
900
|
if (listenerOption.once) {
|
|
903
|
-
|
|
901
|
+
this.off($el, eventTypeList, selector, callback, option);
|
|
904
902
|
}
|
|
905
|
-
}
|
|
906
|
-
$elList.forEach((
|
|
903
|
+
};
|
|
904
|
+
$elList.forEach(($elItem) => {
|
|
907
905
|
/**
|
|
908
906
|
* 事件回调
|
|
909
907
|
* @param event
|
|
910
908
|
*/
|
|
911
|
-
function
|
|
909
|
+
const handlerCallBack = function (event) {
|
|
910
|
+
let call_this = void 0;
|
|
911
|
+
let call_event = void 0;
|
|
912
|
+
let call_$selector = void 0;
|
|
913
|
+
let execCallback = false;
|
|
912
914
|
if (selectorList.length) {
|
|
913
915
|
// 存在子元素选择器
|
|
914
916
|
// 这时候的this和target都是子元素选择器的元素
|
|
915
|
-
let
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
totalParent = PopsCore.document.documentElement;
|
|
917
|
+
let $target;
|
|
918
|
+
if (listenerOption.isComposedPath) {
|
|
919
|
+
// 可能为空
|
|
920
|
+
const composedPath = event.composedPath();
|
|
921
|
+
if (!composedPath.length && event.target) {
|
|
922
|
+
composedPath.push(event.target);
|
|
922
923
|
}
|
|
924
|
+
$target = composedPath[0];
|
|
925
|
+
}
|
|
926
|
+
else {
|
|
927
|
+
$target = event.target;
|
|
928
|
+
}
|
|
929
|
+
let $parent = $elItem;
|
|
930
|
+
if (popsUtils.isWin($parent)) {
|
|
931
|
+
// window和document共用一个对象
|
|
932
|
+
// 这样就能处理子元素选择器无法匹配的问题
|
|
933
|
+
$parent = PopsCore.document.documentElement;
|
|
923
934
|
}
|
|
924
|
-
const findValue = selectorList.find((
|
|
935
|
+
const findValue = selectorList.find((selectors) => {
|
|
925
936
|
// 判断目标元素是否匹配选择器
|
|
926
|
-
if (that.matches(
|
|
937
|
+
if (that.matches($target, selectors)) {
|
|
927
938
|
// 当前目标可以被selector所匹配到
|
|
928
939
|
return true;
|
|
929
940
|
}
|
|
930
941
|
// 在上层与主元素之间寻找可以被selector所匹配到的
|
|
931
|
-
const $closestMatches = that.closest(
|
|
932
|
-
if ($closestMatches &&
|
|
933
|
-
|
|
942
|
+
const $closestMatches = that.closest($target, selectors);
|
|
943
|
+
if ($closestMatches && $parent?.contains?.($closestMatches)) {
|
|
944
|
+
$target = $closestMatches;
|
|
934
945
|
return true;
|
|
935
946
|
}
|
|
936
947
|
return false;
|
|
@@ -940,38 +951,47 @@ class PopsDOMUtilsEvent {
|
|
|
940
951
|
try {
|
|
941
952
|
OriginPrototype.Object.defineProperty(event, "target", {
|
|
942
953
|
get() {
|
|
943
|
-
return
|
|
954
|
+
return $target;
|
|
944
955
|
},
|
|
945
956
|
});
|
|
957
|
+
// oxlint-disable-next-line no-empty
|
|
946
958
|
}
|
|
947
|
-
catch {
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
959
|
+
catch { }
|
|
960
|
+
execCallback = true;
|
|
961
|
+
call_this = $target;
|
|
962
|
+
call_event = event;
|
|
963
|
+
call_$selector = $target;
|
|
952
964
|
}
|
|
953
965
|
}
|
|
954
966
|
else {
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
967
|
+
execCallback = true;
|
|
968
|
+
call_this = $elItem;
|
|
969
|
+
call_event = event;
|
|
970
|
+
}
|
|
971
|
+
if (execCallback) {
|
|
972
|
+
const result = listenerCallBack.call(call_this, call_event, call_$selector);
|
|
973
|
+
checkOptionOnceToRemoveEventListener($elItem);
|
|
974
|
+
if (typeof result === "boolean" && !result) {
|
|
975
|
+
return false;
|
|
976
|
+
}
|
|
958
977
|
}
|
|
959
|
-
}
|
|
978
|
+
};
|
|
960
979
|
// 遍历事件名设置元素事件
|
|
961
980
|
eventTypeList.forEach((eventName) => {
|
|
962
|
-
|
|
981
|
+
// add listener
|
|
982
|
+
$elItem.addEventListener(eventName, handlerCallBack, listenerOption);
|
|
963
983
|
// 获取对象上的事件
|
|
964
|
-
const elementEvents = Reflect.get(
|
|
984
|
+
const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
|
|
965
985
|
// 初始化对象上的xx事件
|
|
966
986
|
elementEvents[eventName] = elementEvents[eventName] || [];
|
|
967
987
|
elementEvents[eventName].push({
|
|
968
988
|
selector: selectorList,
|
|
969
989
|
option: listenerOption,
|
|
970
|
-
|
|
971
|
-
|
|
990
|
+
handlerCallBack: handlerCallBack,
|
|
991
|
+
callback: listenerCallBack,
|
|
972
992
|
});
|
|
973
993
|
// 覆盖事件
|
|
974
|
-
Reflect.set(
|
|
994
|
+
Reflect.set($elItem, SymbolEvents, elementEvents);
|
|
975
995
|
});
|
|
976
996
|
});
|
|
977
997
|
return {
|
|
@@ -984,11 +1004,11 @@ class PopsDOMUtilsEvent {
|
|
|
984
1004
|
},
|
|
985
1005
|
/**
|
|
986
1006
|
* 主动触发事件
|
|
987
|
-
* @param
|
|
988
|
-
* @param
|
|
1007
|
+
* @param extraDetails 赋予触发的Event的额外属性,如果是Event类型,那么将自动代替默认new的Event对象
|
|
1008
|
+
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true,如果为false,则直接调用callback,但是这种会让使用了`$selector`的没有值
|
|
989
1009
|
*/
|
|
990
|
-
emit: (
|
|
991
|
-
that.emit($elList, eventTypeList,
|
|
1010
|
+
emit: (extraDetails, useDispatchToTriggerEvent) => {
|
|
1011
|
+
that.emit($elList, eventTypeList, extraDetails, useDispatchToTriggerEvent);
|
|
992
1012
|
},
|
|
993
1013
|
};
|
|
994
1014
|
}
|
|
@@ -999,7 +1019,7 @@ class PopsDOMUtilsEvent {
|
|
|
999
1019
|
* @param startIndex
|
|
1000
1020
|
* @param option
|
|
1001
1021
|
*/
|
|
1002
|
-
function
|
|
1022
|
+
const getOption = function (args1, startIndex, option) {
|
|
1003
1023
|
const currentParam = args1[startIndex];
|
|
1004
1024
|
if (typeof currentParam === "boolean") {
|
|
1005
1025
|
option.capture = currentParam;
|
|
@@ -1008,12 +1028,12 @@ class PopsDOMUtilsEvent {
|
|
|
1008
1028
|
option.capture = currentParam.capture;
|
|
1009
1029
|
}
|
|
1010
1030
|
return option;
|
|
1011
|
-
}
|
|
1012
|
-
const
|
|
1031
|
+
};
|
|
1032
|
+
const that = this;
|
|
1013
1033
|
// eslint-disable-next-line prefer-rest-params
|
|
1014
1034
|
const args = arguments;
|
|
1015
1035
|
if (typeof element === "string") {
|
|
1016
|
-
element =
|
|
1036
|
+
element = that.selectorAll(element);
|
|
1017
1037
|
}
|
|
1018
1038
|
if (element == null) {
|
|
1019
1039
|
return;
|
|
@@ -1021,22 +1041,22 @@ class PopsDOMUtilsEvent {
|
|
|
1021
1041
|
let $elList = [];
|
|
1022
1042
|
if (element instanceof NodeList || Array.isArray(element)) {
|
|
1023
1043
|
element = element;
|
|
1024
|
-
$elList = $elList.concat(element);
|
|
1044
|
+
$elList = $elList.concat(Array.from(element));
|
|
1025
1045
|
}
|
|
1026
1046
|
else {
|
|
1027
1047
|
$elList.push(element);
|
|
1028
1048
|
}
|
|
1029
1049
|
let eventTypeList = [];
|
|
1030
1050
|
if (Array.isArray(eventType)) {
|
|
1031
|
-
eventTypeList = eventTypeList.concat(eventType.filter((
|
|
1051
|
+
eventTypeList = eventTypeList.concat(eventType.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
1032
1052
|
}
|
|
1033
1053
|
else if (typeof eventType === "string") {
|
|
1034
|
-
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((
|
|
1054
|
+
eventTypeList = eventTypeList.concat(eventType.split(" ").filter((it) => it !== ""));
|
|
1035
1055
|
}
|
|
1036
1056
|
// 子元素选择器
|
|
1037
1057
|
let selectorList = [];
|
|
1038
1058
|
if (Array.isArray(selector)) {
|
|
1039
|
-
selectorList = selectorList.concat(selector.filter((
|
|
1059
|
+
selectorList = selectorList.concat(selector.filter((it) => typeof it === "string" && it.toString() !== ""));
|
|
1040
1060
|
}
|
|
1041
1061
|
else if (typeof selector === "string") {
|
|
1042
1062
|
selectorList.push(selector);
|
|
@@ -1065,16 +1085,16 @@ class PopsDOMUtilsEvent {
|
|
|
1065
1085
|
// 目标函数、事件名、回调函数、事件配置、过滤函数
|
|
1066
1086
|
filter = option;
|
|
1067
1087
|
}
|
|
1068
|
-
$elList.forEach((
|
|
1088
|
+
$elList.forEach(($elItem) => {
|
|
1069
1089
|
// 获取对象上的事件
|
|
1070
|
-
const elementEvents = Reflect.get(
|
|
1090
|
+
const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
|
|
1071
1091
|
eventTypeList.forEach((eventName) => {
|
|
1072
1092
|
const handlers = elementEvents[eventName] || [];
|
|
1073
1093
|
const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
|
|
1074
1094
|
for (let index = 0; index < filterHandler.length; index++) {
|
|
1075
1095
|
const handler = filterHandler[index];
|
|
1076
1096
|
let flag = true;
|
|
1077
|
-
if (flag && listenerCallBack && handler.
|
|
1097
|
+
if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
|
|
1078
1098
|
// callback不同
|
|
1079
1099
|
flag = false;
|
|
1080
1100
|
}
|
|
@@ -1091,7 +1111,7 @@ class PopsDOMUtilsEvent {
|
|
|
1091
1111
|
flag = false;
|
|
1092
1112
|
}
|
|
1093
1113
|
if (flag) {
|
|
1094
|
-
|
|
1114
|
+
$elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
|
|
1095
1115
|
const findIndex = handlers.findIndex((item) => item === handler);
|
|
1096
1116
|
if (findIndex !== -1) {
|
|
1097
1117
|
handlers.splice(findIndex, 1);
|
|
@@ -1103,7 +1123,7 @@ class PopsDOMUtilsEvent {
|
|
|
1103
1123
|
popsUtils.delete(elementEvents, eventType);
|
|
1104
1124
|
}
|
|
1105
1125
|
});
|
|
1106
|
-
Reflect.set(
|
|
1126
|
+
Reflect.set($elItem, SymbolEvents, elementEvents);
|
|
1107
1127
|
});
|
|
1108
1128
|
}
|
|
1109
1129
|
/**
|
|
@@ -1487,11 +1507,11 @@ class PopsDOMUtilsEvent {
|
|
|
1487
1507
|
* 阻止事件的默认行为发生,并阻止事件传播
|
|
1488
1508
|
*/
|
|
1489
1509
|
const stopEvent = (event, onlyStopPropagation) => {
|
|
1510
|
+
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1511
|
+
event?.stopPropagation();
|
|
1512
|
+
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1513
|
+
event?.stopImmediatePropagation();
|
|
1490
1514
|
if (typeof onlyStopPropagation === "boolean" && onlyStopPropagation) {
|
|
1491
|
-
// 停止事件的传播,阻止它继续向更上层的元素冒泡,事件将不会再传播给其他的元素
|
|
1492
|
-
event?.stopPropagation();
|
|
1493
|
-
// 阻止事件传播,并且还能阻止元素上的其他事件处理程序被触发
|
|
1494
|
-
event?.stopImmediatePropagation();
|
|
1495
1515
|
return;
|
|
1496
1516
|
}
|
|
1497
1517
|
// 阻止事件的默认行为发生。例如,当点击一个链接时,浏览器会默认打开链接的URL,或者在输入框内输入文字
|
|
@@ -1707,35 +1727,6 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
|
|
|
1707
1727
|
getTransitionEndNameList() {
|
|
1708
1728
|
return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
|
|
1709
1729
|
}
|
|
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
1730
|
/**
|
|
1740
1731
|
* 实现jQuery中的$().offset();
|
|
1741
1732
|
* @param element
|
|
@@ -3182,6 +3173,134 @@ const PopsInstData = {
|
|
|
3182
3173
|
tooltip: [],
|
|
3183
3174
|
};
|
|
3184
3175
|
|
|
3176
|
+
const PopsInstanceUtils = {
|
|
3177
|
+
/**
|
|
3178
|
+
* 获取pops所有弹窗中的最大的z-index
|
|
3179
|
+
* @param deviation
|
|
3180
|
+
*/
|
|
3181
|
+
getPopsMaxZIndex(deviation = 1) {
|
|
3182
|
+
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
3183
|
+
// 最大值 2147483647
|
|
3184
|
+
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
3185
|
+
// 比较值 2000000000
|
|
3186
|
+
const maxZIndex = 2 * Math.pow(10, 9);
|
|
3187
|
+
// 当前页面最大的z-index
|
|
3188
|
+
let zIndex = 0;
|
|
3189
|
+
// 当前的最大z-index的元素,调试使用
|
|
3190
|
+
let maxZIndexNode = null;
|
|
3191
|
+
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
3192
|
+
const instData = PopsInstData[instKeyName];
|
|
3193
|
+
for (let index = 0; index < instData.length; index++) {
|
|
3194
|
+
const inst = instData[index];
|
|
3195
|
+
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
3196
|
+
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
3197
|
+
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
3198
|
+
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
3199
|
+
if (maxNodeZIndexInfo) {
|
|
3200
|
+
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
3201
|
+
if (nodeZIndex > zIndex) {
|
|
3202
|
+
zIndex = nodeZIndex;
|
|
3203
|
+
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
3204
|
+
}
|
|
3205
|
+
}
|
|
3206
|
+
}
|
|
3207
|
+
});
|
|
3208
|
+
zIndex += deviation;
|
|
3209
|
+
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
3210
|
+
if (isOverMaxZIndex) {
|
|
3211
|
+
// 超出z-index最大值
|
|
3212
|
+
zIndex = maxZIndex;
|
|
3213
|
+
}
|
|
3214
|
+
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
3215
|
+
},
|
|
3216
|
+
/**
|
|
3217
|
+
* 排序数组
|
|
3218
|
+
* @param getBeforeValueFun
|
|
3219
|
+
* @param getAfterValueFun
|
|
3220
|
+
* @param sortByDesc 排序是否降序,默认降序
|
|
3221
|
+
*/
|
|
3222
|
+
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
3223
|
+
if (typeof sortByDesc !== "boolean") {
|
|
3224
|
+
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
3225
|
+
}
|
|
3226
|
+
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
3227
|
+
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
3228
|
+
}
|
|
3229
|
+
return function (after_obj, before_obj) {
|
|
3230
|
+
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
3231
|
+
const afterValue = getAfterValueFun(after_obj); // 后
|
|
3232
|
+
if (sortByDesc) {
|
|
3233
|
+
if (afterValue > beforeValue) {
|
|
3234
|
+
return -1;
|
|
3235
|
+
}
|
|
3236
|
+
else if (afterValue < beforeValue) {
|
|
3237
|
+
return 1;
|
|
3238
|
+
}
|
|
3239
|
+
else {
|
|
3240
|
+
return 0;
|
|
3241
|
+
}
|
|
3242
|
+
}
|
|
3243
|
+
else {
|
|
3244
|
+
if (afterValue < beforeValue) {
|
|
3245
|
+
return -1;
|
|
3246
|
+
}
|
|
3247
|
+
else if (afterValue > beforeValue) {
|
|
3248
|
+
return 1;
|
|
3249
|
+
}
|
|
3250
|
+
else {
|
|
3251
|
+
return 0;
|
|
3252
|
+
}
|
|
3253
|
+
}
|
|
3254
|
+
};
|
|
3255
|
+
},
|
|
3256
|
+
/**
|
|
3257
|
+
* 是否是隐藏状态
|
|
3258
|
+
*
|
|
3259
|
+
* 检测以下项:
|
|
3260
|
+
*
|
|
3261
|
+
* + `display`: none
|
|
3262
|
+
* + `visibility`: hidden
|
|
3263
|
+
* + `opacity`: 0
|
|
3264
|
+
* + `使用了pops的自定义的隐藏class类`
|
|
3265
|
+
* @param $el 需要检测的元素
|
|
3266
|
+
*/
|
|
3267
|
+
isHide($el) {
|
|
3268
|
+
let flag = false;
|
|
3269
|
+
if ($el?.classList?.contains(PopsCommonCSSClassName.hide) ||
|
|
3270
|
+
$el?.classList?.contains(PopsCommonCSSClassName.hideImportant)) {
|
|
3271
|
+
flag = true;
|
|
3272
|
+
}
|
|
3273
|
+
else {
|
|
3274
|
+
if ($el instanceof HTMLElement) {
|
|
3275
|
+
const style = $el.style;
|
|
3276
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3277
|
+
}
|
|
3278
|
+
if (!flag) {
|
|
3279
|
+
const style = globalThis.getComputedStyle($el);
|
|
3280
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3281
|
+
}
|
|
3282
|
+
}
|
|
3283
|
+
return flag;
|
|
3284
|
+
},
|
|
3285
|
+
/**
|
|
3286
|
+
* 判断元素是否是在`.pops`内
|
|
3287
|
+
* @param $el 目标元素
|
|
3288
|
+
*/
|
|
3289
|
+
isNodeInPopsNode($el) {
|
|
3290
|
+
return !!($el.closest(".pops") || $el.matches(".pops"));
|
|
3291
|
+
},
|
|
3292
|
+
/**
|
|
3293
|
+
* 判断是否是`.pops-anim`元素
|
|
3294
|
+
* @param $el 目标元素
|
|
3295
|
+
*/
|
|
3296
|
+
isAnimNode($el) {
|
|
3297
|
+
return !!($el?.localName?.toLowerCase() === "div" &&
|
|
3298
|
+
$el.className &&
|
|
3299
|
+
$el.className === "pops-anim" &&
|
|
3300
|
+
$el.hasAttribute("anim"));
|
|
3301
|
+
},
|
|
3302
|
+
};
|
|
3303
|
+
|
|
3185
3304
|
const PopsInstHandler = {
|
|
3186
3305
|
/**
|
|
3187
3306
|
* 删除配置中对应的对象
|
|
@@ -3262,7 +3381,7 @@ const PopsInstHandler = {
|
|
|
3262
3381
|
// 先设置好动画状态
|
|
3263
3382
|
// 再显示,会自执行动画
|
|
3264
3383
|
const checkVisible = () => {
|
|
3265
|
-
if (!
|
|
3384
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3266
3385
|
return true;
|
|
3267
3386
|
}
|
|
3268
3387
|
else {
|
|
@@ -3352,7 +3471,7 @@ const PopsInstHandler = {
|
|
|
3352
3471
|
// 再隐藏
|
|
3353
3472
|
// 存在实例
|
|
3354
3473
|
const checkVisible = () => {
|
|
3355
|
-
if (!
|
|
3474
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3356
3475
|
return true;
|
|
3357
3476
|
}
|
|
3358
3477
|
else {
|
|
@@ -3780,11 +3899,11 @@ const PopsHandler = {
|
|
|
3780
3899
|
* 点击其它区域的事件
|
|
3781
3900
|
* @param event
|
|
3782
3901
|
*/
|
|
3783
|
-
|
|
3902
|
+
const clickEvent = (event) => {
|
|
3784
3903
|
popsDOMUtils.preventEvent(event);
|
|
3785
3904
|
// 获取该类型实例存储列表
|
|
3786
3905
|
const targetInst = PopsInstData[config.type];
|
|
3787
|
-
|
|
3906
|
+
const continueExec = () => {
|
|
3788
3907
|
if (config.config.mask.clickEvent.toClose) {
|
|
3789
3908
|
// 关闭
|
|
3790
3909
|
return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
|
|
@@ -3793,37 +3912,26 @@ const PopsHandler = {
|
|
|
3793
3912
|
// 隐藏
|
|
3794
3913
|
return PopsInstHandler.hide(config.config, config.type, targetInst, config.guid, config.animElement, result.maskElement);
|
|
3795
3914
|
}
|
|
3796
|
-
}
|
|
3915
|
+
};
|
|
3797
3916
|
if (typeof config.config.mask.clickCallBack === "function") {
|
|
3798
|
-
config.config.mask.clickCallBack(
|
|
3917
|
+
config.config.mask.clickCallBack(continueExec, config.config);
|
|
3799
3918
|
}
|
|
3800
3919
|
else {
|
|
3801
|
-
|
|
3920
|
+
continueExec();
|
|
3802
3921
|
}
|
|
3803
3922
|
return false;
|
|
3804
|
-
}
|
|
3923
|
+
};
|
|
3805
3924
|
// 判断是否启用了遮罩层点击动作
|
|
3806
3925
|
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
3926
|
// 判断按下的元素是否是pops-anim
|
|
3819
3927
|
popsDOMUtils.on(config.animElement, "pointerup", (event) => {
|
|
3820
3928
|
const $click = event.composedPath()[0];
|
|
3821
|
-
isMaskClick =
|
|
3929
|
+
isMaskClick = PopsInstanceUtils.isAnimNode($click);
|
|
3822
3930
|
});
|
|
3823
3931
|
// 如果有动画层,在动画层上监听点击事件
|
|
3824
3932
|
popsDOMUtils.on(config.animElement, "click", (event) => {
|
|
3825
3933
|
const $click = event.composedPath()[0];
|
|
3826
|
-
if (isMaskClick &&
|
|
3934
|
+
if (isMaskClick && PopsInstanceUtils.isAnimNode($click)) {
|
|
3827
3935
|
return clickEvent(event);
|
|
3828
3936
|
}
|
|
3829
3937
|
});
|
|
@@ -9729,12 +9837,12 @@ const PanelHandlerComponents = () => {
|
|
|
9729
9837
|
},
|
|
9730
9838
|
mask: {
|
|
9731
9839
|
enable: true,
|
|
9732
|
-
clickCallBack(
|
|
9840
|
+
clickCallBack(continueExec) {
|
|
9733
9841
|
const ret = dialogCloseCallback();
|
|
9734
9842
|
if (typeof ret === "boolean" && !ret) {
|
|
9735
9843
|
return;
|
|
9736
9844
|
}
|
|
9737
|
-
|
|
9845
|
+
continueExec();
|
|
9738
9846
|
},
|
|
9739
9847
|
clickEvent: {
|
|
9740
9848
|
toClose: true,
|
|
@@ -10946,8 +11054,8 @@ const PanelHandlerComponents = () => {
|
|
|
10946
11054
|
},
|
|
10947
11055
|
mask: {
|
|
10948
11056
|
enable: true,
|
|
10949
|
-
clickCallBack(
|
|
10950
|
-
|
|
11057
|
+
clickCallBack(continueExec) {
|
|
11058
|
+
continueExec();
|
|
10951
11059
|
dialogCloseCallback();
|
|
10952
11060
|
},
|
|
10953
11061
|
clickEvent: {
|
|
@@ -13592,93 +13700,12 @@ const PopsSearchSuggestion = {
|
|
|
13592
13700
|
},
|
|
13593
13701
|
};
|
|
13594
13702
|
|
|
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
13703
|
class Pops {
|
|
13678
13704
|
/** 配置 */
|
|
13679
13705
|
config = {
|
|
13680
13706
|
/** 版本号 */
|
|
13681
13707
|
version: version,
|
|
13708
|
+
/** 样式配置 */
|
|
13682
13709
|
cssText: PopsCSS,
|
|
13683
13710
|
/** icon图标的svg代码 */
|
|
13684
13711
|
iconSVG: PopsIcon.$data,
|
|
@@ -13686,12 +13713,9 @@ class Pops {
|
|
|
13686
13713
|
animation: PopsAnimation.$data,
|
|
13687
13714
|
/** 存储已创建的元素 */
|
|
13688
13715
|
instData: PopsInstData,
|
|
13689
|
-
|
|
13690
|
-
|
|
13691
|
-
|
|
13692
|
-
return popsDOMUtils.preventEvent(event);
|
|
13693
|
-
},
|
|
13694
|
-
},
|
|
13716
|
+
};
|
|
13717
|
+
/** 导出的函数 */
|
|
13718
|
+
fn = {
|
|
13695
13719
|
/** pops使用的工具类 */
|
|
13696
13720
|
Utils: popsUtils,
|
|
13697
13721
|
/** pops使用的DOM工具类 */
|
|
@@ -13701,17 +13725,16 @@ class Pops {
|
|
|
13701
13725
|
/** pops处理float类型使用的工具类 */
|
|
13702
13726
|
MathFloatUtils: PopsMathFloatUtils,
|
|
13703
13727
|
/** 实例处理函数 */
|
|
13704
|
-
PopsInstHandler,
|
|
13728
|
+
InstHandler: PopsInstHandler,
|
|
13705
13729
|
/** pops.panel中用于处理各个类型的工具 */
|
|
13706
|
-
PanelHandlerComponents,
|
|
13730
|
+
PanelHandlerComponents: PanelHandlerComponents,
|
|
13707
13731
|
/** pops.panel中的动画 */
|
|
13708
|
-
PopsAnimation,
|
|
13732
|
+
Animation: PopsAnimation,
|
|
13709
13733
|
/** 事件类 */
|
|
13710
|
-
EventEmiter,
|
|
13734
|
+
EventEmiter: EventEmiter,
|
|
13711
13735
|
/** 通用的CSS类名 */
|
|
13712
|
-
PopsCommonCSSClassName,
|
|
13736
|
+
CommonCSSClassName: PopsCommonCSSClassName,
|
|
13713
13737
|
};
|
|
13714
|
-
init() { }
|
|
13715
13738
|
/**
|
|
13716
13739
|
* 释放原有的pops控制权
|
|
13717
13740
|
* @example
|