Merge branch 'es-module-compare' into 'master'

Convert Compare and CompareAutocomplete classes into ES module syntax

See merge request gitlab-org/gitlab-ce!14857

app/assets/javascripts/compare.js

@@ -1,7 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, object-shorthand, consistent-return, no-unused-vars, comma-dangle, vars-on-top, prefer-template, max-len */
 
-window.Compare = (function() {
-  function Compare(opts) {
+export default class Compare {
+  constructor(opts) {
     this.opts = opts;
     this.source_loading = $(".js-source-loading");
     this.target_loading = $(".js-target-loading");
@@ -34,12 +34,12 @@ window.Compare = (function() {
     this.initialState();
   }
 
-  Compare.prototype.initialState = function() {
+  initialState() {
     this.getSourceHtml();
-    return this.getTargetHtml();
-  };
+    this.getTargetHtml();
+  }
 
-  Compare.prototype.getTargetProject = function() {
+  getTargetProject() {
     return $.ajax({
       url: this.opts.targetProjectUrl,
       data: {
@@ -52,22 +52,22 @@ window.Compare = (function() {
         return $('.js-target-branch-dropdown .dropdown-content').html(html);
       }
     });
-  };
+  }
 
-  Compare.prototype.getSourceHtml = function() {
-    return this.sendAjax(this.opts.sourceBranchUrl, this.source_loading, '.mr_source_commit', {
+  getSourceHtml() {
+    return this.constructor.sendAjax(this.opts.sourceBranchUrl, this.source_loading, '.mr_source_commit', {
       ref: $("input[name='merge_request[source_branch]']").val()
     });
-  };
+  }
 
-  Compare.prototype.getTargetHtml = function() {
-    return this.sendAjax(this.opts.targetBranchUrl, this.target_loading, '.mr_target_commit', {
+  getTargetHtml() {
+    return this.constructor.sendAjax(this.opts.targetBranchUrl, this.target_loading, '.mr_target_commit', {
       target_project_id: $("input[name='merge_request[target_project_id]']").val(),
       ref: $("input[name='merge_request[target_branch]']").val()
     });
-  };
+  }
 
-  Compare.prototype.sendAjax = function(url, loading, target, data) {
+  static sendAjax(url, loading, target, data) {
     var $target;
     $target = $(target);
     return $.ajax({
@@ -84,7 +84,5 @@ window.Compare = (function() {
         gl.utils.localTimeAgo($('.js-timeago', className));
       }
     });
-  };
-
-  return Compare;
-})();
+  }
+}

app/assets/javascripts/compare_autocomplete.js

@@ -1,68 +1,60 @@
 /* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, object-shorthand, comma-dangle, prefer-arrow-callback, no-else-return, newline-per-chained-call, wrap-iife, max-len */
 
-window.CompareAutocomplete = (function() {
-  function CompareAutocomplete() {
-    this.initDropdown();
-  }
-
-  CompareAutocomplete.prototype.initDropdown = function() {
-    return $('.js-compare-dropdown').each(function() {
-      var $dropdown, selected;
-      $dropdown = $(this);
-      selected = $dropdown.data('selected');
-      const $dropdownContainer = $dropdown.closest('.dropdown');
-      const $fieldInput = $(`input[name="${$dropdown.data('field-name')}"]`, $dropdownContainer);
-      const $filterInput = $('input[type="search"]', $dropdownContainer);
-      $dropdown.glDropdown({
-        data: function(term, callback) {
-          return $.ajax({
-            url: $dropdown.data('refs-url'),
-            data: {
-              ref: $dropdown.data('ref'),
-              search: term,
-            }
-          }).done(function(refs) {
-            return callback(refs);
-          });
-        },
-        selectable: true,
-        filterable: true,
-        filterRemote: true,
-        fieldName: $dropdown.data('field-name'),
-        filterInput: 'input[type="search"]',
-        renderRow: function(ref) {
-          var link;
-          if (ref.header != null) {
-            return $('<li />').addClass('dropdown-header').text(ref.header);
-          } else {
-            link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', escape(ref));
-            return $('<li />').append(link);
+export default function initCompareAutocomplete() {
+  $('.js-compare-dropdown').each(function() {
+    var $dropdown, selected;
+    $dropdown = $(this);
+    selected = $dropdown.data('selected');
+    const $dropdownContainer = $dropdown.closest('.dropdown');
+    const $fieldInput = $(`input[name="${$dropdown.data('field-name')}"]`, $dropdownContainer);
+    const $filterInput = $('input[type="search"]', $dropdownContainer);
+    $dropdown.glDropdown({
+      data: function(term, callback) {
+        return $.ajax({
+          url: $dropdown.data('refs-url'),
+          data: {
+            ref: $dropdown.data('ref'),
+            search: term,
           }
-        },
-        id: function(obj, $el) {
-          return $el.attr('data-ref');
-        },
-        toggleLabel: function(obj, $el) {
-          return $el.text().trim();
+        }).done(function(refs) {
+          return callback(refs);
+        });
+      },
+      selectable: true,
+      filterable: true,
+      filterRemote: true,
+      fieldName: $dropdown.data('field-name'),
+      filterInput: 'input[type="search"]',
+      renderRow: function(ref) {
+        var link;
+        if (ref.header != null) {
+          return $('<li />').addClass('dropdown-header').text(ref.header);
+        } else {
+          link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', escape(ref));
+          return $('<li />').append(link);
         }
-      });
-      $filterInput.on('keyup', (e) => {
-        const keyCode = e.keyCode || e.which;
-        if (keyCode !== 13) return;
-        const text = $filterInput.val();
-        $fieldInput.val(text);
-        $('.dropdown-toggle-text', $dropdown).text(text);
-        $dropdownContainer.removeClass('open');
-      });
-
-      $dropdownContainer.on('click', '.dropdown-content a', (e) => {
-        $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
-        if ($dropdown.hasClass('has-tooltip')) {
-          $dropdown.tooltip('fixTitle');
-        }
-      });
+      },
+      id: function(obj, $el) {
+        return $el.attr('data-ref');
+      },
+      toggleLabel: function(obj, $el) {
+        return $el.text().trim();
+      }
+    });
+    $filterInput.on('keyup', (e) => {
+      const keyCode = e.keyCode || e.which;
+      if (keyCode !== 13) return;
+      const text = $filterInput.val();
+      $fieldInput.val(text);
+      $('.dropdown-toggle-text', $dropdown).text(text);
+      $dropdownContainer.removeClass('open');
     });
-  };
 
-  return CompareAutocomplete;
-})();
+    $dropdownContainer.on('click', '.dropdown-content a', (e) => {
+      $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
+      if ($dropdown.hasClass('has-tooltip')) {
+        $dropdown.tooltip('fixTitle');
+      }
+    });
+  });
+}

app/assets/javascripts/dispatcher.js

@@ -22,8 +22,8 @@ import NewCommitForm from './new_commit_form';
 import Project from './project';
 import projectAvatar from './project_avatar';
 /* global MergeRequest */
-/* global Compare */
-/* global CompareAutocomplete */
+import Compare from './compare';
+import initCompareAutocomplete from './compare_autocomplete';
 /* global ProjectFindFile */
 import ProjectNew from './project_new';
 import projectImport from './project_import';
@@ -622,7 +622,7 @@ import ProjectVariables from './project_variables';
           projectAvatar();
           switch (path[1]) {
             case 'compare':
-              new CompareAutocomplete();
+              initCompareAutocomplete();
               break;
             case 'edit':
               shortcut_handler = new ShortcutsNavigation();

app/assets/javascripts/main.js

@@ -40,9 +40,6 @@ import './admin';
 import './aside';
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
-import './commits';
-import './compare';
-import './compare_autocomplete';
 import './confirm_danger_modal';
 import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';