From d8e6b3b6223e61dade1ecc244a948251b79b9f45 Mon Sep 17 00:00:00 2001
From: gdub22 <garth22@gmail.com>
Date: Tue, 15 Jul 2014 10:16:24 -0400
Subject: [PATCH] bug fix: positioning when resizing window while editing a
 link

---
 dist/content-kit-editor.js | 33 ++++++++++++++++-----------------
 gulpfile.js                |  6 ++++++
 src/js/prompt.js           | 21 ++++++++++++---------
 src/js/toolbar.js          | 10 +++-------
 4 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/dist/content-kit-editor.js b/dist/content-kit-editor.js
index 79a4153a9..1fff0f8f1 100644
--- a/dist/content-kit-editor.js
+++ b/dist/content-kit-editor.js
@@ -3,7 +3,7 @@
  * @version  0.1.0
  * @author   Garth Poitras <garth22@gmail.com> (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
index 8b3b5343a..0d7816f31 100644
--- 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
index 8c5883378..5d5ecc7f1 100644
--- 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
index 0e85a7802..b5fc70449 100644
--- 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));
       }
     });
   }