@whitesev/pops 4.0.2 → 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 +363 -275
- 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 +363 -275
- 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 +363 -275
- 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 +363 -275
- 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 +363 -275
- 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 +363 -275
- 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 +116 -16
- package/dist/types/src/components/loading/types/index.d.ts +1 -1
- package/dist/types/src/components/panel/index.d.ts +3 -2
- package/dist/types/src/components/rightClickMenu/types/index.d.ts +1 -1
- package/dist/types/src/components/searchSuggestion/types/index.d.ts +1 -1
- package/dist/types/src/components/tooltip/index.d.ts +82 -1
- package/dist/types/src/components/tooltip/types/index.d.ts +1 -1
- package/dist/types/src/config/GlobalConfig.d.ts +3 -3
- package/dist/types/src/event/EventEmiter.d.ts +7 -1
- package/dist/types/src/handler/PopsInstHandler.d.ts +4 -4
- package/dist/types/src/types/EventEmitter.d.ts +21 -0
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +1 -1
- package/dist/types/src/types/components.d.ts +15 -18
- package/dist/types/src/types/global.d.ts +2 -0
- package/dist/types/src/types/mask.d.ts +6 -6
- package/dist/types/src/utils/PopsDOMUtils.d.ts +2 -2
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +22 -0
- package/dist/types/src/utils/PopsUtils.d.ts +21 -16
- package/package.json +1 -1
- package/src/Pops.ts +11 -11
- package/src/components/alert/defaultConfig.ts +1 -1
- package/src/components/alert/index.ts +1 -1
- package/src/components/confirm/defaultConfig.ts +1 -1
- package/src/components/confirm/index.ts +1 -1
- package/src/components/drawer/defaultConfig.ts +1 -1
- package/src/components/drawer/index.ts +2 -1
- package/src/components/folder/defaultConfig.ts +1 -1
- package/src/components/folder/index.ts +1 -1
- package/src/components/iframe/defaultConfig.ts +1 -1
- package/src/components/iframe/index.ts +10 -6
- package/src/components/loading/defaultConfig.ts +1 -0
- package/src/components/loading/index.ts +10 -10
- package/src/components/loading/types/index.ts +1 -4
- package/src/components/panel/defaultConfig.ts +1 -1
- package/src/components/panel/handlerComponents.ts +4 -4
- package/src/components/panel/index.ts +3 -2
- package/src/components/prompt/defaultConfig.ts +1 -1
- package/src/components/prompt/index.ts +1 -1
- package/src/components/rightClickMenu/defaultConfig.ts +1 -1
- package/src/components/rightClickMenu/index.ts +1 -1
- package/src/components/rightClickMenu/types/index.ts +1 -1
- package/src/components/searchSuggestion/defaultConfig.ts +1 -0
- package/src/components/searchSuggestion/index.ts +1 -1
- package/src/components/searchSuggestion/types/index.ts +1 -1
- package/src/components/tooltip/defaultConfig.ts +1 -1
- package/src/components/tooltip/index.ts +1 -1
- package/src/components/tooltip/types/index.ts +1 -1
- package/src/event/EventEmiter.ts +15 -14
- package/src/handler/PopsHandler.ts +9 -21
- package/src/handler/PopsInstHandler.ts +65 -47
- package/src/types/EventEmitter.d.ts +21 -0
- package/src/types/PopsDOMUtilsEventType.d.ts +1 -1
- package/src/types/components.d.ts +15 -18
- package/src/types/global.d.ts +2 -0
- package/src/types/mask.d.ts +6 -6
- package/src/utils/PopsDOMUtils.ts +6 -3
- package/src/utils/PopsInstanceUtils.ts +50 -0
- package/src/utils/PopsUtils.ts +95 -68
- 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.0
|
|
3
|
+
const version = "4.2.0";
|
|
4
4
|
|
|
5
5
|
const GlobalConfig = {
|
|
6
6
|
config: {},
|
|
@@ -59,15 +59,16 @@ const GlobalConfig = {
|
|
|
59
59
|
};
|
|
60
60
|
|
|
61
61
|
class EventEmiter {
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
[Symbol.toStringTag] = "EventEmiter";
|
|
63
|
+
type;
|
|
64
|
+
data = new Map();
|
|
64
65
|
constructor(type) {
|
|
65
|
-
this
|
|
66
|
+
this.type = type;
|
|
66
67
|
}
|
|
67
68
|
on(eventName, callback) {
|
|
68
|
-
const eventList = this
|
|
69
|
-
eventList.push({ type: this
|
|
70
|
-
this
|
|
69
|
+
const eventList = this.data.get(eventName) ?? [];
|
|
70
|
+
eventList.push({ type: this.type, time: Date.now(), callback: callback });
|
|
71
|
+
this.data.set(eventName, eventList);
|
|
71
72
|
return {
|
|
72
73
|
off: () => {
|
|
73
74
|
this.off(eventName, callback);
|
|
@@ -78,7 +79,7 @@ class EventEmiter {
|
|
|
78
79
|
};
|
|
79
80
|
}
|
|
80
81
|
off(eventName, callback) {
|
|
81
|
-
const eventList = this
|
|
82
|
+
const eventList = this.data.get(eventName) ?? [];
|
|
82
83
|
let isOffSuccess = false;
|
|
83
84
|
for (let index = eventList.length - 1; index >= 0; index--) {
|
|
84
85
|
if (eventList[index].callback === callback) {
|
|
@@ -88,27 +89,27 @@ class EventEmiter {
|
|
|
88
89
|
}
|
|
89
90
|
if (eventList.length === 0) {
|
|
90
91
|
// empty
|
|
91
|
-
this
|
|
92
|
+
this.data.delete(eventName);
|
|
92
93
|
}
|
|
93
94
|
else {
|
|
94
95
|
if (isOffSuccess) {
|
|
95
96
|
// update
|
|
96
|
-
this
|
|
97
|
+
this.data.set(eventName, eventList);
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
100
|
}
|
|
100
101
|
async emit(eventName, ...args) {
|
|
101
|
-
const eventList = this
|
|
102
|
+
const eventList = this.data.get(eventName) ?? [];
|
|
102
103
|
for (const item of eventList) {
|
|
103
104
|
await item.callback(...args);
|
|
104
105
|
}
|
|
105
106
|
}
|
|
106
107
|
offAll(eventName) {
|
|
107
108
|
if (typeof eventName === "string") {
|
|
108
|
-
this
|
|
109
|
+
this.data.delete(eventName);
|
|
109
110
|
}
|
|
110
111
|
else {
|
|
111
|
-
this
|
|
112
|
+
this.data.clear();
|
|
112
113
|
}
|
|
113
114
|
}
|
|
114
115
|
/**
|
|
@@ -116,10 +117,10 @@ class EventEmiter {
|
|
|
116
117
|
*/
|
|
117
118
|
getAllEvents(eventName) {
|
|
118
119
|
if (typeof eventName === "string") {
|
|
119
|
-
return this
|
|
120
|
+
return this.data.get(eventName);
|
|
120
121
|
}
|
|
121
122
|
else {
|
|
122
|
-
return Array.from(this
|
|
123
|
+
return Array.from(this.data.values());
|
|
123
124
|
}
|
|
124
125
|
}
|
|
125
126
|
}
|
|
@@ -243,11 +244,6 @@ const PopsIcon = {
|
|
|
243
244
|
},
|
|
244
245
|
};
|
|
245
246
|
|
|
246
|
-
/**
|
|
247
|
-
* 存储在元素属性上的事件名
|
|
248
|
-
*/
|
|
249
|
-
const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
|
|
250
|
-
|
|
251
247
|
const OriginPrototype = {
|
|
252
248
|
Object: {
|
|
253
249
|
defineProperty: Object.defineProperty,
|
|
@@ -297,31 +293,31 @@ const PopsCore = {
|
|
|
297
293
|
},
|
|
298
294
|
};
|
|
299
295
|
|
|
300
|
-
|
|
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}
|
|
301
297
|
|
|
302
|
-
|
|
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};
|
|
303
299
|
|
|
304
|
-
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}}}
|
|
305
301
|
|
|
306
|
-
|
|
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}
|
|
307
303
|
|
|
308
|
-
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}
|
|
309
305
|
|
|
310
|
-
|
|
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={};}}
|
|
311
307
|
|
|
312
|
-
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();}}
|
|
313
309
|
|
|
314
|
-
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}
|
|
315
311
|
|
|
316
|
-
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}
|
|
317
313
|
|
|
318
|
-
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}
|
|
319
315
|
|
|
320
|
-
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}
|
|
321
317
|
|
|
322
|
-
|
|
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}
|
|
323
319
|
|
|
324
|
-
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;
|
|
325
321
|
|
|
326
322
|
class PopsUtils {
|
|
327
323
|
/**
|
|
@@ -430,7 +426,8 @@ class PopsUtils {
|
|
|
430
426
|
if (typeof sourceValue === "object" &&
|
|
431
427
|
sourceValue != null &&
|
|
432
428
|
keyName in target &&
|
|
433
|
-
!UtilsContext.isDOM(sourceValue)
|
|
429
|
+
!UtilsContext.isDOM(sourceValue) &&
|
|
430
|
+
!(sourceValue instanceof EventEmiter)) {
|
|
434
431
|
// 源端的值是object类型,且不是元素节点
|
|
435
432
|
// 如果是数组,那此数组中有值,清空旧的数组再赋值
|
|
436
433
|
let childObjectValue;
|
|
@@ -446,7 +443,7 @@ class PopsUtils {
|
|
|
446
443
|
Reflect.set(target, keyName, childObjectValue);
|
|
447
444
|
}
|
|
448
445
|
else {
|
|
449
|
-
|
|
446
|
+
// 直接赋值
|
|
450
447
|
Reflect.set(target, keyName, sourceValue);
|
|
451
448
|
}
|
|
452
449
|
}
|
|
@@ -636,33 +633,31 @@ class PopsUtils {
|
|
|
636
633
|
if (typeof deviation !== "number" || Number.isNaN(deviation)) {
|
|
637
634
|
deviation = 10;
|
|
638
635
|
}
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
const
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
center,
|
|
665
|
-
];
|
|
636
|
+
/** 坐标偏移 */
|
|
637
|
+
const positionDistance = 10;
|
|
638
|
+
const defaultCalcPostion = [];
|
|
639
|
+
const maxPostionX = globalThis.innerWidth;
|
|
640
|
+
const maxPostionY = globalThis.innerHeight;
|
|
641
|
+
const gridXCount = 8;
|
|
642
|
+
const gridYCount = 8;
|
|
643
|
+
for (let i = 0; i < gridXCount; i++) {
|
|
644
|
+
for (let j = 0; j < gridYCount; j++) {
|
|
645
|
+
const positionX = globalThis.innerWidth * (i / gridXCount) + positionDistance;
|
|
646
|
+
const positionY = globalThis.innerHeight * (j / gridYCount) + positionDistance;
|
|
647
|
+
const position = {
|
|
648
|
+
x: positionX,
|
|
649
|
+
y: positionY,
|
|
650
|
+
};
|
|
651
|
+
if (position.x > maxPostionX) {
|
|
652
|
+
position.x = maxPostionX;
|
|
653
|
+
}
|
|
654
|
+
if (position.y > maxPostionY) {
|
|
655
|
+
position.y = maxPostionY;
|
|
656
|
+
}
|
|
657
|
+
defaultCalcPostion.push(position);
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
const delayHandlerElementPostionList = defaultCalcPostion;
|
|
666
661
|
if ($el) {
|
|
667
662
|
delayHandlerElementPostionList.length = 0;
|
|
668
663
|
if (Array.isArray($el)) {
|
|
@@ -674,61 +669,79 @@ class PopsUtils {
|
|
|
674
669
|
}
|
|
675
670
|
const positionInfoList = delayHandlerElementPostionList
|
|
676
671
|
.map((position) => {
|
|
677
|
-
let
|
|
672
|
+
let $position;
|
|
678
673
|
let positionX;
|
|
679
674
|
let positionY;
|
|
680
675
|
if (position instanceof HTMLElement) {
|
|
681
|
-
|
|
676
|
+
$position = position;
|
|
682
677
|
const nodeRect = position.getBoundingClientRect();
|
|
683
678
|
positionX = nodeRect.x + nodeRect.width / 2;
|
|
684
679
|
positionY = nodeRect.y + nodeRect.height / 2;
|
|
685
680
|
}
|
|
686
681
|
else {
|
|
687
|
-
|
|
682
|
+
$position = document.elementFromPoint(position.x, position.y);
|
|
688
683
|
positionX = position.x;
|
|
689
684
|
positionY = position.y;
|
|
690
685
|
}
|
|
691
|
-
const shadowRoot =
|
|
686
|
+
const shadowRoot = $position?.shadowRoot;
|
|
692
687
|
if (shadowRoot) {
|
|
693
|
-
|
|
688
|
+
// 处理ShadowRoot
|
|
689
|
+
$position = shadowRoot.elementFromPoint(positionX, positionY);
|
|
694
690
|
}
|
|
695
|
-
if (
|
|
696
|
-
return;
|
|
697
|
-
if (positionNode instanceof HTMLScriptElement)
|
|
698
|
-
return;
|
|
699
|
-
if (positionNode instanceof HTMLMetaElement)
|
|
700
|
-
return;
|
|
701
|
-
if (positionNode instanceof HTMLHeadElement)
|
|
702
|
-
return;
|
|
703
|
-
if (!(positionNode instanceof HTMLElement))
|
|
691
|
+
if (!($position instanceof HTMLElement))
|
|
704
692
|
return;
|
|
705
|
-
let parent =
|
|
693
|
+
let $parent = $position;
|
|
706
694
|
let zIndex = 0;
|
|
707
|
-
let maxZIndexNode = null;
|
|
708
|
-
|
|
709
|
-
|
|
695
|
+
let $maxZIndexNode = null;
|
|
696
|
+
let rect = {
|
|
697
|
+
x: 0,
|
|
698
|
+
y: 0,
|
|
699
|
+
width: 0,
|
|
700
|
+
height: 0,
|
|
701
|
+
top: 0,
|
|
702
|
+
right: 0,
|
|
703
|
+
bottom: 0,
|
|
704
|
+
left: 0,
|
|
705
|
+
};
|
|
706
|
+
while ($parent) {
|
|
707
|
+
const nodeStyle = globalThis.getComputedStyle($parent);
|
|
710
708
|
const nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
711
709
|
if (nodeStyle.position !== "static" && !isNaN(nodeZIndex)) {
|
|
712
710
|
if (nodeZIndex > zIndex) {
|
|
713
711
|
zIndex = nodeZIndex;
|
|
714
|
-
maxZIndexNode = parent;
|
|
715
|
-
}
|
|
716
|
-
}
|
|
717
|
-
parent = parent.parentElement;
|
|
712
|
+
$maxZIndexNode = $parent;
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
$parent = $parent.parentElement;
|
|
716
|
+
}
|
|
717
|
+
if ($maxZIndexNode) {
|
|
718
|
+
const maxRect = $maxZIndexNode.getBoundingClientRect();
|
|
719
|
+
rect = {
|
|
720
|
+
x: maxRect.x,
|
|
721
|
+
y: maxRect.y,
|
|
722
|
+
width: maxRect.width,
|
|
723
|
+
height: maxRect.height,
|
|
724
|
+
top: maxRect.top,
|
|
725
|
+
right: maxRect.right,
|
|
726
|
+
bottom: maxRect.bottom,
|
|
727
|
+
left: maxRect.left,
|
|
728
|
+
};
|
|
718
729
|
}
|
|
719
730
|
return {
|
|
720
|
-
/**
|
|
731
|
+
/** 计算偏移量后的z-index值 */
|
|
721
732
|
zIndex: zIndex + deviation,
|
|
722
|
-
/**
|
|
733
|
+
/** 获取到的最大的z-index值 */
|
|
723
734
|
originZIndex: zIndex,
|
|
724
735
|
/** 拥有最大z-index的元素 */
|
|
725
|
-
node: maxZIndexNode,
|
|
736
|
+
node: $maxZIndexNode,
|
|
726
737
|
/** 目标坐标元素 */
|
|
727
|
-
positionNode:
|
|
728
|
-
/** x坐标 */
|
|
738
|
+
positionNode: $position,
|
|
739
|
+
/** 目标x坐标 */
|
|
729
740
|
positionX: positionX,
|
|
730
|
-
/** y坐标 */
|
|
741
|
+
/** 目标y坐标 */
|
|
731
742
|
positionY: positionY,
|
|
743
|
+
/** node位置信息 */
|
|
744
|
+
rect,
|
|
732
745
|
};
|
|
733
746
|
})
|
|
734
747
|
.filter((it) => it != null);
|
|
@@ -779,11 +792,22 @@ const PopsSafeUtils = {
|
|
|
779
792
|
const PopsCommonCSSClassName = {
|
|
780
793
|
flexCenter: "pops-flex-items-center",
|
|
781
794
|
flexYCenter: "pops-flex-y-center",
|
|
795
|
+
flexXCenter: "pops-flex-x-center",
|
|
782
796
|
hide: "pops-hide",
|
|
783
797
|
hideImportant: "pops-hide-important",
|
|
798
|
+
noBorder: "pops-no-border",
|
|
799
|
+
noBorderImportant: "pops-no-border-important",
|
|
784
800
|
userSelectNone: "pops-user-select-none",
|
|
785
|
-
|
|
801
|
+
lineHeightCenter: "pops-line-height-center",
|
|
802
|
+
widthFill: "pops-width-fill",
|
|
803
|
+
textIsDisabled: "pops-text-is-disabled",
|
|
804
|
+
textIsDisabledImportant: "pops-text-is-disabled-important",
|
|
805
|
+
};
|
|
786
806
|
|
|
807
|
+
/**
|
|
808
|
+
* 存储在元素属性上的事件名
|
|
809
|
+
*/
|
|
810
|
+
const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
|
|
787
811
|
class PopsDOMUtilsEvent {
|
|
788
812
|
on(element, eventType, selector, callback, option) {
|
|
789
813
|
/**
|
|
@@ -3128,6 +3152,134 @@ const PopsInstData = {
|
|
|
3128
3152
|
tooltip: [],
|
|
3129
3153
|
};
|
|
3130
3154
|
|
|
3155
|
+
const PopsInstanceUtils = {
|
|
3156
|
+
/**
|
|
3157
|
+
* 获取pops所有弹窗中的最大的z-index
|
|
3158
|
+
* @param deviation
|
|
3159
|
+
*/
|
|
3160
|
+
getPopsMaxZIndex(deviation = 1) {
|
|
3161
|
+
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
3162
|
+
// 最大值 2147483647
|
|
3163
|
+
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
3164
|
+
// 比较值 2000000000
|
|
3165
|
+
const maxZIndex = 2 * Math.pow(10, 9);
|
|
3166
|
+
// 当前页面最大的z-index
|
|
3167
|
+
let zIndex = 0;
|
|
3168
|
+
// 当前的最大z-index的元素,调试使用
|
|
3169
|
+
let maxZIndexNode = null;
|
|
3170
|
+
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
3171
|
+
const instData = PopsInstData[instKeyName];
|
|
3172
|
+
for (let index = 0; index < instData.length; index++) {
|
|
3173
|
+
const inst = instData[index];
|
|
3174
|
+
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
3175
|
+
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
3176
|
+
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
3177
|
+
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
3178
|
+
if (maxNodeZIndexInfo) {
|
|
3179
|
+
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
3180
|
+
if (nodeZIndex > zIndex) {
|
|
3181
|
+
zIndex = nodeZIndex;
|
|
3182
|
+
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
3183
|
+
}
|
|
3184
|
+
}
|
|
3185
|
+
}
|
|
3186
|
+
});
|
|
3187
|
+
zIndex += deviation;
|
|
3188
|
+
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
3189
|
+
if (isOverMaxZIndex) {
|
|
3190
|
+
// 超出z-index最大值
|
|
3191
|
+
zIndex = maxZIndex;
|
|
3192
|
+
}
|
|
3193
|
+
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
3194
|
+
},
|
|
3195
|
+
/**
|
|
3196
|
+
* 排序数组
|
|
3197
|
+
* @param getBeforeValueFun
|
|
3198
|
+
* @param getAfterValueFun
|
|
3199
|
+
* @param sortByDesc 排序是否降序,默认降序
|
|
3200
|
+
*/
|
|
3201
|
+
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
3202
|
+
if (typeof sortByDesc !== "boolean") {
|
|
3203
|
+
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
3204
|
+
}
|
|
3205
|
+
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
3206
|
+
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
3207
|
+
}
|
|
3208
|
+
return function (after_obj, before_obj) {
|
|
3209
|
+
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
3210
|
+
const afterValue = getAfterValueFun(after_obj); // 后
|
|
3211
|
+
if (sortByDesc) {
|
|
3212
|
+
if (afterValue > beforeValue) {
|
|
3213
|
+
return -1;
|
|
3214
|
+
}
|
|
3215
|
+
else if (afterValue < beforeValue) {
|
|
3216
|
+
return 1;
|
|
3217
|
+
}
|
|
3218
|
+
else {
|
|
3219
|
+
return 0;
|
|
3220
|
+
}
|
|
3221
|
+
}
|
|
3222
|
+
else {
|
|
3223
|
+
if (afterValue < beforeValue) {
|
|
3224
|
+
return -1;
|
|
3225
|
+
}
|
|
3226
|
+
else if (afterValue > beforeValue) {
|
|
3227
|
+
return 1;
|
|
3228
|
+
}
|
|
3229
|
+
else {
|
|
3230
|
+
return 0;
|
|
3231
|
+
}
|
|
3232
|
+
}
|
|
3233
|
+
};
|
|
3234
|
+
},
|
|
3235
|
+
/**
|
|
3236
|
+
* 是否是隐藏状态
|
|
3237
|
+
*
|
|
3238
|
+
* 检测以下项:
|
|
3239
|
+
*
|
|
3240
|
+
* + `display`: none
|
|
3241
|
+
* + `visibility`: hidden
|
|
3242
|
+
* + `opacity`: 0
|
|
3243
|
+
* + `使用了pops的自定义的隐藏class类`
|
|
3244
|
+
* @param $el 需要检测的元素
|
|
3245
|
+
*/
|
|
3246
|
+
isHide($el) {
|
|
3247
|
+
let flag = false;
|
|
3248
|
+
if ($el?.classList?.contains(PopsCommonCSSClassName.hide) ||
|
|
3249
|
+
$el?.classList?.contains(PopsCommonCSSClassName.hideImportant)) {
|
|
3250
|
+
flag = true;
|
|
3251
|
+
}
|
|
3252
|
+
else {
|
|
3253
|
+
if ($el instanceof HTMLElement) {
|
|
3254
|
+
const style = $el.style;
|
|
3255
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3256
|
+
}
|
|
3257
|
+
if (!flag) {
|
|
3258
|
+
const style = globalThis.getComputedStyle($el);
|
|
3259
|
+
flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
|
|
3260
|
+
}
|
|
3261
|
+
}
|
|
3262
|
+
return flag;
|
|
3263
|
+
},
|
|
3264
|
+
/**
|
|
3265
|
+
* 判断元素是否是在`.pops`内
|
|
3266
|
+
* @param $el 目标元素
|
|
3267
|
+
*/
|
|
3268
|
+
isNodeInPopsNode($el) {
|
|
3269
|
+
return !!($el.closest(".pops") || $el.matches(".pops"));
|
|
3270
|
+
},
|
|
3271
|
+
/**
|
|
3272
|
+
* 判断是否是`.pops-anim`元素
|
|
3273
|
+
* @param $el 目标元素
|
|
3274
|
+
*/
|
|
3275
|
+
isAnimNode($el) {
|
|
3276
|
+
return !!($el?.localName?.toLowerCase() === "div" &&
|
|
3277
|
+
$el.className &&
|
|
3278
|
+
$el.className === "pops-anim" &&
|
|
3279
|
+
$el.hasAttribute("anim"));
|
|
3280
|
+
},
|
|
3281
|
+
};
|
|
3282
|
+
|
|
3131
3283
|
const PopsInstHandler = {
|
|
3132
3284
|
/**
|
|
3133
3285
|
* 删除配置中对应的对象
|
|
@@ -3190,7 +3342,7 @@ const PopsInstHandler = {
|
|
|
3190
3342
|
return totalInstConfigList;
|
|
3191
3343
|
},
|
|
3192
3344
|
/**
|
|
3193
|
-
*
|
|
3345
|
+
* 显示
|
|
3194
3346
|
* @param popsType
|
|
3195
3347
|
* @param instConfigList
|
|
3196
3348
|
* @param guid
|
|
@@ -3198,24 +3350,34 @@ const PopsInstHandler = {
|
|
|
3198
3350
|
* @param $anim
|
|
3199
3351
|
* @param $mask
|
|
3200
3352
|
*/
|
|
3201
|
-
|
|
3353
|
+
show(config, popsType, instConfigList, guid, $anim, $mask) {
|
|
3202
3354
|
// oxlint-disable-next-line no-async-promise-executor
|
|
3203
3355
|
return new Promise(async (resolve) => {
|
|
3204
3356
|
const $pops = $anim.querySelector(".pops[type-value]");
|
|
3205
3357
|
const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
3206
3358
|
if (fintInst) {
|
|
3207
|
-
//
|
|
3359
|
+
// 由于是隐蔽状态
|
|
3360
|
+
// 先设置好动画状态
|
|
3361
|
+
// 再显示,会自执行动画
|
|
3362
|
+
const checkVisible = () => {
|
|
3363
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3364
|
+
return true;
|
|
3365
|
+
}
|
|
3366
|
+
else {
|
|
3367
|
+
return false;
|
|
3368
|
+
}
|
|
3369
|
+
};
|
|
3208
3370
|
const startAnim = async () => {
|
|
3209
3371
|
if (popsType === "drawer") {
|
|
3210
3372
|
// drawer是抽屉
|
|
3211
3373
|
// 单独处理动画
|
|
3212
3374
|
const drawerConfig = config;
|
|
3213
|
-
await popsUtils.sleep(drawerConfig.
|
|
3375
|
+
await popsUtils.sleep(drawerConfig.openDelay ?? 0);
|
|
3214
3376
|
if ($mask) {
|
|
3215
|
-
popsDOMUtils.css($mask, "display", "
|
|
3377
|
+
popsDOMUtils.css($mask, "display", "");
|
|
3216
3378
|
}
|
|
3217
3379
|
const direction = drawerConfig.direction;
|
|
3218
|
-
const size =
|
|
3380
|
+
const size = drawerConfig.size.toString();
|
|
3219
3381
|
if (["top", "bottom"].includes(direction)) {
|
|
3220
3382
|
$pops.style.setProperty("height", size);
|
|
3221
3383
|
}
|
|
@@ -3223,26 +3385,26 @@ const PopsInstHandler = {
|
|
|
3223
3385
|
$pops.style.setProperty("width", size);
|
|
3224
3386
|
}
|
|
3225
3387
|
else {
|
|
3226
|
-
console.error("未知direction
|
|
3388
|
+
console.error("未知direction:", direction);
|
|
3227
3389
|
}
|
|
3228
3390
|
}
|
|
3229
3391
|
else {
|
|
3230
|
-
instConfigItem.$anim.style.width = "
|
|
3231
|
-
instConfigItem.$anim.style.height = "
|
|
3232
|
-
Reflect.set(instConfigItem.$anim.style, "animation-name",
|
|
3392
|
+
instConfigItem.$anim.style.width = "";
|
|
3393
|
+
instConfigItem.$anim.style.height = "";
|
|
3394
|
+
Reflect.set(instConfigItem.$anim.style, "animation-name", animName);
|
|
3233
3395
|
}
|
|
3234
|
-
|
|
3235
|
-
const endCallback = () => {
|
|
3236
|
-
instConfigItem.$anim.style.display = "none";
|
|
3396
|
+
instConfigItem.$anim.style.display = "";
|
|
3237
3397
|
if (instConfigItem.$mask) {
|
|
3238
|
-
instConfigItem.$mask.style.display = "
|
|
3398
|
+
instConfigItem.$mask.style.display = "";
|
|
3239
3399
|
}
|
|
3240
|
-
|
|
3400
|
+
};
|
|
3401
|
+
const endCallback = () => {
|
|
3402
|
+
fintInst.emitter.emit("pops:show", instConfigItem);
|
|
3241
3403
|
};
|
|
3242
3404
|
const instConfigItem = fintInst;
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
if (PopsAnimation.hasAnim(
|
|
3405
|
+
const animName = instConfigItem.$anim.getAttribute("anim").replace("-reverse", "");
|
|
3406
|
+
fintInst.emitter.emit("pops:before-show", instConfigItem);
|
|
3407
|
+
if (checkVisible() && PopsAnimation.hasAnim(animName)) {
|
|
3246
3408
|
/**
|
|
3247
3409
|
* 动画结束的回调
|
|
3248
3410
|
*/
|
|
@@ -3253,22 +3415,23 @@ const PopsInstHandler = {
|
|
|
3253
3415
|
};
|
|
3254
3416
|
const listener = popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
3255
3417
|
capture: true,
|
|
3256
|
-
once: true,
|
|
3257
3418
|
});
|
|
3419
|
+
await startAnim();
|
|
3258
3420
|
}
|
|
3259
3421
|
else {
|
|
3422
|
+
await startAnim();
|
|
3260
3423
|
endCallback();
|
|
3261
3424
|
resolve();
|
|
3262
3425
|
}
|
|
3263
3426
|
}
|
|
3264
3427
|
else {
|
|
3265
|
-
console.error("
|
|
3428
|
+
console.error("show-error: 该实例未存储");
|
|
3266
3429
|
resolve();
|
|
3267
3430
|
}
|
|
3268
3431
|
});
|
|
3269
3432
|
},
|
|
3270
3433
|
/**
|
|
3271
|
-
*
|
|
3434
|
+
* 隐藏
|
|
3272
3435
|
* @param popsType
|
|
3273
3436
|
* @param instConfigList
|
|
3274
3437
|
* @param guid
|
|
@@ -3276,23 +3439,35 @@ const PopsInstHandler = {
|
|
|
3276
3439
|
* @param $anim
|
|
3277
3440
|
* @param $mask
|
|
3278
3441
|
*/
|
|
3279
|
-
|
|
3442
|
+
hide(config, popsType, instConfigList, guid, $anim, $mask) {
|
|
3280
3443
|
// oxlint-disable-next-line no-async-promise-executor
|
|
3281
3444
|
return new Promise(async (resolve) => {
|
|
3282
3445
|
const $pops = $anim.querySelector(".pops[type-value]");
|
|
3283
3446
|
const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
|
|
3284
3447
|
if (fintInst) {
|
|
3448
|
+
// 由于是已显示状态
|
|
3449
|
+
// 先执行动画
|
|
3450
|
+
// 再隐藏
|
|
3451
|
+
// 存在实例
|
|
3452
|
+
const checkVisible = () => {
|
|
3453
|
+
if (!PopsInstanceUtils.isHide($anim)) {
|
|
3454
|
+
return true;
|
|
3455
|
+
}
|
|
3456
|
+
else {
|
|
3457
|
+
return false;
|
|
3458
|
+
}
|
|
3459
|
+
};
|
|
3285
3460
|
const startAnim = async () => {
|
|
3286
3461
|
if (popsType === "drawer") {
|
|
3287
3462
|
// drawer是抽屉
|
|
3288
3463
|
// 单独处理动画
|
|
3289
3464
|
const drawerConfig = config;
|
|
3290
|
-
await popsUtils.sleep(drawerConfig.
|
|
3465
|
+
await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
|
|
3291
3466
|
if ($mask) {
|
|
3292
|
-
popsDOMUtils.css($mask, "display", "");
|
|
3467
|
+
popsDOMUtils.css($mask, "display", "none");
|
|
3293
3468
|
}
|
|
3294
3469
|
const direction = drawerConfig.direction;
|
|
3295
|
-
const size =
|
|
3470
|
+
const size = "0";
|
|
3296
3471
|
if (["top", "bottom"].includes(direction)) {
|
|
3297
3472
|
$pops.style.setProperty("height", size);
|
|
3298
3473
|
}
|
|
@@ -3300,26 +3475,27 @@ const PopsInstHandler = {
|
|
|
3300
3475
|
$pops.style.setProperty("width", size);
|
|
3301
3476
|
}
|
|
3302
3477
|
else {
|
|
3303
|
-
console.error("未知direction
|
|
3478
|
+
console.error("未知direction: ", direction);
|
|
3304
3479
|
}
|
|
3305
3480
|
}
|
|
3306
3481
|
else {
|
|
3307
|
-
instConfigItem.$anim.style.width = "";
|
|
3308
|
-
instConfigItem.$anim.style.height = "";
|
|
3309
|
-
Reflect.set(instConfigItem.$anim.style, "animation-name",
|
|
3482
|
+
instConfigItem.$anim.style.width = "100%";
|
|
3483
|
+
instConfigItem.$anim.style.height = "100%";
|
|
3484
|
+
Reflect.set(instConfigItem.$anim.style, "animation-name", reverseAnimName);
|
|
3310
3485
|
}
|
|
3311
3486
|
};
|
|
3312
3487
|
const endCallback = () => {
|
|
3313
|
-
instConfigItem.$anim.style.display = "";
|
|
3488
|
+
instConfigItem.$anim.style.display = "none";
|
|
3314
3489
|
if (instConfigItem.$mask) {
|
|
3315
|
-
instConfigItem.$mask.style.display = "";
|
|
3490
|
+
instConfigItem.$mask.style.display = "none";
|
|
3316
3491
|
}
|
|
3317
|
-
fintInst.emitter.emit("pops:
|
|
3492
|
+
fintInst.emitter.emit("pops:hide", instConfigItem);
|
|
3318
3493
|
};
|
|
3319
3494
|
const instConfigItem = fintInst;
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3495
|
+
const animName = instConfigItem.$anim.getAttribute("anim").replace("-reverse", "");
|
|
3496
|
+
const reverseAnimName = animName + "-reverse";
|
|
3497
|
+
fintInst.emitter.emit("pops:before-hide", instConfigItem);
|
|
3498
|
+
if (!checkVisible() && PopsAnimation.hasAnim(reverseAnimName)) {
|
|
3323
3499
|
/**
|
|
3324
3500
|
* 动画结束的回调
|
|
3325
3501
|
*/
|
|
@@ -3330,15 +3506,18 @@ const PopsInstHandler = {
|
|
|
3330
3506
|
};
|
|
3331
3507
|
const listener = popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
3332
3508
|
capture: true,
|
|
3509
|
+
once: true,
|
|
3333
3510
|
});
|
|
3511
|
+
await startAnim();
|
|
3334
3512
|
}
|
|
3335
3513
|
else {
|
|
3514
|
+
await startAnim();
|
|
3336
3515
|
endCallback();
|
|
3337
3516
|
resolve();
|
|
3338
3517
|
}
|
|
3339
3518
|
}
|
|
3340
3519
|
else {
|
|
3341
|
-
console.error("
|
|
3520
|
+
console.error("hide-error: 该实例未存储");
|
|
3342
3521
|
resolve();
|
|
3343
3522
|
}
|
|
3344
3523
|
});
|
|
@@ -3378,7 +3557,7 @@ const PopsInstHandler = {
|
|
|
3378
3557
|
await new Promise(async (resolve) => {
|
|
3379
3558
|
const $pops = $anim.querySelector(".pops[type-value]");
|
|
3380
3559
|
const drawerConfig = config;
|
|
3381
|
-
const
|
|
3560
|
+
const startAnim = () => {
|
|
3382
3561
|
/**
|
|
3383
3562
|
* 弹窗已关闭的回调
|
|
3384
3563
|
*/
|
|
@@ -3419,7 +3598,7 @@ const PopsInstHandler = {
|
|
|
3419
3598
|
};
|
|
3420
3599
|
if (popsType === "drawer") {
|
|
3421
3600
|
await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
|
|
3422
|
-
|
|
3601
|
+
startAnim();
|
|
3423
3602
|
}
|
|
3424
3603
|
else {
|
|
3425
3604
|
await PopsInstHandler.removeInstance([instConfigList], guid);
|
|
@@ -3699,11 +3878,11 @@ const PopsHandler = {
|
|
|
3699
3878
|
* 点击其它区域的事件
|
|
3700
3879
|
* @param event
|
|
3701
3880
|
*/
|
|
3702
|
-
|
|
3881
|
+
const clickEvent = (event) => {
|
|
3703
3882
|
popsDOMUtils.preventEvent(event);
|
|
3704
3883
|
// 获取该类型实例存储列表
|
|
3705
3884
|
const targetInst = PopsInstData[config.type];
|
|
3706
|
-
|
|
3885
|
+
const continueExec = () => {
|
|
3707
3886
|
if (config.config.mask.clickEvent.toClose) {
|
|
3708
3887
|
// 关闭
|
|
3709
3888
|
return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
|
|
@@ -3712,37 +3891,26 @@ const PopsHandler = {
|
|
|
3712
3891
|
// 隐藏
|
|
3713
3892
|
return PopsInstHandler.hide(config.config, config.type, targetInst, config.guid, config.animElement, result.maskElement);
|
|
3714
3893
|
}
|
|
3715
|
-
}
|
|
3894
|
+
};
|
|
3716
3895
|
if (typeof config.config.mask.clickCallBack === "function") {
|
|
3717
|
-
config.config.mask.clickCallBack(
|
|
3896
|
+
config.config.mask.clickCallBack(continueExec, config.config);
|
|
3718
3897
|
}
|
|
3719
3898
|
else {
|
|
3720
|
-
|
|
3899
|
+
continueExec();
|
|
3721
3900
|
}
|
|
3722
3901
|
return false;
|
|
3723
|
-
}
|
|
3902
|
+
};
|
|
3724
3903
|
// 判断是否启用了遮罩层点击动作
|
|
3725
3904
|
if (config.config.mask.clickEvent.toClose || config.config.mask.clickEvent.toHide) {
|
|
3726
|
-
/**
|
|
3727
|
-
* 判断点击的元素是否是动画层的元素
|
|
3728
|
-
* @param element
|
|
3729
|
-
* @returns
|
|
3730
|
-
*/
|
|
3731
|
-
function isAnimElement(element) {
|
|
3732
|
-
return Boolean(element?.localName?.toLowerCase() === "div" &&
|
|
3733
|
-
element.className &&
|
|
3734
|
-
element.className === "pops-anim" &&
|
|
3735
|
-
element.hasAttribute("anim"));
|
|
3736
|
-
}
|
|
3737
3905
|
// 判断按下的元素是否是pops-anim
|
|
3738
3906
|
popsDOMUtils.on(config.animElement, "pointerup", (event) => {
|
|
3739
3907
|
const $click = event.composedPath()[0];
|
|
3740
|
-
isMaskClick =
|
|
3908
|
+
isMaskClick = PopsInstanceUtils.isAnimNode($click);
|
|
3741
3909
|
});
|
|
3742
3910
|
// 如果有动画层,在动画层上监听点击事件
|
|
3743
3911
|
popsDOMUtils.on(config.animElement, "click", (event) => {
|
|
3744
3912
|
const $click = event.composedPath()[0];
|
|
3745
|
-
if (isMaskClick &&
|
|
3913
|
+
if (isMaskClick && PopsInstanceUtils.isAnimNode($click)) {
|
|
3746
3914
|
return clickEvent(event);
|
|
3747
3915
|
}
|
|
3748
3916
|
});
|
|
@@ -4170,8 +4338,8 @@ const PopsAlertDefaultConfig = () => {
|
|
|
4170
4338
|
style: null,
|
|
4171
4339
|
lightStyle: null,
|
|
4172
4340
|
darkStyle: null,
|
|
4173
|
-
beforeAppendToPageCallBack() { },
|
|
4174
4341
|
stopKeyDownEventPropagation: true,
|
|
4342
|
+
emitter: null,
|
|
4175
4343
|
};
|
|
4176
4344
|
};
|
|
4177
4345
|
|
|
@@ -4180,11 +4348,11 @@ const PopsAlert = {
|
|
|
4180
4348
|
const guid = popsUtils.getRandomGUID();
|
|
4181
4349
|
// 设置当前类型
|
|
4182
4350
|
const popsType = "alert";
|
|
4183
|
-
const emitter = new EventEmiter(popsType);
|
|
4184
4351
|
let config = PopsAlertDefaultConfig();
|
|
4185
4352
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4186
4353
|
config = popsUtils.assign(config, __config__);
|
|
4187
4354
|
config = PopsHandler.handleOnly(popsType, config);
|
|
4355
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
4188
4356
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4189
4357
|
PopsHandler.handleInit($shadowRoot, [
|
|
4190
4358
|
{
|
|
@@ -4378,8 +4546,8 @@ const PopsConfirmDefaultConfig = () => {
|
|
|
4378
4546
|
style: null,
|
|
4379
4547
|
lightStyle: null,
|
|
4380
4548
|
darkStyle: null,
|
|
4381
|
-
beforeAppendToPageCallBack() { },
|
|
4382
4549
|
stopKeyDownEventPropagation: true,
|
|
4550
|
+
emitter: null,
|
|
4383
4551
|
};
|
|
4384
4552
|
};
|
|
4385
4553
|
|
|
@@ -4388,11 +4556,11 @@ const PopsConfirm = {
|
|
|
4388
4556
|
const guid = popsUtils.getRandomGUID();
|
|
4389
4557
|
// 设置当前类型
|
|
4390
4558
|
const popsType = "confirm";
|
|
4391
|
-
const emitter = new EventEmiter(popsType);
|
|
4392
4559
|
let config = PopsConfirmDefaultConfig();
|
|
4393
4560
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4394
4561
|
config = popsUtils.assign(config, __config__);
|
|
4395
4562
|
config = PopsHandler.handleOnly(popsType, config);
|
|
4563
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
4396
4564
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4397
4565
|
PopsHandler.handleInit($shadowRoot, [
|
|
4398
4566
|
{
|
|
@@ -4585,9 +4753,9 @@ const PopsDrawerDefaultConfig = () => {
|
|
|
4585
4753
|
style: null,
|
|
4586
4754
|
lightStyle: null,
|
|
4587
4755
|
darkStyle: null,
|
|
4588
|
-
beforeAppendToPageCallBack() { },
|
|
4589
4756
|
forbiddenScroll: false,
|
|
4590
4757
|
stopKeyDownEventPropagation: true,
|
|
4758
|
+
emitter: null,
|
|
4591
4759
|
};
|
|
4592
4760
|
};
|
|
4593
4761
|
|
|
@@ -4596,11 +4764,11 @@ const PopsDrawer = {
|
|
|
4596
4764
|
const guid = popsUtils.getRandomGUID();
|
|
4597
4765
|
// 设置当前类型
|
|
4598
4766
|
const popsType = "drawer";
|
|
4599
|
-
const emitter = new EventEmiter(popsType);
|
|
4600
4767
|
let config = PopsDrawerDefaultConfig();
|
|
4601
4768
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4602
4769
|
config = popsUtils.assign(config, __config__);
|
|
4603
4770
|
config = PopsHandler.handleOnly(popsType, config);
|
|
4771
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
4604
4772
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
4605
4773
|
PopsHandler.handleInit($shadowRoot, [
|
|
4606
4774
|
{
|
|
@@ -4811,6 +4979,7 @@ const PopsLoadingDefaultConfig = () => {
|
|
|
4811
4979
|
darkStyle: null,
|
|
4812
4980
|
addIndexCSS: true,
|
|
4813
4981
|
stopKeyDownEventPropagation: true,
|
|
4982
|
+
emitter: null,
|
|
4814
4983
|
};
|
|
4815
4984
|
};
|
|
4816
4985
|
|
|
@@ -4818,19 +4987,19 @@ const PopsLoading = {
|
|
|
4818
4987
|
init(__config__) {
|
|
4819
4988
|
const guid = popsUtils.getRandomGUID();
|
|
4820
4989
|
// 设置当前类型
|
|
4821
|
-
const
|
|
4822
|
-
const emitter = new EventEmiter(PopsType);
|
|
4990
|
+
const popsType = "loading";
|
|
4823
4991
|
let config = PopsLoadingDefaultConfig();
|
|
4824
4992
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
4825
4993
|
config = popsUtils.assign(config, __config__);
|
|
4826
|
-
config = PopsHandler.handleOnly(
|
|
4994
|
+
config = PopsHandler.handleOnly(popsType, config);
|
|
4995
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
4827
4996
|
// 先把z-index提取出来
|
|
4828
4997
|
const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
|
|
4829
4998
|
const maskHTML = PopsElementHandler.createMask(guid, zIndex);
|
|
4830
4999
|
const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
|
|
4831
|
-
const animHTML = PopsElementHandler.createAnim(guid,
|
|
5000
|
+
const animHTML = PopsElementHandler.createAnim(guid, popsType, config,
|
|
4832
5001
|
/*html*/ `
|
|
4833
|
-
<div class="pops-content pops-${
|
|
5002
|
+
<div class="pops-content pops-${popsType}-content">${config.addIndexCSS
|
|
4834
5003
|
? /*html*/ `
|
|
4835
5004
|
<style data-model-name="index">${PopsCSS.index}</style>
|
|
4836
5005
|
<style data-model-name="anim">${PopsCSS.anim}</style>
|
|
@@ -4841,13 +5010,13 @@ const PopsLoading = {
|
|
|
4841
5010
|
${PopsCSS.loadingCSS}
|
|
4842
5011
|
</style>
|
|
4843
5012
|
${config.style != null ? `<style>${config.style}</style>` : ""}
|
|
4844
|
-
<p pops class="pops-${
|
|
5013
|
+
<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
|
|
4845
5014
|
</div>`, "", zIndex);
|
|
4846
5015
|
/**
|
|
4847
5016
|
* 弹窗的主元素,包括动画层
|
|
4848
5017
|
*/
|
|
4849
5018
|
const $anim = PopsElementHandler.parseElement(animHTML);
|
|
4850
|
-
const { $pops: $pops } = PopsHandler.handleQueryElement($anim,
|
|
5019
|
+
const { $pops: $pops } = PopsHandler.handleQueryElement($anim, popsType);
|
|
4851
5020
|
/**
|
|
4852
5021
|
* 遮罩层元素
|
|
4853
5022
|
*/
|
|
@@ -4859,7 +5028,7 @@ const PopsLoading = {
|
|
|
4859
5028
|
if (config.mask.enable) {
|
|
4860
5029
|
// 创建遮罩层
|
|
4861
5030
|
const handleMask = PopsHandler.handleMask({
|
|
4862
|
-
type:
|
|
5031
|
+
type: popsType,
|
|
4863
5032
|
guid: guid,
|
|
4864
5033
|
config: config,
|
|
4865
5034
|
animElement: $anim,
|
|
@@ -4868,12 +5037,12 @@ const PopsLoading = {
|
|
|
4868
5037
|
$mask = handleMask.maskElement;
|
|
4869
5038
|
$elList.push($mask);
|
|
4870
5039
|
}
|
|
4871
|
-
const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid,
|
|
5040
|
+
const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, popsType, $anim, $pops, emitter, $mask);
|
|
4872
5041
|
popsDOMUtils.append(config.$parent, $elList);
|
|
4873
5042
|
if ($mask != null) {
|
|
4874
5043
|
$anim.after($mask);
|
|
4875
5044
|
}
|
|
4876
|
-
PopsHandler.handlePush(
|
|
5045
|
+
PopsHandler.handlePush(popsType, {
|
|
4877
5046
|
$shadowContainer: $pops,
|
|
4878
5047
|
$shadowRoot: $pops,
|
|
4879
5048
|
guid: guid,
|
|
@@ -5042,8 +5211,8 @@ const PopsFolderDefaultConfig = () => {
|
|
|
5042
5211
|
style: null,
|
|
5043
5212
|
lightStyle: null,
|
|
5044
5213
|
darkStyle: null,
|
|
5045
|
-
beforeAppendToPageCallBack() { },
|
|
5046
5214
|
stopKeyDownEventPropagation: true,
|
|
5215
|
+
emitter: null,
|
|
5047
5216
|
};
|
|
5048
5217
|
};
|
|
5049
5218
|
|
|
@@ -5080,11 +5249,11 @@ const PopsFolder = {
|
|
|
5080
5249
|
const guid = popsUtils.getRandomGUID();
|
|
5081
5250
|
// 设置当前类型
|
|
5082
5251
|
const popsType = "folder";
|
|
5083
|
-
const emitter = new EventEmiter(popsType);
|
|
5084
5252
|
let config = PopsFolderDefaultConfig();
|
|
5085
5253
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
5086
5254
|
config = popsUtils.assign(config, __config__);
|
|
5087
5255
|
config = PopsHandler.handleOnly(popsType, config);
|
|
5256
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
5088
5257
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
5089
5258
|
PopsHandler.handleInit($shadowRoot, [
|
|
5090
5259
|
{
|
|
@@ -6007,8 +6176,8 @@ const PopsIframeDefaultConfig = () => {
|
|
|
6007
6176
|
style: null,
|
|
6008
6177
|
lightStyle: null,
|
|
6009
6178
|
darkStyle: null,
|
|
6010
|
-
beforeAppendToPageCallBack() { },
|
|
6011
6179
|
stopKeyDownEventPropagation: true,
|
|
6180
|
+
emitter: null,
|
|
6012
6181
|
};
|
|
6013
6182
|
};
|
|
6014
6183
|
|
|
@@ -6017,7 +6186,6 @@ const PopsIframe = {
|
|
|
6017
6186
|
const guid = popsUtils.getRandomGUID();
|
|
6018
6187
|
// 设置当前类型
|
|
6019
6188
|
const popsType = "iframe";
|
|
6020
|
-
const emitter = new EventEmiter(popsType);
|
|
6021
6189
|
let config = PopsIframeDefaultConfig();
|
|
6022
6190
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
6023
6191
|
config = popsUtils.assign(config, __config__);
|
|
@@ -6025,6 +6193,8 @@ const PopsIframe = {
|
|
|
6025
6193
|
throw new TypeError("config.url must not be null.");
|
|
6026
6194
|
}
|
|
6027
6195
|
config = PopsHandler.handleOnly(popsType, config);
|
|
6196
|
+
const emitter = config.emitter ??
|
|
6197
|
+
new EventEmiter(popsType);
|
|
6028
6198
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
6029
6199
|
PopsHandler.handleInit($shadowRoot, [
|
|
6030
6200
|
{
|
|
@@ -6052,7 +6222,7 @@ const PopsIframe = {
|
|
|
6052
6222
|
css: PopsCSS.iframeCSS,
|
|
6053
6223
|
},
|
|
6054
6224
|
]);
|
|
6055
|
-
const maskExtraStyle = config.animation != null && config.animation != "" ? "position:absolute;" : "";
|
|
6225
|
+
const maskExtraStyle = config.animation != null && config.animation != "" && config.animation ? "position:absolute;" : "";
|
|
6056
6226
|
// 先把z-index提取出来
|
|
6057
6227
|
const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
|
|
6058
6228
|
const maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
|
|
@@ -7133,9 +7303,9 @@ const PopsPanelDefaultConfig = () => {
|
|
|
7133
7303
|
style: null,
|
|
7134
7304
|
lightStyle: null,
|
|
7135
7305
|
darkStyle: null,
|
|
7136
|
-
beforeAppendToPageCallBack() { },
|
|
7137
7306
|
stopKeyDownEventPropagation: true,
|
|
7138
7307
|
listenEscapeKeyUpToExitDeepMenu: true,
|
|
7308
|
+
emitter: null,
|
|
7139
7309
|
};
|
|
7140
7310
|
};
|
|
7141
7311
|
|
|
@@ -7247,7 +7417,7 @@ const PopsTooltipDefaultConfig = () => {
|
|
|
7247
7417
|
style: "",
|
|
7248
7418
|
lightStyle: null,
|
|
7249
7419
|
darkStyle: null,
|
|
7250
|
-
|
|
7420
|
+
emitter: null,
|
|
7251
7421
|
};
|
|
7252
7422
|
};
|
|
7253
7423
|
|
|
@@ -7715,7 +7885,6 @@ const PopsTooltip = {
|
|
|
7715
7885
|
const guid = popsUtils.getRandomGUID();
|
|
7716
7886
|
// 设置当前类型
|
|
7717
7887
|
const popsType = "tooltip";
|
|
7718
|
-
const emitter = new EventEmiter(popsType);
|
|
7719
7888
|
let config = PopsTooltipDefaultConfig();
|
|
7720
7889
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
7721
7890
|
config = popsUtils.assign(config, __config__);
|
|
@@ -7732,6 +7901,7 @@ const PopsTooltip = {
|
|
|
7732
7901
|
config.onShowEventName += ` ${it}`;
|
|
7733
7902
|
});
|
|
7734
7903
|
}
|
|
7904
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
7735
7905
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
7736
7906
|
PopsHandler.handleInit($shadowRoot, [
|
|
7737
7907
|
{
|
|
@@ -9646,12 +9816,12 @@ const PanelHandlerComponents = () => {
|
|
|
9646
9816
|
},
|
|
9647
9817
|
mask: {
|
|
9648
9818
|
enable: true,
|
|
9649
|
-
clickCallBack(
|
|
9819
|
+
clickCallBack(continueExec) {
|
|
9650
9820
|
const ret = dialogCloseCallback();
|
|
9651
9821
|
if (typeof ret === "boolean" && !ret) {
|
|
9652
9822
|
return;
|
|
9653
9823
|
}
|
|
9654
|
-
|
|
9824
|
+
continueExec();
|
|
9655
9825
|
},
|
|
9656
9826
|
clickEvent: {
|
|
9657
9827
|
toClose: true,
|
|
@@ -10863,8 +11033,8 @@ const PanelHandlerComponents = () => {
|
|
|
10863
11033
|
},
|
|
10864
11034
|
mask: {
|
|
10865
11035
|
enable: true,
|
|
10866
|
-
clickCallBack(
|
|
10867
|
-
|
|
11036
|
+
clickCallBack(continueExec) {
|
|
11037
|
+
continueExec();
|
|
10868
11038
|
dialogCloseCallback();
|
|
10869
11039
|
},
|
|
10870
11040
|
clickEvent: {
|
|
@@ -11597,11 +11767,11 @@ const PopsPanel = {
|
|
|
11597
11767
|
const guid = popsUtils.getRandomGUID();
|
|
11598
11768
|
// 设置当前类型
|
|
11599
11769
|
const popsType = "panel";
|
|
11600
|
-
const emitter = new EventEmiter(popsType);
|
|
11601
11770
|
let config = PopsPanelDefaultConfig();
|
|
11602
11771
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
11603
11772
|
config = popsUtils.assign(config, __config__);
|
|
11604
11773
|
config = PopsHandler.handleOnly(popsType, config);
|
|
11774
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
11605
11775
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
11606
11776
|
PopsHandler.handleInit($shadowRoot, [
|
|
11607
11777
|
{
|
|
@@ -11851,8 +12021,8 @@ const PopsPromptDefaultConfig = () => {
|
|
|
11851
12021
|
style: null,
|
|
11852
12022
|
lightStyle: null,
|
|
11853
12023
|
darkStyle: null,
|
|
11854
|
-
beforeAppendToPageCallBack() { },
|
|
11855
12024
|
stopKeyDownEventPropagation: true,
|
|
12025
|
+
emitter: null,
|
|
11856
12026
|
};
|
|
11857
12027
|
};
|
|
11858
12028
|
|
|
@@ -11861,11 +12031,11 @@ const PopsPrompt = {
|
|
|
11861
12031
|
const guid = popsUtils.getRandomGUID();
|
|
11862
12032
|
// 设置当前类型
|
|
11863
12033
|
const popsType = "prompt";
|
|
11864
|
-
const emitter = new EventEmiter(popsType);
|
|
11865
12034
|
let config = PopsPromptDefaultConfig();
|
|
11866
12035
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
11867
12036
|
config = popsUtils.assign(config, __config__);
|
|
11868
12037
|
config = PopsHandler.handleOnly(popsType, config);
|
|
12038
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
11869
12039
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
11870
12040
|
PopsHandler.handleInit($shadowRoot, [
|
|
11871
12041
|
{
|
|
@@ -12086,10 +12256,10 @@ const PopsRightClickMenuDefaultConfig = () => {
|
|
|
12086
12256
|
style: null,
|
|
12087
12257
|
lightStyle: null,
|
|
12088
12258
|
darkStyle: null,
|
|
12089
|
-
beforeAppendToPageCallBack() { },
|
|
12090
12259
|
limitPositionXInView: true,
|
|
12091
12260
|
limitPositionYInView: true,
|
|
12092
12261
|
beforeShowCallBack() { },
|
|
12262
|
+
emitter: null,
|
|
12093
12263
|
};
|
|
12094
12264
|
};
|
|
12095
12265
|
|
|
@@ -12098,11 +12268,11 @@ const PopsRightClickMenu = {
|
|
|
12098
12268
|
const guid = popsUtils.getRandomGUID();
|
|
12099
12269
|
// 设置当前类型
|
|
12100
12270
|
const popsType = "rightClickMenu";
|
|
12101
|
-
const emitter = new EventEmiter(popsType);
|
|
12102
12271
|
let config = PopsRightClickMenuDefaultConfig();
|
|
12103
12272
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
12104
12273
|
config = popsUtils.assign(config, __config__);
|
|
12105
12274
|
config = PopsHandler.handleOnly(popsType, config);
|
|
12275
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
12106
12276
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
12107
12277
|
PopsHandler.handleInit($shadowRoot, [
|
|
12108
12278
|
{
|
|
@@ -12724,6 +12894,7 @@ const PopsSearchSuggestionDefaultConfig = () => {
|
|
|
12724
12894
|
style: "",
|
|
12725
12895
|
lightStyle: null,
|
|
12726
12896
|
darkStyle: null,
|
|
12897
|
+
emitter: null,
|
|
12727
12898
|
};
|
|
12728
12899
|
};
|
|
12729
12900
|
|
|
@@ -12732,7 +12903,6 @@ const PopsSearchSuggestion = {
|
|
|
12732
12903
|
const guid = popsUtils.getRandomGUID();
|
|
12733
12904
|
// 设置当前类型
|
|
12734
12905
|
const popsType = "searchSuggestion";
|
|
12735
|
-
const emitter = new EventEmiter(popsType);
|
|
12736
12906
|
let config = PopsSearchSuggestionDefaultConfig();
|
|
12737
12907
|
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
|
|
12738
12908
|
config = popsUtils.assign(config, __config__);
|
|
@@ -12740,6 +12910,7 @@ const PopsSearchSuggestion = {
|
|
|
12740
12910
|
if (config.$inputTarget == null) {
|
|
12741
12911
|
config.$inputTarget = config.$target;
|
|
12742
12912
|
}
|
|
12913
|
+
const emitter = config.emitter ?? new EventEmiter(popsType);
|
|
12743
12914
|
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
|
|
12744
12915
|
PopsHandler.handleInit($shadowRoot, [
|
|
12745
12916
|
{
|
|
@@ -13508,93 +13679,12 @@ const PopsSearchSuggestion = {
|
|
|
13508
13679
|
},
|
|
13509
13680
|
};
|
|
13510
13681
|
|
|
13511
|
-
const PopsInstanceUtils = {
|
|
13512
|
-
/**
|
|
13513
|
-
* 获取pops所有弹窗中的最大的z-index
|
|
13514
|
-
* @param deviation
|
|
13515
|
-
*/
|
|
13516
|
-
getPopsMaxZIndex(deviation = 1) {
|
|
13517
|
-
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
13518
|
-
// 最大值 2147483647
|
|
13519
|
-
// const browserMaxZIndex = Math.pow(2, 31) - 1;
|
|
13520
|
-
// 比较值 2000000000
|
|
13521
|
-
const maxZIndex = 2 * Math.pow(10, 9);
|
|
13522
|
-
// 当前页面最大的z-index
|
|
13523
|
-
let zIndex = 0;
|
|
13524
|
-
// 当前的最大z-index的元素,调试使用
|
|
13525
|
-
let maxZIndexNode = null;
|
|
13526
|
-
Object.keys(PopsInstData).forEach((instKeyName) => {
|
|
13527
|
-
const instData = PopsInstData[instKeyName];
|
|
13528
|
-
for (let index = 0; index < instData.length; index++) {
|
|
13529
|
-
const inst = instData[index];
|
|
13530
|
-
// 不对position为static和display为none的元素进行获取它们的z-index
|
|
13531
|
-
const $elList = [inst.$anim, inst.$pops, inst.$mask].filter((it) => it instanceof HTMLElement);
|
|
13532
|
-
const nodeZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint($elList);
|
|
13533
|
-
const maxNodeZIndexInfo = nodeZIndexInfoList[0];
|
|
13534
|
-
if (maxNodeZIndexInfo) {
|
|
13535
|
-
const nodeZIndex = maxNodeZIndexInfo.zIndex;
|
|
13536
|
-
if (nodeZIndex > zIndex) {
|
|
13537
|
-
zIndex = nodeZIndex;
|
|
13538
|
-
maxZIndexNode = maxNodeZIndexInfo.node || maxNodeZIndexInfo.positionNode;
|
|
13539
|
-
}
|
|
13540
|
-
}
|
|
13541
|
-
}
|
|
13542
|
-
});
|
|
13543
|
-
zIndex += deviation;
|
|
13544
|
-
const isOverMaxZIndex = zIndex >= maxZIndex;
|
|
13545
|
-
if (isOverMaxZIndex) {
|
|
13546
|
-
// 超出z-index最大值
|
|
13547
|
-
zIndex = maxZIndex;
|
|
13548
|
-
}
|
|
13549
|
-
return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
|
|
13550
|
-
},
|
|
13551
|
-
/**
|
|
13552
|
-
* 排序数组
|
|
13553
|
-
* @param getBeforeValueFun
|
|
13554
|
-
* @param getAfterValueFun
|
|
13555
|
-
* @param sortByDesc 排序是否降序,默认降序
|
|
13556
|
-
*/
|
|
13557
|
-
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
|
|
13558
|
-
if (typeof sortByDesc !== "boolean") {
|
|
13559
|
-
throw new TypeError("参数 sortByDesc 必须为boolean类型");
|
|
13560
|
-
}
|
|
13561
|
-
if (getBeforeValueFun == null || getAfterValueFun == null) {
|
|
13562
|
-
throw new Error("获取前面的值或后面的值的方法不能为空");
|
|
13563
|
-
}
|
|
13564
|
-
return function (after_obj, before_obj) {
|
|
13565
|
-
const beforeValue = getBeforeValueFun(before_obj); // 前
|
|
13566
|
-
const afterValue = getAfterValueFun(after_obj); // 后
|
|
13567
|
-
if (sortByDesc) {
|
|
13568
|
-
if (afterValue > beforeValue) {
|
|
13569
|
-
return -1;
|
|
13570
|
-
}
|
|
13571
|
-
else if (afterValue < beforeValue) {
|
|
13572
|
-
return 1;
|
|
13573
|
-
}
|
|
13574
|
-
else {
|
|
13575
|
-
return 0;
|
|
13576
|
-
}
|
|
13577
|
-
}
|
|
13578
|
-
else {
|
|
13579
|
-
if (afterValue < beforeValue) {
|
|
13580
|
-
return -1;
|
|
13581
|
-
}
|
|
13582
|
-
else if (afterValue > beforeValue) {
|
|
13583
|
-
return 1;
|
|
13584
|
-
}
|
|
13585
|
-
else {
|
|
13586
|
-
return 0;
|
|
13587
|
-
}
|
|
13588
|
-
}
|
|
13589
|
-
};
|
|
13590
|
-
},
|
|
13591
|
-
};
|
|
13592
|
-
|
|
13593
13682
|
class Pops {
|
|
13594
13683
|
/** 配置 */
|
|
13595
13684
|
config = {
|
|
13596
13685
|
/** 版本号 */
|
|
13597
13686
|
version: version,
|
|
13687
|
+
/** 样式配置 */
|
|
13598
13688
|
cssText: PopsCSS,
|
|
13599
13689
|
/** icon图标的svg代码 */
|
|
13600
13690
|
iconSVG: PopsIcon.$data,
|
|
@@ -13602,12 +13692,9 @@ class Pops {
|
|
|
13602
13692
|
animation: PopsAnimation.$data,
|
|
13603
13693
|
/** 存储已创建的元素 */
|
|
13604
13694
|
instData: PopsInstData,
|
|
13605
|
-
|
|
13606
|
-
|
|
13607
|
-
|
|
13608
|
-
return popsDOMUtils.preventEvent(event);
|
|
13609
|
-
},
|
|
13610
|
-
},
|
|
13695
|
+
};
|
|
13696
|
+
/** 导出的函数 */
|
|
13697
|
+
fn = {
|
|
13611
13698
|
/** pops使用的工具类 */
|
|
13612
13699
|
Utils: popsUtils,
|
|
13613
13700
|
/** pops使用的DOM工具类 */
|
|
@@ -13617,15 +13704,16 @@ class Pops {
|
|
|
13617
13704
|
/** pops处理float类型使用的工具类 */
|
|
13618
13705
|
MathFloatUtils: PopsMathFloatUtils,
|
|
13619
13706
|
/** 实例处理函数 */
|
|
13620
|
-
PopsInstHandler,
|
|
13707
|
+
InstHandler: PopsInstHandler,
|
|
13621
13708
|
/** pops.panel中用于处理各个类型的工具 */
|
|
13622
|
-
PanelHandlerComponents,
|
|
13709
|
+
PanelHandlerComponents: PanelHandlerComponents,
|
|
13623
13710
|
/** pops.panel中的动画 */
|
|
13624
|
-
PopsAnimation,
|
|
13711
|
+
Animation: PopsAnimation,
|
|
13625
13712
|
/** 事件类 */
|
|
13626
|
-
EventEmiter,
|
|
13713
|
+
EventEmiter: EventEmiter,
|
|
13714
|
+
/** 通用的CSS类名 */
|
|
13715
|
+
CommonCSSClassName: PopsCommonCSSClassName,
|
|
13627
13716
|
};
|
|
13628
|
-
init() { }
|
|
13629
13717
|
/**
|
|
13630
13718
|
* 释放原有的pops控制权
|
|
13631
13719
|
* @example
|