[故障] float指令弹出位置算法修正

Author: zcg1991

src/app/demo/float/pos-reviser/demo.component.html

@@ -44,3 +44,29 @@
     </ng-template>
 </span>
 
+<br><br>
+
+<div j-movable style="position: fixed" class="movable-box">
+    <span class="fa fa-bars" jigsaw-float jigsawFloatPosition="leftTop"
+          [jigsawFloatTarget]="jigsawFloatArea5" [jigsawFloatPosition]="pos.value"
+          style="margin: 40px 16px 40px 0">
+       鼠标挪过来
+        <ng-template #jigsawFloatArea5>
+            <div class="jigsawFloatArea" style="width: 300px; height: 150px;">
+                <p>
+                    请注意：<br>
+                    如果选中的弹出位置超出了当前的可视区域，<br>
+                    float指令会采用内置算法调整成其他最佳弹出位置。<br>
+                    请试试把这个块拖到屏幕的4个角落，<br>
+                    再触发下拉，查看位置调整的效果
+                </p>
+            </div>
+        </ng-template>
+    </span>
+    <span>切换位置</span>
+    <jigsaw-select #pos value="bottomRight"
+                   [data]="['bottomLeft', 'bottomRight', 'topLeft', 'topRight',
+                            'leftTop', 'leftBottom', 'rightTop', 'rightBottom']">
+    </jigsaw-select>
+</div>
+

src/app/demo/float/pos-reviser/demo.component.ts

@@ -16,7 +16,15 @@ import {FloatBasicDemo} from "../basic/demo.component";
             color: #fff;
             text-align: center;
         }
-        
+
+        .movable-box {
+            background-color: #b5d3dc;
+            display: inline-block;
+            border-radius: 4px;
+            padding: 12px;
+            cursor: move;
+        }
+
         p {
             margin: 10px;
         }

src/app/demo/float/pos-reviser/demo.module.ts

@@ -2,11 +2,14 @@ import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
 import {JigsawFloatModule} from "jigsaw/directive/float";
+import {JigsawMovableModule} from "jigsaw/directive/movable";
+import {JigsawSelectModule} from "jigsaw/component/select/select";
 import {FloatPosReviserDemo} from "./demo.component";
 
 @NgModule({
     imports: [
-        CommonModule, JigsawDemoDescriptionModule, JigsawFloatModule
+        CommonModule, JigsawDemoDescriptionModule, JigsawFloatModule, JigsawMovableModule,
+        JigsawSelectModule
     ],
     declarations: [FloatPosReviserDemo],
     exports: [FloatPosReviserDemo]

src/jigsaw/directive/float/float.ts

@@ -361,37 +361,51 @@ export class JigsawFloat extends AbstractJigsawViewBase implements OnDestroy {
     private _positionReviser(pos: PopupPositionValue, popupElement: HTMLElement): PopupPositionValue {
         const offsetWidth = this._elementRef.nativeElement.offsetWidth;
         const offsetHeight = this._elementRef.nativeElement.offsetHeight;
+        // 调整上下左右位置
         if (this.jigsawFloatPosition === 'topLeft' || this.jigsawFloatPosition === 'topRight' ||
             this.jigsawFloatPosition === 'bottomLeft' || this.jigsawFloatPosition === 'bottomRight') {
-            // 调整上下位置
             const upDelta = offsetHeight + popupElement.offsetHeight;
-            if (document.body.clientHeight <= upDelta) {
-                // 可视区域比弹出的UI高度还小就不要调整了
-                return pos;
-            }
-            const totalHeight = window.pageYOffset + document.body.clientHeight;
-            if (pos.top < 0 && pos.top + upDelta <= totalHeight) {
-                // 上位置不够且下方位置足够的时候才做调整
-                pos.top += upDelta;
-            } else if (pos.top + popupElement.offsetHeight >= totalHeight && pos.top >= upDelta) {
-                // 下方位置不够且上方位置足够的时候才做调整
-                pos.top -= upDelta;
-            }
+            pos = this._calPositionY(pos, upDelta, popupElement);
+            const leftDelta = popupElement.offsetWidth;
+            pos = this._calPositionX(pos, leftDelta, popupElement);
         } else {
-            // 调整左右位置
+            const upDelta = popupElement.offsetHeight;
+            pos = this._calPositionY(pos, upDelta, popupElement);
             const leftDelta = popupElement.offsetWidth + offsetWidth;
-            if (document.body.clientWidth <= leftDelta) {
-                // 可视区域比弹出的UI高度还小就不要调整了
-                return pos;
-            }
-            const totalWidth = window.pageXOffset + document.body.clientWidth;
-            if (pos.left < 0 && pos.left + leftDelta <= totalWidth) {
-                // 左边位置不够且右边位置足够的时候才做调整
-                pos.left += leftDelta;
-            } else if (pos.left + popupElement.offsetWidth >= totalWidth && pos.left >= leftDelta) {
-                // 右边位置不够且左边位置足够的时候才做调整
-                pos.left -= leftDelta;
-            }
+            pos = this._calPositionX(pos, leftDelta, popupElement);
+
+        }
+        return pos;
+    }
+
+    private _calPositionX(pos, leftDelta, popupElement) {
+        if (document.body.clientWidth <= leftDelta) {
+            // 可视区域比弹出的UI宽度还小就不要调整了
+            return pos;
+        }
+        const totalWidth = window.pageXOffset + document.body.clientWidth;
+        if (pos.left < 0 && pos.left + leftDelta + popupElement.offsetWidth <= totalWidth) {
+            // 左边位置不够且右边位置足够的时候才做调整
+            pos.left += leftDelta;
+        } else if (pos.left + popupElement.offsetWidth >= totalWidth && pos.left >= leftDelta) {
+            // 右边位置不够且左边位置足够的时候才做调整
+            pos.left -= leftDelta;
+        }
+        return pos;
+    }
+
+    private _calPositionY(pos, upDelta, popupElement) {
+        if (document.body.clientHeight <= upDelta) {
+            // 可视区域比弹出的UI高度还小就不要调整了
+            return pos;
+        }
+        const totalHeight = window.pageYOffset + document.body.clientHeight;
+        if (pos.top < 0 && pos.top + upDelta + popupElement.offsetHeight <= totalHeight) {
+            // 上位置不够且下方位置足够的时候才做调整
+            pos.top += upDelta;
+        } else if (pos.top + popupElement.offsetHeight >= totalHeight && pos.top >= upDelta) {
+            // 下方位置不够且上方位置足够的时候才做调整
+            pos.top -= upDelta;
         }
         return pos;
     }