@whitesev/pops 2.0.3 → 2.0.5
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 +141 -112
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +141 -112
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +141 -112
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +141 -112
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +141 -112
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +141 -112
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +3 -3
- package/dist/types/src/components/searchSuggestion/indexType.d.ts +1 -1
- package/dist/types/src/types/event.d.ts +3 -3
- package/dist/types/src/types/mask.d.ts +1 -1
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +3 -3
- package/package.json +1 -1
- package/src/Pops.ts +1 -1
- package/src/components/loading/index.ts +6 -0
- package/src/components/searchSuggestion/indexType.ts +1 -1
- package/src/handler/PopsHandler.ts +9 -11
- package/src/types/event.d.ts +3 -3
- package/src/types/mask.d.ts +1 -1
- package/src/utils/PopsDOMUtils.ts +21 -19
- package/src/utils/PopsInstanceUtils.ts +120 -96
package/dist/index.system.js
CHANGED
|
@@ -1224,30 +1224,32 @@ System.register('pops', [], (function (exports) {
|
|
|
1224
1224
|
if (element == null) {
|
|
1225
1225
|
return;
|
|
1226
1226
|
}
|
|
1227
|
+
let setStyleProperty = (propertyName, propertyValue) => {
|
|
1228
|
+
if (typeof propertyValue === "string" &&
|
|
1229
|
+
propertyValue.trim().endsWith("!important")) {
|
|
1230
|
+
propertyValue = propertyValue
|
|
1231
|
+
.trim()
|
|
1232
|
+
.replace(/!important$/gi, "")
|
|
1233
|
+
.trim();
|
|
1234
|
+
element.style.setProperty(propertyName, propertyValue, "important");
|
|
1235
|
+
}
|
|
1236
|
+
else {
|
|
1237
|
+
propertyValue = handlePixe(propertyName, propertyValue);
|
|
1238
|
+
element.style.setProperty(propertyName, propertyValue);
|
|
1239
|
+
}
|
|
1240
|
+
};
|
|
1227
1241
|
if (typeof property === "string") {
|
|
1228
1242
|
if (value == null) {
|
|
1229
1243
|
return getComputedStyle(element).getPropertyValue(property);
|
|
1230
1244
|
}
|
|
1231
1245
|
else {
|
|
1232
|
-
|
|
1233
|
-
element.style.setProperty(property, value, "important");
|
|
1234
|
-
}
|
|
1235
|
-
else {
|
|
1236
|
-
value = handlePixe(property, value);
|
|
1237
|
-
element.style.setProperty(property, value);
|
|
1238
|
-
}
|
|
1246
|
+
setStyleProperty(property, value);
|
|
1239
1247
|
}
|
|
1240
1248
|
}
|
|
1241
1249
|
else if (typeof property === "object") {
|
|
1242
1250
|
for (let prop in property) {
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
element.style.setProperty(prop, property[prop], "important");
|
|
1246
|
-
}
|
|
1247
|
-
else {
|
|
1248
|
-
property[prop] = handlePixe(prop, property[prop]);
|
|
1249
|
-
element.style.setProperty(prop, property[prop]);
|
|
1250
|
-
}
|
|
1251
|
+
let value = property[prop];
|
|
1252
|
+
setStyleProperty(prop, value);
|
|
1251
1253
|
}
|
|
1252
1254
|
}
|
|
1253
1255
|
}
|
|
@@ -1906,31 +1908,37 @@ System.register('pops', [], (function (exports) {
|
|
|
1906
1908
|
* @param maskElement
|
|
1907
1909
|
*/
|
|
1908
1910
|
hide(popsType, layerConfigList, guid, config, animElement, maskElement) {
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1911
|
+
return new Promise((resolve) => {
|
|
1912
|
+
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
1913
|
+
if (popsType === "drawer") {
|
|
1914
|
+
let drawerConfig = config;
|
|
1915
|
+
setTimeout(() => {
|
|
1916
|
+
maskElement.style.setProperty("display", "none");
|
|
1917
|
+
if (["top", "bottom"].includes(drawerConfig.direction)) {
|
|
1918
|
+
popsElement.style.setProperty("height", "0");
|
|
1919
|
+
}
|
|
1920
|
+
else if (["left", "right"].includes(drawerConfig.direction)) {
|
|
1921
|
+
popsElement.style.setProperty("width", "0");
|
|
1922
|
+
}
|
|
1923
|
+
else {
|
|
1924
|
+
console.error("未知direction：", drawerConfig.direction);
|
|
1925
|
+
}
|
|
1926
|
+
resolve();
|
|
1927
|
+
}, drawerConfig.closeDelay);
|
|
1928
|
+
}
|
|
1929
|
+
else {
|
|
1930
|
+
let findLayerIns = layerConfigList.find((layerConfigItem) => layerConfigItem.guid === guid);
|
|
1931
|
+
if (findLayerIns) {
|
|
1928
1932
|
/* 存在动画 */
|
|
1933
|
+
let layerConfigItem = findLayerIns;
|
|
1929
1934
|
layerConfigItem.animElement.style.width = "100%";
|
|
1930
1935
|
layerConfigItem.animElement.style.height = "100%";
|
|
1931
1936
|
layerConfigItem.animElement.style["animation-name"] =
|
|
1932
1937
|
layerConfigItem.animElement.getAttribute("anim") + "-reverse";
|
|
1933
1938
|
if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
|
|
1939
|
+
/**
|
|
1940
|
+
* 动画结束的回调
|
|
1941
|
+
*/
|
|
1934
1942
|
function animationendCallBack() {
|
|
1935
1943
|
layerConfigItem.animElement.style.display = "none";
|
|
1936
1944
|
if (layerConfigItem.maskElement) {
|
|
@@ -1939,6 +1947,7 @@ System.register('pops', [], (function (exports) {
|
|
|
1939
1947
|
popsDOMUtils.off(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
1940
1948
|
capture: true,
|
|
1941
1949
|
});
|
|
1950
|
+
resolve();
|
|
1942
1951
|
}
|
|
1943
1952
|
popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
1944
1953
|
capture: true,
|
|
@@ -1949,11 +1958,11 @@ System.register('pops', [], (function (exports) {
|
|
|
1949
1958
|
if (layerConfigItem.maskElement) {
|
|
1950
1959
|
layerConfigItem.maskElement.style.display = "none";
|
|
1951
1960
|
}
|
|
1961
|
+
resolve();
|
|
1952
1962
|
}
|
|
1953
|
-
return;
|
|
1954
1963
|
}
|
|
1955
|
-
}
|
|
1956
|
-
}
|
|
1964
|
+
}
|
|
1965
|
+
});
|
|
1957
1966
|
},
|
|
1958
1967
|
/**
|
|
1959
1968
|
* 显示
|
|
@@ -1965,27 +1974,30 @@ System.register('pops', [], (function (exports) {
|
|
|
1965
1974
|
* @param maskElement
|
|
1966
1975
|
*/
|
|
1967
1976
|
show(popsType, layerConfigList, guid, config, animElement, maskElement) {
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1977
|
+
return new Promise((resolve) => {
|
|
1978
|
+
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
1979
|
+
if (popsType === "drawer") {
|
|
1980
|
+
let drawerConfig = config;
|
|
1981
|
+
setTimeout(() => {
|
|
1982
|
+
popsDOMUtils.css(maskElement, "display", "");
|
|
1983
|
+
let direction = drawerConfig.direction;
|
|
1984
|
+
let size = drawerConfig.size.toString();
|
|
1985
|
+
if (["top", "bottom"].includes(direction)) {
|
|
1986
|
+
popsElement.style.setProperty("height", size);
|
|
1987
|
+
}
|
|
1988
|
+
else if (["left", "right"].includes(direction)) {
|
|
1989
|
+
popsElement.style.setProperty("width", size);
|
|
1990
|
+
}
|
|
1991
|
+
else {
|
|
1992
|
+
console.error("未知direction：", direction);
|
|
1993
|
+
}
|
|
1994
|
+
resolve();
|
|
1995
|
+
}, drawerConfig.openDelay);
|
|
1996
|
+
}
|
|
1997
|
+
else {
|
|
1998
|
+
let findLayerIns = layerConfigList.find((layerConfigItem) => layerConfigItem.guid === guid);
|
|
1999
|
+
if (findLayerIns) {
|
|
2000
|
+
let layerConfigItem = findLayerIns;
|
|
1989
2001
|
layerConfigItem.animElement.style.width = "";
|
|
1990
2002
|
layerConfigItem.animElement.style.height = "";
|
|
1991
2003
|
layerConfigItem.animElement.style["animation-name"] =
|
|
@@ -1993,14 +2005,18 @@ System.register('pops', [], (function (exports) {
|
|
|
1993
2005
|
.animElement.getAttribute("anim")
|
|
1994
2006
|
.replace("-reverse", "");
|
|
1995
2007
|
if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
}
|
|
2008
|
+
/**
|
|
2009
|
+
* 动画结束的回调
|
|
2010
|
+
*/
|
|
2000
2011
|
function animationendCallBack() {
|
|
2001
2012
|
popsDOMUtils.off(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2002
2013
|
capture: true,
|
|
2003
2014
|
});
|
|
2015
|
+
resolve();
|
|
2016
|
+
}
|
|
2017
|
+
layerConfigItem.animElement.style.display = "";
|
|
2018
|
+
if (layerConfigItem.maskElement) {
|
|
2019
|
+
layerConfigItem.maskElement.style.display = "";
|
|
2004
2020
|
}
|
|
2005
2021
|
popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
|
|
2006
2022
|
capture: true,
|
|
@@ -2011,11 +2027,11 @@ System.register('pops', [], (function (exports) {
|
|
|
2011
2027
|
if (layerConfigItem.maskElement) {
|
|
2012
2028
|
layerConfigItem.maskElement.style.display = "";
|
|
2013
2029
|
}
|
|
2030
|
+
resolve();
|
|
2014
2031
|
}
|
|
2015
2032
|
}
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
}
|
|
2033
|
+
}
|
|
2034
|
+
});
|
|
2019
2035
|
},
|
|
2020
2036
|
/**
|
|
2021
2037
|
* 关闭
|
|
@@ -2026,50 +2042,57 @@ System.register('pops', [], (function (exports) {
|
|
|
2026
2042
|
* @param animElement
|
|
2027
2043
|
*/
|
|
2028
2044
|
close(popsType, layerConfigList, guid, config, animElement) {
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
function
|
|
2036
|
-
|
|
2045
|
+
return new Promise((resolve) => {
|
|
2046
|
+
let popsElement = animElement.querySelector(".pops[type-value]");
|
|
2047
|
+
let drawerConfig = config;
|
|
2048
|
+
/**
|
|
2049
|
+
* 动画结束事件
|
|
2050
|
+
*/
|
|
2051
|
+
function transitionendEvent() {
|
|
2052
|
+
/**
|
|
2053
|
+
* 弹窗已关闭的回调
|
|
2054
|
+
*/
|
|
2055
|
+
function closeCallBack(event) {
|
|
2056
|
+
if (event.propertyName !== "transform") {
|
|
2057
|
+
return;
|
|
2058
|
+
}
|
|
2059
|
+
popsDOMUtils.off(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
|
|
2060
|
+
PopsInstanceUtils.removeInstance([layerConfigList], guid);
|
|
2061
|
+
resolve();
|
|
2062
|
+
}
|
|
2063
|
+
/* 监听过渡结束 */
|
|
2064
|
+
popsDOMUtils.on(popsElement, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
|
|
2065
|
+
let popsTransForm = getComputedStyle(popsElement).transform;
|
|
2066
|
+
if (popsTransForm !== "none") {
|
|
2067
|
+
popsDOMUtils.trigger(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, true);
|
|
2037
2068
|
return;
|
|
2038
2069
|
}
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
}
|
|
2055
|
-
else if (["left"].includes(drawerConfig.direction)) {
|
|
2056
|
-
popsElement.style.setProperty("transform", "translateX(-100%)");
|
|
2070
|
+
if (["top"].includes(drawerConfig.direction)) {
|
|
2071
|
+
popsElement.style.setProperty("transform", "translateY(-100%)");
|
|
2072
|
+
}
|
|
2073
|
+
else if (["bottom"].includes(drawerConfig.direction)) {
|
|
2074
|
+
popsElement.style.setProperty("transform", "translateY(100%)");
|
|
2075
|
+
}
|
|
2076
|
+
else if (["left"].includes(drawerConfig.direction)) {
|
|
2077
|
+
popsElement.style.setProperty("transform", "translateX(-100%)");
|
|
2078
|
+
}
|
|
2079
|
+
else if (["right"].includes(drawerConfig.direction)) {
|
|
2080
|
+
popsElement.style.setProperty("transform", "translateX(100%)");
|
|
2081
|
+
}
|
|
2082
|
+
else {
|
|
2083
|
+
console.error("未知direction：", drawerConfig.direction);
|
|
2084
|
+
}
|
|
2057
2085
|
}
|
|
2058
|
-
|
|
2059
|
-
|
|
2086
|
+
if (popsType === "drawer") {
|
|
2087
|
+
setTimeout(() => {
|
|
2088
|
+
transitionendEvent();
|
|
2089
|
+
}, drawerConfig.closeDelay);
|
|
2060
2090
|
}
|
|
2061
2091
|
else {
|
|
2062
|
-
|
|
2092
|
+
PopsInstanceUtils.removeInstance([layerConfigList], guid);
|
|
2093
|
+
resolve();
|
|
2063
2094
|
}
|
|
2064
|
-
}
|
|
2065
|
-
if (popsType === "drawer") {
|
|
2066
|
-
setTimeout(() => {
|
|
2067
|
-
transitionendEvent();
|
|
2068
|
-
}, drawerConfig.closeDelay);
|
|
2069
|
-
}
|
|
2070
|
-
else {
|
|
2071
|
-
PopsInstanceUtils.removeInstance([layerConfigList], guid);
|
|
2072
|
-
}
|
|
2095
|
+
});
|
|
2073
2096
|
},
|
|
2074
2097
|
/**
|
|
2075
2098
|
* 拖拽元素
|
|
@@ -2798,11 +2821,11 @@ System.register('pops', [], (function (exports) {
|
|
|
2798
2821
|
function originalRun() {
|
|
2799
2822
|
if (details.config.mask.clickEvent.toClose) {
|
|
2800
2823
|
/* 关闭 */
|
|
2801
|
-
PopsInstanceUtils.close(details.type, targetLayer, details.guid, details.config, details.animElement);
|
|
2824
|
+
return PopsInstanceUtils.close(details.type, targetLayer, details.guid, details.config, details.animElement);
|
|
2802
2825
|
}
|
|
2803
2826
|
else if (details.config.mask.clickEvent.toHide) {
|
|
2804
2827
|
/* 隐藏 */
|
|
2805
|
-
PopsInstanceUtils.hide(details.type, targetLayer, details.guid, details.config, details.animElement, result.maskElement);
|
|
2828
|
+
return PopsInstanceUtils.hide(details.type, targetLayer, details.guid, details.config, details.animElement, result.maskElement);
|
|
2806
2829
|
}
|
|
2807
2830
|
}
|
|
2808
2831
|
if (typeof details.config.mask.clickCallBack === "function") {
|
|
@@ -2981,13 +3004,13 @@ System.register('pops', [], (function (exports) {
|
|
|
2981
3004
|
mode: mode,
|
|
2982
3005
|
guid: guid,
|
|
2983
3006
|
close() {
|
|
2984
|
-
PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
|
|
3007
|
+
return PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
|
|
2985
3008
|
},
|
|
2986
3009
|
hide() {
|
|
2987
|
-
PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
|
|
3010
|
+
return PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
|
|
2988
3011
|
},
|
|
2989
3012
|
show() {
|
|
2990
|
-
PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
|
|
3013
|
+
return PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
|
|
2991
3014
|
},
|
|
2992
3015
|
};
|
|
2993
3016
|
},
|
|
@@ -3009,13 +3032,13 @@ System.register('pops', [], (function (exports) {
|
|
|
3009
3032
|
mode: mode,
|
|
3010
3033
|
guid: guid,
|
|
3011
3034
|
close() {
|
|
3012
|
-
PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
|
|
3035
|
+
return PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
|
|
3013
3036
|
},
|
|
3014
3037
|
hide() {
|
|
3015
|
-
PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
|
|
3038
|
+
return PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
|
|
3016
3039
|
},
|
|
3017
3040
|
show() {
|
|
3018
|
-
PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
|
|
3041
|
+
return PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
|
|
3019
3042
|
},
|
|
3020
3043
|
};
|
|
3021
3044
|
},
|
|
@@ -3764,6 +3787,9 @@ System.register('pops', [], (function (exports) {
|
|
|
3764
3787
|
* 弹窗的主元素，包括动画层
|
|
3765
3788
|
*/
|
|
3766
3789
|
let $anim = PopsElementHandler.parseElement(animHTML);
|
|
3790
|
+
// 遮罩层必须是跟随主内容
|
|
3791
|
+
// 即设置主内容position: relative，mask：position: absolute
|
|
3792
|
+
popsDOMUtils.css($anim, "position", "absolute !important");
|
|
3767
3793
|
let { popsElement: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
|
|
3768
3794
|
/**
|
|
3769
3795
|
* 遮罩层元素
|
|
@@ -3783,6 +3809,9 @@ System.register('pops', [], (function (exports) {
|
|
|
3783
3809
|
maskHTML: maskHTML,
|
|
3784
3810
|
});
|
|
3785
3811
|
$mask = _handleMask_.maskElement;
|
|
3812
|
+
// 遮罩层必须是跟随主内容
|
|
3813
|
+
// 即设置主内容position: relative，mask：position: absolute
|
|
3814
|
+
popsDOMUtils.css($mask, "position", "absolute !important");
|
|
3786
3815
|
elementList.push($mask);
|
|
3787
3816
|
}
|
|
3788
3817
|
let eventDetails = PopsHandler.handleLoadingEventDetails(guid, PopsType, $anim, $pops, $mask, config);
|
|
@@ -10057,7 +10086,7 @@ System.register('pops', [], (function (exports) {
|
|
|
10057
10086
|
/** 配置 */
|
|
10058
10087
|
config = {
|
|
10059
10088
|
/** 版本号 */
|
|
10060
|
-
version: "2025.5.
|
|
10089
|
+
version: "2025.5.12",
|
|
10061
10090
|
cssText: {
|
|
10062
10091
|
/** 主CSS */
|
|
10063
10092
|
index: indexCSS,
|