Merge branch '38869-templates' into 'master'

Export template selector as ES6 modules

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

app/assets/javascripts/commit/image_file.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-use-before-define, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, quotes, one-var, one-var-declaration-per-line, no-unused-vars, no-return-assign, comma-dangle, quote-props, no-unused-expressions, no-sequences, object-shorthand, max-len */
 import 'vendor/jquery.waitforimages';
 
-(function() {
-  gl.ImageFile = (function() {
-    var prepareFrames;
+// Width where images must fits in, for 2-up this gets divided by 2
+const availWidth = 900;
+const viewModes = ['two-up', 'swipe'];
 
-    // Width where images must fits in, for 2-up this gets divided by 2
-    ImageFile.availWidth = 900;
-
-    ImageFile.viewModes = ['two-up', 'swipe'];
-
-    function ImageFile(file) {
+export default class ImageFile {
+  constructor(file) {
     this.file = file;
     this.requestImageInfo($('.two-up.view .frame.deleted img', this.file), (function(_this) {
       return function(deletedWidth, deletedHeight) {
@@ -29,9 +25,8 @@ import 'vendor/jquery.waitforimages';
     })(this));
   }
 
-    ImageFile.prototype.initViewModes = function() {
-      var viewMode;
-      viewMode = ImageFile.viewModes[0];
+  initViewModes() {
+    const viewMode = viewModes[0];
     $('.view-modes', this.file).removeClass('hide');
     $('.view-modes-menu', this.file).on('click', 'li', (function(_this) {
       return function(event) {
@@ -41,9 +36,9 @@ import 'vendor/jquery.waitforimages';
       };
     })(this));
     return this.activateViewMode(viewMode);
-    };
+  }
 
-    ImageFile.prototype.activateViewMode = function(viewMode) {
+  activateViewMode(viewMode) {
     $('.view-modes-menu li', this.file).removeClass('active').filter("." + viewMode).addClass('active');
     return $(".view:visible:not(." + viewMode + ")", this.file).fadeOut(200, (function(_this) {
       return function() {
@@ -51,13 +46,13 @@ import 'vendor/jquery.waitforimages';
         return _this.initView(viewMode);
       };
     })(this));
-    };
+  }
 
-    ImageFile.prototype.initView = function(viewMode) {
+  initView(viewMode) {
     return this.views[viewMode].call(this);
-    };
-
-    ImageFile.prototype.initDraggable = function($el, padding, callback) {
+  }
+  // eslint-disable-next-line class-methods-use-this
+  initDraggable($el, padding, callback) {
     var dragging = false;
     var $body = $('body');
     var $offsetEl = $el.parent();
@@ -79,9 +74,9 @@ import 'vendor/jquery.waitforimages';
 
       callback(e, left);
     });
-    };
+  }
 
-    prepareFrames = function(view) {
+  prepareFrames(view) {
     var maxHeight, maxWidth;
     maxWidth = 0;
     maxHeight = 0;
@@ -98,17 +93,17 @@ import 'vendor/jquery.waitforimages';
       height: maxHeight
     });
     return [maxWidth, maxHeight];
-    };
+  }
 
-    ImageFile.prototype.views = {
+  views = {
     'two-up': function() {
       return $('.two-up.view .wrap', this.file).each((function(_this) {
         return function(index, wrap) {
           $('img', wrap).each(function() {
             var currentWidth;
             currentWidth = $(this).width();
-              if (currentWidth > ImageFile.availWidth / 2) {
-                return $(this).width(ImageFile.availWidth / 2);
+            if (currentWidth > availWidth / 2) {
+              return $(this).width(availWidth / 2);
             }
           });
           return _this.requestImageInfo($('img', wrap), function(width, height) {
@@ -126,7 +121,7 @@ import 'vendor/jquery.waitforimages';
       return $('.swipe.view', this.file).each((function(_this) {
         return function(index, view) {
           var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-            ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
           $swipeFrame = $('.swipe-frame', view);
           $swipeWrap = $('.swipe-wrap', view);
           $swipeBar = $('.swipe-bar', view);
@@ -163,7 +158,7 @@ import 'vendor/jquery.waitforimages';
       return $('.onion-skin.view', this.file).each((function(_this) {
         return function(index, view) {
           var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
-            ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
           $frame = $('.onion-skin-frame', view);
           $frameAdded = $('.frame.added', view);
           $track = $('.drag-track', view);
@@ -194,11 +189,10 @@ import 'vendor/jquery.waitforimages';
         };
       })(this));
     }
-    };
+  }
 
-    ImageFile.prototype.requestImageInfo = function(img, callback) {
-      var domImg;
-      domImg = img.get(0);
+  requestImageInfo(img, callback) {
+    const domImg = img.get(0);
     if (domImg) {
       if (domImg.complete) {
         return callback.call(this, domImg.naturalWidth, domImg.naturalHeight);
@@ -210,8 +204,5 @@ import 'vendor/jquery.waitforimages';
         })(this));
       }
     }
-    };
-
-    return ImageFile;
-  })();
-}).call(window);
+  }
+}

app/assets/javascripts/dispatcher.js

@@ -30,7 +30,7 @@ import projectImport from './project_import';
 import Labels from './labels';
 import LabelManager from './label_manager';
 /* global Sidebar */
-
+import IssuableTemplateSelectors from './templates/issuable_template_selectors';
 import Flash from './flash';
 import CommitsList from './commits';
 import Issue from './issue';
@@ -264,7 +264,7 @@ import ProjectVariables from './project_variables';
           new IssuableForm($('.issue-form'));
           new LabelsSelect();
           new MilestoneSelect();
-          new gl.IssuableTemplateSelectors();
+          new IssuableTemplateSelectors();
           break;
         case 'projects:merge_requests:creations:new':
           const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
@@ -288,7 +288,7 @@ import ProjectVariables from './project_variables';
           new IssuableForm($('.merge-request-form'));
           new LabelsSelect();
           new MilestoneSelect();
-          new gl.IssuableTemplateSelectors();
+          new IssuableTemplateSelectors();
           new AutoWidthDropdownSelect($('.js-target-branch-select')).init();
           break;
         case 'projects:tags:new':

app/assets/javascripts/image_diff/helpers/utils_helper.js

 import ImageBadge from '../image_badge';
 import ImageDiff from '../image_diff';
 import ReplacedImageDiff from '../replaced_image_diff';
-import '../../commit/image_file';
+import ImageFile from '../../commit/image_file';
 
 export function resizeCoordinatesToImageElement(imageEl, meta) {
   const { x, y, width, height } = meta;
@@ -81,7 +81,7 @@ export function initImageDiff(fileEl, canCreateNote, renderCommentBadge) {
 
   // ImageFile needs to be invoked before initImageDiff so that badges
   // can mount to the correct location
-  new gl.ImageFile(fileEl); // eslint-disable-line no-new
+  new ImageFile(fileEl); // eslint-disable-line no-new
 
   if (fileEl.querySelector('.diff-file .js-single-image')) {
     diff = new ImageDiff(fileEl, options);

app/assets/javascripts/issue_show/components/fields/description_template.vue

 <script>
+  import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors';
+
   export default {
     props: {
       formState: {
@@ -32,7 +34,7 @@
       };
       editor.getValue = () => this.formState.description;
 
-      this.issuableTemplate = new gl.IssuableTemplateSelectors({
+      this.issuableTemplate = new IssuableTemplateSelectors({
         $dropdowns: $(this.$refs.toggle),
         editor,
       });

app/assets/javascripts/templates/issuable_template_selector.js

-/* eslint-disable comma-dangle, max-len, no-useless-return, no-param-reassign, max-len */
-import Api from '../api';
+/* eslint-disable no-useless-return, max-len */
 
+import Api from '../api';
 import TemplateSelector from '../blob/template_selector';
 
-((global) => {
-  class IssuableTemplateSelector extends TemplateSelector {
+export default class IssuableTemplateSelector extends TemplateSelector {
   constructor(...args) {
     super(...args);
     this.projectPath = this.dropdown.data('project-path');
@@ -13,7 +12,7 @@ import TemplateSelector from '../blob/template_selector';
     this.titleInput = $(`#${this.issuableType}_title`);
 
     const initialQuery = {
-        name: this.dropdown.data('selected')
+      name: this.dropdown.data('selected'),
     };
 
     if (initialQuery.name) this.requestFile(initialQuery);
@@ -54,7 +53,4 @@ import TemplateSelector from '../blob/template_selector';
     }
     return;
   }
-  }
-
-  global.IssuableTemplateSelector = IssuableTemplateSelector;
-})(window.gl || (window.gl = {}));
+}

app/assets/javascripts/templates/issuable_template_selectors.js

-/* eslint-disable no-new, comma-dangle, class-methods-use-this, no-param-reassign */
+/* eslint-disable no-new, class-methods-use-this */
+import IssuableTemplateSelector from './issuable_template_selector';
 
-((global) => {
-  class IssuableTemplateSelectors {
+export default class IssuableTemplateSelectors {
   constructor({ $dropdowns, editor } = {}) {
     this.$dropdowns = $dropdowns || $('.js-issuable-selector');
     this.editor = editor || this.initEditor();
 
     this.$dropdowns.each((i, dropdown) => {
       const $dropdown = $(dropdown);
-        new gl.IssuableTemplateSelector({
+      new IssuableTemplateSelector({
         pattern: /(\.md)/,
         data: $dropdown.data('data'),
         wrapper: $dropdown.closest('.js-issuable-selector-wrap'),
         dropdown: $dropdown,
-          editor: this.editor
+        editor: this.editor,
       });
     });
   }
@@ -25,7 +25,4 @@
     editor.getValue = editor.val;
     return editor;
   }
-  }
-
-  global.IssuableTemplateSelectors = IssuableTemplateSelectors;
-})(window.gl || (window.gl = {}));
+}

changelogs/unreleased/38869-templates.yml

+---
+title: Remove template selector from global namespace
+merge_request:
+author:
+type: performance

spec/javascripts/image_diff/helpers/utils_helper_spec.js

@@ -157,27 +157,19 @@ describe('utilsHelper', () => {
     beforeEach(() => {
       window.gl = window.gl || (window.gl = {});
       glCache = window.gl;
-      window.gl.ImageFile = () => {};
       fileEl = document.createElement('div');
       fileEl.innerHTML = `
         <div class="diff-file"></div>
       `;
 
-      spyOn(ImageDiff.prototype, 'init').and.callFake(() => {});
       spyOn(ReplacedImageDiff.prototype, 'init').and.callFake(() => {});
+      spyOn(ImageDiff.prototype, 'init').and.callFake(() => {});
     });
 
     afterEach(() => {
       window.gl = glCache;
     });
 
-    it('should initialize gl.ImageFile', () => {
-      spyOn(window.gl, 'ImageFile');
-
-      utilsHelper.initImageDiff(fileEl, false, false);
-      expect(gl.ImageFile).toHaveBeenCalled();
-    });
-
     it('should initialize ImageDiff if js-single-image', () => {
       const diffFileEl = fileEl.querySelector('.diff-file');
       diffFileEl.innerHTML = `

spec/javascripts/issue_show/components/form_spec.js

@@ -34,7 +34,6 @@ describe('Inline edit form component', () => {
   });
 
   it('renders template selector when templates exists', (done) => {
-    spyOn(gl, 'IssuableTemplateSelectors');
     vm.issuableTemplates = ['test'];
 
     Vue.nextTick(() => {