fix toolbar vertical overflow behavior

evansolomon · Jul 15, 2016 · 171fcd7 · 171fcd7
1 parent a3234c9
commit 171fcd7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/assets/base.styl b/assets/base.styl
@@ -50,6 +50,8 @@ colorItemsPerRow = 7
 
   .ql-hidden
     display: none
+  .ql-out-bottom, .ql-out-top
+    visibility: hidden
 
   .ql-tooltip
     position: absolute

diff --git a/ui/tooltip.js b/ui/tooltip.js
@@ -10,12 +10,19 @@ class Tooltip {
     let offset = parseInt(window.getComputedStyle(this.root).marginTop);
     this.quill.root.addEventListener('scroll', () => {
       this.root.style.marginTop = (-1*this.quill.root.scrollTop) + offset + 'px';
+      this.checkBounds();
     });
     this.textbox = this.root.querySelector('input[type="text"]');
     this.listen();
     this.hide();
   }
 
+  checkBounds() {
+    this.root.classList.toggle('ql-out-top', this.root.offsetTop <= 0);
+    this.root.classList.remove('ql-out-bottom');
+    this.root.classList.toggle('ql-out-bottom', this.root.offsetTop + this.root.offsetHeight >= this.quill.root.offsetHeight);
+  }
+
   listen() {
     this.textbox.addEventListener('keydown', (event) => {
       if (Keyboard.match(event, 'enter')) {
@@ -44,6 +51,7 @@ class Tooltip {
       shift = containerBounds.left - rootBounds.left;
       this.root.style.left = (left + shift) + 'px';
     }
+    this.checkBounds();
     return shift;
   }