Use FloatingUIDOM; implement popover middleware

Author: dancormier

Gruntfile.js

@@ -88,7 +88,8 @@ module.exports = function(grunt) {
                 files: {
                     'dist/js/stacks.js': [
                         'node_modules/stimulus/dist/stimulus.umd.js',
-                        'node_modules/@floating-ui/core/dist/floating-ui.core.js',
+                        'node_modules/@floating-ui/core/dist/floating-ui.core.min.js',
+                        'node_modules/@floating-ui/dom/dist/floating-ui.dom.min.js',
                         'build/lib/ts/stacks.js',
                         'build/lib/ts/controllers/**/*.js',
                         'build/lib/ts/finalize.js'

lib/ts/controllers/s-popover.ts

@@ -85,7 +85,8 @@ namespace Stacks {
         disconnect() {
             this.hide();
             if (this.floatingUI) {
-                this.floatingUI.destroy();
+                // TODO: See if something similar is still necessary
+                // this.floatingUI.destroy();
                 delete this.floatingUI;
             }
             super.disconnect();
@@ -137,8 +138,9 @@ namespace Stacks {
             this.popoverElement.classList.remove("is-visible");
 
             if (this.floatingUI) {
+                // TODO: See if something similar is still necessary
                 // completely destroy the popper on hide; this is in line with Popper.js's performance recommendations
-                this.floatingUI.destroy();
+                // this.floatingUI.destroy();
                 delete this.floatingUI;
             }
 
@@ -181,28 +183,43 @@ namespace Stacks {
          * Initializes the Popper for this instance
          */
         private initializeFloatingUI() {
+            var popoverElement = this.popoverElement;
+            var arrowElement = popoverElement.querySelector(".s-popover--arrow");
             // @ts-ignore
-            // this.floatingUI = FloatingUICore.computePosition(this.refrenceElement, this.popoverElement, {
-            // // @ts-ignore
-            // middleware: [ FloatingUICore.offset(), FloatingUICore.flip(), FloatingUICore.shift() ]
-            // });
-            // this.floatingUI = FloatingUICore.createPopper(this.referenceElement, this.popoverElement, {
-            //     placement: this.data.get("placement") || "bottom",
-            //     modifiers: [
-            //         {
-            //             name: "offset",
-            //             options: {
-            //                 offset: [0, 10], // The entire popover should be 10px away from the element
-            //             }
-            //         },
-            //         {
-            //             name: "arrow",
-            //             options: {
-            //                 element: ".s-popover--arrow"
-            //             },
-            //         },
-            //     ]
-            // });
+            this.floatingUI = FloatingUIDOM.computePosition(this.referenceElement, popoverElement, {
+                placement: this.data.get("placement") || "bottom",
+                middleware: [
+                    // @ts-ignore
+                    FloatingUIDOM.offset(10), FloatingUIDOM.flip(), FloatingUIDOM.shift({ padding: 10 }),
+                    // @ts-ignore
+                    FloatingUIDOM.arrow({ element: arrowEl }),
+                ],
+                // @ts-ignore
+            }).then(({middlewareData, placement, x, y}) => {
+                const {x: arrowX, y: arrowY} = middlewareData.arrow;
+
+                Object.assign(popoverElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+
+                // @ts-ignore
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]];
+
+                if (arrowElement) {
+                    // @ts-ignore
+                    Object.assign(arrowElement.style, {
+                        // TODO: Fix arrow positioning
+                        transform: `translateX(${(arrowX || 0)}px) translateY(${(arrowY || 0)}px)`,
+                        [staticSide]: '-4px',
+                    });
+                }
+            });
         }
 
         /**
@@ -267,7 +284,8 @@ namespace Stacks {
          */
         protected scheduleUpdate() {
             if (this.floatingUI && this.isVisible) {
-                this.floatingUI.update();
+                // TODO reimplement update
+                // this.floatingUI.update();
             }
         }
     }