@fluid-topics/ft-floating-menu 1.0.51 → 1.0.53

package/build/ft-floating-menu.css.js

@@ -13,13 +13,21 @@ export const FtFloatingMenuCssVariables = {
 export const styles = css `
     .ft-floating-menu {
         color: ${FtFloatingMenuCssVariables.textColor};
-        position: relative;
         display: inline-block;
     }
 
+    .ft-floating-menu--wrapper {
+        position: absolute;
+        visibility: hidden;
+    }
+
+    .ft-floating-menu--wrapper.ft-floating-menu--wrapper-positioned {
+        visibility: visible;
+    }
+
     .ft-floating-menu--options {
         display: none;
-        position: absolute;
+        position: relative;
         overflow: auto;
         max-width: ${FtFloatingMenuCssVariables.maxWidth};
         max-height: ${FtFloatingMenuCssVariables.maxHeight};
@@ -33,25 +41,4 @@ export const styles = css `
     .ft-floating-menu--open .ft-floating-menu--options {
         display: block;
     }
-
-    .ft-floating-menu--left .ft-floating-menu--options {
-        left: 0;
-    }
-
-    .ft-floating-menu--right .ft-floating-menu--options {
-        right: 0;
-    }
-
-    .ft-floating-menu--center .ft-floating-menu--options {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .ft-floating-menu--top .ft-floating-menu--options {
-        bottom: calc(100% + 4px);
-    }
-
-    .ft-floating-menu--bottom .ft-floating-menu--options {
-        top: calc(100% + 4px);
-    }
 `;

package/build/ft-floating-menu.d.ts

@@ -2,6 +2,7 @@ import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtFloatingMenuProperties, FtHorizontalAlignment, FtVerticalAlignment } from "./ft-floating-menu.properties";
 import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
 import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
+import { PropertyValues } from "lit/development";
 export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
     constructor();
 }
@@ -11,15 +12,16 @@ export declare class FtFloatingMenu extends FtLitElement implements FtFloatingMe
     private menuOpen;
     forceMenuOpen: boolean;
     private container;
-    private menuContainer;
-    private button;
+    private menuWrapper;
+    private menuContent;
+    private actionButton;
     label?: string;
     tooltipPosition?: Position;
     iconVariant: FtIconVariants;
     icon: string;
     text?: string;
-    horizontalAlignment?: FtHorizontalAlignment;
-    verticalAlignment?: FtVerticalAlignment;
+    horizontalAlignment: FtHorizontalAlignment;
+    verticalAlignment: FtVerticalAlignment;
     disabled: boolean;
     closeMenuMatchers: string[];
     protected render(): import("lit-html").TemplateResult<1>;
@@ -30,4 +32,7 @@ export declare class FtFloatingMenu extends FtLitElement implements FtFloatingMe
     private onCloseEvent;
     private onContentClick;
     disconnectedCallback(): void;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private positionMenuWrapper;
+    private correctOutOfWindowPixels;
 }

package/build/ft-floating-menu.js

@@ -24,6 +24,8 @@ class FtFloatingMenu extends FtLitElement {
         this.forceMenuOpen = false;
         this.iconVariant = FtIconVariants.fluid_topics;
         this.icon = "SHORTCUT_MENU";
+        this.horizontalAlignment = "left";
+        this.verticalAlignment = "bottom";
         this.disabled = false;
         this.closeMenuMatchers = [];
         this.hideOptions = (e) => {
@@ -34,12 +36,11 @@ class FtFloatingMenu extends FtLitElement {
         };
     }
     render() {
-        var _a, _b;
         const classes = {
             "ft-floating-menu": true,
             "ft-floating-menu--open": this.forceMenuOpen || this.menuOpen,
-            ["ft-floating-menu--" + ((_a = this.horizontalAlignment) !== null && _a !== void 0 ? _a : "left").toLowerCase()]: true,
-            ["ft-floating-menu--" + ((_b = this.verticalAlignment) !== null && _b !== void 0 ? _b : "bottom").toLowerCase()]: true,
+            ["ft-floating-menu--" + this.horizontalAlignment.toLowerCase()]: true,
+            ["ft-floating-menu--" + this.verticalAlignment.toLowerCase()]: true,
         };
         return html `
             <div class="${classMap(classes)}">
@@ -56,13 +57,15 @@ class FtFloatingMenu extends FtLitElement {
                            aria-expanded="${this.forceMenuOpen || this.menuOpen}">
                     ${this.text}
                 </ft-button>
-                <div id="ft-floating-menu-options"
-                     class="ft-floating-menu--options"
-                     part="options"
-                     @select="${this.onClickItem}">
-                    <slot @click=${this.onContentClick}
-                          @close-ft-floating-menu=${this.onCloseEvent}
-                    ></slot>
+                <div class="ft-floating-menu--wrapper">
+                    <div id="ft-floating-menu-options"
+                         class="ft-floating-menu--options"
+                         part="options"
+                         @select="${this.onClickItem}">
+                        <slot @click=${this.onContentClick}
+                              @close-ft-floating-menu=${this.onCloseEvent}
+                        ></slot>
+                    </div>
                 </div>
             </div>
         `;
@@ -91,6 +94,56 @@ class FtFloatingMenu extends FtLitElement {
         super.disconnectedCallback();
         document.removeEventListener("click", this.hideOptions);
     }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (["menuOpen"].some(p => props.has(p)) && this.menuOpen) {
+            this.menuWrapper.classList.remove("ft-floating-menu--wrapper-positioned");
+            this.positionMenuWrapper();
+        }
+    }
+    positionMenuWrapper() {
+        const menuWidth = this.menuContent.offsetWidth;
+        const menuHeight = this.menuContent.offsetHeight;
+        const buttonWidth = this.actionButton.offsetWidth;
+        const buttonHeight = this.actionButton.offsetHeight;
+        let left = 0;
+        let top = 0;
+        this.menuWrapper.style.left = "0";
+        this.menuWrapper.style.top = "0";
+        switch (this.horizontalAlignment) {
+            case "left":
+                left = this.actionButton.offsetLeft - this.menuWrapper.offsetLeft;
+                break;
+            case "right":
+                left = this.actionButton.offsetLeft + buttonWidth - menuWidth - this.menuWrapper.offsetLeft;
+                break;
+            case "center":
+                left = this.actionButton.offsetLeft + (buttonWidth / 2) - (menuWidth / 2) - this.menuWrapper.offsetLeft;
+                break;
+        }
+        switch (this.verticalAlignment) {
+            case "bottom":
+                top = this.actionButton.offsetTop + buttonHeight + 4 - this.menuWrapper.offsetTop;
+                break;
+            case "top":
+                top = this.actionButton.offsetTop - menuHeight - 4 - this.menuWrapper.offsetTop;
+                break;
+        }
+        const style = this.menuWrapper.style;
+        style.left = left + "px";
+        style.top = top + "px";
+        const boundingClientRect = this.menuWrapper.getBoundingClientRect();
+        let leftOutOfWindowPixels = -boundingClientRect.x;
+        let rightOutOfWindowPixels = (boundingClientRect.x + boundingClientRect.width) - window.innerWidth;
+        style.left = (left + Math.round(this.correctOutOfWindowPixels(leftOutOfWindowPixels, rightOutOfWindowPixels))) + "px";
+        let topOutOfWindowPixels = -boundingClientRect.y;
+        let bottomOutOfWindowPixels = (boundingClientRect.y + boundingClientRect.height) - window.innerHeight;
+        style.top = (top + Math.round(this.correctOutOfWindowPixels(topOutOfWindowPixels, bottomOutOfWindowPixels))) + "px";
+        this.menuWrapper.classList.add("ft-floating-menu--wrapper-positioned");
+    }
+    correctOutOfWindowPixels(leftOrTopOutOfWindowPixels, rightOrBottomOutOfWindowPixels) {
+        return Math.max(leftOrTopOutOfWindowPixels, Math.min(0, -rightOrBottomOutOfWindowPixels));
+    }
 }
 FtFloatingMenu.elementDefinitions = {
     "ft-button": FtButton,
@@ -108,11 +161,14 @@ __decorate([
     query(".ft-floating-menu")
 ], FtFloatingMenu.prototype, "container", void 0);
 __decorate([
-    query(".ft-floating-menu--options")
-], FtFloatingMenu.prototype, "menuContainer", void 0);
+    query(".ft-floating-menu--wrapper")
+], FtFloatingMenu.prototype, "menuWrapper", void 0);
+__decorate([
+    query("#ft-floating-menu-options")
+], FtFloatingMenu.prototype, "menuContent", void 0);
 __decorate([
-    query("ft-button")
-], FtFloatingMenu.prototype, "button", void 0);
+    query("#actions-button")
+], FtFloatingMenu.prototype, "actionButton", void 0);
 __decorate([
     property()
 ], FtFloatingMenu.prototype, "label", void 0);