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
|
@@ -1278,57 +1278,10 @@ var FloatBoxComponent = /** @class */ (function () {
|
|
|
1278
1278
|
* @return {?}
|
|
1279
1279
|
*/
|
|
1280
1280
|
function () {
|
|
1281
|
-
var _a = this.rootElement.nativeElement.getBoundingClientRect(), y = _a.top, x = _a.left, width = _a.width, height = _a.height;
|
|
1282
|
-
// 临时显示内容以获取尺寸
|
|
1283
|
-
/** @type {?} */
|
|
1284
|
-
var wasVisible = this.contentElement.nativeElement.style.display !== "none";
|
|
1285
|
-
this.contentElement.nativeElement.style.visibility = "hidden";
|
|
1286
|
-
this.contentElement.nativeElement.style.display = "block";
|
|
1287
|
-
/** @type {?} */
|
|
1288
|
-
var contentRect = this.contentElement.nativeElement.getBoundingClientRect();
|
|
1289
|
-
/** @type {?} */
|
|
1290
|
-
var contentWidth = contentRect.width;
|
|
1291
|
-
/** @type {?} */
|
|
1292
|
-
var contentHeight = contentRect.height;
|
|
1293
|
-
// 获取视口尺寸
|
|
1294
|
-
/** @type {?} */
|
|
1295
|
-
var viewportWidth = window.innerWidth;
|
|
1296
|
-
/** @type {?} */
|
|
1297
|
-
var viewportHeight = window.innerHeight;
|
|
1298
|
-
/** @type {?} */
|
|
1299
|
-
var SAFE_MARGIN = 12;
|
|
1300
|
-
// 边界检测:计算最佳 placement
|
|
1301
|
-
/** @type {?} */
|
|
1302
|
-
var finalPlacement = this.placement;
|
|
1303
|
-
if (this.placement === "top" && y < contentHeight + SAFE_MARGIN) {
|
|
1304
|
-
if (viewportHeight - (y + height) >= contentHeight + SAFE_MARGIN) {
|
|
1305
|
-
finalPlacement = "bottom";
|
|
1306
|
-
}
|
|
1307
|
-
}
|
|
1308
|
-
else if (this.placement === "bottom" && viewportHeight - (y + height) < contentHeight + SAFE_MARGIN) {
|
|
1309
|
-
if (y >= contentHeight + SAFE_MARGIN) {
|
|
1310
|
-
finalPlacement = "top";
|
|
1311
|
-
}
|
|
1312
|
-
}
|
|
1313
|
-
else if (this.placement === "left" && x < contentWidth + SAFE_MARGIN) {
|
|
1314
|
-
if (viewportWidth - (x + width) >= contentWidth + SAFE_MARGIN) {
|
|
1315
|
-
finalPlacement = "right";
|
|
1316
|
-
}
|
|
1317
|
-
}
|
|
1318
|
-
else if (this.placement === "right" && viewportWidth - (x + width) < contentWidth + SAFE_MARGIN) {
|
|
1319
|
-
if (x >= contentWidth + SAFE_MARGIN) {
|
|
1320
|
-
finalPlacement = "left";
|
|
1321
|
-
}
|
|
1322
|
-
}
|
|
1323
|
-
// 保存调整后的 placement
|
|
1324
|
-
this.actualPlacement = finalPlacement;
|
|
1325
|
-
// 对于 fixed="no" 的情况,只更新 data-placement,让 CSS 处理
|
|
1326
1281
|
if (this.fixed === "no") {
|
|
1327
|
-
this.contentElement.nativeElement.style.visibility = "";
|
|
1328
|
-
this.contentElement.nativeElement.style.display = wasVisible ? "" : "none";
|
|
1329
1282
|
return;
|
|
1330
1283
|
}
|
|
1331
|
-
|
|
1284
|
+
var _a = this.rootElement.nativeElement.getBoundingClientRect(), y = _a.top, x = _a.left, width = _a.width, height = _a.height;
|
|
1332
1285
|
/** @type {?} */
|
|
1333
1286
|
var top = "0";
|
|
1334
1287
|
/** @type {?} */
|
|
@@ -1337,7 +1290,7 @@ var FloatBoxComponent = /** @class */ (function () {
|
|
|
1337
1290
|
var translateX = "0";
|
|
1338
1291
|
/** @type {?} */
|
|
1339
1292
|
var translateY = "0";
|
|
1340
|
-
switch (
|
|
1293
|
+
switch (this.placement + "_" + this.position) {
|
|
1341
1294
|
case "top_start":
|
|
1342
1295
|
top = y + "px";
|
|
1343
1296
|
left = x - 8 + "px";
|
|
@@ -1401,49 +1354,9 @@ var FloatBoxComponent = /** @class */ (function () {
|
|
|
1401
1354
|
translateX = "-100%";
|
|
1402
1355
|
break;
|
|
1403
1356
|
}
|
|
1404
|
-
// 计算实际渲染位置(考虑 transform)进行边界调整
|
|
1405
|
-
/** @type {?} */
|
|
1406
|
-
var actualLeft = parseFloat(left) || 0;
|
|
1407
|
-
/** @type {?} */
|
|
1408
|
-
var actualTop = parseFloat(top) || 0;
|
|
1409
|
-
if (translateX === "-50%") {
|
|
1410
|
-
actualLeft = actualLeft - contentWidth / 2;
|
|
1411
|
-
}
|
|
1412
|
-
else if (translateX === "-100%") {
|
|
1413
|
-
actualLeft = actualLeft - contentWidth;
|
|
1414
|
-
}
|
|
1415
|
-
if (translateY === "-50%") {
|
|
1416
|
-
actualTop = actualTop - contentHeight / 2;
|
|
1417
|
-
}
|
|
1418
|
-
else if (translateY === "-100%") {
|
|
1419
|
-
actualTop = actualTop - contentHeight;
|
|
1420
|
-
}
|
|
1421
|
-
// 水平边界调整
|
|
1422
|
-
if (finalPlacement === "top" || finalPlacement === "bottom") {
|
|
1423
|
-
if (actualLeft < SAFE_MARGIN) {
|
|
1424
|
-
left = (x + SAFE_MARGIN) + "px";
|
|
1425
|
-
translateX = "0";
|
|
1426
|
-
}
|
|
1427
|
-
else if (actualLeft + contentWidth > viewportWidth - SAFE_MARGIN) {
|
|
1428
|
-
left = (viewportWidth - contentWidth - SAFE_MARGIN) + "px";
|
|
1429
|
-
translateX = "0";
|
|
1430
|
-
}
|
|
1431
|
-
}
|
|
1432
|
-
// 垂直边界调整
|
|
1433
|
-
else {
|
|
1434
|
-
if (actualTop < SAFE_MARGIN) {
|
|
1435
|
-
top = (y + SAFE_MARGIN) + "px";
|
|
1436
|
-
translateY = "0";
|
|
1437
|
-
}
|
|
1438
|
-
else if (actualTop + contentHeight > viewportHeight - SAFE_MARGIN) {
|
|
1439
|
-
top = (viewportHeight - contentHeight - SAFE_MARGIN) + "px";
|
|
1440
|
-
translateY = "0";
|
|
1441
|
-
}
|
|
1442
|
-
}
|
|
1443
1357
|
this.contentElement.nativeElement.style.top = top;
|
|
1444
1358
|
this.contentElement.nativeElement.style.left = left;
|
|
1445
1359
|
this.contentElement.nativeElement.style.transform = "translate(" + translateX + ", " + translateY + ")";
|
|
1446
|
-
this.contentElement.nativeElement.style.visibility = "visible";
|
|
1447
1360
|
};
|
|
1448
1361
|
/**
|
|
1449
1362
|
* @return {?}
|
|
@@ -1467,15 +1380,13 @@ var FloatBoxComponent = /** @class */ (function () {
|
|
|
1467
1380
|
* @return {?}
|
|
1468
1381
|
*/
|
|
1469
1382
|
function () {
|
|
1470
|
-
if (this.trigger !== "hover") {
|
|
1383
|
+
if (this.fixed === "no" || this.trigger !== "hover") {
|
|
1471
1384
|
return;
|
|
1472
1385
|
}
|
|
1473
1386
|
this.opened = "yes";
|
|
1474
1387
|
this.openChange.emit(true);
|
|
1475
1388
|
this.setFixedContentPosition();
|
|
1476
|
-
|
|
1477
|
-
window.addEventListener("mousemove", this.onMoveOutside);
|
|
1478
|
-
}
|
|
1389
|
+
window.addEventListener("mousemove", this.onMoveOutside);
|
|
1479
1390
|
};
|
|
1480
1391
|
/**
|
|
1481
1392
|
* @return {?}
|
|
@@ -1498,7 +1409,7 @@ var FloatBoxComponent = /** @class */ (function () {
|
|
|
1498
1409
|
FloatBoxComponent.decorators = [
|
|
1499
1410
|
{ type: Component, args: [{
|
|
1500
1411
|
selector: "rs-float-box",
|
|
1501
|
-
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]=\"
|
|
1412
|
+
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",
|
|
1502
1413
|
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)}"]
|
|
1503
1414
|
}] }
|
|
1504
1415
|
];
|
|
@@ -1530,8 +1441,6 @@ if (false) {
|
|
|
1530
1441
|
/** @type {?} */
|
|
1531
1442
|
FloatBoxComponent.prototype._fixed;
|
|
1532
1443
|
/** @type {?} */
|
|
1533
|
-
FloatBoxComponent.prototype.actualPlacement;
|
|
1534
|
-
/** @type {?} */
|
|
1535
1444
|
FloatBoxComponent.prototype.openChange;
|
|
1536
1445
|
/** @type {?} */
|
|
1537
1446
|
FloatBoxComponent.prototype.rootElement;
|