raise-common-lib 0.0.215 → 0.0.216
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/bundles/raise-common-lib.umd.js +5 -96
- package/bundles/raise-common-lib.umd.js.map +1 -1
- package/bundles/raise-common-lib.umd.min.js +1 -1
- package/bundles/raise-common-lib.umd.min.js.map +1 -1
- package/esm2015/lib/float-box/index.component.js +6 -97
- package/esm5/lib/float-box/index.component.js +6 -97
- package/fesm2015/raise-common-lib.js +5 -96
- package/fesm2015/raise-common-lib.js.map +1 -1
- package/fesm5/raise-common-lib.js +5 -96
- package/fesm5/raise-common-lib.js.map +1 -1
- package/lib/float-box/index.component.d.ts +0 -1
- package/package.json +1 -1
- package/raise-common-lib.metadata.json +1 -1
|
@@ -1643,57 +1643,10 @@
|
|
|
1643
1643
|
* @return {?}
|
|
1644
1644
|
*/
|
|
1645
1645
|
function () {
|
|
1646
|
-
var _a = this.rootElement.nativeElement.getBoundingClientRect(), y = _a.top, x = _a.left, width = _a.width, height = _a.height;
|
|
1647
|
-
// 临时显示内容以获取尺寸
|
|
1648
|
-
/** @type {?} */
|
|
1649
|
-
var wasVisible = this.contentElement.nativeElement.style.display !== "none";
|
|
1650
|
-
this.contentElement.nativeElement.style.visibility = "hidden";
|
|
1651
|
-
this.contentElement.nativeElement.style.display = "block";
|
|
1652
|
-
/** @type {?} */
|
|
1653
|
-
var contentRect = this.contentElement.nativeElement.getBoundingClientRect();
|
|
1654
|
-
/** @type {?} */
|
|
1655
|
-
var contentWidth = contentRect.width;
|
|
1656
|
-
/** @type {?} */
|
|
1657
|
-
var contentHeight = contentRect.height;
|
|
1658
|
-
// 获取视口尺寸
|
|
1659
|
-
/** @type {?} */
|
|
1660
|
-
var viewportWidth = window.innerWidth;
|
|
1661
|
-
/** @type {?} */
|
|
1662
|
-
var viewportHeight = window.innerHeight;
|
|
1663
|
-
/** @type {?} */
|
|
1664
|
-
var SAFE_MARGIN = 12;
|
|
1665
|
-
// 边界检测:计算最佳 placement
|
|
1666
|
-
/** @type {?} */
|
|
1667
|
-
var finalPlacement = this.placement;
|
|
1668
|
-
if (this.placement === "top" && y < contentHeight + SAFE_MARGIN) {
|
|
1669
|
-
if (viewportHeight - (y + height) >= contentHeight + SAFE_MARGIN) {
|
|
1670
|
-
finalPlacement = "bottom";
|
|
1671
|
-
}
|
|
1672
|
-
}
|
|
1673
|
-
else if (this.placement === "bottom" && viewportHeight - (y + height) < contentHeight + SAFE_MARGIN) {
|
|
1674
|
-
if (y >= contentHeight + SAFE_MARGIN) {
|
|
1675
|
-
finalPlacement = "top";
|
|
1676
|
-
}
|
|
1677
|
-
}
|
|
1678
|
-
else if (this.placement === "left" && x < contentWidth + SAFE_MARGIN) {
|
|
1679
|
-
if (viewportWidth - (x + width) >= contentWidth + SAFE_MARGIN) {
|
|
1680
|
-
finalPlacement = "right";
|
|
1681
|
-
}
|
|
1682
|
-
}
|
|
1683
|
-
else if (this.placement === "right" && viewportWidth - (x + width) < contentWidth + SAFE_MARGIN) {
|
|
1684
|
-
if (x >= contentWidth + SAFE_MARGIN) {
|
|
1685
|
-
finalPlacement = "left";
|
|
1686
|
-
}
|
|
1687
|
-
}
|
|
1688
|
-
// 保存调整后的 placement
|
|
1689
|
-
this.actualPlacement = finalPlacement;
|
|
1690
|
-
// 对于 fixed="no" 的情况,只更新 data-placement,让 CSS 处理
|
|
1691
1646
|
if (this.fixed === "no") {
|
|
1692
|
-
this.contentElement.nativeElement.style.visibility = "";
|
|
1693
|
-
this.contentElement.nativeElement.style.display = wasVisible ? "" : "none";
|
|
1694
1647
|
return;
|
|
1695
1648
|
}
|
|
1696
|
-
|
|
1649
|
+
var _a = this.rootElement.nativeElement.getBoundingClientRect(), y = _a.top, x = _a.left, width = _a.width, height = _a.height;
|
|
1697
1650
|
/** @type {?} */
|
|
1698
1651
|
var top = "0";
|
|
1699
1652
|
/** @type {?} */
|
|
@@ -1702,7 +1655,7 @@
|
|
|
1702
1655
|
var translateX = "0";
|
|
1703
1656
|
/** @type {?} */
|
|
1704
1657
|
var translateY = "0";
|
|
1705
|
-
switch (
|
|
1658
|
+
switch (this.placement + "_" + this.position) {
|
|
1706
1659
|
case "top_start":
|
|
1707
1660
|
top = y + "px";
|
|
1708
1661
|
left = x - 8 + "px";
|
|
@@ -1766,49 +1719,9 @@
|
|
|
1766
1719
|
translateX = "-100%";
|
|
1767
1720
|
break;
|
|
1768
1721
|
}
|
|
1769
|
-
// 计算实际渲染位置(考虑 transform)进行边界调整
|
|
1770
|
-
/** @type {?} */
|
|
1771
|
-
var actualLeft = parseFloat(left) || 0;
|
|
1772
|
-
/** @type {?} */
|
|
1773
|
-
var actualTop = parseFloat(top) || 0;
|
|
1774
|
-
if (translateX === "-50%") {
|
|
1775
|
-
actualLeft = actualLeft - contentWidth / 2;
|
|
1776
|
-
}
|
|
1777
|
-
else if (translateX === "-100%") {
|
|
1778
|
-
actualLeft = actualLeft - contentWidth;
|
|
1779
|
-
}
|
|
1780
|
-
if (translateY === "-50%") {
|
|
1781
|
-
actualTop = actualTop - contentHeight / 2;
|
|
1782
|
-
}
|
|
1783
|
-
else if (translateY === "-100%") {
|
|
1784
|
-
actualTop = actualTop - contentHeight;
|
|
1785
|
-
}
|
|
1786
|
-
// 水平边界调整
|
|
1787
|
-
if (finalPlacement === "top" || finalPlacement === "bottom") {
|
|
1788
|
-
if (actualLeft < SAFE_MARGIN) {
|
|
1789
|
-
left = (x + SAFE_MARGIN) + "px";
|
|
1790
|
-
translateX = "0";
|
|
1791
|
-
}
|
|
1792
|
-
else if (actualLeft + contentWidth > viewportWidth - SAFE_MARGIN) {
|
|
1793
|
-
left = (viewportWidth - contentWidth - SAFE_MARGIN) + "px";
|
|
1794
|
-
translateX = "0";
|
|
1795
|
-
}
|
|
1796
|
-
}
|
|
1797
|
-
// 垂直边界调整
|
|
1798
|
-
else {
|
|
1799
|
-
if (actualTop < SAFE_MARGIN) {
|
|
1800
|
-
top = (y + SAFE_MARGIN) + "px";
|
|
1801
|
-
translateY = "0";
|
|
1802
|
-
}
|
|
1803
|
-
else if (actualTop + contentHeight > viewportHeight - SAFE_MARGIN) {
|
|
1804
|
-
top = (viewportHeight - contentHeight - SAFE_MARGIN) + "px";
|
|
1805
|
-
translateY = "0";
|
|
1806
|
-
}
|
|
1807
|
-
}
|
|
1808
1722
|
this.contentElement.nativeElement.style.top = top;
|
|
1809
1723
|
this.contentElement.nativeElement.style.left = left;
|
|
1810
1724
|
this.contentElement.nativeElement.style.transform = "translate(" + translateX + ", " + translateY + ")";
|
|
1811
|
-
this.contentElement.nativeElement.style.visibility = "visible";
|
|
1812
1725
|
};
|
|
1813
1726
|
/**
|
|
1814
1727
|
* @return {?}
|
|
@@ -1832,15 +1745,13 @@
|
|
|
1832
1745
|
* @return {?}
|
|
1833
1746
|
*/
|
|
1834
1747
|
function () {
|
|
1835
|
-
if (this.trigger !== "hover") {
|
|
1748
|
+
if (this.fixed === "no" || this.trigger !== "hover") {
|
|
1836
1749
|
return;
|
|
1837
1750
|
}
|
|
1838
1751
|
this.opened = "yes";
|
|
1839
1752
|
this.openChange.emit(true);
|
|
1840
1753
|
this.setFixedContentPosition();
|
|
1841
|
-
|
|
1842
|
-
window.addEventListener("mousemove", this.onMoveOutside);
|
|
1843
|
-
}
|
|
1754
|
+
window.addEventListener("mousemove", this.onMoveOutside);
|
|
1844
1755
|
};
|
|
1845
1756
|
/**
|
|
1846
1757
|
* @return {?}
|
|
@@ -1863,7 +1774,7 @@
|
|
|
1863
1774
|
FloatBoxComponent.decorators = [
|
|
1864
1775
|
{ type: core.Component, args: [{
|
|
1865
1776
|
selector: "rs-float-box",
|
|
1866
|
-
template: "<div\r\n #element\r\n class=\"float-box-container\"\r\n [attr.data-trigger]=\"trigger\"\r\n (click)=\"onClickContainer()\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n>\r\n <ng-content></ng-content>\r\n <div\r\n #content\r\n class=\"float-box-content\"\r\n [attr.data-placement]=\"
|
|
1777
|
+
template: "<div\r\n #element\r\n class=\"float-box-container\"\r\n [attr.data-trigger]=\"trigger\"\r\n (click)=\"onClickContainer()\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n>\r\n <ng-content></ng-content>\r\n <div\r\n #content\r\n class=\"float-box-content\"\r\n [attr.data-placement]=\"placement\"\r\n [attr.data-position]=\"position\"\r\n [attr.data-animation]=\"animation\"\r\n [attr.data-fixed]=\"fixed\"\r\n [attr.data-opened]=\"opened\"\r\n >\r\n <div class=\"float-box-show-content\">\r\n <ng-content select=\"[float-content]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
1867
1778
|
styles: [".float-box-container{position:relative}.float-box-container[data-trigger=click]>.float-box-content[data-opened=no],.float-box-container[data-trigger=hover]:not(:hover)>.float-box-content{display:none}.float-box-container>.float-box-content[data-fixed=no]{padding:8px;--top:0;--left:0;--translate-x:0;--translate-y:0;position:absolute;top:var(--top);left:var(--left);transform:translate(var(--translate-x),var(--translate-y));z-index:10}.float-box-container>.float-box-content[data-fixed=no][data-animation=yes]{-webkit-animation:.25s ease-in-out;animation:.25s ease-in-out}.float-box-container>.float-box-content[data-fixed=no][data-placement=top]{--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-animation=true]{-webkit-animation-name:open-from-top;animation-name:open-from-top}.float-box-container>.float-box-content[data-fixed=no][data-placement=left]{--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=right]{--left:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom]{--top:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=start]{--left:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=center]{--left:50%;--translate-x:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=end]{--left:calc(100% + 8px);--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start]{--top:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center]{--top:50%;--translate-y:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end]{--top:calc(100% + 8px);--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end][data-animation=yes]{-webkit-animation-name:open-from-top;animation-name:open-from-top}@-webkit-keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@-webkit-keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}::ng-deep #kt-float-box-fixed-container{width:0;height:0;z-index:100000}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes]{padding:8px;position:fixed;z-index:10}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes][data-opened=no]{display:none}.float-box-show-content{padding:8px 8px 12px;border-radius:8px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25)}"]
|
|
1868
1779
|
}] }
|
|
1869
1780
|
];
|
|
@@ -1895,8 +1806,6 @@
|
|
|
1895
1806
|
/** @type {?} */
|
|
1896
1807
|
FloatBoxComponent.prototype._fixed;
|
|
1897
1808
|
/** @type {?} */
|
|
1898
|
-
FloatBoxComponent.prototype.actualPlacement;
|
|
1899
|
-
/** @type {?} */
|
|
1900
1809
|
FloatBoxComponent.prototype.openChange;
|
|
1901
1810
|
/** @type {?} */
|
|
1902
1811
|
FloatBoxComponent.prototype.rootElement;
|