Commit 20180395 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Export template selector as ES6 modules

parent 5d9585d1
/* 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);
}
}
......@@ -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':
......
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);
......
<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,
});
......
/* 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 = {}));
}
/* 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 = {}));
}
---
title: Remove template selector from global namespace
merge_request:
author:
type: performance
......@@ -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 = `
......
......@@ -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(() => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment