@finsemble/finsemble-ui 7.2.0 → 7.3.0

package/react/components/windowTitleBar/WindowTitleBarShell.js

@@ -531,6 +531,24 @@ export class WindowTitleBarShell extends React.Component {
                 bodyElement.style.overflowY = "auto";
         }
     }
+    /**
+     * Once document is ready and header is injected into DOM, begin adjusting the height of elements and bump fixed/absolute elements
+     */
+    async maybeAdjustWindow() {
+        // don't start pushing stuff down until page is ready. This is needed for preloaded titlebars because they can happen before the page is ready.
+        if (document.readyState === "complete") {
+            this.beginAdjustment();
+        }
+        else {
+            document.addEventListener("readystatechange", () => {
+                if (document.readyState === "complete")
+                    this.beginAdjustment();
+            });
+        }
+    }
+    /**
+     * Begin adjusting the body and top level elements and their direct descendants by the header height.
+     */
     beginAdjustment() {
         const header = document.getElementsByClassName("fsbl-header")[0];
         if (header) {
@@ -540,7 +558,7 @@ export class WindowTitleBarShell extends React.Component {
                 bodyElement.style.height = `calc(100vh - ${headerHeight})`;
             }
             if (this.state.adjustContentHeights)
-                this.adjustTopLevelHeight(Number(headerHeight.split("px")[0]));
+                this.adjustTopLevelHeight(Number.parseInt(headerHeight, 10));
             this.bumpElements(this.state.bumpElements);
             if (this.state.bumpElements.monitorFixedAdditions)
                 this.monitorFixedPositionedElements(headerHeight);
@@ -550,76 +568,94 @@ export class WindowTitleBarShell extends React.Component {
         }
     }
     /**
-     * Once document is ready and header is injected into DOM, begin adjusting the height of elements and bump fixed/absolute elements
-     */
-    async maybeAdjustWindow() {
-        // don't start pushing stuff down until page is ready. This is needed for preloaded titlebars because they can happen before the page is ready.
-        if (document.readyState === "complete") {
-            this.beginAdjustment();
-        }
-        else {
-            document.addEventListener("readystatechange", () => {
-                if (document.readyState === "complete")
-                    this.beginAdjustment();
-            });
-        }
-    }
-    /**
-     * Monitors the DOM for mutations, if the added node has a fixed position with a top style of 0px, it will be bumped by the title bar height.
-     * @param headerHeight the height of the header
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.adjustContentHeights`
+     * Called from beginAdjustment()
+     *
+     * Adjusts the top level content maxHeight to be 100vh subtracted by the total height of the previous elements.
+     * The height of the previous elements are added to this calculation if they are not fixed or absolute.
+     * These top level elements will be passed into adjustContentHeight where their descendants
+     * will also have their heights adjusted.
+     * Example:
+     * In this below situation, the B element extends passed the view because the header is injected. B doesn't have a
+     * set height so it'll extend as far as it needs.
+     * --------------------
+     * |******************|
+     * |*     Titlebar   *|
+     * |******************|
+     * |******************|
+     * |*       A        *|
+     * |*                *|
+     * |******************|
+     * |******************|
+     * |*                *|
+     * |*                *|
+     * |*       B        *|
+     * |*                *|
+     * |*                *|
+     * |*                *|
+     * --------------------
+     * The chain of adjust functions will set the maxHeight of A and B to ensure they both occupy space that the above element doesn't
+     * and keep it within the bounds of the view.
+     * --------------------
+     * |******************|
+     * |*     Titlebar   *|
+     * |******************|
+     * |******************|
+     * |*       A        *|
+     * |*                *|
+     * |******************|
+     * |******************|
+     * |*                *|
+     * |*                *|
+     * |*       B        *|
+     * |*                *|
+     * |*                *|
+     * |******************|
+     * --------------------
+     * @param {number} headerHeight the height of the header
      */
-    monitorFixedPositionedElements(headerHeight) {
-        const options = {
-            childList: true,
-            subtree: true,
-        };
-        /**
-         * MutationObserver interface provides the ability to watch for
-         * changes to the DOM tree using the observe method
-         */
-        const mutationObserver = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                mutation.addedNodes.forEach((node) => {
-                    var _a;
-                    if (!((_a = node.className) === null || _a === void 0 ? void 0 : _a.includes("bumped-element"))) {
-                        try {
-                            const nodeStyle = window.getComputedStyle(node);
-                            const topStyle = nodeStyle.top;
-                            // make sure node is fixed, has top style set to 0, and has not been bumped
-                            if (nodeStyle.position === "fixed" && possibleZeros.includes(topStyle)) {
-                                node.style.top = this.calculateBumpValue("0Positioned", topStyle, headerHeight);
-                                node.classList.add("bumped-element");
-                            }
-                        }
-                        catch (err) {
-                            // Expected to error if the node is not an Element e.g text is not of type Element
-                        }
-                    }
-                });
-            });
+    adjustTopLevelHeight(headerHeight) {
+        const elems = document.body.querySelectorAll(":scope > *:not(#FSBLHeader, .fsbl-header)");
+        let prev = headerHeight;
+        elems.forEach((elem) => {
+            this.adjust(elem, prev);
+            // Heights of fixed and absolute positioned elements are not added to the total heights of previous elements
+            // since they are removed from the document flow and can be positioned anywhere in the page.
+            if (elem.style.position !== "fixed" && elem.style.position !== "absolute")
+                prev = prev + elem.offsetHeight;
+            this.adjustContentHeight(elem);
         });
-        // We observe the body and do not disconnect because there may be other elements that are dynamically loaded, such as a dialogue menu.
-        mutationObserver.observe(document.body, options);
     }
     /**
-     * Calls functions to bump fixed and/or absolute elements if configured to do so.
-     * @param {object} config bumpElements object
+     * Adjusts the content view height to be maximum of the parent container (passed in by adjustTopLevelHeight()) height
+     * subtracted by the total height of elements above it. The height of the previous elements are added to this calculation
+     * if they are not fixed or absolute.
+     * @param {object} parentElem parent element
      */
