@whitesev/pops 1.8.8 → 1.9.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 +110 -74
- package/dist/index.amd.js.map +1 -1
- package/dist/index.cjs.js +110 -74
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +110 -74
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +110 -74
- package/dist/index.iife.js.map +1 -1
- package/dist/index.system.js +110 -74
- package/dist/index.system.js.map +1 -1
- package/dist/index.umd.js +110 -74
- package/dist/index.umd.js.map +1 -1
- package/dist/types/src/Pops.d.ts +4 -4
- package/dist/types/src/components/tooltip/index.d.ts +11 -11
- package/dist/types/src/components/tooltip/indexType.d.ts +6 -0
- package/dist/types/src/handler/PopsHandler.d.ts +3 -1
- package/dist/types/src/utils/PopsDOMUtils.d.ts +3 -3
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +11 -9
- package/package.json +1 -1
- package/src/Pops.ts +1 -1
- package/src/components/panel/PanelHandleContentDetails.ts +1 -1
- package/src/components/panel/index.ts +5 -5
- package/src/components/tooltip/config.ts +1 -1
- package/src/components/tooltip/index.css +6 -1
- package/src/components/tooltip/index.ts +48 -35
- package/src/components/tooltip/indexType.ts +6 -0
- package/src/handler/PopsHandler.ts +21 -16
- package/src/utils/PopsDOMUtils.ts +9 -5
- package/src/utils/PopsInstanceUtils.ts +44 -23
package/dist/index.amd.js
CHANGED
|
@@ -963,13 +963,17 @@ define((function () { 'use strict';
|
|
|
963
963
|
}
|
|
964
964
|
/**
|
|
965
965
|
* 实现jQuery中的$().offset();
|
|
966
|
-
* @param
|
|
967
|
-
* @
|
|
966
|
+
* @param element
|
|
967
|
+
* @param calcScroll 计算滚动距离
|
|
968
968
|
*/
|
|
969
|
-
offset(element) {
|
|
969
|
+
offset(element, calcScroll = true) {
|
|
970
970
|
let rect = element.getBoundingClientRect();
|
|
971
971
|
let win = element.ownerDocument.defaultView;
|
|
972
|
-
let resultRect = new DOMRect(
|
|
972
|
+
let resultRect = new DOMRect(calcScroll
|
|
973
|
+
? parseFloat((rect.left + (win?.pageXOffset || 0)).toString())
|
|
974
|
+
: rect.left, calcScroll
|
|
975
|
+
? parseFloat((rect.top + (win?.pageYOffset || 0)).toString())
|
|
976
|
+
: rect.top, rect.width, rect.height);
|
|
973
977
|
return resultRect;
|
|
974
978
|
}
|
|
975
979
|
width(element, isShow = false, parent) {
|
|
@@ -1662,6 +1666,8 @@ define((function () { 'use strict';
|
|
|
1662
1666
|
/**
|
|
1663
1667
|
* 获取页面中最大的z-index的元素信息
|
|
1664
1668
|
* @param deviation 获取最大的z-index值的偏移，默认是+1
|
|
1669
|
+
* @param node 进行判断的元素，默认是document
|
|
1670
|
+
* @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
|
|
1665
1671
|
* @example
|
|
1666
1672
|
* Utils.getMaxZIndexNodeInfo();
|
|
1667
1673
|
* > {
|
|
@@ -1669,11 +1675,11 @@ define((function () { 'use strict';
|
|
|
1669
1675
|
* zIndex: 1001
|
|
1670
1676
|
* }
|
|
1671
1677
|
**/
|
|
1672
|
-
getMaxZIndexNodeInfo(deviation = 1) {
|
|
1678
|
+
getMaxZIndexNodeInfo(deviation = 1, target = PopsCore.document, ignoreCallBack) {
|
|
1673
1679
|
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
1674
|
-
// 最大值2147483647
|
|
1675
|
-
const maxZIndex = Math.pow(2, 31) - 1;
|
|
1676
|
-
// 比较值2000000000
|
|
1680
|
+
// 最大值 2147483647
|
|
1681
|
+
// const maxZIndex = Math.pow(2, 31) - 1;
|
|
1682
|
+
// 比较值 2000000000
|
|
1677
1683
|
const maxZIndexCompare = 2 * Math.pow(10, 9);
|
|
1678
1684
|
// 当前页面最大的z-index
|
|
1679
1685
|
let zIndex = 0;
|
|
@@ -1693,6 +1699,12 @@ define((function () { 'use strict';
|
|
|
1693
1699
|
* @param $ele
|
|
1694
1700
|
*/
|
|
1695
1701
|
function queryMaxZIndex($ele) {
|
|
1702
|
+
if (typeof ignoreCallBack === "function") {
|
|
1703
|
+
let ignoreResult = ignoreCallBack($ele);
|
|
1704
|
+
if (typeof ignoreResult === "boolean" && !ignoreResult) {
|
|
1705
|
+
return;
|
|
1706
|
+
}
|
|
1707
|
+
}
|
|
1696
1708
|
/** 元素的样式 */
|
|
1697
1709
|
const nodeStyle = PopsCore.window.getComputedStyle($ele);
|
|
1698
1710
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
@@ -1713,48 +1725,48 @@ define((function () { 'use strict';
|
|
|
1713
1725
|
}
|
|
1714
1726
|
}
|
|
1715
1727
|
}
|
|
1716
|
-
|
|
1728
|
+
target.querySelectorAll("*").forEach(($ele, index) => {
|
|
1717
1729
|
queryMaxZIndex($ele);
|
|
1718
1730
|
});
|
|
1719
1731
|
zIndex += deviation;
|
|
1720
1732
|
if (zIndex >= maxZIndexCompare) {
|
|
1721
1733
|
// 最好不要超过最大值
|
|
1722
|
-
zIndex =
|
|
1734
|
+
zIndex = maxZIndexCompare;
|
|
1723
1735
|
}
|
|
1724
1736
|
return {
|
|
1725
1737
|
node: maxZIndexNode,
|
|
1726
1738
|
zIndex: zIndex,
|
|
1727
1739
|
};
|
|
1728
1740
|
},
|
|
1729
|
-
/**
|
|
1730
|
-
* 获取页面中最大的z-index
|
|
1731
|
-
* @param deviation 获取最大的z-index值的偏移，默认是+1
|
|
1732
|
-
* @example
|
|
1733
|
-
* Utils.getMaxZIndex();
|
|
1734
|
-
* > 1001
|
|
1735
|
-
**/
|
|
1736
|
-
getMaxZIndex(deviation = 1) {
|
|
1737
|
-
return this.getMaxZIndexNodeInfo(deviation).zIndex;
|
|
1738
|
-
},
|
|
1739
1741
|
/**
|
|
1740
1742
|
* 获取pops所有弹窗中的最大的z-index
|
|
1741
1743
|
* @param deviation
|
|
1742
1744
|
*/
|
|
1743
1745
|
getPopsMaxZIndex(deviation = 1) {
|
|
1744
1746
|
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
1745
|
-
// 最大值2147483647
|
|
1746
|
-
|
|
1747
|
+
// 最大值 2147483647
|
|
1748
|
+
// 最大值 2147483647
|
|
1749
|
+
// const maxZIndex = Math.pow(2, 31) - 1;
|
|
1750
|
+
// 比较值 2000000000
|
|
1751
|
+
const maxZIndexCompare = 2 * Math.pow(10, 9);
|
|
1747
1752
|
// 当前页面最大的z-index
|
|
1748
1753
|
let zIndex = 0;
|
|
1749
1754
|
// 当前的最大z-index的元素，调试使用
|
|
1750
1755
|
let maxZIndexNode = null;
|
|
1756
|
+
/**
|
|
1757
|
+
* 元素是否可见
|
|
1758
|
+
* @param $css
|
|
1759
|
+
*/
|
|
1760
|
+
function isVisibleNode($css) {
|
|
1761
|
+
return $css.position !== "static" && $css.display !== "none";
|
|
1762
|
+
}
|
|
1751
1763
|
Object.keys(pops.config.layer).forEach((layerName) => {
|
|
1752
1764
|
let layerList = pops.config.layer[layerName];
|
|
1753
1765
|
for (let index = 0; index < layerList.length; index++) {
|
|
1754
1766
|
const layer = layerList[index];
|
|
1755
1767
|
let nodeStyle = window.getComputedStyle(layer.animElement);
|
|
1756
1768
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
1757
|
-
if (nodeStyle
|
|
1769
|
+
if (isVisibleNode(nodeStyle)) {
|
|
1758
1770
|
let nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
1759
1771
|
if (!isNaN(nodeZIndex)) {
|
|
1760
1772
|
if (nodeZIndex > zIndex) {
|
|
@@ -1766,14 +1778,22 @@ define((function () { 'use strict';
|
|
|
1766
1778
|
}
|
|
1767
1779
|
});
|
|
1768
1780
|
zIndex += deviation;
|
|
1769
|
-
// 用于比较的值2000000000，大于该值就取该值
|
|
1770
|
-
let maxZIndexCompare = 2 * Math.pow(10, 9);
|
|
1771
1781
|
if (zIndex >= maxZIndexCompare) {
|
|
1772
1782
|
// 最好不要超过最大值
|
|
1773
|
-
zIndex =
|
|
1783
|
+
zIndex = maxZIndexCompare;
|
|
1774
1784
|
}
|
|
1775
1785
|
return { zIndex: zIndex, animElement: maxZIndexNode };
|
|
1776
1786
|
},
|
|
1787
|
+
/**
|
|
1788
|
+
* 获取页面中最大的z-index
|
|
1789
|
+
* @param deviation 获取最大的z-index值的偏移，默认是+1
|
|
1790
|
+
* @example
|
|
1791
|
+
* Utils.getMaxZIndex();
|
|
1792
|
+
* > 1001
|
|
1793
|
+
**/
|
|
1794
|
+
getMaxZIndex(deviation = 1) {
|
|
1795
|
+
return this.getMaxZIndexNodeInfo(deviation).zIndex;
|
|
1796
|
+
},
|
|
1777
1797
|
/**
|
|
1778
1798
|
* 获取CSS Rule
|
|
1779
1799
|
* @param sheet
|
|
@@ -2280,7 +2300,7 @@ define((function () { 'use strict';
|
|
|
2280
2300
|
|
|
2281
2301
|
var iframeCSS = ".pops[type-value=\"iframe\"] {\r\n\t--container-title-height: 55px;\r\n\ttransition: width 0.35s ease, height 0.35s ease;\r\n}\r\n.pops[type-value] .pops-iframe-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title {\r\n\twidth: calc(100% - 0px);\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content {\r\n\twidth: 100%;\r\n\t/*height: calc(100% - var(--container-title-height));*/\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: #333;\r\n\ttext-indent: 15px;\r\n}\r\n.pops-loading {\r\n\tposition: absolute;\r\n\ttop: 40px;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tz-index: 5;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-loading:before {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\tz-index: 3;\r\n\tdisplay: block;\r\n\tmargin: -20px 0 0 -20px;\r\n\tpadding: 20px;\r\n\tborder: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\r\n\tborder-radius: 50%;\r\n\tcontent: \"\";\r\n\tborder-top-color: transparent;\r\n\tanimation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\r\n\tbottom: 0;\r\n\tmax-width: 200px;\r\n\tmax-height: 53px;\r\n\tposition: unset;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"]\r\n\t.pops-header-control[type=\"min\"] {\r\n\tdisplay: none;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\r\n\ttop: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\r\n\tleft: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\r\n\ttransform: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\r\n\ttransition: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\r\n\twidth: 100% !important;\r\n\theight: 100% !important;\r\n}\r\n.pops[type-value=\"iframe\"] iframe[pops] {\r\n\twidth: calc(100% - 4px);\r\n\theight: calc(100% - 4px);\r\n\tborder: 0;\r\n}\r\n.pops-iframe-content-global-loading {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tz-index: 999999;\r\n\twidth: 0;\r\n\theight: 4px;\r\n\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\tanimation: iframeLoadingChange 2s forwards;\r\n}\r\n\r\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\r\n\tposition: unset;\r\n}\r\n";
|
|
2282
2302
|
|
|
2283
|
-
var tooltipCSS = ".pops-tip {\r\n\t--tooltip-color: #4e4e4e;\r\n\t--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-bd-radius: 2px;\r\n\t--tooltip-font-size: 14px;\r\n\t--tooltip-padding-top: 13px;\r\n\t--tooltip-padding-right: 13px;\r\n\t--tooltip-padding-bottom: 13px;\r\n\t--tooltip-padding-left: 13px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(78, 78, 78);\r\n\t--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-arrow--after-width: 12px;\r\n\t--tooltip-arrow--after-height: 12px;\r\n\r\n\
|
|
2303
|
+
var tooltipCSS = ".pops-tip {\r\n\t--tooltip-color: #4e4e4e;\r\n\t--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-bd-radius: 2px;\r\n\t--tooltip-font-size: 14px;\r\n\t--tooltip-padding-top: 13px;\r\n\t--tooltip-padding-right: 13px;\r\n\t--tooltip-padding-bottom: 13px;\r\n\t--tooltip-padding-left: 13px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(78, 78, 78);\r\n\t--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-arrow--after-width: 12px;\r\n\t--tooltip-arrow--after-height: 12px;\r\n\r\n\tpadding: var(--tooltip-padding-top) var(--tooltip-padding-right)\r\n\t\tvar(--tooltip-padding-bottom) var(--tooltip-padding-left);\r\n\tmax-width: 400px;\r\n\tmax-height: 300px;\r\n\tborder-radius: var(--tooltip-bd-radius);\r\n\tbackground-color: var(--tooltip-bg-color);\r\n\tbox-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);\r\n\tcolor: var(--tooltip-color);\r\n\tfont-size: var(--tooltip-font-size);\r\n}\r\n.pops-tip[data-position=\"absolute\"] {\r\n\tposition: absolute;\r\n}\r\n.pops-tip[data-position=\"fixed\"] {\r\n\tposition: fixed;\r\n}\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n\t--tooltip-bg-opacity: 1;\r\n\t--tooltip-color: rgb(255, 255, 255);\r\n\t--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-bd-radius: 6px;\r\n\t--tooltip-padding-top: 6px;\r\n\t--tooltip-padding-right: 8px;\r\n\t--tooltip-padding-bottom: 6px;\r\n\t--tooltip-padding-left: 8px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(255, 255, 255);\r\n\t--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-arrow--after-width: 8px;\r\n\t--tooltip-arrow--after-height: 8px;\r\n}\r\n.pops-tip .pops-tip-arrow {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tcolor: var(--tooltip-arrow--after-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\r\n\ttop: 50%;\r\n\tleft: -12.5px;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 100%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\r\n\ttop: 50%;\r\n\tright: -12.5px;\r\n\tleft: auto;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\r\n\ttop: -12.5px;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n\t-webkit-animation-duration: 0.25s;\r\n\tanimation-duration: 0.25s;\r\n\t-webkit-animation-fill-mode: forwards;\r\n\tanimation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion=\"fadeOutRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutRight;\r\n\tanimation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion=\"fadeInTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInTop;\r\n\tanimation-name: pops-motion-fadeInTop;\r\n\tanimation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion=\"fadeOutTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutTop;\r\n\tanimation-name: pops-motion-fadeOutTop;\r\n\tanimation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion=\"fadeInBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInBottom;\r\n\tanimation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeOutBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutBottom;\r\n\tanimation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeInLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInLeft;\r\n\tanimation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeOutLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutLeft;\r\n\tanimation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeInRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInRight;\r\n\tanimation-name: pops-motion-fadeInRight;\r\n}\r\n";
|
|
2284
2304
|
|
|
2285
2305
|
var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n\tposition: fixed;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tbox-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n\t\t0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n\toverflow: hidden;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops[type-value] .pops-drawer-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value] .pops-drawer-title p[pops] {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n\r\n.pops-drawer-content {\r\n\tflex: 1;\r\n\toverflow: auto;\r\n}\r\n.pops[type-value=\"drawer\"] .pops-drawer-btn {\r\n\tpadding-top: 10px;\r\n\tpadding-bottom: 10px;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n";
|
|
2286
2306
|
|
|
@@ -2757,6 +2777,8 @@ define((function () { 'use strict';
|
|
|
2757
2777
|
},
|
|
2758
2778
|
/**
|
|
2759
2779
|
* 处理遮罩层
|
|
2780
|
+
*
|
|
2781
|
+
* + 设置遮罩层的点击事件
|
|
2760
2782
|
* @param details 传递的配置
|
|
2761
2783
|
*/
|
|
2762
2784
|
handleMask(details = {}) {
|
|
@@ -2790,22 +2812,29 @@ define((function () { 'use strict';
|
|
|
2790
2812
|
}
|
|
2791
2813
|
return false;
|
|
2792
2814
|
}
|
|
2793
|
-
|
|
2794
|
-
return Boolean(element?.localName?.toLowerCase() === "div" &&
|
|
2795
|
-
element.className &&
|
|
2796
|
-
element.className === "pops-anim" &&
|
|
2797
|
-
element.hasAttribute("anim"));
|
|
2798
|
-
}
|
|
2815
|
+
// 判断是否启用了遮罩层点击动作
|
|
2799
2816
|
if (details.config.mask.clickEvent.toClose ||
|
|
2800
2817
|
details.config.mask.clickEvent.toHide) {
|
|
2818
|
+
/**
|
|
2819
|
+
* 判断点击的元素是否是动画层的元素
|
|
2820
|
+
* @param element
|
|
2821
|
+
* @returns
|
|
2822
|
+
*/
|
|
2823
|
+
function isAnimElement(element) {
|
|
2824
|
+
return Boolean(element?.localName?.toLowerCase() === "div" &&
|
|
2825
|
+
element.className &&
|
|
2826
|
+
element.className === "pops-anim" &&
|
|
2827
|
+
element.hasAttribute("anim"));
|
|
2828
|
+
}
|
|
2801
2829
|
/* 判断按下的元素是否是pops-anim */
|
|
2802
2830
|
popsDOMUtils.on(details.animElement, ["touchstart", "mousedown"], void 0, (event) => {
|
|
2803
|
-
|
|
2831
|
+
let $click = event.composedPath()[0];
|
|
2832
|
+
isMaskClick = isAnimElement($click);
|
|
2804
2833
|
});
|
|
2805
2834
|
/* 如果有动画层，在动画层上监听点击事件 */
|
|
2806
2835
|
popsDOMUtils.on(details.animElement, "click", void 0, (event) => {
|
|
2807
|
-
|
|
2808
|
-
|
|
2836
|
+
let $click = event.composedPath()[0];
|
|
2837
|
+
if (isAnimElement($click) && isMaskClick) {
|
|
2809
2838
|
return clickEvent(event);
|
|
2810
2839
|
}
|
|
2811
2840
|
});
|
|
@@ -2820,7 +2849,7 @@ define((function () { 'use strict';
|
|
|
2820
2849
|
},
|
|
2821
2850
|
/**
|
|
2822
2851
|
* 处理获取元素
|
|
2823
|
-
* @param
|
|
2852
|
+
* @param animElement
|
|
2824
2853
|
* @param type
|
|
2825
2854
|
*/
|
|
2826
2855
|
handleQueryElement(animElement, type) {
|
|
@@ -6629,6 +6658,7 @@ define((function () { 'use strict';
|
|
|
6629
6658
|
zIndex: () => {
|
|
6630
6659
|
return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
|
|
6631
6660
|
},
|
|
6661
|
+
isFixed: true,
|
|
6632
6662
|
className: "github-tooltip",
|
|
6633
6663
|
only: false,
|
|
6634
6664
|
eventOption: {
|
|
@@ -6648,7 +6678,6 @@ define((function () { 'use strict';
|
|
|
6648
6678
|
}
|
|
6649
6679
|
},
|
|
6650
6680
|
alwaysShow: false,
|
|
6651
|
-
// only: false,
|
|
6652
6681
|
position: "top",
|
|
6653
6682
|
arrowDistance: 10,
|
|
6654
6683
|
});
|
|
@@ -8219,25 +8248,25 @@ define((function () { 'use strict';
|
|
|
8219
8248
|
/**
|
|
8220
8249
|
* 已创建的元素列表
|
|
8221
8250
|
*/
|
|
8222
|
-
let
|
|
8251
|
+
let isCreatedElementList = [$anim];
|
|
8223
8252
|
/* 遮罩层元素 */
|
|
8224
8253
|
if (config.mask.enable) {
|
|
8225
|
-
let
|
|
8254
|
+
let { maskElement } = PopsHandler.handleMask({
|
|
8226
8255
|
type: PopsType,
|
|
8227
8256
|
guid: guid,
|
|
8228
8257
|
config: config,
|
|
8229
8258
|
animElement: $anim,
|
|
8230
8259
|
maskHTML: maskHTML,
|
|
8231
8260
|
});
|
|
8232
|
-
$mask =
|
|
8233
|
-
|
|
8261
|
+
$mask = maskElement;
|
|
8262
|
+
isCreatedElementList.push($mask);
|
|
8234
8263
|
}
|
|
8235
8264
|
/* 处理返回的配置 */
|
|
8236
8265
|
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, PopsType, $anim, $pops, $mask, config);
|
|
8237
8266
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
8238
8267
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
8239
8268
|
/* 创建到页面中 */
|
|
8240
|
-
popsDOMUtils.append($shadowRoot,
|
|
8269
|
+
popsDOMUtils.append($shadowRoot, isCreatedElementList);
|
|
8241
8270
|
if (typeof config.beforeAppendToPageCallBack === "function") {
|
|
8242
8271
|
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
|
|
8243
8272
|
}
|
|
@@ -9428,6 +9457,7 @@ define((function () { 'use strict';
|
|
|
9428
9457
|
content: "默认文字",
|
|
9429
9458
|
position: "top",
|
|
9430
9459
|
className: "",
|
|
9460
|
+
isFixed: false,
|
|
9431
9461
|
alwaysShow: false,
|
|
9432
9462
|
triggerShowEventName: "mouseenter touchstart",
|
|
9433
9463
|
triggerCloseEventName: "mouseleave touchend",
|
|
@@ -9493,6 +9523,9 @@ define((function () { 'use strict';
|
|
|
9493
9523
|
<div class="pops-tip-content" style="text-align: center;"></div>
|
|
9494
9524
|
<div class="pops-tip-arrow"></div>
|
|
9495
9525
|
`,
|
|
9526
|
+
}, {
|
|
9527
|
+
"data-position": this.$data.config.isFixed ? "fixed" : "absolute",
|
|
9528
|
+
"data-guid": this.$data.guid,
|
|
9496
9529
|
});
|
|
9497
9530
|
/** 内容 */
|
|
9498
9531
|
let $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
|
|
@@ -9503,8 +9536,6 @@ define((function () { 'use strict';
|
|
|
9503
9536
|
this.$data.config.className.trim() !== "") {
|
|
9504
9537
|
popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
|
|
9505
9538
|
}
|
|
9506
|
-
// 添加attr
|
|
9507
|
-
$toolTipContainer.setAttribute("data-guid", this.$data.guid);
|
|
9508
9539
|
// 添加z-index
|
|
9509
9540
|
$toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
|
|
9510
9541
|
if (this.$data.config.style != null) {
|
|
@@ -9560,12 +9591,17 @@ define((function () { 'use strict';
|
|
|
9560
9591
|
* @param otherDistance 其它位置的偏移
|
|
9561
9592
|
*/
|
|
9562
9593
|
getPosition(targetElement, arrowDistance, otherDistance) {
|
|
9563
|
-
let
|
|
9564
|
-
|
|
9565
|
-
let
|
|
9566
|
-
//
|
|
9567
|
-
let
|
|
9568
|
-
//
|
|
9594
|
+
let offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
|
|
9595
|
+
// 目标 宽
|
|
9596
|
+
let targetElement_width = offsetInfo.width;
|
|
9597
|
+
// 目标 高
|
|
9598
|
+
let targetElement_height = offsetInfo.height;
|
|
9599
|
+
// 目标 顶部距离
|
|
9600
|
+
let targetElement_top = offsetInfo.top;
|
|
9601
|
+
// let targetElement_bottom = offsetInfo.bottom;
|
|
9602
|
+
// 目标 左边距离
|
|
9603
|
+
let targetElement_left = offsetInfo.left;
|
|
9604
|
+
// let targetElement_right = offsetInfo.right;
|
|
9569
9605
|
let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
|
|
9570
9606
|
let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
|
|
9571
9607
|
/* 目标元素的x轴的中间位置 */
|
|
@@ -9621,21 +9657,21 @@ define((function () { 'use strict';
|
|
|
9621
9657
|
*/
|
|
9622
9658
|
onEvent() {
|
|
9623
9659
|
// 监听动画结束事件
|
|
9624
|
-
this.
|
|
9660
|
+
this.onToolTipAnimationFinishEvent();
|
|
9625
9661
|
this.onShowEvent();
|
|
9626
9662
|
this.onCloseEvent();
|
|
9627
|
-
this.
|
|
9628
|
-
this.
|
|
9663
|
+
this.onToolTipMouseEnterEvent();
|
|
9664
|
+
this.onToolTipMouseLeaveEvent();
|
|
9629
9665
|
}
|
|
9630
9666
|
/**
|
|
9631
9667
|
* 取消事件绑定
|
|
9632
9668
|
*/
|
|
9633
9669
|
offEvent() {
|
|
9634
|
-
this.
|
|
9670
|
+
this.offToolTipAnimationFinishEvent();
|
|
9635
9671
|
this.offShowEvent();
|
|
9636
9672
|
this.offCloseEvent();
|
|
9637
|
-
this.
|
|
9638
|
-
this.
|
|
9673
|
+
this.offToolTipMouseEnterEvent();
|
|
9674
|
+
this.offToolTipMouseLeaveEvent();
|
|
9639
9675
|
}
|
|
9640
9676
|
/**
|
|
9641
9677
|
* 添加关闭的timeId
|
|
@@ -9791,7 +9827,7 @@ define((function () { 'use strict';
|
|
|
9791
9827
|
/**
|
|
9792
9828
|
* 动画结束事件
|
|
9793
9829
|
*/
|
|
9794
|
-
|
|
9830
|
+
toolTipAnimationFinishEvent() {
|
|
9795
9831
|
if (!this.$el.$toolTip) {
|
|
9796
9832
|
return;
|
|
9797
9833
|
}
|
|
@@ -9801,21 +9837,21 @@ define((function () { 'use strict';
|
|
|
9801
9837
|
this.destory();
|
|
9802
9838
|
}
|
|
9803
9839
|
/**
|
|
9804
|
-
*
|
|
9840
|
+
* 监听tooltip的动画结束
|
|
9805
9841
|
*/
|
|
9806
|
-
|
|
9807
|
-
popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.
|
|
9842
|
+
onToolTipAnimationFinishEvent() {
|
|
9843
|
+
popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
|
|
9808
9844
|
}
|
|
9809
9845
|
/**
|
|
9810
|
-
*
|
|
9846
|
+
* 取消tooltip监听动画结束
|
|
9811
9847
|
*/
|
|
9812
|
-
|
|
9813
|
-
popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.
|
|
9848
|
+
offToolTipAnimationFinishEvent() {
|
|
9849
|
+
popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
|
|
9814
9850
|
}
|
|
9815
9851
|
/**
|
|
9816
9852
|
* 鼠标|触摸进入事件
|
|
9817
9853
|
*/
|
|
9818
|
-
|
|
9854
|
+
toolTipMouseEnterEvent() {
|
|
9819
9855
|
this.$el.$toolTip.style.animationPlayState = "paused";
|
|
9820
9856
|
// if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
|
|
9821
9857
|
// toolTipElement.style.animationPlayState = "paused";
|
|
@@ -9824,34 +9860,34 @@ define((function () { 'use strict';
|
|
|
9824
9860
|
/**
|
|
9825
9861
|
* 监听鼠标|触摸事件
|
|
9826
9862
|
*/
|
|
9827
|
-
|
|
9863
|
+
onToolTipMouseEnterEvent() {
|
|
9828
9864
|
this.clearCloseTimeoutId("MouseEvent");
|
|
9829
9865
|
this.clearCloseTimeoutId("TouchEvent");
|
|
9830
|
-
popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.
|
|
9866
|
+
popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
|
|
9831
9867
|
}
|
|
9832
9868
|
/**
|
|
9833
9869
|
* 取消监听鼠标|触摸事件
|
|
9834
9870
|
*/
|
|
9835
|
-
|
|
9836
|
-
popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.
|
|
9871
|
+
offToolTipMouseEnterEvent() {
|
|
9872
|
+
popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
|
|
9837
9873
|
}
|
|
9838
9874
|
/**
|
|
9839
9875
|
* 鼠标|触摸离开事件
|
|
9840
9876
|
*/
|
|
9841
|
-
|
|
9877
|
+
toolTipMouseLeaveEvent() {
|
|
9842
9878
|
this.$el.$toolTip.style.animationPlayState = "running";
|
|
9843
9879
|
}
|
|
9844
9880
|
/**
|
|
9845
9881
|
* 监听鼠标|触摸离开事件
|
|
9846
9882
|
*/
|
|
9847
|
-
|
|
9848
|
-
popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.
|
|
9883
|
+
onToolTipMouseLeaveEvent() {
|
|
9884
|
+
popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
|
|
9849
9885
|
}
|
|
9850
9886
|
/**
|
|
9851
9887
|
* 取消监听鼠标|触摸离开事件
|
|
9852
9888
|
*/
|
|
9853
|
-
|
|
9854
|
-
popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.
|
|
9889
|
+
offToolTipMouseLeaveEvent() {
|
|
9890
|
+
popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
|
|
9855
9891
|
}
|
|
9856
9892
|
}
|
|
9857
9893
|
class PopsTooltip {
|