@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.iife.js
CHANGED
|
@@ -964,13 +964,17 @@ var pops = (function () {
|
|
|
964
964
|
}
|
|
965
965
|
/**
|
|
966
966
|
* 实现jQuery中的$().offset();
|
|
967
|
-
* @param
|
|
968
|
-
* @
|
|
967
|
+
* @param element
|
|
968
|
+
* @param calcScroll 计算滚动距离
|
|
969
969
|
*/
|
|
970
|
-
offset(element) {
|
|
970
|
+
offset(element, calcScroll = true) {
|
|
971
971
|
let rect = element.getBoundingClientRect();
|
|
972
972
|
let win = element.ownerDocument.defaultView;
|
|
973
|
-
let resultRect = new DOMRect(
|
|
973
|
+
let resultRect = new DOMRect(calcScroll
|
|
974
|
+
? parseFloat((rect.left + (win?.pageXOffset || 0)).toString())
|
|
975
|
+
: rect.left, calcScroll
|
|
976
|
+
? parseFloat((rect.top + (win?.pageYOffset || 0)).toString())
|
|
977
|
+
: rect.top, rect.width, rect.height);
|
|
974
978
|
return resultRect;
|
|
975
979
|
}
|
|
976
980
|
width(element, isShow = false, parent) {
|
|
@@ -1663,6 +1667,8 @@ var pops = (function () {
|
|
|
1663
1667
|
/**
|
|
1664
1668
|
* 获取页面中最大的z-index的元素信息
|
|
1665
1669
|
* @param deviation 获取最大的z-index值的偏移，默认是+1
|
|
1670
|
+
* @param node 进行判断的元素，默认是document
|
|
1671
|
+
* @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
|
|
1666
1672
|
* @example
|
|
1667
1673
|
* Utils.getMaxZIndexNodeInfo();
|
|
1668
1674
|
* > {
|
|
@@ -1670,11 +1676,11 @@ var pops = (function () {
|
|
|
1670
1676
|
* zIndex: 1001
|
|
1671
1677
|
* }
|
|
1672
1678
|
**/
|
|
1673
|
-
getMaxZIndexNodeInfo(deviation = 1) {
|
|
1679
|
+
getMaxZIndexNodeInfo(deviation = 1, target = PopsCore.document, ignoreCallBack) {
|
|
1674
1680
|
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
1675
|
-
// 最大值2147483647
|
|
1676
|
-
const maxZIndex = Math.pow(2, 31) - 1;
|
|
1677
|
-
// 比较值2000000000
|
|
1681
|
+
// 最大值 2147483647
|
|
1682
|
+
// const maxZIndex = Math.pow(2, 31) - 1;
|
|
1683
|
+
// 比较值 2000000000
|
|
1678
1684
|
const maxZIndexCompare = 2 * Math.pow(10, 9);
|
|
1679
1685
|
// 当前页面最大的z-index
|
|
1680
1686
|
let zIndex = 0;
|
|
@@ -1694,6 +1700,12 @@ var pops = (function () {
|
|
|
1694
1700
|
* @param $ele
|
|
1695
1701
|
*/
|
|
1696
1702
|
function queryMaxZIndex($ele) {
|
|
1703
|
+
if (typeof ignoreCallBack === "function") {
|
|
1704
|
+
let ignoreResult = ignoreCallBack($ele);
|
|
1705
|
+
if (typeof ignoreResult === "boolean" && !ignoreResult) {
|
|
1706
|
+
return;
|
|
1707
|
+
}
|
|
1708
|
+
}
|
|
1697
1709
|
/** 元素的样式 */
|
|
1698
1710
|
const nodeStyle = PopsCore.window.getComputedStyle($ele);
|
|
1699
1711
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
@@ -1714,48 +1726,48 @@ var pops = (function () {
|
|
|
1714
1726
|
}
|
|
1715
1727
|
}
|
|
1716
1728
|
}
|
|
1717
|
-
|
|
1729
|
+
target.querySelectorAll("*").forEach(($ele, index) => {
|
|
1718
1730
|
queryMaxZIndex($ele);
|
|
1719
1731
|
});
|
|
1720
1732
|
zIndex += deviation;
|
|
1721
1733
|
if (zIndex >= maxZIndexCompare) {
|
|
1722
1734
|
// 最好不要超过最大值
|
|
1723
|
-
zIndex =
|
|
1735
|
+
zIndex = maxZIndexCompare;
|
|
1724
1736
|
}
|
|
1725
1737
|
return {
|
|
1726
1738
|
node: maxZIndexNode,
|
|
1727
1739
|
zIndex: zIndex,
|
|
1728
1740
|
};
|
|
1729
1741
|
},
|
|
1730
|
-
/**
|
|
1731
|
-
* 获取页面中最大的z-index
|
|
1732
|
-
* @param deviation 获取最大的z-index值的偏移，默认是+1
|
|
1733
|
-
* @example
|
|
1734
|
-
* Utils.getMaxZIndex();
|
|
1735
|
-
* > 1001
|
|
1736
|
-
**/
|
|
1737
|
-
getMaxZIndex(deviation = 1) {
|
|
1738
|
-
return this.getMaxZIndexNodeInfo(deviation).zIndex;
|
|
1739
|
-
},
|
|
1740
1742
|
/**
|
|
1741
1743
|
* 获取pops所有弹窗中的最大的z-index
|
|
1742
1744
|
* @param deviation
|
|
1743
1745
|
*/
|
|
1744
1746
|
getPopsMaxZIndex(deviation = 1) {
|
|
1745
1747
|
deviation = Number.isNaN(deviation) ? 1 : deviation;
|
|
1746
|
-
// 最大值2147483647
|
|
1747
|
-
|
|
1748
|
+
// 最大值 2147483647
|
|
1749
|
+
// 最大值 2147483647
|
|
1750
|
+
// const maxZIndex = Math.pow(2, 31) - 1;
|
|
1751
|
+
// 比较值 2000000000
|
|
1752
|
+
const maxZIndexCompare = 2 * Math.pow(10, 9);
|
|
1748
1753
|
// 当前页面最大的z-index
|
|
1749
1754
|
let zIndex = 0;
|
|
1750
1755
|
// 当前的最大z-index的元素，调试使用
|
|
1751
1756
|
let maxZIndexNode = null;
|
|
1757
|
+
/**
|
|
1758
|
+
* 元素是否可见
|
|
1759
|
+
* @param $css
|
|
1760
|
+
*/
|
|
1761
|
+
function isVisibleNode($css) {
|
|
1762
|
+
return $css.position !== "static" && $css.display !== "none";
|
|
1763
|
+
}
|
|
1752
1764
|
Object.keys(pops.config.layer).forEach((layerName) => {
|
|
1753
1765
|
let layerList = pops.config.layer[layerName];
|
|
1754
1766
|
for (let index = 0; index < layerList.length; index++) {
|
|
1755
1767
|
const layer = layerList[index];
|
|
1756
1768
|
let nodeStyle = window.getComputedStyle(layer.animElement);
|
|
1757
1769
|
/* 不对position为static和display为none的元素进行获取它们的z-index */
|
|
1758
|
-
if (nodeStyle
|
|
1770
|
+
if (isVisibleNode(nodeStyle)) {
|
|
1759
1771
|
let nodeZIndex = parseInt(nodeStyle.zIndex);
|
|
1760
1772
|
if (!isNaN(nodeZIndex)) {
|
|
1761
1773
|
if (nodeZIndex > zIndex) {
|
|
@@ -1767,14 +1779,22 @@ var pops = (function () {
|
|
|
1767
1779
|
}
|
|
1768
1780
|
});
|
|
1769
1781
|
zIndex += deviation;
|
|
1770
|
-
// 用于比较的值2000000000，大于该值就取该值
|
|
1771
|
-
let maxZIndexCompare = 2 * Math.pow(10, 9);
|
|
1772
1782
|
if (zIndex >= maxZIndexCompare) {
|
|
1773
1783
|
// 最好不要超过最大值
|
|
1774
|
-
zIndex =
|
|
1784
|
+
zIndex = maxZIndexCompare;
|
|
1775
1785
|
}
|
|
1776
1786
|
return { zIndex: zIndex, animElement: maxZIndexNode };
|
|
1777
1787
|
},
|
|
1788
|
+
/**
|
|
1789
|
+
* 获取页面中最大的z-index
|
|
1790
|
+
* @param deviation 获取最大的z-index值的偏移，默认是+1
|
|
1791
|
+
* @example
|
|
1792
|
+
* Utils.getMaxZIndex();
|
|
1793
|
+
* > 1001
|
|
1794
|
+
**/
|
|
1795
|
+
getMaxZIndex(deviation = 1) {
|
|
1796
|
+
return this.getMaxZIndexNodeInfo(deviation).zIndex;
|
|
1797
|
+
},
|
|
1778
1798
|
/**
|
|
1779
1799
|
* 获取CSS Rule
|
|
1780
1800
|
* @param sheet
|
|
@@ -2281,7 +2301,7 @@ var pops = (function () {
|
|
|
2281
2301
|
|
|
2282
2302
|
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";
|
|
2283
2303
|
|
|
2284
|
-
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\
|
|
2304
|
+
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";
|
|
2285
2305
|
|
|
2286
2306
|
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";
|
|
2287
2307
|
|
|
@@ -2758,6 +2778,8 @@ var pops = (function () {
|
|
|
2758
2778
|
},
|
|
2759
2779
|
/**
|
|
2760
2780
|
* 处理遮罩层
|
|
2781
|
+
*
|
|
2782
|
+
* + 设置遮罩层的点击事件
|
|
2761
2783
|
* @param details 传递的配置
|
|
2762
2784
|
*/
|
|
2763
2785
|
handleMask(details = {}) {
|
|
@@ -2791,22 +2813,29 @@ var pops = (function () {
|
|
|
2791
2813
|
}
|
|
2792
2814
|
return false;
|
|
2793
2815
|
}
|
|
2794
|
-
|
|
2795
|
-
return Boolean(element?.localName?.toLowerCase() === "div" &&
|
|
2796
|
-
element.className &&
|
|
2797
|
-
element.className === "pops-anim" &&
|
|
2798
|
-
element.hasAttribute("anim"));
|
|
2799
|
-
}
|
|
2816
|
+
// 判断是否启用了遮罩层点击动作
|
|
2800
2817
|
if (details.config.mask.clickEvent.toClose ||
|
|
2801
2818
|
details.config.mask.clickEvent.toHide) {
|
|
2819
|
+
/**
|
|
2820
|
+
* 判断点击的元素是否是动画层的元素
|
|
2821
|
+
* @param element
|
|
2822
|
+
* @returns
|
|
2823
|
+
*/
|
|
2824
|
+
function isAnimElement(element) {
|
|
2825
|
+
return Boolean(element?.localName?.toLowerCase() === "div" &&
|
|
2826
|
+
element.className &&
|
|
2827
|
+
element.className === "pops-anim" &&
|
|
2828
|
+
element.hasAttribute("anim"));
|
|
2829
|
+
}
|
|
2802
2830
|
/* 判断按下的元素是否是pops-anim */
|
|
2803
2831
|
popsDOMUtils.on(details.animElement, ["touchstart", "mousedown"], void 0, (event) => {
|
|
2804
|
-
|
|
2832
|
+
let $click = event.composedPath()[0];
|
|
2833
|
+
isMaskClick = isAnimElement($click);
|
|
2805
2834
|
});
|
|
2806
2835
|
/* 如果有动画层，在动画层上监听点击事件 */
|
|
2807
2836
|
popsDOMUtils.on(details.animElement, "click", void 0, (event) => {
|
|
2808
|
-
|
|
2809
|
-
|
|
2837
|
+
let $click = event.composedPath()[0];
|
|
2838
|
+
if (isAnimElement($click) && isMaskClick) {
|
|
2810
2839
|
return clickEvent(event);
|
|
2811
2840
|
}
|
|
2812
2841
|
});
|
|
@@ -2821,7 +2850,7 @@ var pops = (function () {
|
|
|
2821
2850
|
},
|
|
2822
2851
|
/**
|
|
2823
2852
|
* 处理获取元素
|
|
2824
|
-
* @param
|
|
2853
|
+
* @param animElement
|
|
2825
2854
|
* @param type
|
|
2826
2855
|
*/
|
|
2827
2856
|
handleQueryElement(animElement, type) {
|
|
@@ -6630,6 +6659,7 @@ var pops = (function () {
|
|
|
6630
6659
|
zIndex: () => {
|
|
6631
6660
|
return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
|
|
6632
6661
|
},
|
|
6662
|
+
isFixed: true,
|
|
6633
6663
|
className: "github-tooltip",
|
|
6634
6664
|
only: false,
|
|
6635
6665
|
eventOption: {
|
|
@@ -6649,7 +6679,6 @@ var pops = (function () {
|
|
|
6649
6679
|
}
|
|
6650
6680
|
},
|
|
6651
6681
|
alwaysShow: false,
|
|
6652
|
-
// only: false,
|
|
6653
6682
|
position: "top",
|
|
6654
6683
|
arrowDistance: 10,
|
|
6655
6684
|
});
|
|
@@ -8220,25 +8249,25 @@ var pops = (function () {
|
|
|
8220
8249
|
/**
|
|
8221
8250
|
* 已创建的元素列表
|
|
8222
8251
|
*/
|
|
8223
|
-
let
|
|
8252
|
+
let isCreatedElementList = [$anim];
|
|
8224
8253
|
/* 遮罩层元素 */
|
|
8225
8254
|
if (config.mask.enable) {
|
|
8226
|
-
let
|
|
8255
|
+
let { maskElement } = PopsHandler.handleMask({
|
|
8227
8256
|
type: PopsType,
|
|
8228
8257
|
guid: guid,
|
|
8229
8258
|
config: config,
|
|
8230
8259
|
animElement: $anim,
|
|
8231
8260
|
maskHTML: maskHTML,
|
|
8232
8261
|
});
|
|
8233
|
-
$mask =
|
|
8234
|
-
|
|
8262
|
+
$mask = maskElement;
|
|
8263
|
+
isCreatedElementList.push($mask);
|
|
8235
8264
|
}
|
|
8236
8265
|
/* 处理返回的配置 */
|
|
8237
8266
|
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, PopsType, $anim, $pops, $mask, config);
|
|
8238
8267
|
/* 为顶部右边的关闭按钮添加点击事件 */
|
|
8239
8268
|
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
|
|
8240
8269
|
/* 创建到页面中 */
|
|
8241
|
-
popsDOMUtils.append($shadowRoot,
|
|
8270
|
+
popsDOMUtils.append($shadowRoot, isCreatedElementList);
|
|
8242
8271
|
if (typeof config.beforeAppendToPageCallBack === "function") {
|
|
8243
8272
|
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
|
|
8244
8273
|
}
|
|
@@ -9429,6 +9458,7 @@ var pops = (function () {
|
|
|
9429
9458
|
content: "默认文字",
|
|
9430
9459
|
position: "top",
|
|
9431
9460
|
className: "",
|
|
9461
|
+
isFixed: false,
|
|
9432
9462
|
alwaysShow: false,
|
|
9433
9463
|
triggerShowEventName: "mouseenter touchstart",
|
|
9434
9464
|
triggerCloseEventName: "mouseleave touchend",
|
|
@@ -9494,6 +9524,9 @@ var pops = (function () {
|
|
|
9494
9524
|
<div class="pops-tip-content" style="text-align: center;"></div>
|
|
9495
9525
|
<div class="pops-tip-arrow"></div>
|
|
9496
9526
|
`,
|
|
9527
|
+
}, {
|
|
9528
|
+
"data-position": this.$data.config.isFixed ? "fixed" : "absolute",
|
|
9529
|
+
"data-guid": this.$data.guid,
|
|
9497
9530
|
});
|
|
9498
9531
|
/** 内容 */
|
|
9499
9532
|
let $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
|
|
@@ -9504,8 +9537,6 @@ var pops = (function () {
|
|
|
9504
9537
|
this.$data.config.className.trim() !== "") {
|
|
9505
9538
|
popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
|
|
9506
9539
|
}
|
|
9507
|
-
// 添加attr
|
|
9508
|
-
$toolTipContainer.setAttribute("data-guid", this.$data.guid);
|
|
9509
9540
|
// 添加z-index
|
|
9510
9541
|
$toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
|
|
9511
9542
|
if (this.$data.config.style != null) {
|
|
@@ -9561,12 +9592,17 @@ var pops = (function () {
|
|
|
9561
9592
|
* @param otherDistance 其它位置的偏移
|
|
9562
9593
|
*/
|
|
9563
9594
|
getPosition(targetElement, arrowDistance, otherDistance) {
|
|
9564
|
-
let
|
|
9565
|
-
|
|
9566
|
-
let
|
|
9567
|
-
//
|
|
9568
|
-
let
|
|
9569
|
-
//
|
|
9595
|
+
let offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
|
|
9596
|
+
// 目标 宽
|
|
9597
|
+
let targetElement_width = offsetInfo.width;
|
|
9598
|
+
// 目标 高
|
|
9599
|
+
let targetElement_height = offsetInfo.height;
|
|
9600
|
+
// 目标 顶部距离
|
|
9601
|
+
let targetElement_top = offsetInfo.top;
|
|
9602
|
+
// let targetElement_bottom = offsetInfo.bottom;
|
|
9603
|
+
// 目标 左边距离
|
|
9604
|
+
let targetElement_left = offsetInfo.left;
|
|
9605
|
+
// let targetElement_right = offsetInfo.right;
|
|
9570
9606
|
let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
|
|
9571
9607
|
let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
|
|
9572
9608
|
/* 目标元素的x轴的中间位置 */
|
|
@@ -9622,21 +9658,21 @@ var pops = (function () {
|
|
|
9622
9658
|
*/
|
|
9623
9659
|
onEvent() {
|
|
9624
9660
|
// 监听动画结束事件
|
|
9625
|
-
this.
|
|
9661
|
+
this.onToolTipAnimationFinishEvent();
|
|
9626
9662
|
this.onShowEvent();
|
|
9627
9663
|
this.onCloseEvent();
|
|
9628
|
-
this.
|
|
9629
|
-
this.
|
|
9664
|
+
this.onToolTipMouseEnterEvent();
|
|
9665
|
+
this.onToolTipMouseLeaveEvent();
|
|
9630
9666
|
}
|
|
9631
9667
|
/**
|
|
9632
9668
|
* 取消事件绑定
|
|
9633
9669
|
*/
|
|
9634
9670
|
offEvent() {
|
|
9635
|
-
this.
|
|
9671
|
+
this.offToolTipAnimationFinishEvent();
|
|
9636
9672
|
this.offShowEvent();
|
|
9637
9673
|
this.offCloseEvent();
|
|
9638
|
-
this.
|
|
9639
|
-
this.
|
|
9674
|
+
this.offToolTipMouseEnterEvent();
|
|
9675
|
+
this.offToolTipMouseLeaveEvent();
|
|
9640
9676
|
}
|
|
9641
9677
|
/**
|
|
9642
9678
|
* 添加关闭的timeId
|
|
@@ -9792,7 +9828,7 @@ var pops = (function () {
|
|
|
9792
9828
|
/**
|
|
9793
9829
|
* 动画结束事件
|
|
9794
9830
|
*/
|
|
9795
|
-
|
|
9831
|
+
toolTipAnimationFinishEvent() {
|
|
9796
9832
|
if (!this.$el.$toolTip) {
|
|
9797
9833
|
return;
|
|
9798
9834
|
}
|
|
@@ -9802,21 +9838,21 @@ var pops = (function () {
|
|
|
9802
9838
|
this.destory();
|
|
9803
9839
|
}
|
|
9804
9840
|
/**
|
|
9805
|
-
*
|
|
9841
|
+
* 监听tooltip的动画结束
|
|
9806
9842
|
*/
|
|
9807
|
-
|
|
9808
|
-
popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.
|
|
9843
|
+
onToolTipAnimationFinishEvent() {
|
|
9844
|
+
popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
|
|
9809
9845
|
}
|
|
9810
9846
|
/**
|
|
9811
|
-
*
|
|
9847
|
+
* 取消tooltip监听动画结束
|
|
9812
9848
|
*/
|
|
9813
|
-
|
|
9814
|
-
popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.
|
|
9849
|
+
offToolTipAnimationFinishEvent() {
|
|
9850
|
+
popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
|
|
9815
9851
|
}
|
|
9816
9852
|
/**
|
|
9817
9853
|
* 鼠标|触摸进入事件
|
|
9818
9854
|
*/
|
|
9819
|
-
|
|
9855
|
+
toolTipMouseEnterEvent() {
|
|
9820
9856
|
this.$el.$toolTip.style.animationPlayState = "paused";
|
|
9821
9857
|
// if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
|
|
9822
9858
|
// toolTipElement.style.animationPlayState = "paused";
|
|
@@ -9825,34 +9861,34 @@ var pops = (function () {
|
|
|
9825
9861
|
/**
|
|
9826
9862
|
* 监听鼠标|触摸事件
|
|
9827
9863
|
*/
|
|
9828
|
-
|
|
9864
|
+
onToolTipMouseEnterEvent() {
|
|
9829
9865
|
this.clearCloseTimeoutId("MouseEvent");
|
|
9830
9866
|
this.clearCloseTimeoutId("TouchEvent");
|
|
9831
|
-
popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.
|
|
9867
|
+
popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
|
|
9832
9868
|
}
|
|
9833
9869
|
/**
|
|
9834
9870
|
* 取消监听鼠标|触摸事件
|
|
9835
9871
|
*/
|
|
9836
|
-
|
|
9837
|
-
popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.
|
|
9872
|
+
offToolTipMouseEnterEvent() {
|
|
9873
|
+
popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
|
|
9838
9874
|
}
|
|
9839
9875
|
/**
|
|
9840
9876
|
* 鼠标|触摸离开事件
|
|
9841
9877
|
*/
|
|
9842
|
-
|
|
9878
|
+
toolTipMouseLeaveEvent() {
|
|
9843
9879
|
this.$el.$toolTip.style.animationPlayState = "running";
|
|
9844
9880
|
}
|
|
9845
9881
|
/**
|
|
9846
9882
|
* 监听鼠标|触摸离开事件
|
|
9847
9883
|
*/
|
|
9848
|
-
|
|
9849
|
-
popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.
|
|
9884
|
+
onToolTipMouseLeaveEvent() {
|
|
9885
|
+
popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
|
|
9850
9886
|
}
|
|
9851
9887
|
/**
|
|
9852
9888
|
* 取消监听鼠标|触摸离开事件
|
|
9853
9889
|
*/
|
|
9854
|
-
|
|
9855
|
-
popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.
|
|
9890
|
+
offToolTipMouseLeaveEvent() {
|
|
9891
|
+
popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
|
|
9856
9892
|
}
|
|
9857
9893
|
}
|
|
9858
9894
|
class PopsTooltip {
|