Merge pull request #666 from ZogStriP/fix-quote-button-position-when-custom-header

FIX: quote reply button position was wrong when there is a custom header

app/assets/javascripts/discourse/controllers/quote_button_controller.js

@@ -16,25 +16,35 @@ Discourse.QuoteButtonController = Discourse.Controller.extend({
     $LAB.script(assetPath('defer/html-sanitizer-bundle'));
   },
 
-  // If the buffer is cleared, clear out other state (post)
-  bufferChanged: (function() {
+  /**
+    If the buffer is cleared, clear out other state (post)
+  **/
+  bufferChanged: function() {
     if (this.blank('buffer')) this.set('post', null);
-  }).observes('buffer'),
+  }.observes('buffer'),
 
+  /**
+    Save the currently selected text and displays the
+    "quote reply" buttong
+
+    @method selectText
+  **/
   selectText: function(e) {
     // anonymous users cannot "quote-reply"
     if (!Discourse.get('currentUser')) return;
-    // there is no need to display the "quote-reply" button if we can't create a post
+    // don't display the "quote-reply" button if we can't create a post
     if (!this.get('controllers.topic.content.can_create_post')) return;
 
     // retrieve the selected range
     var range = window.getSelection().getRangeAt(0);
     var cloned = range.cloneRange();
 
-    // do not be present the "quote reply" button if you select text spanning two posts
+    // don't display the "quote reply" button if you select text spanning two posts
     // this basically look for the first "DIV" container...
     var commonDivAncestorContainer = range.commonAncestorContainer;
-    while (commonDivAncestorContainer.nodeName !== 'DIV') commonDivAncestorContainer = commonDivAncestorContainer.parentNode;
+    while (commonDivAncestorContainer.nodeName !== 'DIV') {
+      commonDivAncestorContainer = commonDivAncestorContainer.parentNode;
+    }
     // ... and check it has the 'cooked' class (which indicates we're in a post)
     if (commonDivAncestorContainer.className.indexOf('cooked') === -1) return;
 
@@ -55,23 +65,20 @@ Discourse.QuoteButtonController = Discourse.Controller.extend({
     // insert it at the beginning of our range
     range.insertNode(markerElement);
 
+    // work around chrome that would sometimes lose the selection
     var sel = window.getSelection();
     sel.removeAllRanges();
     sel.addRange(cloned);
 
-    // find marker position (cf. http://www.quirksmode.org/js/findpos.html)
-    var obj = markerElement, left = 0, top = 0;
-    do {
-      left += obj.offsetLeft;
-      top += obj.offsetTop;
-      obj = obj.offsetParent;
-    } while (obj.offsetParent);
-
     // move the quote button at the beginning of the selection
-    var $quoteButton = $('.quote-button');
-    $quoteButton.css({
-      top: top - $quoteButton.outerHeight() - 5,
-      left: left
+    var markerOffset = $(markerElement).offset(),
+        $quoteButton = $('.quote-button');
+
+    Em.run.next(function(){
+      $quoteButton.offset({
+        top: markerOffset.top - $quoteButton.outerHeight() - 5,
+        left: markerOffset.left
+      });
     });
 
     // remove the marker

app/assets/javascripts/discourse/views/quote_button_view.js

@@ -15,9 +15,9 @@ Discourse.QuoteButtonView = Discourse.View.extend({
     buffer.push(Em.String.i18n("post.quote_reply"));
   },
 
-  hasBuffer: (function() {
+  hasBuffer: function() {
     return this.present('controller.buffer') ? 'visible' : null;
-  }).property('controller.buffer'),
+  }.property('controller.buffer'),
 
   willDestroyElement: function() {
     $(document).off("mousedown.quote-button");