Commit a8a4ca17 authored by Clement Ho's avatar Clement Ho

Merge branch 'remove-more-iifes' into 'master'

Remove IIFEs around several javascript classes

See merge request !12581
parents 11e03bf4 c06dad62
...@@ -2,56 +2,54 @@ ...@@ -2,56 +2,54 @@
/* eslint no-new: "off" */ /* eslint no-new: "off" */
import AccessorUtilities from './lib/utils/accessor'; import AccessorUtilities from './lib/utils/accessor';
((global) => { /**
/** * Memorize the last selected tab after reloading a page.
* Memorize the last selected tab after reloading a page. * Does that setting the current selected tab in the localStorage
* Does that setting the current selected tab in the localStorage */
*/ class ActiveTabMemoizer {
class ActiveTabMemoizer { constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) { this.currentTabKey = currentTabKey;
this.currentTabKey = currentTabKey; this.tabSelector = tabSelector;
this.tabSelector = tabSelector; this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
this.bootstrap();
this.bootstrap(); }
}
bootstrap() {
const tabs = document.querySelectorAll(this.tabSelector);
if (tabs.length > 0) {
tabs[0].addEventListener('click', (e) => {
if (e.target && e.target.nodeName === 'A') {
const anchorName = e.target.getAttribute('href');
this.saveData(anchorName);
}
});
}
this.showTab(); bootstrap() {
const tabs = document.querySelectorAll(this.tabSelector);
if (tabs.length > 0) {
tabs[0].addEventListener('click', (e) => {
if (e.target && e.target.nodeName === 'A') {
const anchorName = e.target.getAttribute('href');
this.saveData(anchorName);
}
});
} }
showTab() { this.showTab();
const anchorName = this.readData(); }
if (anchorName) {
const tab = document.querySelector(`${this.tabSelector} a[href="${anchorName}"]`); showTab() {
if (tab) { const anchorName = this.readData();
tab.click(); if (anchorName) {
} const tab = document.querySelector(`${this.tabSelector} a[href="${anchorName}"]`);
if (tab) {
tab.click();
} }
} }
}
saveData(val) { saveData(val) {
if (!this.isLocalStorageAvailable) return undefined; if (!this.isLocalStorageAvailable) return undefined;
return window.localStorage.setItem(this.currentTabKey, val); return window.localStorage.setItem(this.currentTabKey, val);
} }
readData() { readData() {
if (!this.isLocalStorageAvailable) return null; if (!this.isLocalStorageAvailable) return null;
return window.localStorage.getItem(this.currentTabKey); return window.localStorage.getItem(this.currentTabKey);
}
} }
}
global.ActiveTabMemoizer = ActiveTabMemoizer; window.ActiveTabMemoizer = ActiveTabMemoizer;
})(window);
...@@ -2,99 +2,97 @@ ...@@ -2,99 +2,97 @@
import FilesCommentButton from './files_comment_button'; import FilesCommentButton from './files_comment_button';
(function() { window.SingleFileDiff = (function() {
window.SingleFileDiff = (function() { var COLLAPSED_HTML, ERROR_HTML, LOADING_HTML, WRAPPER;
var COLLAPSED_HTML, ERROR_HTML, LOADING_HTML, WRAPPER;
WRAPPER = '<div class="diff-content"></div>'; WRAPPER = '<div class="diff-content"></div>';
LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>'; LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>'; ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>';
COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <a class="click-to-expand">Click to expand it.</a></div>'; COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <a class="click-to-expand">Click to expand it.</a></div>';
function SingleFileDiff(file) { function SingleFileDiff(file) {
this.file = file; this.file = file;
this.toggleDiff = this.toggleDiff.bind(this); this.toggleDiff = this.toggleDiff.bind(this);
this.content = $('.diff-content', this.file); this.content = $('.diff-content', this.file);
this.$toggleIcon = $('.diff-toggle-caret', this.file); this.$toggleIcon = $('.diff-toggle-caret', this.file);
this.diffForPath = this.content.find('[data-diff-for-path]').data('diff-for-path'); this.diffForPath = this.content.find('[data-diff-for-path]').data('diff-for-path');
this.isOpen = !this.diffForPath; this.isOpen = !this.diffForPath;
if (this.diffForPath) { if (this.diffForPath) {
this.collapsedContent = this.content; this.collapsedContent = this.content;
this.loadingContent = $(WRAPPER).addClass('loading').html(LOADING_HTML).hide(); this.loadingContent = $(WRAPPER).addClass('loading').html(LOADING_HTML).hide();
this.content = null; this.content = null;
this.collapsedContent.after(this.loadingContent); this.collapsedContent.after(this.loadingContent);
this.$toggleIcon.addClass('fa-caret-right'); this.$toggleIcon.addClass('fa-caret-right');
} else { } else {
this.collapsedContent = $(WRAPPER).html(COLLAPSED_HTML).hide(); this.collapsedContent = $(WRAPPER).html(COLLAPSED_HTML).hide();
this.content.after(this.collapsedContent); this.content.after(this.collapsedContent);
this.$toggleIcon.addClass('fa-caret-down'); this.$toggleIcon.addClass('fa-caret-down');
} }
$('.js-file-title, .click-to-expand', this.file).on('click', (function (e) {
this.toggleDiff($(e.target));
}).bind(this));
}
$('.js-file-title, .click-to-expand', this.file).on('click', (function (e) { SingleFileDiff.prototype.toggleDiff = function($target, cb) {
this.toggleDiff($(e.target)); if (!$target.hasClass('js-file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
}).bind(this)); this.isOpen = !this.isOpen;
if (!this.isOpen && !this.hasError) {
this.content.hide();
this.$toggleIcon.addClass('fa-caret-right').removeClass('fa-caret-down');
this.collapsedContent.show();
if (typeof gl.diffNotesCompileComponents !== 'undefined') {
gl.diffNotesCompileComponents();
}
} else if (this.content) {
this.collapsedContent.hide();
this.content.show();
this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
if (typeof gl.diffNotesCompileComponents !== 'undefined') {
gl.diffNotesCompileComponents();
}
} else {
this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
return this.getContentHTML(cb);
} }
};
SingleFileDiff.prototype.toggleDiff = function($target, cb) { SingleFileDiff.prototype.getContentHTML = function(cb) {
if (!$target.hasClass('js-file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return; this.collapsedContent.hide();
this.isOpen = !this.isOpen; this.loadingContent.show();
if (!this.isOpen && !this.hasError) { $.get(this.diffForPath, (function(_this) {
this.content.hide(); return function(data) {
this.$toggleIcon.addClass('fa-caret-right').removeClass('fa-caret-down'); _this.loadingContent.hide();
this.collapsedContent.show(); if (data.html) {
if (typeof gl.diffNotesCompileComponents !== 'undefined') { _this.content = $(data.html);
gl.diffNotesCompileComponents(); _this.content.syntaxHighlight();
} else {
_this.hasError = true;
_this.content = $(ERROR_HTML);
} }
} else if (this.content) { _this.collapsedContent.after(_this.content);
this.collapsedContent.hide();
this.content.show();
this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
if (typeof gl.diffNotesCompileComponents !== 'undefined') { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
gl.diffNotesCompileComponents(); gl.diffNotesCompileComponents();
} }
} else {
this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
return this.getContentHTML(cb);
}
};
SingleFileDiff.prototype.getContentHTML = function(cb) {
this.collapsedContent.hide();
this.loadingContent.show();
$.get(this.diffForPath, (function(_this) {
return function(data) {
_this.loadingContent.hide();
if (data.html) {
_this.content = $(data.html);
_this.content.syntaxHighlight();
} else {
_this.hasError = true;
_this.content = $(ERROR_HTML);
}
_this.collapsedContent.after(_this.content);
if (typeof gl.diffNotesCompileComponents !== 'undefined') {
gl.diffNotesCompileComponents();
}
FilesCommentButton.init($(_this.file)); FilesCommentButton.init($(_this.file));
if (cb) cb(); if (cb) cb();
}; };
})(this)); })(this));
}; };
return SingleFileDiff; return SingleFileDiff;
})(); })();
$.fn.singleFileDiff = function() { $.fn.singleFileDiff = function() {
return this.each(function() { return this.each(function() {
if (!$.data(this, 'singleFileDiff')) { if (!$.data(this, 'singleFileDiff')) {
return $.data(this, 'singleFileDiff', new window.SingleFileDiff(this)); return $.data(this, 'singleFileDiff', new window.SingleFileDiff(this));
} }
}); });
}; };
}).call(window);
/* /**
* Instances of SmartInterval extend the functionality of `setInterval`, make it configurable * Instances of SmartInterval extend the functionality of `setInterval`, make it configurable
* and controllable by a public API. * and controllable by a public API.
* */
* */
class SmartInterval {
(() => { /**
class SmartInterval { * @param { function } opts.callback Function to be called on each iteration (required)
/** * @param { milliseconds } opts.startingInterval `currentInterval` is set to this initially
* @param { function } opts.callback Function to be called on each iteration (required) * @param { milliseconds } opts.maxInterval `currentInterval` will be incremented to this
* @param { milliseconds } opts.startingInterval `currentInterval` is set to this initially * @param { milliseconds } opts.hiddenInterval `currentInterval` is set to this
* @param { milliseconds } opts.maxInterval `currentInterval` will be incremented to this * when the page is hidden
* @param { milliseconds } opts.hiddenInterval `currentInterval` is set to this * @param { integer } opts.incrementByFactorOf `currentInterval` is incremented by this factor
* when the page is hidden * @param { boolean } opts.lazyStart Configure if timer is initialized on
* @param { integer } opts.incrementByFactorOf `currentInterval` is incremented by this factor * instantiation or lazily
* @param { boolean } opts.lazyStart Configure if timer is initialized on * @param { boolean } opts.immediateExecution Configure if callback should
* instantiation or lazily * be executed before the first interval.
* @param { boolean } opts.immediateExecution Configure if callback should */
* be executed before the first interval. constructor(opts = {}) {
*/ this.cfg = {
constructor(opts = {}) { callback: opts.callback,
this.cfg = { startingInterval: opts.startingInterval,
callback: opts.callback, maxInterval: opts.maxInterval,
startingInterval: opts.startingInterval, hiddenInterval: opts.hiddenInterval,
maxInterval: opts.maxInterval, incrementByFactorOf: opts.incrementByFactorOf,
hiddenInterval: opts.hiddenInterval, lazyStart: opts.lazyStart,
incrementByFactorOf: opts.incrementByFactorOf, immediateExecution: opts.immediateExecution,
lazyStart: opts.lazyStart, };
immediateExecution: opts.immediateExecution,
}; this.state = {
intervalId: null,
this.state = { currentInterval: this.cfg.startingInterval,
intervalId: null, pageVisibility: 'visible',
currentInterval: this.cfg.startingInterval, };
pageVisibility: 'visible',
}; this.initInterval();
}
this.initInterval();
}
/* public */
start() {
const cfg = this.cfg;
const state = this.state;
if (cfg.immediateExecution) {
cfg.immediateExecution = false;
cfg.callback();
}
state.intervalId = window.setInterval(() => { /* public */
cfg.callback();
if (this.getCurrentInterval() === cfg.maxInterval) { start() {
return; const cfg = this.cfg;
} const state = this.state;
this.incrementInterval(); if (cfg.immediateExecution) {
this.resume(); cfg.immediateExecution = false;
}, this.getCurrentInterval()); cfg.callback();
} }
// cancel the existing timer, setting the currentInterval back to startingInterval state.intervalId = window.setInterval(() => {
cancel() { cfg.callback();
this.setCurrentInterval(this.cfg.startingInterval);
this.stopTimer();
}
onVisibilityHidden() { if (this.getCurrentInterval() === cfg.maxInterval) {
if (this.cfg.hiddenInterval) { return;
this.setCurrentInterval(this.cfg.hiddenInterval);
this.resume();
} else {
this.cancel();
} }
}
// start a timer, using the existing interval this.incrementInterval();
resume() { this.resume();
this.stopTimer(); // stop exsiting timer, in case timer was not previously stopped }, this.getCurrentInterval());
this.start(); }
}
onVisibilityVisible() { // cancel the existing timer, setting the currentInterval back to startingInterval
this.cancel(); cancel() {
this.start(); this.setCurrentInterval(this.cfg.startingInterval);
} this.stopTimer();
}
destroy() { onVisibilityHidden() {
if (this.cfg.hiddenInterval) {
this.setCurrentInterval(this.cfg.hiddenInterval);
this.resume();
} else {
this.cancel(); this.cancel();
document.removeEventListener('visibilitychange', this.handleVisibilityChange);
$(document).off('visibilitychange').off('beforeunload');
} }
}
/* private */ // start a timer, using the existing interval
resume() {
this.stopTimer(); // stop exsiting timer, in case timer was not previously stopped
this.start();
}
initInterval() { onVisibilityVisible() {
const cfg = this.cfg; this.cancel();
this.start();
}
if (!cfg.lazyStart) { destroy() {
this.start(); this.cancel();
} document.removeEventListener('visibilitychange', this.handleVisibilityChange);
$(document).off('visibilitychange').off('beforeunload');
}
this.initVisibilityChangeHandling(); /* private */
this.initPageUnloadHandling();
}
initVisibilityChangeHandling() { initInterval() {
// cancel interval when tab no longer shown (prevents cached pages from polling) const cfg = this.cfg;
document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
}
initPageUnloadHandling() { if (!cfg.lazyStart) {
// TODO: Consider refactoring in light of turbolinks removal. this.start();
// prevent interval continuing after page change, when kept in cache by Turbolinks
$(document).on('beforeunload', () => this.cancel());
} }
handleVisibilityChange(e) { this.initVisibilityChangeHandling();
this.state.pageVisibility = e.target.visibilityState; this.initPageUnloadHandling();
const intervalAction = this.isPageVisible() ? }
this.onVisibilityVisible :
this.onVisibilityHidden;
intervalAction.apply(this); initVisibilityChangeHandling() {
} // cancel interval when tab no longer shown (prevents cached pages from polling)
document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
}
getCurrentInterval() { initPageUnloadHandling() {
return this.state.currentInterval; // TODO: Consider refactoring in light of turbolinks removal.
} // prevent interval continuing after page change, when kept in cache by Turbolinks
$(document).on('beforeunload', () => this.cancel());
}
setCurrentInterval(newInterval) { handleVisibilityChange(e) {
this.state.currentInterval = newInterval; this.state.pageVisibility = e.target.visibilityState;
} const intervalAction = this.isPageVisible() ?
this.onVisibilityVisible :
this.onVisibilityHidden;
incrementInterval() { intervalAction.apply(this);
const cfg = this.cfg; }
const currentInterval = this.getCurrentInterval();
if (cfg.hiddenInterval && !this.isPageVisible()) return;
let nextInterval = currentInterval * cfg.incrementByFactorOf;
if (nextInterval > cfg.maxInterval) { getCurrentInterval() {
nextInterval = cfg.maxInterval; return this.state.currentInterval;
} }
setCurrentInterval(newInterval) {
this.state.currentInterval = newInterval;
}
incrementInterval() {
const cfg = this.cfg;
const currentInterval = this.getCurrentInterval();
if (cfg.hiddenInterval && !this.isPageVisible()) return;
let nextInterval = currentInterval * cfg.incrementByFactorOf;
this.setCurrentInterval(nextInterval); if (nextInterval > cfg.maxInterval) {
nextInterval = cfg.maxInterval;
} }
isPageVisible() { return this.state.pageVisibility === 'visible'; } this.setCurrentInterval(nextInterval);
}
stopTimer() { isPageVisible() { return this.state.pageVisibility === 'visible'; }
const state = this.state;
state.intervalId = window.clearInterval(state.intervalId); stopTimer() {
} const state = this.state;
state.intervalId = window.clearInterval(state.intervalId);
} }
gl.SmartInterval = SmartInterval; }
})(window.gl || (window.gl = {}));
window.gl.SmartInterval = SmartInterval;
/* eslint-disable arrow-parens, no-param-reassign, space-before-function-paren, func-names, no-var, max-len */ /* eslint-disable arrow-parens, no-param-reassign, space-before-function-paren, func-names, no-var, max-len */
(global => { window.gl.SnippetsList = function() {
global.gl = global.gl || {}; var $holder = $('.snippets-list-holder');
gl.SnippetsList = function() { $holder.find('.pagination').on('ajax:success', (e, data) => {
var $holder = $('.snippets-list-holder'); $holder.replaceWith(data.html);
});
$holder.find('.pagination').on('ajax:success', (e, data) => { };
$holder.replaceWith(data.html);
});
};
})(window);
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-unused-vars, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, no-new, max-len */ /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-unused-vars, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, no-new, max-len */
/* global Flash */ /* global Flash */
(function() { window.Star = (function() {
this.Star = (function() { function Star() {
function Star() { $('.project-home-panel .toggle-star').on('ajax:success', function(e, data, status, xhr) {
$('.project-home-panel .toggle-star').on('ajax:success', function(e, data, status, xhr) { var $starIcon, $starSpan, $this, toggleStar;
var $starIcon, $starSpan, $this, toggleStar; $this = $(this);
$this = $(this); $starSpan = $this.find('span');
$starSpan = $this.find('span'); $starIcon = $this.find('i');
$starIcon = $this.find('i'); toggleStar = function(isStarred) {
toggleStar = function(isStarred) { $this.parent().find('.star-count').text(data.star_count);
$this.parent().find('.star-count').text(data.star_count); if (isStarred) {
if (isStarred) { $starSpan.removeClass('starred').text('Star');
$starSpan.removeClass('starred').text('Star'); $starIcon.removeClass('fa-star').addClass('fa-star-o');
$starIcon.removeClass('fa-star').addClass('fa-star-o'); } else {
} else { $starSpan.addClass('starred').text('Unstar');
$starSpan.addClass('starred').text('Unstar'); $starIcon.removeClass('fa-star-o').addClass('fa-star');
$starIcon.removeClass('fa-star-o').addClass('fa-star'); }
} };
}; toggleStar($starSpan.hasClass('starred'));
toggleStar($starSpan.hasClass('starred')); }).on('ajax:error', function(e, xhr, status, error) {
}).on('ajax:error', function(e, xhr, status, error) { new Flash('Star toggle failed. Try again later.', 'alert');
new Flash('Star toggle failed. Try again later.', 'alert'); });
}); }
}
return Star; return Star;
})(); })();
}).call(window);
(() => { class Subscription {
class Subscription { constructor(containerElm) {
constructor(containerElm) { this.containerElm = containerElm;
this.containerElm = containerElm;
const subscribeButton = containerElm.querySelector('.js-subscribe-button'); const subscribeButton = containerElm.querySelector('.js-subscribe-button');
if (subscribeButton) { if (subscribeButton) {
// remove class so we don't bind twice // remove class so we don't bind twice
subscribeButton.classList.remove('js-subscribe-button'); subscribeButton.classList.remove('js-subscribe-button');
subscribeButton.addEventListener('click', this.toggleSubscription.bind(this)); subscribeButton.addEventListener('click', this.toggleSubscription.bind(this));
}
} }
}
toggleSubscription(event) { toggleSubscription(event) {
const button = event.currentTarget; const button = event.currentTarget;
const buttonSpan = button.querySelector('span'); const buttonSpan = button.querySelector('span');
if (!buttonSpan || button.classList.contains('disabled')) { if (!buttonSpan || button.classList.contains('disabled')) {
return; return;
} }
button.classList.add('disabled'); button.classList.add('disabled');
const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe'; const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe';
const toggleActionUrl = this.containerElm.dataset.url; const toggleActionUrl = this.containerElm.dataset.url;
$.post(toggleActionUrl, () => { $.post(toggleActionUrl, () => {
button.classList.remove('disabled'); button.classList.remove('disabled');
// hack to allow this to work with the issue boards Vue object // hack to allow this to work with the issue boards Vue object
if (document.querySelector('html').classList.contains('issue-boards-page')) { if (document.querySelector('html').classList.contains('issue-boards-page')) {
gl.issueBoards.boardStoreIssueSet( gl.issueBoards.boardStoreIssueSet(
'subscribed', 'subscribed',
!gl.issueBoards.BoardsStore.detail.issue.subscribed, !gl.issueBoards.BoardsStore.detail.issue.subscribed,
); );
} else { } else {
buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe'; buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe';
} }
}); });
} }
static bindAll(selector) { static bindAll(selector) {
[].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm)); [].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
}
} }
}
window.gl = window.gl || {}; window.gl = window.gl || {};
window.gl.Subscription = Subscription; window.gl.Subscription = Subscription;
})();
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, object-shorthand, no-unused-vars, no-shadow, one-var, one-var-declaration-per-line, comma-dangle, max-len */ /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, object-shorthand, no-unused-vars, no-shadow, one-var, one-var-declaration-per-line, comma-dangle, max-len */
(function() {
this.SubscriptionSelect = (function() { window.SubscriptionSelect = (function() {
function SubscriptionSelect() { function SubscriptionSelect() {
$('.js-subscription-event').each(function(i, el) { $('.js-subscription-event').each(function(i, el) {
var fieldName; var fieldName;
fieldName = $(el).data("field-name"); fieldName = $(el).data("field-name");
return $(el).glDropdown({ return $(el).glDropdown({
selectable: true, selectable: true,
fieldName: fieldName, fieldName: fieldName,
toggleLabel: (function(_this) { toggleLabel: (function(_this) {
return function(selected, el, instance) { return function(selected, el, instance) {
var $item, label; var $item, label;
label = 'Subscription'; label = 'Subscription';
$item = instance.dropdown.find('.is-active'); $item = instance.dropdown.find('.is-active');
if ($item.length) { if ($item.length) {
label = $item.text(); label = $item.text();
} }
return label; return label;
}; };
})(this), })(this),
clicked: function(options) { clicked: function(options) {
return options.e.preventDefault(); return options.e.preventDefault();
}, },
id: function(obj, el) { id: function(obj, el) {
return $(el).data("id"); return $(el).data("id");
} }
});
}); });
} });
}
return SubscriptionSelect; return SubscriptionSelect;
})(); })();
}).call(window);
...@@ -9,19 +9,18 @@ ...@@ -9,19 +9,18 @@
// //
// <div class="js-syntax-highlight"></div> // <div class="js-syntax-highlight"></div>
// //
(function() {
$.fn.syntaxHighlight = function() {
var $children;
if ($(this).hasClass('js-syntax-highlight')) { $.fn.syntaxHighlight = function() {
// Given the element itself, apply highlighting var $children;
return $(this).addClass(gon.user_color_scheme);
} else { if ($(this).hasClass('js-syntax-highlight')) {
// Given a parent element, recurse to any of its applicable children // Given the element itself, apply highlighting
$children = $(this).find('.js-syntax-highlight'); return $(this).addClass(gon.user_color_scheme);
if ($children.length) { } else {
return $children.syntaxHighlight(); // Given a parent element, recurse to any of its applicable children
} $children = $(this).find('.js-syntax-highlight');
if ($children.length) {
return $children.syntaxHighlight();
} }
}; }
}).call(window); };
/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, quotes, consistent-return, no-var, one-var, one-var-declaration-per-line, no-else-return, prefer-arrow-callback, max-len */ /* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, quotes, consistent-return, no-var, one-var, one-var-declaration-per-line, no-else-return, prefer-arrow-callback, max-len */
(function() { window.TreeView = (function() {
this.TreeView = (function() { function TreeView() {
function TreeView() { this.initKeyNav();
this.initKeyNav(); // Code browser tree slider
// Code browser tree slider // Make the entire tree-item row clickable, but not if clicking another link (like a commit message)
// Make the entire tree-item row clickable, but not if clicking another link (like a commit message) $(".tree-content-holder .tree-item").on('click', function(e) {
$(".tree-content-holder .tree-item").on('click', function(e) { var $clickedEl, path;
var $clickedEl, path; $clickedEl = $(e.target);
$clickedEl = $(e.target); path = $('.tree-item-file-name a', this).attr('href');
path = $('.tree-item-file-name a', this).attr('href'); if (!$clickedEl.is('a') && !$clickedEl.is('.str-truncated')) {
if (!$clickedEl.is('a') && !$clickedEl.is('.str-truncated')) { if (e.metaKey || e.which === 2) {
if (e.metaKey || e.which === 2) { e.preventDefault();
e.preventDefault(); return window.open(path, '_blank');
return window.open(path, '_blank'); } else {
} else { return gl.utils.visitUrl(path);
return gl.utils.visitUrl(path);
}
} }
}); }
// Show the "Loading commit data" for only the first element });
$('span.log_loading:first').removeClass('hide'); // Show the "Loading commit data" for only the first element
} $('span.log_loading:first').removeClass('hide');
}
TreeView.prototype.initKeyNav = function() { TreeView.prototype.initKeyNav = function() {
var li, liSelected; var li, liSelected;
li = $("tr.tree-item"); li = $("tr.tree-item");
liSelected = null; liSelected = null;
return $('body').keydown(function(e) { return $('body').keydown(function(e) {
var next, path; var next, path;
if ($("input:focus").length > 0 && (e.which === 38 || e.which === 40)) { if ($("input:focus").length > 0 && (e.which === 38 || e.which === 40)) {
return false; return false;
} }
if (e.which === 40) { if (e.which === 40) {
if (liSelected) { if (liSelected) {
next = liSelected.next(); next = liSelected.next();
if (next.length > 0) { if (next.length > 0) {
liSelected.removeClass("selected"); liSelected.removeClass("selected");
liSelected = next.addClass("selected"); liSelected = next.addClass("selected");
}
} else {
liSelected = li.eq(0).addClass("selected");
}
return $(liSelected).focus();
} else if (e.which === 38) {
if (liSelected) {
next = liSelected.prev();
if (next.length > 0) {
liSelected.removeClass("selected");
liSelected = next.addClass("selected");
}
} else {
liSelected = li.last().addClass("selected");
} }
return $(liSelected).focus(); } else {
} else if (e.which === 13) { liSelected = li.eq(0).addClass("selected");
path = $('.tree-item.selected .tree-item-file-name a').attr('href'); }
if (path) { return $(liSelected).focus();
return gl.utils.visitUrl(path); } else if (e.which === 38) {
if (liSelected) {
next = liSelected.prev();
if (next.length > 0) {
liSelected.removeClass("selected");
liSelected = next.addClass("selected");
} }
} else {
liSelected = li.last().addClass("selected");
}
return $(liSelected).focus();
} else if (e.which === 13) {
path = $('.tree-item.selected .tree-item-file-name a').attr('href');
if (path) {
return gl.utils.visitUrl(path);
} }
}); }
}; });
};
return TreeView; return TreeView;
})(); })();
}).call(window);
...@@ -2,34 +2,35 @@ ...@@ -2,34 +2,35 @@
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
((global) => { class User {
global.User = class { constructor({ action }) {
constructor({ action }) { this.action = action;
this.action = action; this.placeProfileAvatarsToTop();
this.placeProfileAvatarsToTop(); this.initTabs();
this.initTabs(); this.hideProjectLimitMessage();
this.hideProjectLimitMessage(); }
}
placeProfileAvatarsToTop() { placeProfileAvatarsToTop() {
$('.profile-groups-avatars').tooltip({ $('.profile-groups-avatars').tooltip({
placement: 'top' placement: 'top'
}); });
} }
initTabs() { initTabs() {
return new global.UserTabs({ return new window.gl.UserTabs({
parentEl: '.user-profile', parentEl: '.user-profile',
action: this.action action: this.action
}); });
} }
hideProjectLimitMessage() { hideProjectLimitMessage() {
$('.hide-project-limit-message').on('click', e => { $('.hide-project-limit-message').on('click', e => {
e.preventDefault(); e.preventDefault();
Cookies.set('hide_project_limit_message', 'false'); Cookies.set('hide_project_limit_message', 'false');
$(this).parents('.project-limit-message').remove(); $(this).parents('.project-limit-message').remove();
}); });
} }
}; }
})(window.gl || (window.gl = {}));
window.gl = window.gl || {};
window.gl.User = User;
...@@ -59,117 +59,118 @@ content on the Users#show page. ...@@ -59,117 +59,118 @@ content on the Users#show page.
</div> </div>
</div> </div>
*/ */
((global) => {
class UserTabs {
constructor ({ defaultAction, action, parentEl }) {
this.loaded = {};
this.defaultAction = defaultAction || 'activity';
this.action = action || this.defaultAction;
this.$parentEl = $(parentEl) || $(document);
this._location = window.location;
this.$parentEl.find('.nav-links a')
.each((i, navLink) => {
this.loaded[$(navLink).attr('data-action')] = false;
});
this.actions = Object.keys(this.loaded);
this.bindEvents();
if (this.action === 'show') {
this.action = this.defaultAction;
}
this.activateTab(this.action); class UserTabs {
constructor ({ defaultAction, action, parentEl }) {
this.loaded = {};
this.defaultAction = defaultAction || 'activity';
this.action = action || this.defaultAction;
this.$parentEl = $(parentEl) || $(document);
this._location = window.location;
this.$parentEl.find('.nav-links a')
.each((i, navLink) => {
this.loaded[$(navLink).attr('data-action')] = false;
});
this.actions = Object.keys(this.loaded);
this.bindEvents();
if (this.action === 'show') {
this.action = this.defaultAction;
} }
bindEvents() { this.activateTab(this.action);
this.changeProjectsPageWrapper = this.changeProjectsPage.bind(this); }
this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]') bindEvents() {
.on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event)); this.changeProjectsPageWrapper = this.changeProjectsPage.bind(this);
this.$parentEl.on('click', '.gl-pagination a', this.changeProjectsPageWrapper); this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
} .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
changeProjectsPage(e) { this.$parentEl.on('click', '.gl-pagination a', this.changeProjectsPageWrapper);
e.preventDefault(); }
$('.tab-pane.active').empty(); changeProjectsPage(e) {
const endpoint = $(e.target).attr('href'); e.preventDefault();
this.loadTab(this.getCurrentAction(), endpoint);
}
tabShown(event) { $('.tab-pane.active').empty();
const $target = $(event.target); const endpoint = $(e.target).attr('href');
const action = $target.data('action'); this.loadTab(this.getCurrentAction(), endpoint);
const source = $target.attr('href'); }
const endpoint = $target.data('endpoint');
this.setTab(action, endpoint);
return this.setCurrentAction(source);
}
activateTab(action) { tabShown(event) {
return this.$parentEl.find(`.nav-links .js-${action}-tab a`) const $target = $(event.target);
.tab('show'); const action = $target.data('action');
} const source = $target.attr('href');
const endpoint = $target.data('endpoint');
this.setTab(action, endpoint);
return this.setCurrentAction(source);
}
setTab(action, endpoint) { activateTab(action) {
if (this.loaded[action]) { return this.$parentEl.find(`.nav-links .js-${action}-tab a`)
return; .tab('show');
} }
if (action === 'activity') {
this.loadActivities();
}
const loadableActions = ['groups', 'contributed', 'projects', 'snippets']; setTab(action, endpoint) {
if (loadableActions.indexOf(action) > -1) { if (this.loaded[action]) {
return this.loadTab(action, endpoint); return;
} }
if (action === 'activity') {
this.loadActivities();
} }
loadTab(action, endpoint) { const loadableActions = ['groups', 'contributed', 'projects', 'snippets'];
return $.ajax({ if (loadableActions.indexOf(action) > -1) {
beforeSend: () => this.toggleLoading(true), return this.loadTab(action, endpoint);
complete: () => this.toggleLoading(false),
dataType: 'json',
type: 'GET',
url: endpoint,
success: (data) => {
const tabSelector = `div#${action}`;
this.$parentEl.find(tabSelector).html(data.html);
this.loaded[action] = true;
return gl.utils.localTimeAgo($('.js-timeago', tabSelector));
}
});
} }
}
loadActivities() { loadTab(action, endpoint) {
if (this.loaded['activity']) { return $.ajax({
return; beforeSend: () => this.toggleLoading(true),
complete: () => this.toggleLoading(false),
dataType: 'json',
type: 'GET',
url: endpoint,
success: (data) => {
const tabSelector = `div#${action}`;
this.$parentEl.find(tabSelector).html(data.html);
this.loaded[action] = true;
return gl.utils.localTimeAgo($('.js-timeago', tabSelector));
} }
const $calendarWrap = this.$parentEl.find('.user-calendar'); });
$calendarWrap.load($calendarWrap.data('href')); }
new gl.Activities();
return this.loaded['activity'] = true;
}
toggleLoading(status) { loadActivities() {
return this.$parentEl.find('.loading-status .loading') if (this.loaded['activity']) {
.toggle(status); return;
} }
const $calendarWrap = this.$parentEl.find('.user-calendar');
$calendarWrap.load($calendarWrap.data('href'));
new gl.Activities();
return this.loaded['activity'] = true;
}
setCurrentAction(source) { toggleLoading(status) {
let new_state = source; return this.$parentEl.find('.loading-status .loading')
new_state = new_state.replace(/\/+$/, ''); .toggle(status);
new_state += this._location.search + this._location.hash; }
history.replaceState({
url: new_state
}, document.title, new_state);
return new_state;
}
getCurrentAction() { setCurrentAction(source) {
return this.$parentEl.find('.nav-links .active a').data('action'); let new_state = source;
} new_state = new_state.replace(/\/+$/, '');
new_state += this._location.search + this._location.hash;
history.replaceState({
url: new_state
}, document.title, new_state);
return new_state;
} }
global.UserTabs = UserTabs;
})(window.gl || (window.gl = {})); getCurrentAction() {
return this.$parentEl.find('.nav-links .active a').data('action');
}
}
window.gl = window.gl || {};
window.gl.UserTabs = UserTabs;
/* eslint-disable comma-dangle, consistent-return, class-methods-use-this, arrow-parens, no-param-reassign, max-len */ /* eslint-disable comma-dangle, consistent-return, class-methods-use-this, arrow-parens, no-param-reassign, max-len */
((global) => { const debounceTimeoutDuration = 1000;
const debounceTimeoutDuration = 1000; const invalidInputClass = 'gl-field-error-outline';
const invalidInputClass = 'gl-field-error-outline'; const successInputClass = 'gl-field-success-outline';
const successInputClass = 'gl-field-success-outline'; const unavailableMessageSelector = '.username .validation-error';
const unavailableMessageSelector = '.username .validation-error'; const successMessageSelector = '.username .validation-success';
const successMessageSelector = '.username .validation-success'; const pendingMessageSelector = '.username .validation-pending';
const pendingMessageSelector = '.username .validation-pending'; const invalidMessageSelector = '.username .gl-field-error';
const invalidMessageSelector = '.username .gl-field-error';
class UsernameValidator {
class UsernameValidator { constructor() {
constructor() { this.inputElement = $('#new_user_username');
this.inputElement = $('#new_user_username'); this.inputDomElement = this.inputElement.get(0);
this.inputDomElement = this.inputElement.get(0); this.state = {
this.state = { available: false,
available: false, valid: false,
valid: false, pending: false,
pending: false, empty: true
empty: true };
};
const debounceTimeout = _.debounce((username) => {
const debounceTimeout = _.debounce((username) => { this.validateUsername(username);
this.validateUsername(username); }, debounceTimeoutDuration);
}, debounceTimeoutDuration);
this.inputElement.on('keyup.username_check', () => {
this.inputElement.on('keyup.username_check', () => { const username = this.inputElement.val();
const username = this.inputElement.val();
this.state.valid = this.inputDomElement.validity.valid;
this.state.valid = this.inputDomElement.validity.valid; this.state.empty = !username.length;
this.state.empty = !username.length;
if (this.state.valid) {
return debounceTimeout(username);
}
this.renderState();
});
// Override generic field validation
this.inputElement.on('invalid', this.interceptInvalid.bind(this));
}
renderState() { if (this.state.valid) {
// Clear all state return debounceTimeout(username);
this.clearFieldValidationState();
if (this.state.valid && this.state.available) {
return this.setSuccessState();
} }
if (this.state.empty) { this.renderState();
return this.clearFieldValidationState(); });
}
if (this.state.pending) { // Override generic field validation
return this.setPendingState(); this.inputElement.on('invalid', this.interceptInvalid.bind(this));
} }
if (!this.state.available) { renderState() {
return this.setUnavailableState(); // Clear all state
} this.clearFieldValidationState();
if (!this.state.valid) { if (this.state.valid && this.state.available) {
return this.setInvalidState(); return this.setSuccessState();
}
} }
interceptInvalid(event) { if (this.state.empty) {
event.preventDefault(); return this.clearFieldValidationState();
event.stopPropagation();
} }
validateUsername(username) { if (this.state.pending) {
if (this.state.valid) { return this.setPendingState();
this.state.pending = true;
this.state.available = false;
this.renderState();
return $.ajax({
type: 'GET',
url: `${gon.relative_url_root}/users/${username}/exists`,
dataType: 'json',
success: (res) => this.setAvailabilityState(res.exists)
});
}
} }
setAvailabilityState(usernameTaken) { if (!this.state.available) {
if (usernameTaken) { return this.setUnavailableState();
this.state.valid = false;
this.state.available = false;
} else {
this.state.available = true;
}
this.state.pending = false;
this.renderState();
} }
clearFieldValidationState() { if (!this.state.valid) {
this.inputElement.siblings('p').hide(); return this.setInvalidState();
this.inputElement.removeClass(invalidInputClass)
.removeClass(successInputClass);
} }
}
setUnavailableState() { interceptInvalid(event) {
const $usernameUnavailableMessage = this.inputElement.siblings(unavailableMessageSelector); event.preventDefault();
this.inputElement.addClass(invalidInputClass).removeClass(successInputClass); event.stopPropagation();
$usernameUnavailableMessage.show(); }
}
setSuccessState() { validateUsername(username) {
const $usernameSuccessMessage = this.inputElement.siblings(successMessageSelector); if (this.state.valid) {
this.inputElement.addClass(successInputClass).removeClass(invalidInputClass); this.state.pending = true;
$usernameSuccessMessage.show(); this.state.available = false;
this.renderState();
return $.ajax({
type: 'GET',
url: `${gon.relative_url_root}/users/${username}/exists`,
dataType: 'json',
success: (res) => this.setAvailabilityState(res.exists)
});
} }
}
setPendingState() { setAvailabilityState(usernameTaken) {
const $usernamePendingMessage = $(pendingMessageSelector); if (usernameTaken) {
if (this.state.pending) { this.state.valid = false;
$usernamePendingMessage.show(); this.state.available = false;
} else { } else {
$usernamePendingMessage.hide(); this.state.available = true;
}
} }
this.state.pending = false;
this.renderState();
}
clearFieldValidationState() {
this.inputElement.siblings('p').hide();
setInvalidState() { this.inputElement.removeClass(invalidInputClass)
const $inputErrorMessage = $(invalidMessageSelector); .removeClass(successInputClass);
this.inputElement.addClass(invalidInputClass).removeClass(successInputClass); }
$inputErrorMessage.show();
setUnavailableState() {
const $usernameUnavailableMessage = this.inputElement.siblings(unavailableMessageSelector);
this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
$usernameUnavailableMessage.show();
}
setSuccessState() {
const $usernameSuccessMessage = this.inputElement.siblings(successMessageSelector);
this.inputElement.addClass(successInputClass).removeClass(invalidInputClass);
$usernameSuccessMessage.show();
}
setPendingState() {
const $usernamePendingMessage = $(pendingMessageSelector);
if (this.state.pending) {
$usernamePendingMessage.show();
} else {
$usernamePendingMessage.hide();
} }
} }
global.UsernameValidator = UsernameValidator; setInvalidState() {
})(window); const $inputErrorMessage = $(invalidMessageSelector);
this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
$inputErrorMessage.show();
}
}
window.UsernameValidator = UsernameValidator;
(() => { class VisibilitySelect {
const gl = window.gl || (window.gl = {}); constructor(container) {
if (!container) throw new Error('VisibilitySelect requires a container element as argument 1');
class VisibilitySelect { this.container = container;
constructor(container) { this.helpBlock = this.container.querySelector('.help-block');
if (!container) throw new Error('VisibilitySelect requires a container element as argument 1'); this.select = this.container.querySelector('select');
this.container = container; }
this.helpBlock = this.container.querySelector('.help-block');
this.select = this.container.querySelector('select');
}
init() { init() {
if (this.select) { if (this.select) {
this.updateHelpText(); this.updateHelpText();
this.select.addEventListener('change', this.updateHelpText.bind(this)); this.select.addEventListener('change', this.updateHelpText.bind(this));
} else { } else {
this.helpBlock.textContent = this.container.querySelector('.js-locked').dataset.helpBlock; this.helpBlock.textContent = this.container.querySelector('.js-locked').dataset.helpBlock;
}
} }
}
updateHelpText() { updateHelpText() {
this.helpBlock.textContent = this.select.querySelector('option:checked').dataset.description; this.helpBlock.textContent = this.select.querySelector('option:checked').dataset.description;
}
} }
}
gl.VisibilitySelect = VisibilitySelect; window.gl = window.gl || {};
})(); window.gl.VisibilitySelect = VisibilitySelect;
...@@ -4,66 +4,65 @@ ...@@ -4,66 +4,65 @@
import 'vendor/jquery.nicescroll'; import 'vendor/jquery.nicescroll';
import './breakpoints'; import './breakpoints';
((global) => { class Wikis {
class Wikis { constructor() {
constructor() { this.bp = Breakpoints.get();
this.bp = Breakpoints.get(); this.sidebarEl = document.querySelector('.js-wiki-sidebar');
this.sidebarEl = document.querySelector('.js-wiki-sidebar'); this.sidebarExpanded = false;
this.sidebarExpanded = false; $(this.sidebarEl).niceScroll();
$(this.sidebarEl).niceScroll();
const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle'); const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle');
for (let i = 0; i < sidebarToggles.length; i += 1) { for (let i = 0; i < sidebarToggles.length; i += 1) {
sidebarToggles[i].addEventListener('click', e => this.handleToggleSidebar(e)); sidebarToggles[i].addEventListener('click', e => this.handleToggleSidebar(e));
} }
this.newWikiForm = document.querySelector('form.new-wiki-page');
if (this.newWikiForm) {
this.newWikiForm.addEventListener('submit', e => this.handleNewWikiSubmit(e));
}
window.addEventListener('resize', () => this.renderSidebar()); this.newWikiForm = document.querySelector('form.new-wiki-page');
this.renderSidebar(); if (this.newWikiForm) {
this.newWikiForm.addEventListener('submit', e => this.handleNewWikiSubmit(e));
} }
handleNewWikiSubmit(e) { window.addEventListener('resize', () => this.renderSidebar());
if (!this.newWikiForm) return; this.renderSidebar();
}
const slugInput = this.newWikiForm.querySelector('#new_wiki_path'); handleNewWikiSubmit(e) {
const slug = gl.text.slugify(slugInput.value); if (!this.newWikiForm) return;
if (slug.length > 0) { const slugInput = this.newWikiForm.querySelector('#new_wiki_path');
const wikisPath = slugInput.getAttribute('data-wikis-path'); const slug = gl.text.slugify(slugInput.value);
window.location.href = `${wikisPath}/${slug}`;
e.preventDefault();
}
}
handleToggleSidebar(e) { if (slug.length > 0) {
const wikisPath = slugInput.getAttribute('data-wikis-path');
window.location.href = `${wikisPath}/${slug}`;
e.preventDefault(); e.preventDefault();
this.sidebarExpanded = !this.sidebarExpanded;
this.renderSidebar();
} }
}
sidebarCanCollapse() { handleToggleSidebar(e) {
const bootstrapBreakpoint = this.bp.getBreakpointSize(); e.preventDefault();
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm'; this.sidebarExpanded = !this.sidebarExpanded;
} this.renderSidebar();
}
sidebarCanCollapse() {
const bootstrapBreakpoint = this.bp.getBreakpointSize();
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
}
renderSidebar() { renderSidebar() {
if (!this.sidebarEl) return; if (!this.sidebarEl) return;
const { classList } = this.sidebarEl; const { classList } = this.sidebarEl;
if (this.sidebarExpanded || !this.sidebarCanCollapse()) { if (this.sidebarExpanded || !this.sidebarCanCollapse()) {
if (!classList.contains('right-sidebar-expanded')) { if (!classList.contains('right-sidebar-expanded')) {
classList.remove('right-sidebar-collapsed'); classList.remove('right-sidebar-collapsed');
classList.add('right-sidebar-expanded'); classList.add('right-sidebar-expanded');
}
} else if (classList.contains('right-sidebar-expanded')) {
classList.add('right-sidebar-collapsed');
classList.remove('right-sidebar-expanded');
} }
} else if (classList.contains('right-sidebar-expanded')) {
classList.add('right-sidebar-collapsed');
classList.remove('right-sidebar-expanded');
} }
} }
}
global.Wikis = Wikis; window.gl = window.gl || {};
})(window.gl || (window.gl = {})); window.gl.Wikis = Wikis;
...@@ -34,65 +34,64 @@ window.Dropzone = Dropzone; ...@@ -34,65 +34,64 @@ window.Dropzone = Dropzone;
// **Cancelable** No // **Cancelable** No
// **Target** a.js-zen-leave // **Target** a.js-zen-leave
// //
(function() {
this.ZenMode = (function() { window.ZenMode = (function() {
function ZenMode() { function ZenMode() {
this.active_backdrop = null; this.active_backdrop = null;
this.active_textarea = null; this.active_textarea = null;
$(document).on('click', '.js-zen-enter', function(e) { $(document).on('click', '.js-zen-enter', function(e) {
e.preventDefault(); e.preventDefault();
return $(e.currentTarget).trigger('zen_mode:enter'); return $(e.currentTarget).trigger('zen_mode:enter');
}); });
$(document).on('click', '.js-zen-leave', function(e) { $(document).on('click', '.js-zen-leave', function(e) {
e.preventDefault();
return $(e.currentTarget).trigger('zen_mode:leave');
});
$(document).on('zen_mode:enter', (function(_this) {
return function(e) {
return _this.enter($(e.target).closest('.md-area').find('.zen-backdrop'));
};
})(this));
$(document).on('zen_mode:leave', (function(_this) {
return function(e) {
return _this.exit();
};
})(this));
$(document).on('keydown', function(e) {
// Esc
if (e.keyCode === 27) {
e.preventDefault(); e.preventDefault();
return $(e.currentTarget).trigger('zen_mode:leave'); return $(document).trigger('zen_mode:leave');
}); }
$(document).on('zen_mode:enter', (function(_this) { });
return function(e) { }
return _this.enter($(e.target).closest('.md-area').find('.zen-backdrop'));
};
})(this));
$(document).on('zen_mode:leave', (function(_this) {
return function(e) {
return _this.exit();
};
})(this));
$(document).on('keydown', function(e) {
// Esc
if (e.keyCode === 27) {
e.preventDefault();
return $(document).trigger('zen_mode:leave');
}
});
}
ZenMode.prototype.enter = function(backdrop) { ZenMode.prototype.enter = function(backdrop) {
Mousetrap.pause(); Mousetrap.pause();
this.active_backdrop = $(backdrop); this.active_backdrop = $(backdrop);
this.active_backdrop.addClass('fullscreen'); this.active_backdrop.addClass('fullscreen');
this.active_textarea = this.active_backdrop.find('textarea'); this.active_textarea = this.active_backdrop.find('textarea');
// Prevent a user-resized textarea from persisting to fullscreen // Prevent a user-resized textarea from persisting to fullscreen
this.active_textarea.removeAttr('style'); this.active_textarea.removeAttr('style');
return this.active_textarea.focus(); return this.active_textarea.focus();
}; };
ZenMode.prototype.exit = function() { ZenMode.prototype.exit = function() {
if (this.active_textarea) { if (this.active_textarea) {
Mousetrap.unpause(); Mousetrap.unpause();
this.active_textarea.closest('.zen-backdrop').removeClass('fullscreen'); this.active_textarea.closest('.zen-backdrop').removeClass('fullscreen');
this.scrollTo(this.active_textarea); this.scrollTo(this.active_textarea);
this.active_textarea = null; this.active_textarea = null;
this.active_backdrop = null; this.active_backdrop = null;
return Dropzone.forElement('.div-dropzone').enable(); return Dropzone.forElement('.div-dropzone').enable();
} }
}; };
ZenMode.prototype.scrollTo = function(zen_area) { ZenMode.prototype.scrollTo = function(zen_area) {
return $.scrollTo(zen_area, 0, { return $.scrollTo(zen_area, 0, {
offset: -150 offset: -150
}); });
}; };
return ZenMode; return ZenMode;
})(); })();
}).call(window);
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