Merge branch '25364-fix-preview-multi-request' into 'master'

Resolve "Clicking markdown 'Preview' tab spawns two XHR requests"

Closes #25364

See merge request !8031

1 files changed, 55 insertions, 60 deletions

diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js
index 1e261cd49c2..89f7e976934 100644
--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@@ -1,14 +1,17 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, wrap-iife, no-else-return, consistent-return, object-shorthand, comma-dangle, no-param-reassign, padded-blocks, camelcase, prefer-arrow-callback, max-len */
+/* eslint-disable func-names, no-var, object-shorthand, comma-dangle, prefer-arrow-callback */
 
 // MarkdownPreview
 //
 // Handles toggling the "Write" and "Preview" tab clicks, rendering the preview,
 // and showing a warning when more than `x` users are referenced.
 //
-(function() {
-  var lastTextareaPreviewed, markdownPreview, previewButtonSelector, writeButtonSelector;
+(function () {
+  var lastTextareaPreviewed;
+  var markdownPreview;
+  var previewButtonSelector;
+  var writeButtonSelector;
 
-  window.MarkdownPreview = (function() {
+  window.MarkdownPreview = (function () {
     function MarkdownPreview() {}
 
     // Minimum number of users referenced before triggering a warning
@@ -16,73 +19,71 @@
 
     MarkdownPreview.prototype.ajaxCache = {};
 
-    MarkdownPreview.prototype.showPreview = function(form) {
-      var mdText, preview;
-      preview = form.find('.js-md-preview');
-      mdText = form.find('textarea.markdown-area').val();
+    MarkdownPreview.prototype.showPreview = function ($form) {
+      var mdText;
+      var preview = $form.find('.js-md-preview');
+      if (preview.hasClass('md-preview-loading')) {
+        return;
+      }
+      mdText = $form.find('textarea.markdown-area').val();
+
       if (mdText.trim().length === 0) {
         preview.text('Nothing to preview.');
-        return this.hideReferencedUsers(form);
+        this.hideReferencedUsers($form);
       } else {
-        preview.text('Loading...');
-        return this.renderMarkdown(mdText, (function(_this) {
-          return function(response) {
-            preview.html(response.body);
-            preview.renderGFM();
-            return _this.renderReferencedUsers(response.references.users, form);
-          };
-        })(this));
+        preview.addClass('md-preview-loading').text('Loading...');
+        this.fetchMarkdownPreview(mdText, (function (response) {
+          preview.removeClass('md-preview-loading').html(response.body);
+          preview.renderGFM();
+          this.renderReferencedUsers(response.references.users, $form);
+        }).bind(this));
       }
     };
 
-    MarkdownPreview.prototype.renderMarkdown = function(text, success) {
+    MarkdownPreview.prototype.fetchMarkdownPreview = function (text, success) {
       if (!window.preview_markdown_path) {
         return;
       }
       if (text === this.ajaxCache.text) {
-        return success(this.ajaxCache.response);
+        success(this.ajaxCache.response);
+        return;
       }
-      return $.ajax({
+      $.ajax({
         type: 'POST',
         url: window.preview_markdown_path,
         data: {
           text: text
         },
         dataType: 'json',
-        success: (function(_this) {
-          return function(response) {
-            _this.ajaxCache = {
-              text: text,
-              response: response
-            };
-            return success(response);
+        success: (function (response) {
+          this.ajaxCache = {
+            text: text,
+            response: response
           };
-        })(this)
+          success(response);
+        }).bind(this)
       });
     };
 
-    MarkdownPreview.prototype.hideReferencedUsers = function(form) {
-      var referencedUsers;
-      referencedUsers = form.find('.referenced-users');
-      return referencedUsers.hide();
+    MarkdownPreview.prototype.hideReferencedUsers = function ($form) {
+      $form.find('.referenced-users').hide();
     };
 
-    MarkdownPreview.prototype.renderReferencedUsers = function(users, form) {
+    MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
       var referencedUsers;
-      referencedUsers = form.find('.referenced-users');
+      referencedUsers = $form.find('.referenced-users');
       if (referencedUsers.length) {
         if (users.length >= this.referenceThreshold) {
           referencedUsers.show();
-          return referencedUsers.find('.js-referenced-users-count').text(users.length);
+          referencedUsers.find('.js-referenced-users-count').text(users.length);
         } else {
-          return referencedUsers.hide();
+          referencedUsers.hide();
         }
       }
     };
 
     return MarkdownPreview;
-
-  })();
+  }());
 
   markdownPreview = new window.MarkdownPreview();
 
@@ -92,19 +93,14 @@
 
   lastTextareaPreviewed = null;
 
-  $.fn.setupMarkdownPreview = function() {
-    var $form, form_textarea;
-    $form = $(this);
-    form_textarea = $form.find('textarea.markdown-area');
-    form_textarea.on('input', function() {
-      return markdownPreview.hideReferencedUsers($form);
-    });
-    return form_textarea.on('blur', function() {
-      return markdownPreview.showPreview($form);
+  $.fn.setupMarkdownPreview = function () {
+    var $form = $(this);
+    $form.find('textarea.markdown-area').on('input', function () {
+      markdownPreview.hideReferencedUsers($form);
     });
   };
 
-  $(document).on('markdown-preview:show', function(e, $form) {
+  $(document).on('markdown-preview:show', function (e, $form) {
     if (!$form) {
       return;
     }
@@ -115,10 +111,10 @@
     // toggle content
     $form.find('.md-write-holder').hide();
     $form.find('.md-preview-holder').show();
-    return markdownPreview.showPreview($form);
+    markdownPreview.showPreview($form);
   });
 
-  $(document).on('markdown-preview:hide', function(e, $form) {
+  $(document).on('markdown-preview:hide', function (e, $form) {
     if (!$form) {
       return;
     }
@@ -129,34 +125,33 @@
     // toggle content
     $form.find('.md-write-holder').show();
     $form.find('textarea.markdown-area').focus();
-    return $form.find('.md-preview-holder').hide();
+    $form.find('.md-preview-holder').hide();
   });
 
-  $(document).on('markdown-preview:toggle', function(e, keyboardEvent) {
+  $(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
     var $target;
     $target = $(keyboardEvent.target);
     if ($target.is('textarea.markdown-area')) {
       $(document).triggerHandler('markdown-preview:show', [$target.closest('form')]);
-      return keyboardEvent.preventDefault();
+      keyboardEvent.preventDefault();
     } else if (lastTextareaPreviewed) {
       $target = lastTextareaPreviewed;
       $(document).triggerHandler('markdown-preview:hide', [$target.closest('form')]);
-      return keyboardEvent.preventDefault();
+      keyboardEvent.preventDefault();
     }
   });
 
-  $(document).on('click', previewButtonSelector, function(e) {
+  $(document).on('click', previewButtonSelector, function (e) {
     var $form;
     e.preventDefault();
     $form = $(this).closest('form');
-    return $(document).triggerHandler('markdown-preview:show', [$form]);
+    $(document).triggerHandler('markdown-preview:show', [$form]);
   });
 
-  $(document).on('click', writeButtonSelector, function(e) {
+  $(document).on('click', writeButtonSelector, function (e) {
     var $form;
     e.preventDefault();
     $form = $(this).closest('form');
-    return $(document).triggerHandler('markdown-preview:hide', [$form]);
+    $(document).triggerHandler('markdown-preview:hide', [$form]);
   });
-
-}).call(this);
+}());