@singularsystems/neo-core 1.0.11 → 1.0.12

package/dist/Components/PositionHelper.d.ts

@@ -1,11 +1,39 @@
+import { IDisposable } from "../Misc";
+interface IRelativePosition {
+    left?: number;
+    right?: number;
+    /** Indicates that there is not enough space at the bottom of the anchor. Popup should be displayed on top. */
+    onTop: boolean;
+    anchorHeight: number;
+    popupHeight: number;
+}
 export default class PositionHelper {
     /**
      * Ensures that a popup element is positioned so that it remains in the bounds of the screen by left/right/top/bottom aligning it relative to the anchor element.
-     * @param trigger The element to which the popup is anchored
+     * @param anchor The element to which the popup is anchored
      * @param popup The element which pops up from the anchor.
      * @param fromBottom True if the popups bottom style property must be set. Set to false if there are buttons at the top of the popup and the popups height may change.
      * @param alignRight True if the popup must be aligned to the anchors right position.
      * @param hAlign Horizontal alignment of the popup edge relative to the anchor edge. Overrides alignRight
      */
     static checkScreenBounds(anchor: HTMLElement, popup: HTMLElement, fromBottom?: boolean, alignRight?: boolean, hAlign?: "left" | "center" | "right"): void;
+    /**
+     * Ensures that a popup element is positioned so that it remains in the bounds of the screen by left/right/top/bottom aligning it relative to the anchor element.
+     * @param anchor The element to which the popup is anchored
+     * @param popup The element which pops up from the anchor.
+     * @param alignRight True if the popup must be aligned to the anchors right position.
+     * @param hAlign Horizontal alignment of the popup edge relative to the anchor edge. Overrides alignRight
+     */
+    static getRelativePosition(anchor: HTMLElement, popup: HTMLElement, alignRight?: boolean, hAlign?: "left" | "center" | "right"): IRelativePosition;
+}
+/** Helper used to position elements with position: fixed relative to another element, while maintaining position on scroll. */
+export declare class FixedPositionHelper implements IDisposable {
+    private anchorElement;
+    private popupElement;
+    private topOffset;
+    private positionInfo;
+    constructor(anchorElement: HTMLElement, popupElement: HTMLElement, alignRight?: boolean, hAlign?: "left" | "center" | "right");
+    private positionPopup;
+    dispose(): void;
 }
+export {};

package/dist/Components/PositionHelper.js

