bug fix: positioning when resizing window while editing a link

bustle · Jul 15, 2014 · d8e6b3b · d8e6b3b
1 parent ec7b780
commit d8e6b3b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 33 deletions.
diff --git a/dist/content-kit-editor.js b/dist/content-kit-editor.js
@@ -3,7 +3,7 @@
  * @version  0.1.0
  * @author   Garth Poitras <[email protected]> (http://garthpoitras.com/)
  * @license  MIT
- * Last modified: Jul 14, 2014
+ * Last modified: Jul 15, 2014
  */
 
 (function(exports, document) {
@@ -240,6 +240,14 @@ var Prompt = (function() {
           if (prompt.onComplete) { prompt.onComplete(); }
         }
       });
+
+      window.addEventListener('resize', function() {
+        var activeHilite = hiliter.parentNode;
+        var range = prompt.range;
+        if(activeHilite && range) {
+          positionHiliteRange(range);
+        }
+      });
     }
   }
 
@@ -248,34 +256,29 @@ var Prompt = (function() {
       var prompt = this;
       var element = prompt.element;
       prompt.range = window.getSelection().getRangeAt(0); // save the selection range
-      hiliteRange(prompt.range);
+      container.appendChild(hiliter);
+      positionHiliteRange(prompt.range);
       prompt.clear();
       setTimeout(function(){ element.focus(); }); // defer focus (disrupts mouseup events)
       if (callback) { prompt.onComplete = callback; }
     },
     dismiss: function() {
       this.clear();
-      unhiliteRange();
+      container.removeChild(hiliter);
     },
     clear: function() {
       this.element.value = null;
     }
   };
 
-  function hiliteRange(range) {
+  function positionHiliteRange(range) {
     var rect = range.getBoundingClientRect();
     var style = hiliter.style;
-
     style.width  = rect.width  + 'px';
     style.height = rect.height + 'px';
-    container.appendChild(hiliter);
     positionElementToRect(hiliter, rect);
   }
 
-  function unhiliteRange() {
-    container.removeChild(hiliter);
-  }
-
   return Prompt;
 }());
 
@@ -740,13 +743,8 @@ var Toolbar = (function() {
     updateForSelection: function(selection) {
       var toolbar = this;
       toolbar.show();
-      toolbar.positionToSelection(selection);
+      positionElementAbove(toolbar.element, selection.getRangeAt(0));
       updateButtonsForSelection(toolbar.buttons, selection);
-    },
-    positionToSelection: function(selection) {
-      if (!selection.isCollapsed) {
-        positionElementAbove(this.element, selection.getRangeAt(0));
-      }
     }
   };
 
@@ -762,8 +760,9 @@ var Toolbar = (function() {
     });
 
     window.addEventListener('resize', function() {
+      var activePrompt = toolbar.activePrompt;
       if(toolbar.isShowing) {
-        toolbar.positionToSelection(window.getSelection());
+        positionElementAbove(toolbar.element, activePrompt ? activePrompt.range : window.getSelection().getRangeAt(0));
       }
     });
   }

diff --git a/gulpfile.js b/gulpfile.js
@@ -40,6 +40,7 @@ var cssDistName = 'content-kit-editor.css';
 var cssDistPath = distDest + cssDistName;
 
 var testRunner = './tests/index.html';
+var demo       = './demo/index.html';
 
 var banner = ['/*!',
               ' * @overview <%= pkg.name %>: <%= pkg.description %>',
@@ -95,6 +96,11 @@ gulp.task('test-browser', function(){
              .pipe(open('<% file.path %>')); 
 });
 
+gulp.task('demo', function(){
+  return gulp.src(demo)
+             .pipe(open('<% file.path %>')); 
+});
+
 gulp.task('watch', function() {
   gulp.watch(jsSrc.concat(cssSrc), ['build']);
 });

diff --git a/src/js/prompt.js b/src/js/prompt.js
@@ -20,6 +20,14 @@ var Prompt = (function() {
           if (prompt.onComplete) { prompt.onComplete(); }
         }
       });
+
+      window.addEventListener('resize', function() {
+        var activeHilite = hiliter.parentNode;
+        var range = prompt.range;
+        if(activeHilite && range) {
+          positionHiliteRange(range);
+        }
+      });
     }
   }
 
@@ -28,33 +36,28 @@ var Prompt = (function() {
       var prompt = this;
       var element = prompt.element;
       prompt.range = window.getSelection().getRangeAt(0); // save the selection range
-      hiliteRange(prompt.range);
+      container.appendChild(hiliter);
+      positionHiliteRange(prompt.range);
       prompt.clear();
       setTimeout(function(){ element.focus(); }); // defer focus (disrupts mouseup events)
       if (callback) { prompt.onComplete = callback; }
     },
     dismiss: function() {
       this.clear();
-      unhiliteRange();
+      container.removeChild(hiliter);
     },
     clear: function() {
       this.element.value = null;
     }
   };
 
-  function hiliteRange(range) {
+  function positionHiliteRange(range) {
     var rect = range.getBoundingClientRect();
     var style = hiliter.style;
-
     style.width  = rect.width  + 'px';
     style.height = rect.height + 'px';
-    container.appendChild(hiliter);
     positionElementToRect(hiliter, rect);
   }
 
-  function unhiliteRange() {
-    container.removeChild(hiliter);
-  }
-
   return Prompt;
 }());
diff --git a/src/js/toolbar.js b/src/js/toolbar.js
@@ -69,13 +69,8 @@ var Toolbar = (function() {
     updateForSelection: function(selection) {
       var toolbar = this;
       toolbar.show();
-      toolbar.positionToSelection(selection);
+      positionElementAbove(toolbar.element, selection.getRangeAt(0));
       updateButtonsForSelection(toolbar.buttons, selection);
-    },
-    positionToSelection: function(selection) {
-      if (!selection.isCollapsed) {
-        positionElementAbove(this.element, selection.getRangeAt(0));
-      }
     }
   };
 
@@ -91,8 +86,9 @@ var Toolbar = (function() {
     });
 
     window.addEventListener('resize', function() {
+      var activePrompt = toolbar.activePrompt;
       if(toolbar.isShowing) {
-        toolbar.positionToSelection(window.getSelection());
+        positionElementAbove(toolbar.element, activePrompt ? activePrompt.range : window.getSelection().getRangeAt(0));
       }
     });
   }