-    bumpElements(config) {
-        if ((config === null || config === void 0 ? void 0 : config.bumpBy) && (config === null || config === void 0 ? void 0 : config.bumpBy) !== "0px") {
-            if (config.fixed)
-                this.bumpFixedElements(config);
-            if (config.absolute)
-                this.bumpAbsoluteElements(config);
+    adjustContentHeight(parentElem) {
+        const elem = parentElem;
+        const maxHeight = `100%`;
+        const { children } = elem;
+        const len = children.length;
+        let prev = 0;
+        for (let i = 0; i < len; i++) {
+            // Fixed and absolute positioned elements are ignored since they are removed from the document flow.
+            if (children[i].style.position !== "fixed" && children[i].style.position !== "absolute") {
+                this.adjust(children[i], prev, maxHeight);
+                prev = prev + children[i].offsetHeight;
+            }
         }
     }
     /**
+     * This is used in adjustTopLevelHeight() and adjustContentHeight()
+     *
      * Set the max height of each element to be the height of the parent container
      * subtracted by the height of the previous element. This forces the element to either obey its
      * predefined height or stay within the bounds of the max height.
+     *
      * @param {object} elem HTML element
      * @param {number} prev height of previous sibling
-     * @param maxHeight
+     * @param {string} maxHeight maximum height of the element
      */
     adjust(elem, prev, maxHeight = "100vh") {
         var _a, _b;
@@ -635,44 +671,84 @@ export class WindowTitleBarShell extends React.Component {
         }
     }
     /**
-     * Adjusts the top level content view height to be its height subtracted by the headerHeight and its
-     * maxHeight to be 100vh subtracted by the total height of the previous elements.
-     * The height of the previous elements are added to this calculation if they are not fixed or absolute.
-     * @param {number} headerHeight the height of the header
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.bumpElements.[bumpBy|fixed|absolute]`
+     * Called from beginAdjustment()
+     *
+     * Calls bumpFixedElements and bumpAbsoluteElements to bump fixed and/or absolute elements by the value of bumpBy if configured to do so.
+     * Since absolute and fixed positioned elements are removed from the document flow their positions will not be adjusted when the titlebar
+     * is injected and they have a set top style. However, if the element is an absolute positioned element and it's
+     * parent container has a position that is not set to static, then it'll adjust relative to the parent. Fixed positioned elements, on the otherhand,
+     * won't adjust unless their top stlyes are changed.
+     * @param {object} config bumpElements object
      */
-    adjustTopLevelHeight(headerHeight) {
-        const elems = document.body.querySelectorAll(":scope > *:not(#FSBLHeader, .fsbl-header)");
-        let prev = headerHeight;
-        elems.forEach((elem) => {
-            this.adjust(elem, prev);
-            // Heights of fixed and absolute positioned elements are not added to the total heights of previous elements
-            // since they are removed from the document flow and can be positioned anywhere in the page.
-            if (elem.style.position !== "fixed" && elem.style.position !== "absolute")
-                prev = prev + elem.offsetHeight;
-            this.adjustContentHeight(elem);
-        });
+    bumpElements(config) {
+        if ((config === null || config === void 0 ? void 0 : config.bumpBy) !== "0px") {
+            if (config.fixed)
+                this.bumpFixedElements(config);
+            if (config.absolute)
+                this.bumpAbsoluteElements(config);
+        }
     }
     /**
-     * Adjusts the content view height to be maximum the parent container height subtracted by the total height elements above it.
-     * The height of the previous elements are added to this calculation if they are not fixed or absolute.
-     * @param {object} headerNode window titlebar
+     * Called from bumpElements
+     *
+     * Bumps all elements with fixed positioning, that are not in the header, down by the configured amount.
+     * @private
+     * @param {object} params bumpElements object
      */
-    adjustContentHeight(headerNode) {
-        const elem = headerNode;
-        const maxHeight = `100%`;
-        const { children } = elem;
-        const len = children.length;
-        let prev = 0;
+    bumpFixedElements(params) {
+        var _a, _b;
+        let { fixed, bumpBy } = params;
+        const getFixedElements = (selector) => {
+            const fixedElems = [];
+            const nodes = document.body.querySelectorAll(selector);
+            nodes.forEach((node) => {
+                const style = window.getComputedStyle(node, null);
+                if (style.getPropertyValue("position") == "fixed")
+                    fixedElems.push(node);
+            });
+            return fixedElems;
+        };
+        const selector = "*:not(#FSBLHeader, .fsbl-header)";
+        // Get all fixed positioned elements
+        const elems = getFixedElements(selector);
+        const len = elems.length;
         for (let i = 0; i < len; i++) {
-            // Fixed and absolute positioned elements are ignored since they are removed from the document flow.
-            if (children[i].style.position !== "fixed" && children[i].style.position !== "absolute") {
-                this.adjust(children[i], prev, maxHeight);
-                prev = prev + children[i].offsetHeight;
+            const style = window.getComputedStyle(elems[i], null);
+            const topStyle = style.getPropertyValue("top");
+            if (!((_b = (_a = elems[i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains("bumped-element"))) {
+                elems[i].style.top = this.calculateBumpValue(fixed, topStyle, bumpBy);
+                elems[i].classList.add("bumped-element");
+            }
+        }
+    }
+    /**
+     * Called from bumpElements
+     *
+     * Bumps all absolute positioned elements with static parents, that are not in the header, down by the configured amount.
+     * @private
+     * @param {object} params bumpElements object
+     */
+    bumpAbsoluteElements(params) {
+        var _a, _b;
+        let { absolute, bumpBy } = params;
+        const selector = "*:not(#FSBLHeader, .fsbl-header)";
+        // Get top level absolute positioned elements and elements who have static parents
+        const elems = this.traverseHtml({ children: document.body.querySelectorAll(`:scope > ${selector}`) });
+        const len = elems.length;
+        for (let i = 0; i < len; i++) {
+            const style = window.getComputedStyle(elems[i], null);
+            const topStyle = style.getPropertyValue("top");
+            // Target absolute positioned elements
+            if (style.getPropertyValue("position") == "absolute" && !((_b = (_a = elems[i]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains("bumped-element"))) {
+                elems[i].style.top = this.calculateBumpValue(absolute, topStyle, bumpBy);
+                elems[i].classList.add("bumped-element");
             }
         }
     }
     /**
-     * Calculates value to bump element by. If 'all' return top style and header height, if '0Positioned' return header height
+     * Used in bumpFixedElements and bumpAbsoluteElements
+     * Calculates value to bump element by. If 'all' return top style plus the header height, if '0Positioned' return just header height
      * @param type Whether all elements are being bumped by the header height and their top style or just header height
      * @param topStyle Element top value
      * @param bumpBy Value to bump element by
@@ -689,6 +765,8 @@ export class WindowTitleBarShell extends React.Component {
         return topVal;
     }
     /**
+     * Used in bumpAbsoluteElements
+     *
      * Recursively traverse through the HTML document and return an array of the top level elements
      * and elements with static parents
      * @param {object} element The HTML element
@@ -716,60 +794,50 @@ export class WindowTitleBarShell extends React.Component {
         return acc;
     }
     /**
-     * Bumps elements with fixed positioning down by the configured amount.
-     * @private
+     * Togglable setting found in `foreign.components.["Window Manager"].FSBLHeader.bumpElements.[monitorFixedAdditions]`
+     * Called from beginAdjustment()
+     *
+     * Monitors the DOM for mutations, if the added node has a fixed position with a top style of 0px, it will be bumped by the title bar height.
+     * This ensures that if a fixed positioned element is dynamically added to the DOM, for example a pop-up modal, it'll have it's height adjusted
+     * by the header height since the initial bumping of elements can happen before this element exists.
+     *
+     * Element heights are not monitored and adjusted since this would require that all pre-existing elements have ther height recalculated each time
+     * a new element is dynamically added onto the page. Absolute postioned elements, however, could be monitored and adjusted since all we would
+     * need to check for is that it's parent has a static position or not, if it does then it can be adjusted.
+     * @param headerHeight the height of the header
      */
-    bumpFixedElements(params) {
-        var _a;
-        let { fixed, bumpBy } = params;
-        const getFixedElements = (nodes) => {
-            const fixedElems = [];
-            nodes.forEach((node) => {
-                const style = window.getComputedStyle(node, null);
-                if (style.getPropertyValue("position") == "fixed")
-                    fixedElems.push(node);
-                const elems = node.querySelectorAll("*");
-                elems.forEach((elem) => {
-                    const childStyle = window.getComputedStyle(elem, null);
-                    if (childStyle.getPropertyValue("position") == "fixed")
-                        fixedElems.push(elem);
+    monitorFixedPositionedElements(headerHeight) {
+        const options = {
+            childList: true,
+            subtree: true,
+        };
+        /**
+         * MutationObserver interface provides the ability to watch for
+         * changes to the DOM tree using the observe method
+         */
+        const mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    var _a;
+                    if (!((_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains("bumped-element"))) {
+                        try {
+                            const nodeStyle = window.getComputedStyle(node);
+                            const topStyle = nodeStyle.top;
+                            // make sure node is fixed, has top style set to 0, and has not been bumped
+                            if (nodeStyle.position === "fixed" && possibleZeros.includes(topStyle)) {
+                                node.style.top = this.calculateBumpValue("0Positioned", topStyle, headerHeight);
+                                node.classList.add("bumped-element");
+                            }
+                        }
+                        catch (err) {
+                            // Expected to error if the node is not an Element e.g text is not of type Element
+                        }
+                    }
                 });
             });
-            return fixedElems;
-        };
-        const selector = "*:not(#FSBLHeader, .fsbl-header)";
-        // Get all fixed positioned elements
-        const elems = getFixedElements(document.body.querySelectorAll(`${selector}`));
-        const len = elems.length;
-        for (let i = 0; i < len; i++) {
-            const style = window.getComputedStyle(elems[i], null);
-            const topStyle = style.getPropertyValue("top");
-            if (!((_a = elems[i].className) === null || _a === void 0 ? void 0 : _a.includes("bumped-element"))) {
-                elems[i].style.top = this.calculateBumpValue(fixed, topStyle, bumpBy);
-                elems[i].classList.add("bumped-element");
-            }
-        }
-    }
-    /**
-     * Bumps absolute positioned elements with static parents down by the configured amount.
-     * @private
-     */
-    bumpAbsoluteElements(params) {
-        var _a;
-        let { absolute, bumpBy } = params;
-        const selector = "*:not(#FSBLHeader, .fsbl-header)";
-        // Get top level absolute positioned elements and elements who have static parents
-        const elems = this.traverseHtml({ children: document.body.querySelectorAll(`:scope > ${selector}`) });
-        const len = elems.length;
-        for (let i = 0; i < len; i++) {
-            const style = window.getComputedStyle(elems[i], null);
-            const topStyle = style.getPropertyValue("top");
-            // Target absolute positioned elements
-            if (style.getPropertyValue("position") == "absolute" && !((_a = elems[i].className) === null || _a === void 0 ? void 0 : _a.includes("bumped-element"))) {
-                elems[i].style.top = this.calculateBumpValue(absolute, topStyle, bumpBy);
-                elems[i].classList.add("bumped-element");
-            }
-        }
+        });
+        // We observe the body and do not disconnect because there may be other elements that are dynamically loaded, such as a dialogue menu.
+        mutationObserver.observe(document.body, options);
     }
     render() {
         let showDockingIcon = !this.state.dockingEnabled ? false : this.state.dockingIcon;