diff options
9 files changed, 278 insertions, 296 deletions
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js index e7adf8814b8..50d0cb5c86d 100644 --- a/app/assets/javascripts/commit/image_file.js +++ b/app/assets/javascripts/commit/image_file.js @@ -1,217 +1,208 @@ /* 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 - ImageFile.availWidth = 900; - - ImageFile.viewModes = ['two-up', 'swipe']; - - function ImageFile(file) { - this.file = file; - this.requestImageInfo($('.two-up.view .frame.deleted img', this.file), (function(_this) { - return function(deletedWidth, deletedHeight) { - return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function(width, height) { - _this.initViewModes(); - - // Load two-up view after images are loaded - // so that we can display the correct width and height information - const $images = $('.two-up.view img', _this.file); - - $images.waitForImages(function() { - _this.initView('two-up'); - }); +// Width where images must fits in, for 2-up this gets divided by 2 +const availWidth = 900; +const viewModes = ['two-up', 'swipe']; + +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) { + return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function(width, height) { + _this.initViewModes(); + + // Load two-up view after images are loaded + // so that we can display the correct width and height information + const $images = $('.two-up.view img', _this.file); + + $images.waitForImages(function() { + _this.initView('two-up'); + }); + }); + }; + })(this)); + } + + initViewModes() { + const viewMode = viewModes[0]; + $('.view-modes', this.file).removeClass('hide'); + $('.view-modes-menu', this.file).on('click', 'li', (function(_this) { + return function(event) { + if (!$(event.currentTarget).hasClass('active')) { + return _this.activateViewMode(event.currentTarget.className); + } + }; + })(this)); + return this.activateViewMode(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() { + $(".view." + viewMode, _this.file).fadeIn(200); + return _this.initView(viewMode); + }; + })(this)); + } + + initView(viewMode) { + return this.views[viewMode].call(this); + } + // eslint-disable-next-line class-methods-use-this + initDraggable($el, padding, callback) { + var dragging = false; + var $body = $('body'); + var $offsetEl = $el.parent(); + + $el.off('mousedown').on('mousedown', function() { + dragging = true; + $body.css('user-select', 'none'); + }); + + $body.off('mouseup').off('mousemove').on('mouseup', function() { + dragging = false; + $body.css('user-select', ''); + }) + .on('mousemove', function(e) { + var left; + if (!dragging) return; + + left = e.pageX - ($offsetEl.offset().left + padding); + + callback(e, left); + }); + } + + prepareFrames(view) { + var maxHeight, maxWidth; + maxWidth = 0; + maxHeight = 0; + $('.frame', view).each((function(_this) { + return function(index, frame) { + var height, width; + width = $(frame).width(); + height = $(frame).height(); + maxWidth = width > maxWidth ? width : maxWidth; + return maxHeight = height > maxHeight ? height : maxHeight; + }; + })(this)).css({ + width: maxWidth, + height: maxHeight + }); + return [maxWidth, maxHeight]; + } + + 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 > availWidth / 2) { + return $(this).width(availWidth / 2); + } + }); + return _this.requestImageInfo($('img', wrap), function(width, height) { + $('.image-info .meta-width', wrap).text(width + "px"); + $('.image-info .meta-height', wrap).text(height + "px"); + return $('.image-info', wrap).removeClass('hide'); }); }; })(this)); - } + }, + 'swipe': function() { + var maxHeight, maxWidth; + maxWidth = 0; + maxHeight = 0; + return $('.swipe.view', this.file).each((function(_this) { + return function(index, view) { + var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref; + ref = this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1]; + $swipeFrame = $('.swipe-frame', view); + $swipeWrap = $('.swipe-wrap', view); + $swipeBar = $('.swipe-bar', view); + + $swipeFrame.css({ + width: maxWidth + 16, + height: maxHeight + 28 + }); + $swipeWrap.css({ + width: maxWidth + 1, + height: maxHeight + 2 + }); + // Set swipeBar left position to match image frame + $swipeBar.css({ + left: 1 + }); - ImageFile.prototype.initViewModes = function() { - var viewMode; - viewMode = ImageFile.viewModes[0]; - $('.view-modes', this.file).removeClass('hide'); - $('.view-modes-menu', this.file).on('click', 'li', (function(_this) { - return function(event) { - if (!$(event.currentTarget).hasClass('active')) { - return _this.activateViewMode(event.currentTarget.className); - } - }; - })(this)); - return this.activateViewMode(viewMode); - }; - - ImageFile.prototype.activateViewMode = function(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() { - $(".view." + viewMode, _this.file).fadeIn(200); - return _this.initView(viewMode); + wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10); + + _this.initDraggable($swipeBar, wrapPadding, function(e, left) { + if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) { + $swipeWrap.width((maxWidth + 1) - left); + $swipeBar.css('left', left); + } + }); }; })(this)); - }; - - ImageFile.prototype.initView = function(viewMode) { - return this.views[viewMode].call(this); - }; - - ImageFile.prototype.initDraggable = function($el, padding, callback) { - var dragging = false; - var $body = $('body'); - var $offsetEl = $el.parent(); - - $el.off('mousedown').on('mousedown', function() { - dragging = true; - $body.css('user-select', 'none'); - }); - - $body.off('mouseup').off('mousemove').on('mouseup', function() { - dragging = false; - $body.css('user-select', ''); - }) - .on('mousemove', function(e) { - var left; - if (!dragging) return; + }, + 'onion-skin': function() { + var dragTrackWidth, maxHeight, maxWidth; + maxWidth = 0; + maxHeight = 0; + dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width(); + return $('.onion-skin.view', this.file).each((function(_this) { + return function(index, view) { + var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false; + ref = this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1]; + $frame = $('.onion-skin-frame', view); + $frameAdded = $('.frame.added', view); + $track = $('.drag-track', view); + $dragger = $('.dragger', $track); + + $frame.css({ + width: maxWidth + 16, + height: maxHeight + 28 + }); + $('.swipe-wrap', view).css({ + width: maxWidth + 1, + height: maxHeight + 2 + }); + $dragger.css({ + left: dragTrackWidth + }); - left = e.pageX - ($offsetEl.offset().left + padding); + framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10); - callback(e, left); - }); - }; + _this.initDraggable($dragger, framePadding, function(e, left) { + var opacity = left / dragTrackWidth; - prepareFrames = function(view) { - var maxHeight, maxWidth; - maxWidth = 0; - maxHeight = 0; - $('.frame', view).each((function(_this) { - return function(index, frame) { - var height, width; - width = $(frame).width(); - height = $(frame).height(); - maxWidth = width > maxWidth ? width : maxWidth; - return maxHeight = height > maxHeight ? height : maxHeight; + if (opacity >= 0 && opacity <= 1) { + $dragger.css('left', left); + $frameAdded.css('opacity', opacity); + } + }); }; - })(this)).css({ - width: maxWidth, - height: maxHeight - }); - return [maxWidth, maxHeight]; - }; - - ImageFile.prototype.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); - } - }); - return _this.requestImageInfo($('img', wrap), function(width, height) { - $('.image-info .meta-width', wrap).text(width + "px"); - $('.image-info .meta-height', wrap).text(height + "px"); - return $('.image-info', wrap).removeClass('hide'); - }); - }; - })(this)); - }, - 'swipe': function() { - var maxHeight, maxWidth; - maxWidth = 0; - maxHeight = 0; - 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]; - $swipeFrame = $('.swipe-frame', view); - $swipeWrap = $('.swipe-wrap', view); - $swipeBar = $('.swipe-bar', view); - - $swipeFrame.css({ - width: maxWidth + 16, - height: maxHeight + 28 - }); - $swipeWrap.css({ - width: maxWidth + 1, - height: maxHeight + 2 - }); - // Set swipeBar left position to match image frame - $swipeBar.css({ - left: 1 - }); - - wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10); - - _this.initDraggable($swipeBar, wrapPadding, function(e, left) { - if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) { - $swipeWrap.width((maxWidth + 1) - left); - $swipeBar.css('left', left); - } - }); - }; - })(this)); - }, - 'onion-skin': function() { - var dragTrackWidth, maxHeight, maxWidth; - maxWidth = 0; - maxHeight = 0; - dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width(); - 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]; - $frame = $('.onion-skin-frame', view); - $frameAdded = $('.frame.added', view); - $track = $('.drag-track', view); - $dragger = $('.dragger', $track); - - $frame.css({ - width: maxWidth + 16, - height: maxHeight + 28 - }); - $('.swipe-wrap', view).css({ - width: maxWidth + 1, - height: maxHeight + 2 - }); - $dragger.css({ - left: dragTrackWidth - }); - - framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10); - - _this.initDraggable($dragger, framePadding, function(e, left) { - var opacity = left / dragTrackWidth; - - if (opacity >= 0 && opacity <= 1) { - $dragger.css('left', left); - $frameAdded.css('opacity', opacity); - } - }); + })(this)); + } + } + + requestImageInfo(img, callback) { + const domImg = img.get(0); + if (domImg) { + if (domImg.complete) { + return callback.call(this, domImg.naturalWidth, domImg.naturalHeight); + } else { + return img.on('load', (function(_this) { + return function() { + return callback.call(_this, domImg.naturalWidth, domImg.naturalHeight); }; })(this)); } - }; - - ImageFile.prototype.requestImageInfo = function(img, callback) { - var domImg; - domImg = img.get(0); - if (domImg) { - if (domImg.complete) { - return callback.call(this, domImg.naturalWidth, domImg.naturalHeight); - } else { - return img.on('load', (function(_this) { - return function() { - return callback.call(_this, domImg.naturalWidth, domImg.naturalHeight); - }; - })(this)); - } - } - }; - - return ImageFile; - })(); -}).call(window); + } + } +} diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index 1eab5e5c81e..24476d3d757 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/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': diff --git a/app/assets/javascripts/image_diff/helpers/utils_helper.js b/app/assets/javascripts/image_diff/helpers/utils_helper.js index 96fc735e629..28d9a969143 100644 --- a/app/assets/javascripts/image_diff/helpers/utils_helper.js +++ b/app/assets/javascripts/image_diff/helpers/utils_helper.js @@ -1,7 +1,7 @@ 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); diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue index 1c40b286513..1ad0e59287e 100644 --- a/app/assets/javascripts/issue_show/components/fields/description_template.vue +++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue @@ -1,4 +1,6 @@ <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, }); diff --git a/app/assets/javascripts/templates/issuable_template_selector.js b/app/assets/javascripts/templates/issuable_template_selector.js index 9dd14488f22..8e167f5bf08 100644 --- a/app/assets/javascripts/templates/issuable_template_selector.js +++ b/app/assets/javascripts/templates/issuable_template_selector.js @@ -1,60 +1,56 @@ -/* 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 { - constructor(...args) { - super(...args); - this.projectPath = this.dropdown.data('project-path'); - this.namespacePath = this.dropdown.data('namespace-path'); - this.issuableType = this.$dropdownContainer.data('issuable-type'); - this.titleInput = $(`#${this.issuableType}_title`); - - const initialQuery = { - name: this.dropdown.data('selected') - }; - - if (initialQuery.name) this.requestFile(initialQuery); - - $('.reset-template', this.dropdown.parent()).on('click', () => { - this.setInputValueToTemplateContent(); - }); - - $('.no-template', this.dropdown.parent()).on('click', () => { - this.currentTemplate.content = ''; - this.setInputValueToTemplateContent(); - $('.dropdown-toggle-text', this.dropdown).text('Choose a template'); - }); - } +export default class IssuableTemplateSelector extends TemplateSelector { + constructor(...args) { + super(...args); + this.projectPath = this.dropdown.data('project-path'); + this.namespacePath = this.dropdown.data('namespace-path'); + this.issuableType = this.$dropdownContainer.data('issuable-type'); + this.titleInput = $(`#${this.issuableType}_title`); + + const initialQuery = { + name: this.dropdown.data('selected'), + }; + + if (initialQuery.name) this.requestFile(initialQuery); + + $('.reset-template', this.dropdown.parent()).on('click', () => { + this.setInputValueToTemplateContent(); + }); + + $('.no-template', this.dropdown.parent()).on('click', () => { + this.currentTemplate.content = ''; + this.setInputValueToTemplateContent(); + $('.dropdown-toggle-text', this.dropdown).text('Choose a template'); + }); + } - requestFile(query) { - this.startLoadingSpinner(); - Api.issueTemplate(this.namespacePath, this.projectPath, query.name, this.issuableType, (err, currentTemplate) => { - this.currentTemplate = currentTemplate; - if (err) return; // Error handled by global AJAX error handler - this.stopLoadingSpinner(); - this.setInputValueToTemplateContent(); - }); - return; - } + requestFile(query) { + this.startLoadingSpinner(); + Api.issueTemplate(this.namespacePath, this.projectPath, query.name, this.issuableType, (err, currentTemplate) => { + this.currentTemplate = currentTemplate; + if (err) return; // Error handled by global AJAX error handler + this.stopLoadingSpinner(); + this.setInputValueToTemplateContent(); + }); + return; + } - setInputValueToTemplateContent() { - // `this.setEditorContent` sets the value of the description input field - // to the content of the template selected. - if (this.titleInput.val() === '') { - // If the title has not yet been set, focus the title input and - // skip focusing the description input by setting `true` as the - // `skipFocus` option to `setEditorContent`. - this.setEditorContent(this.currentTemplate, { skipFocus: true }); - this.titleInput.focus(); - } else { - this.setEditorContent(this.currentTemplate, { skipFocus: false }); - } - return; + setInputValueToTemplateContent() { + // `this.setEditorContent` sets the value of the description input field + // to the content of the template selected. + if (this.titleInput.val() === '') { + // If the title has not yet been set, focus the title input and + // skip focusing the description input by setting `true` as the + // `skipFocus` option to `setEditorContent`. + this.setEditorContent(this.currentTemplate, { skipFocus: true }); + this.titleInput.focus(); + } else { + this.setEditorContent(this.currentTemplate, { skipFocus: false }); } + return; } - - global.IssuableTemplateSelector = IssuableTemplateSelector; -})(window.gl || (window.gl = {})); +} diff --git a/app/assets/javascripts/templates/issuable_template_selectors.js b/app/assets/javascripts/templates/issuable_template_selectors.js index 97f6d37364d..66d868c5839 100644 --- a/app/assets/javascripts/templates/issuable_template_selectors.js +++ b/app/assets/javascripts/templates/issuable_template_selectors.js @@ -1,31 +1,28 @@ -/* 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 { - constructor({ $dropdowns, editor } = {}) { - this.$dropdowns = $dropdowns || $('.js-issuable-selector'); - this.editor = editor || this.initEditor(); +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({ - pattern: /(\.md)/, - data: $dropdown.data('data'), - wrapper: $dropdown.closest('.js-issuable-selector-wrap'), - dropdown: $dropdown, - editor: this.editor - }); + this.$dropdowns.each((i, dropdown) => { + const $dropdown = $(dropdown); + new IssuableTemplateSelector({ + pattern: /(\.md)/, + data: $dropdown.data('data'), + wrapper: $dropdown.closest('.js-issuable-selector-wrap'), + dropdown: $dropdown, + editor: this.editor, }); - } - - initEditor() { - const editor = $('.markdown-area'); - // Proxy ace-editor's .setValue to jQuery's .val - editor.setValue = editor.val; - editor.getValue = editor.val; - return editor; - } + }); } - global.IssuableTemplateSelectors = IssuableTemplateSelectors; -})(window.gl || (window.gl = {})); + initEditor() { + const editor = $('.markdown-area'); + // Proxy ace-editor's .setValue to jQuery's .val + editor.setValue = editor.val; + editor.getValue = editor.val; + return editor; + } +} diff --git a/changelogs/unreleased/38869-templates.yml b/changelogs/unreleased/38869-templates.yml new file mode 100644 index 00000000000..957b5f27bd0 --- /dev/null +++ b/changelogs/unreleased/38869-templates.yml @@ -0,0 +1,5 @@ +--- +title: Remove template selector from global namespace +merge_request: +author: +type: performance diff --git a/spec/javascripts/image_diff/helpers/utils_helper_spec.js b/spec/javascripts/image_diff/helpers/utils_helper_spec.js index 56d77a05c4c..31949c39d9c 100644 --- a/spec/javascripts/image_diff/helpers/utils_helper_spec.js +++ b/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 = ` diff --git a/spec/javascripts/issue_show/components/form_spec.js b/spec/javascripts/issue_show/components/form_spec.js index 6e89528a3ea..000b53af016 100644 --- a/spec/javascripts/issue_show/components/form_spec.js +++ b/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(() => { |