Use popper.js for toolbar positioning logic

package.json

@@ -59,6 +59,7 @@
     "lazypipe": "^1.0.1",
     "mobile-detect": "^1.3.6",
     "nightwatch": "^0.9.13",
+    "popper.js": "^1.9.6",
     "postcss-import": "^9.1.0",
     "prosemirror-commands": "^0.20.0",
     "prosemirror-example-setup": "^0.20.0",

src/behaviors/toolbar-placement.js

@@ -0,0 +1,61 @@
+import Popper from 'popper.js';
+import MobileDetect from 'mobile-detect';
+
+const GUTTER = 5,
+      detect = new MobileDetect(window.navigator.userAgent),
+      IS_MOBILE = !!(detect.mobile() || detect.tablet());
+
+export default {
+  properties: {
+    range: {
+      type: Object,
+      value: null,
+      observer: 'hoverOverRange'
+    },
+
+    mobile: {
+      type: Boolean,
+      reflectToAttribute: true,
+      value: IS_MOBILE
+    }
+  },
+
+  attached() {
+    let getRect = () => {
+      if (this.range) {
+        return this.range.getBoundingClientRect();
+      }
+
+      return { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 };
+    };
+
+    this._popper = new Popper({
+      getBoundingClientRect() {
+        return getRect();
+      },
+
+      get clientWidth() {
+        return getRect().width;
+      },
+
+      get clientHeight() {
+        return getRect().height;
+      }
+    }, this, {
+      placement: 'top',
+      modifiers: { offset: { offset: `0,${GUTTER}` } }
+    });
+  },
+
+  hoverOverRange(range) {
+    this.hidden = !range;
+
+    if (!range || IS_MOBILE) {
+      return;
+    }
+
+    if (this._popper) {
+      this._popper.scheduleUpdate();
+    }
+  }
+}

src/simpla-text-editor.html

@@ -174,42 +174,28 @@
   </template>
 
   <script>
-    import MobileDetect from 'mobile-detect';
-
-    const GUTTER = 5,
-          detect = new MobileDetect(window.navigator.userAgent),
-          IS_MOBILE = !!(detect.mobile() || detect.tablet()),
-          getInitialTools = () => ({
-            bold: {
-              active: false
-            },
-
-            italic: {
-              active: false
-            },
-
-            underline: {
-              active: false
-            },
-
-            link: {
-              active: false,
-              meta: {
-                href: ''
-              }
-            }
-          });
+    import ToolbarPlacement from './behaviors/toolbar-placement';
+
+    const getInitialTools = () => ({
+      bold: {
+        active: false
+      },
 
-    function addPadding(rect, padding) {
-      return {
-        top: rect.top - padding,
-        right: rect.right + padding,
-        bottom: rect.bottom + padding,
-        left: rect.left - padding,
-        width: rect.width + 2 * padding,
-        height: rect.height + 2 * padding
-      };
-    }
+      italic: {
+        active: false
+      },
+
+      underline: {
+        active: false
+      },
+
+      link: {
+        active: false,
+        meta: {
+          href: ''
+        }
+      }
+    });
 
     class SimplaTextToolbar extends HTMLElement {
       beforeRegister() {
@@ -228,12 +214,6 @@
             observer: '_attachListenersToTarget'
           },
 
-          range: {
-            type: Object,
-            value: null,
-            observer: 'hoverOverRange'
-          },
-
           hidden: {
             type: Boolean,
             reflectToAttribute: true
@@ -252,12 +232,6 @@
             reflectToAttribute: true
           },
 
-          mobile: {
-            type: Boolean,
-            reflectToAttribute: true,
-            value: IS_MOBILE
-          },
-
           _storedHref: {
             type: String,
             value: ''
@@ -272,89 +246,8 @@
         };
       }
 
-      hoverOverRange(range) {
-        let rangeBounds,
-            ownBounds,
-            boundaries,
-            left,
-            top;
-
-        this.hidden = !range;
-
-        if (!range || IS_MOBILE) {
-          return;
-        }
-
-        rangeBounds = addPadding(range.getBoundingClientRect(), GUTTER);
-        ownBounds = this.getBoundingClientRect();
-
-        boundaries = addPadding({
-          top: 0,
-          left: 0,
-          right: window.innerWidth,
-          bottom: window.innerHeight
-        }, -GUTTER);
-
-        ({ left, top } = this._getPositionsFromBounds({
-          rangeBounds,
-          ownBounds,
-          boundaries
-        }));
-
-        // NOTE: HACK - This is doing a check: if the left and top will place is
-        //  _relative_ to the parent element, then it should incorporate the
-        //  parent's offsets from the viewport, otherwise it should just incorporate
-        //  the scroll values (scroll values are already considered by parent
-        //  in the truthy case). But this feels really fragile and should be fixed
-        //  via CSS or something more solid.
-        if (window.getComputedStyle(this.parentElement).position === 'relative') {
-          let parentOffsets = this.parentElement.getBoundingClientRect();
-          left -= parentOffsets.left;
-          top -= parentOffsets.top;
-        } else {
-          left += window.scrollX;
-          top += window.scrollY;
-        }
-
-        Object.assign(this.style, {
-          left: `${left}px`,
-          top: `${top}px`
-        });
-      }
-
-      _getPositionsFromBounds({ ownBounds, rangeBounds, boundaries }) {
-        let isOverRange = (dim) => dim > rangeBounds.top && dim < rangeBounds.bottom,
-            centerOffset = (rangeBounds.width - ownBounds.width) / 2,
-            left,
-            top;
-
-        // Move to center above range
-        left = rangeBounds.left + centerOffset;
-        top = rangeBounds.top - ownBounds.height;
-
-        // Fit to within boundaries
-        if (left < boundaries.left) {
-          left = boundaries.left;
-        }
-
-        if (top < boundaries.top) {
-          top = boundaries.top;
-        }
-
-        if (left + ownBounds.width > boundaries.right) {
-          left = boundaries.right - ownBounds.width;
-        }
-
-        if (top + ownBounds.height > boundaries.bottom) {
-          top = boundaries.bottom - ownBounds.height;
-        }
-
-        // Ensure it isn't covering the range
-        if (isOverRange(top) || isOverRange(top + ownBounds.height)) {
-          top = rangeBounds.bottom;
-        }
-
-        return { top, left };
+      get behaviors() {
+        return [ ToolbarPlacement ];
       }
 
       _handleToolTap(event) {

yarn.lock

@@ -4673,6 +4673,10 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+popper.js@^1.9.6:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.9.6.tgz#8d325083d83c4262827d3b5af78d7317a120bdd0"
+
 portfinder@0.4.x:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-0.4.0.tgz#a3ffadffafe4fb98e0601a85eda27c27ce84ca1e"
@@ -6109,9 +6113,9 @@ ternary-stream@^2.0.1:
     merge-stream "^1.0.0"
     through2 "^2.0.1"
 
-"test-fixture@github:polymerelements/test-fixture":
+test-fixture@PolymerElements/test-fixture:
   version "3.0.0-rc.1"
-  resolved "https://codeload.github.com/polymerelements/test-fixture/tar.gz/26118ef0467501c33c02316e7016a2837baba10f"
+  resolved "https://codeload.github.com/PolymerElements/test-fixture/tar.gz/26118ef0467501c33c02316e7016a2837baba10f"
 
 text-table@~0.2.0:
   version "0.2.0"