@@ -3,7 +3,7 @@ var PositionHelper = /** @class */ (function () {
     }
     /**
      * Ensures that a popup element is positioned so that it remains in the bounds of the screen by left/right/top/bottom aligning it relative to the anchor element.
-     * @param trigger The element to which the popup is anchored
+     * @param anchor The element to which the popup is anchored
      * @param popup The element which pops up from the anchor.
      * @param fromBottom True if the popups bottom style property must be set. Set to false if there are buttons at the top of the popup and the popups height may change.
      * @param alignRight True if the popup must be aligned to the anchors right position.
@@ -12,23 +12,50 @@ var PositionHelper = /** @class */ (function () {
     PositionHelper.checkScreenBounds = function (anchor, popup, fromBottom, alignRight, hAlign) {
         if (fromBottom === void 0) { fromBottom = true; }
         if (alignRight === void 0) { alignRight = false; }
-        var popupHeight = popup.offsetHeight;
-        var containerScreenRect = anchor.getBoundingClientRect();
-        // Vertical
-        if (containerScreenRect.bottom + anchor.offsetHeight + popupHeight > window.innerHeight - 20 && containerScreenRect.top > popupHeight) {
+        var position = this.getRelativePosition(anchor, popup, alignRight, hAlign);
+        if (position.onTop) {
             if (fromBottom) {
                 popup.style.top = "auto";
                 popup.style.bottom = "100%";
             }
             else {
                 popup.style.bottom = "";
-                popup.style.top = -(popupHeight) + "px";
+                popup.style.top = -(position.popupHeight) + "px";
             }
         }
         else {
             popup.style.top = "100%";
             popup.style.bottom = "auto";
         }
+        if (position.right) {
+            popup.style.left = "auto";
+            popup.style.right = position.right + "px";
+        }
+        else if (position.left) {
+            popup.style.left = position.left + "px";
+            popup.style.right = "";
+        }
+    };
+    /**
+     * Ensures that a popup element is positioned so that it remains in the bounds of the screen by left/right/top/bottom aligning it relative to the anchor element.
+     * @param anchor The element to which the popup is anchored
+     * @param popup The element which pops up from the anchor.
+     * @param alignRight True if the popup must be aligned to the anchors right position.
+     * @param hAlign Horizontal alignment of the popup edge relative to the anchor edge. Overrides alignRight
+     */
+    PositionHelper.getRelativePosition = function (anchor, popup, alignRight, hAlign) {
+        if (alignRight === void 0) { alignRight = false; }
+        var popupHeight = popup.offsetHeight;
+        var containerScreenRect = anchor.getBoundingClientRect();
+        var position = {
+            popupHeight: popupHeight,
+            anchorHeight: anchor.offsetHeight,
+        };
+        // Vertical
+        if (containerScreenRect.bottom + anchor.offsetHeight + popupHeight > window.innerHeight - 20 && containerScreenRect.top > popupHeight) {
+            position.onTop = true;
+            position.popupHeight = popupHeight;
+        }
         // Horizontal
         var popupWidth = popup.offsetWidth;
         if (!hAlign) {
@@ -36,8 +63,7 @@ var PositionHelper = /** @class */ (function () {
         }
         var isRightAligned = hAlign === "right" && (containerScreenRect.right - popupWidth >= 0);
         if (isRightAligned) {
-            popup.style.left = "auto";
-            popup.style.right = "0";
+            position.right = 0;
         }
         else {
             var left = 0;
@@ -51,10 +77,46 @@ var PositionHelper = /** @class */ (function () {
             else if (leftCheck + popup.offsetWidth > window.innerWidth - 20) {
                 left -= (leftCheck + popup.offsetWidth) - (window.innerWidth - 20);
             }
-            popup.style.left = left + "px";
-            popup.style.right = "";
+            position.left = left;
         }
+        return position;
     };
     return PositionHelper;
 }());
 export default PositionHelper;
+/** Helper used to position elements with position: fixed relative to another element, while maintaining position on scroll. */
+var FixedPositionHelper = /** @class */ (function () {
+    function FixedPositionHelper(anchorElement, popupElement, alignRight, hAlign) {
+        if (alignRight === void 0) { alignRight = false; }
+        this.anchorElement = anchorElement;
+        this.popupElement = popupElement;
+        this.topOffset = 0;
+        this.positionInfo = PositionHelper.getRelativePosition(anchorElement, popupElement, alignRight, hAlign);
+        if (this.positionInfo.onTop) {
+            var style = window.getComputedStyle(popupElement);
+            var marginHeight = parseFloat(style.marginBottom) + parseFloat(style.marginTop);
+            this.topOffset = -(this.positionInfo.popupHeight + marginHeight);
+        }
+        else {
+            this.topOffset = this.positionInfo.anchorHeight;
+        }
+        window.addEventListener("scroll", this.positionPopup.bind(this), { capture: true });
+        this.positionPopup();
+    }
+    FixedPositionHelper.prototype.positionPopup = function () {
+        var rect = this.anchorElement.getBoundingClientRect();
+        this.popupElement.style.top = (rect.top + this.topOffset) + "px";
+        this.popupElement.style.right = "auto";
+        if (this.positionInfo.left !== undefined) {
+            this.popupElement.style.left = (rect.left + this.positionInfo.left) + "px";
+        }
+        else {
+            this.popupElement.style.left = (rect.right - this.popupElement.offsetWidth) + "px";
+        }
+    };
+    FixedPositionHelper.prototype.dispose = function () {
+        window.removeEventListener("scroll", this.positionPopup);
+    };
+    return FixedPositionHelper;
+}());
+export { FixedPositionHelper };

package/dist/Components/index.d.ts

@@ -17,6 +17,6 @@ export { INotification, INotificationOptions } from './Notifications/Notificatio
 export { INotificationStore } from './Notifications/NotificationStore';
 export { INotificationHelper } from './Notifications/INotificationHelper';
 export { ProgressState } from './TaskRunner/ProgressState';
-export { default as PositionHelper } from './PositionHelper';
+export { default as PositionHelper, FixedPositionHelper } from './PositionHelper';
 import * as Tooltip from './TooltipOptions';
 export { Tooltip };

package/dist/Components/index.js

@@ -8,6 +8,6 @@ export { default as FileManager } from './FileManager/FileManager';
 export { default as BoundFileManager } from './FileManager/BoundFileManager';
 export { FileUploadBatch } from './FileManager/FileUploadBatch';
 export { ProgressState } from './TaskRunner/ProgressState';
-export { default as PositionHelper } from './PositionHelper';
+export { default as PositionHelper, FixedPositionHelper } from './PositionHelper';
 import * as Tooltip from './TooltipOptions';
 export { Tooltip };

package/dist/Data/Paging/PageManager.d.ts

@@ -98,7 +98,7 @@ export declare class PageManager<TCriteria extends ValueObject, TModel extends I
     taskRunner: ITaskRunner;
     private hasInitialised;
     private pageRequest;
-    private _totalRecords;
+    private _totalExternalRecords;
     private currentData;
     private initialFetchState;
     private isInvalidated;

package/dist/Data/Paging/PageManager.js

@@ -13,7 +13,7 @@ var PageManager = /** @class */ (function (_super) {
         _this.modelType = modelType;
         _this.dataSource = dataSource;
         _this.hasInitialised = false;
-        _this._totalRecords = -1;
+        _this._totalExternalRecords = -1;
         _this.currentData = new List(_this.modelType);
         _this.initialFetchState = "none";
         _this.isInvalidated = false;
@@ -104,7 +104,7 @@ var PageManager = /** @class */ (function (_super) {
     });
     Object.defineProperty(PageManager.prototype, "totalRecords", {
         get: function () {
-            return this._totalRecords;
+            return this._totalExternalRecords + this.data.length;
         },
         enumerable: false,
         configurable: true
@@ -239,7 +239,7 @@ var PageManager = /** @class */ (function (_super) {
                 switch (_a.label) {
                     case 0:
                         if (totalRecords >= 0) {
-                            this._totalRecords = totalRecords;
+                            this._totalExternalRecords = totalRecords - pageRecords.length;
                         }
                         newData = List.fromJSArray(this.modelType, pageRecords, this.options.deserialiseOptions);
                         if (!this.options.afterFetch) return [3 /*break*/, 2];
@@ -261,7 +261,6 @@ var PageManager = /** @class */ (function (_super) {
      * Adds an item to the current page, and increments the total record count.
      */
     PageManager.prototype.addRecord = function (item) {
-        this._totalRecords += 1;
         if (item.meta) {
             this.data.push(item);
         }
@@ -275,7 +274,7 @@ var PageManager = /** @class */ (function (_super) {
     PageManager.prototype.reset = function () {
         this.initialFetchState = "none";
         this.data.set([]);
-        this._totalRecords = 0;
+        this._totalExternalRecords = 0;
     };
     /**
      * Resets the sort properties. A new sort property can be provided.
@@ -351,7 +350,7 @@ var PageManager = /** @class */ (function (_super) {
     __decorate([
         Observable(),
         __metadata("design:type", Number)
-    ], PageManager.prototype, "_totalRecords", void 0);
+    ], PageManager.prototype, "_totalExternalRecords", void 0);
     __decorate([
         Observable(),
         __metadata("design:type", Object)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-core",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Core functionality for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",