Commit 6e12c008 authored by Marvin Karegyeya's avatar Marvin Karegyeya Committed by Kushal Pandya

Remove-IIFEs-from-gl_dropdown.js

parent 7de8ee9f
/* eslint-disable func-names, no-underscore-dangle, no-var, one-var, vars-on-top, no-shadow, no-cond-assign, no-return-assign, no-else-return, camelcase, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, no-param-reassign, no-loop-func */ /* eslint-disable func-names, no-underscore-dangle, no-var, one-var, vars-on-top, no-cond-assign, no-return-assign, no-else-return, camelcase, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, no-param-reassign, no-loop-func */
import $ from 'jquery'; import $ from 'jquery';
import _ from 'underscore'; import _ from 'underscore';
...@@ -8,10 +8,31 @@ import { visitUrl } from './lib/utils/url_utility'; ...@@ -8,10 +8,31 @@ import { visitUrl } from './lib/utils/url_utility';
import { isObject } from './lib/utils/type_utility'; import { isObject } from './lib/utils/type_utility';
import renderItem from './gl_dropdown/render'; import renderItem from './gl_dropdown/render';
var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote, GitLabDropdownInput; const BLUR_KEYCODES = [27, 40];
GitLabDropdownInput = (function() { const HAS_VALUE_CLASS = 'has-value';
function GitLabDropdownInput(input, options) {
const LOADING_CLASS = 'is-loading';
const PAGE_TWO_CLASS = 'is-page-two';
const ACTIVE_CLASS = 'is-active';
const INDETERMINATE_CLASS = 'is-indeterminate';
let currentIndex = -1;
const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
const SELECTABLE_CLASSES = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES}, .option-hidden)`;
const CURSOR_SELECT_SCROLL_PADDING = 5;
const FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-filter)';
const NO_FILTER_INPUT = '.dropdown-input .dropdown-input-field.dropdown-no-filter';
function GitLabDropdownInput(input, options) {
var $inputContainer, $clearButton; var $inputContainer, $clearButton;
var _this = this; var _this = this;
this.input = input; this.input = input;
...@@ -19,20 +40,15 @@ GitLabDropdownInput = (function() { ...@@ -19,20 +40,15 @@ GitLabDropdownInput = (function() {
this.fieldName = this.options.fieldName || 'field-name'; this.fieldName = this.options.fieldName || 'field-name';
$inputContainer = this.input.parent(); $inputContainer = this.input.parent();
$clearButton = $inputContainer.find('.js-dropdown-input-clear'); $clearButton = $inputContainer.find('.js-dropdown-input-clear');
$clearButton.on( $clearButton.on('click', e => {
'click',
(function(_this) {
// Clear click // Clear click
return function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return _this.input return this.input
.val('') .val('')
.trigger('input') .trigger('input')
.focus(); .focus();
}; });
})(this),
);
this.input this.input
.on('keydown', e => { .on('keydown', e => {
...@@ -55,43 +71,28 @@ GitLabDropdownInput = (function() { ...@@ -55,43 +71,28 @@ GitLabDropdownInput = (function() {
.find('.dropdown-toggle-text') .find('.dropdown-toggle-text')
.text(val); .text(val);
}); });
} }
GitLabDropdownInput.prototype.onInput = function(cb) { GitLabDropdownInput.prototype.onInput = function(cb) {
this.cb = cb; this.cb = cb;
}; };
return GitLabDropdownInput;
})();
GitLabDropdownFilter = (function() {
var BLUR_KEYCODES, HAS_VALUE_CLASS;
BLUR_KEYCODES = [27, 40];
HAS_VALUE_CLASS = 'has-value';
function GitLabDropdownFilter(input, options) { function GitLabDropdownFilter(input, options) {
var $clearButton, $inputContainer, ref, timeout; var $clearButton, $inputContainer, ref, timeout;
this.input = input; this.input = input;
this.options = options; this.options = options;
this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true; this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
$inputContainer = this.input.parent(); $inputContainer = this.input.parent();
$clearButton = $inputContainer.find('.js-dropdown-input-clear'); $clearButton = $inputContainer.find('.js-dropdown-input-clear');
$clearButton.on( $clearButton.on('click', e => {
'click',
(function(_this) {
// Clear click // Clear click
return function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return _this.input return this.input
.val('') .val('')
.trigger('input') .trigger('input')
.focus(); .focus();
}; });
})(this),
);
// Key events // Key events
timeout = ''; timeout = '';
this.input this.input
...@@ -122,13 +123,13 @@ GitLabDropdownFilter = (function() { ...@@ -122,13 +123,13 @@ GitLabDropdownFilter = (function() {
return this.filter(this.input.val()); return this.filter(this.input.val());
} }
}); });
} }
GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) { GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) {
return BLUR_KEYCODES.indexOf(keyCode) !== -1; return BLUR_KEYCODES.indexOf(keyCode) !== -1;
}; };
GitLabDropdownFilter.prototype.filter = function(search_text) { GitLabDropdownFilter.prototype.filter = function(search_text) {
var data, elements, group, key, results, tmp; var data, elements, group, key, results, tmp;
if (this.options.onFilter) { if (this.options.onFilter) {
this.options.onFilter(search_text); this.options.onFilter(search_text);
...@@ -197,42 +198,33 @@ GitLabDropdownFilter = (function() { ...@@ -197,42 +198,33 @@ GitLabDropdownFilter = (function() {
.find('.dropdown-menu-empty-item') .find('.dropdown-menu-empty-item')
.toggleClass('hidden', elements.is(':visible')); .toggleClass('hidden', elements.is(':visible'));
} }
}; };
return GitLabDropdownFilter;
})();
GitLabDropdownRemote = (function() { function GitLabDropdownRemote(dataEndpoint, options) {
function GitLabDropdownRemote(dataEndpoint, options) {
this.dataEndpoint = dataEndpoint; this.dataEndpoint = dataEndpoint;
this.options = options; this.options = options;
} }
GitLabDropdownRemote.prototype.execute = function() { GitLabDropdownRemote.prototype.execute = function() {
if (typeof this.dataEndpoint === 'string') { if (typeof this.dataEndpoint === 'string') {
return this.fetchData(); return this.fetchData();
} else if (typeof this.dataEndpoint === 'function') { } else if (typeof this.dataEndpoint === 'function') {
if (this.options.beforeSend) { if (this.options.beforeSend) {
this.options.beforeSend(); this.options.beforeSend();
} }
return this.dataEndpoint( return this.dataEndpoint('', data => {
'', // Fetch the data by calling the data function
(function(_this) { if (this.options.success) {
// Fetch the data by calling the data funcfion this.options.success(data);
return function(data) {
if (_this.options.success) {
_this.options.success(data);
} }
if (_this.options.beforeSend) { if (this.options.beforeSend) {
return _this.options.beforeSend(); return this.options.beforeSend();
} }
}; });
})(this),
);
} }
}; };
GitLabDropdownRemote.prototype.fetchData = function() { GitLabDropdownRemote.prototype.fetchData = function() {
if (this.options.beforeSend) { if (this.options.beforeSend) {
this.options.beforeSend(); this.options.beforeSend();
} }
...@@ -243,44 +235,9 @@ GitLabDropdownRemote = (function() { ...@@ -243,44 +235,9 @@ GitLabDropdownRemote = (function() {
return this.options.success(data); return this.options.success(data);
} }
}); });
}; };
return GitLabDropdownRemote;
})();
GitLabDropdown = (function() {
var ACTIVE_CLASS,
FILTER_INPUT,
NO_FILTER_INPUT,
INDETERMINATE_CLASS,
LOADING_CLASS,
PAGE_TWO_CLASS,
NON_SELECTABLE_CLASSES,
SELECTABLE_CLASSES,
CURSOR_SELECT_SCROLL_PADDING,
currentIndex;
LOADING_CLASS = 'is-loading';
PAGE_TWO_CLASS = 'is-page-two';
ACTIVE_CLASS = 'is-active';
INDETERMINATE_CLASS = 'is-indeterminate';
currentIndex = -1;
NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
SELECTABLE_CLASSES = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES}, .option-hidden)`;
CURSOR_SELECT_SCROLL_PADDING = 5;
FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-filter)';
NO_FILTER_INPUT = '.dropdown-input .dropdown-input-field.dropdown-no-filter';
function GitLabDropdown(el1, options) { function GitLabDropdown(el1, options) {
var searchFields, selector, self; var searchFields, selector, self;
this.el = el1; this.el = el1;
this.options = options; this.options = options;
...@@ -296,8 +253,7 @@ GitLabDropdown = (function() { ...@@ -296,8 +253,7 @@ GitLabDropdown = (function() {
this.noFilterInput = this.options.noFilterInput || this.getElement(NO_FILTER_INPUT); this.noFilterInput = this.options.noFilterInput || this.getElement(NO_FILTER_INPUT);
this.highlight = Boolean(this.options.highlight); this.highlight = Boolean(this.options.highlight);
this.icon = Boolean(this.options.icon); this.icon = Boolean(this.options.icon);
this.filterInputBlur = this.filterInputBlur = this.options.filterInputBlur != null ? this.options.filterInputBlur : true;
this.options.filterInputBlur != null ? this.options.filterInputBlur : true;
// If no input is passed create a default one // If no input is passed create a default one
self = this; self = this;
// If selector was passed // If selector was passed
...@@ -317,27 +273,24 @@ GitLabDropdown = (function() { ...@@ -317,27 +273,24 @@ GitLabDropdown = (function() {
this.remote = new GitLabDropdownRemote(this.options.data, { this.remote = new GitLabDropdownRemote(this.options.data, {
dataType: this.options.dataType, dataType: this.options.dataType,
beforeSend: this.toggleLoading.bind(this), beforeSend: this.toggleLoading.bind(this),
success: (function(_this) { success: data => {
return function(data) { this.fullData = data;
_this.fullData = data; this.parseData(this.fullData);
_this.parseData(_this.fullData); this.focusTextInput();
_this.focusTextInput();
// Update dropdown position since remote data may have changed dropdown size // Update dropdown position since remote data may have changed dropdown size
_this.dropdown.find('.dropdown-menu-toggle').dropdown('update'); this.dropdown.find('.dropdown-menu-toggle').dropdown('update');
if ( if (
_this.options.filterable && this.options.filterable &&
_this.filter && this.filter &&
_this.filter.input && this.filter.input &&
_this.filter.input.val() && this.filter.input.val() &&
_this.filter.input.val().trim() !== '' this.filter.input.val().trim() !== ''
) { ) {
return _this.filter.input.trigger('input'); return this.filter.input.trigger('input');
} }
}; },
// Remote data
})(this),
instance: this, instance: this,
}); });
} }
...@@ -357,40 +310,32 @@ GitLabDropdown = (function() { ...@@ -357,40 +310,32 @@ GitLabDropdown = (function() {
query: this.options.data, query: this.options.data,
keys: searchFields, keys: searchFields,
instance: this, instance: this,
elements: (function(_this) { elements: () => {
return function() {
selector = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`; selector = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
if (_this.dropdown.find('.dropdown-toggle-page').length) { if (this.dropdown.find('.dropdown-toggle-page').length) {
selector = `.dropdown-page-one ${selector}`; selector = `.dropdown-page-one ${selector}`;
} }
return $(selector, this.instance.dropdown); return $(selector, this.dropdown);
}; },
})(this), data: () => this.fullData,
data: (function(_this) { callback: data => {
return function() { this.parseData(data);
return _this.fullData; if (this.filterInput.val() !== '') {
};
})(this),
callback: (function(_this) {
return function(data) {
_this.parseData(data);
if (_this.filterInput.val() !== '') {
selector = SELECTABLE_CLASSES; selector = SELECTABLE_CLASSES;
if (_this.dropdown.find('.dropdown-toggle-page').length) { if (this.dropdown.find('.dropdown-toggle-page').length) {
selector = `.dropdown-page-one ${selector}`; selector = `.dropdown-page-one ${selector}`;
} }
if ($(_this.el).is('input')) { if ($(this.el).is('input')) {
currentIndex = -1; currentIndex = -1;
} else { } else {
$(selector, _this.dropdown) $(selector, this.dropdown)
.first() .first()
.find('a') .find('a')
.addClass('is-focused'); .addClass('is-focused');
currentIndex = 0; currentIndex = 0;
} }
} }
}; },
})(this),
}); });
} }
// Event listeners // Event listeners
...@@ -398,44 +343,28 @@ GitLabDropdown = (function() { ...@@ -398,44 +343,28 @@ GitLabDropdown = (function() {
this.dropdown.on('hidden.bs.dropdown', this.hidden); this.dropdown.on('hidden.bs.dropdown', this.hidden);
$(this.el).on('update.label', this.updateLabel); $(this.el).on('update.label', this.updateLabel);
this.dropdown.on('click', '.dropdown-menu, .dropdown-menu-close', this.shouldPropagate); this.dropdown.on('click', '.dropdown-menu, .dropdown-menu-close', this.shouldPropagate);
this.dropdown.on( this.dropdown.on('keyup', e => {
'keyup',
(function(_this) {
return function(e) {
// Escape key // Escape key
if (e.which === 27) { if (e.which === 27) {
return $('.dropdown-menu-close', _this.dropdown).trigger('click'); return $('.dropdown-menu-close', this.dropdown).trigger('click');
} }
}; });
})(this), this.dropdown.on('blur', 'a', e => {
);
this.dropdown.on(
'blur',
'a',
(function(_this) {
return function(e) {
var $dropdownMenu, $relatedTarget; var $dropdownMenu, $relatedTarget;
if (e.relatedTarget != null) { if (e.relatedTarget != null) {
$relatedTarget = $(e.relatedTarget); $relatedTarget = $(e.relatedTarget);
$dropdownMenu = $relatedTarget.closest('.dropdown-menu'); $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
if ($dropdownMenu.length === 0) { if ($dropdownMenu.length === 0) {
return _this.dropdown.removeClass('show'); return this.dropdown.removeClass('show');
} }
} }
}; });
})(this),
);
if (this.dropdown.find('.dropdown-toggle-page').length) { if (this.dropdown.find('.dropdown-toggle-page').length) {
this.dropdown.find('.dropdown-toggle-page, .dropdown-menu-back').on( this.dropdown.find('.dropdown-toggle-page, .dropdown-menu-back').on('click', e => {
'click',
(function(_this) {
return function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return _this.togglePage(); return this.togglePage();
}; });
})(this),
);
} }
if (this.options.selectable) { if (this.options.selectable) {
selector = '.dropdown-content a'; selector = '.dropdown-content a';
...@@ -465,18 +394,18 @@ GitLabDropdown = (function() { ...@@ -465,18 +394,18 @@ GitLabDropdown = (function() {
$el.trigger('blur'); $el.trigger('blur');
}); });
} }
} }
// Finds an element inside wrapper element // Finds an element inside wrapper element
GitLabDropdown.prototype.getElement = function(selector) { GitLabDropdown.prototype.getElement = function(selector) {
return this.dropdown.find(selector); return this.dropdown.find(selector);
}; };
GitLabDropdown.prototype.toggleLoading = function() { GitLabDropdown.prototype.toggleLoading = function() {
return $('.dropdown-menu', this.dropdown).toggleClass(LOADING_CLASS); return $('.dropdown-menu', this.dropdown).toggleClass(LOADING_CLASS);
}; };
GitLabDropdown.prototype.togglePage = function() { GitLabDropdown.prototype.togglePage = function() {
var menu; var menu;
menu = $('.dropdown-menu', this.dropdown); menu = $('.dropdown-menu', this.dropdown);
if (menu.hasClass(PAGE_TWO_CLASS)) { if (menu.hasClass(PAGE_TWO_CLASS)) {
...@@ -487,9 +416,9 @@ GitLabDropdown = (function() { ...@@ -487,9 +416,9 @@ GitLabDropdown = (function() {
menu.toggleClass(PAGE_TWO_CLASS); menu.toggleClass(PAGE_TWO_CLASS);
// Focus first visible input on active page // Focus first visible input on active page
return this.dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus(); return this.dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus();
}; };
GitLabDropdown.prototype.parseData = function(data) { GitLabDropdown.prototype.parseData = function(data) {
var full_html, groupData, html, name; var full_html, groupData, html, name;
this.renderedData = data; this.renderedData = data;
if (this.options.filterable && data.length === 0) { if (this.options.filterable && data.length === 0) {
...@@ -520,13 +449,13 @@ GitLabDropdown = (function() { ...@@ -520,13 +449,13 @@ GitLabDropdown = (function() {
// Render the full menu // Render the full menu
full_html = this.renderMenu(html); full_html = this.renderMenu(html);
return this.appendMenu(full_html); return this.appendMenu(full_html);
}; };
GitLabDropdown.prototype.renderData = function(data, group) { GitLabDropdown.prototype.renderData = function(data, group) {
return data.map((obj, index) => this.renderItem(obj, group || false, index)); return data.map((obj, index) => this.renderItem(obj, group || false, index));
}; };
GitLabDropdown.prototype.shouldPropagate = function(e) { GitLabDropdown.prototype.shouldPropagate = function(e) {
var $target; var $target;
if (this.options.multiSelect || this.options.shouldPropagate === false) { if (this.options.multiSelect || this.options.shouldPropagate === false) {
$target = $(e.target); $target = $(e.target);
...@@ -546,18 +475,18 @@ GitLabDropdown = (function() { ...@@ -546,18 +475,18 @@ GitLabDropdown = (function() {
return true; return true;
} }
}; };
GitLabDropdown.prototype.filteredFullData = function() { GitLabDropdown.prototype.filteredFullData = function() {
return this.fullData.filter( return this.fullData.filter(
r => r =>
typeof r === 'object' && typeof r === 'object' &&
!Object.prototype.hasOwnProperty.call(r, 'beforeDivider') && !Object.prototype.hasOwnProperty.call(r, 'beforeDivider') &&
!Object.prototype.hasOwnProperty.call(r, 'header'), !Object.prototype.hasOwnProperty.call(r, 'header'),
); );
}; };
GitLabDropdown.prototype.opened = function(e) { GitLabDropdown.prototype.opened = function(e) {
var contentHtml; var contentHtml;
this.resetRows(); this.resetRows();
this.addArrowKeyEvent(); this.addArrowKeyEvent();
...@@ -604,17 +533,17 @@ GitLabDropdown = (function() { ...@@ -604,17 +533,17 @@ GitLabDropdown = (function() {
} }
return this.dropdown.trigger('shown.gl.dropdown'); return this.dropdown.trigger('shown.gl.dropdown');
}; };
GitLabDropdown.prototype.positionMenuAbove = function() { GitLabDropdown.prototype.positionMenuAbove = function() {
var $menu = this.dropdown.find('.dropdown-menu'); var $menu = this.dropdown.find('.dropdown-menu');
$menu.addClass('dropdown-open-top'); $menu.addClass('dropdown-open-top');
$menu.css('top', 'initial'); $menu.css('top', 'initial');
$menu.css('bottom', '100%'); $menu.css('bottom', '100%');
}; };
GitLabDropdown.prototype.hidden = function(e) { GitLabDropdown.prototype.hidden = function(e) {
var $input; var $input;
this.resetRows(); this.resetRows();
this.removeArrowKeyEvent(); this.removeArrowKeyEvent();
...@@ -629,23 +558,23 @@ GitLabDropdown = (function() { ...@@ -629,23 +558,23 @@ GitLabDropdown = (function() {
this.options.hidden.call(this, e); this.options.hidden.call(this, e);
} }
return this.dropdown.trigger('hidden.gl.dropdown'); return this.dropdown.trigger('hidden.gl.dropdown');
}; };
// Render the full menu // Render the full menu
GitLabDropdown.prototype.renderMenu = function(html) { GitLabDropdown.prototype.renderMenu = function(html) {
if (this.options.renderMenu) { if (this.options.renderMenu) {
return this.options.renderMenu(html); return this.options.renderMenu(html);
} else { } else {
return $('<ul>').append(html); return $('<ul>').append(html);
} }
}; };
// Append the menu into the dropdown // Append the menu into the dropdown
GitLabDropdown.prototype.appendMenu = function(html) { GitLabDropdown.prototype.appendMenu = function(html) {
return this.clearMenu().append(html); return this.clearMenu().append(html);
}; };
GitLabDropdown.prototype.clearMenu = function() { GitLabDropdown.prototype.clearMenu = function() {
var selector; var selector;
selector = '.dropdown-content'; selector = '.dropdown-content';
if (this.dropdown.find('.dropdown-toggle-page').length) { if (this.dropdown.find('.dropdown-toggle-page').length) {
...@@ -657,9 +586,9 @@ GitLabDropdown = (function() { ...@@ -657,9 +586,9 @@ GitLabDropdown = (function() {
} }
return $(selector, this.dropdown).empty(); return $(selector, this.dropdown).empty();
}; };
GitLabDropdown.prototype.renderItem = function(data, group, index) { GitLabDropdown.prototype.renderItem = function(data, group, index) {
let parent; let parent;
if (this.dropdown && this.dropdown[0]) { if (this.dropdown && this.dropdown[0]) {
...@@ -679,13 +608,13 @@ GitLabDropdown = (function() { ...@@ -679,13 +608,13 @@ GitLabDropdown = (function() {
group, group,
index, index,
}); });
}; };
GitLabDropdown.prototype.highlightTemplate = function(text, template) { GitLabDropdown.prototype.highlightTemplate = function(text, template) {
return `"<b>${_.escape(text)}</b>" ${template}`; return `"<b>${_.escape(text)}</b>" ${template}`;
}; };
GitLabDropdown.prototype.highlightTextMatches = function(text, term) { GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
const occurrences = fuzzaldrinPlus.match(text, term); const occurrences = fuzzaldrinPlus.match(text, term);
const { indexOf } = []; const { indexOf } = [];
...@@ -699,13 +628,13 @@ GitLabDropdown = (function() { ...@@ -699,13 +628,13 @@ GitLabDropdown = (function() {
} }
}) })
.join(''); .join('');
}; };
GitLabDropdown.prototype.noResults = function() { GitLabDropdown.prototype.noResults = function() {
return '<li class="dropdown-menu-empty-item"><a>No matching results</a></li>'; return '<li class="dropdown-menu-empty-item"><a>No matching results</a></li>';
}; };
GitLabDropdown.prototype.rowClicked = function(el) { GitLabDropdown.prototype.rowClicked = function(el) {
var field, groupName, isInput, selectedIndex, selectedObject, value, isMarking; var field, groupName, isInput, selectedIndex, selectedObject, value, isMarking;
const { fieldName } = this.options; const { fieldName } = this.options;
...@@ -788,9 +717,9 @@ GitLabDropdown = (function() { ...@@ -788,9 +717,9 @@ GitLabDropdown = (function() {
} }
return [selectedObject, isMarking]; return [selectedObject, isMarking];
}; };
GitLabDropdown.prototype.focusTextInput = function() { GitLabDropdown.prototype.focusTextInput = function() {
if (this.options.filterable) { if (this.options.filterable) {
const initialScrollTop = $(window).scrollTop(); const initialScrollTop = $(window).scrollTop();
...@@ -802,9 +731,9 @@ GitLabDropdown = (function() { ...@@ -802,9 +731,9 @@ GitLabDropdown = (function() {
$(window).scrollTop(initialScrollTop); $(window).scrollTop(initialScrollTop);
} }
} }
}; };
GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject, single) { GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject, single) {
var $input; var $input;
// Create hidden input for form // Create hidden input for form
if (single) { if (single) {
...@@ -830,9 +759,9 @@ GitLabDropdown = (function() { ...@@ -830,9 +759,9 @@ GitLabDropdown = (function() {
} }
this.dropdown.before($input).trigger('change'); this.dropdown.before($input).trigger('change');
}; };
GitLabDropdown.prototype.selectRowAtIndex = function(index) { GitLabDropdown.prototype.selectRowAtIndex = function(index) {
var $el, selector; var $el, selector;
// If we pass an option index // If we pass an option index
if (typeof index !== 'undefined') { if (typeof index !== 'undefined') {
...@@ -853,26 +782,23 @@ GitLabDropdown = (function() { ...@@ -853,26 +782,23 @@ GitLabDropdown = (function() {
$el.trigger('click'); $el.trigger('click');
} }
} }
}; };
GitLabDropdown.prototype.addArrowKeyEvent = function() { GitLabDropdown.prototype.addArrowKeyEvent = function() {
var ARROW_KEY_CODES, selector; var ARROW_KEY_CODES, selector;
ARROW_KEY_CODES = [38, 40]; ARROW_KEY_CODES = [38, 40];
selector = SELECTABLE_CLASSES; selector = SELECTABLE_CLASSES;
if (this.dropdown.find('.dropdown-toggle-page').length) { if (this.dropdown.find('.dropdown-toggle-page').length) {
selector = `.dropdown-page-one ${selector}`; selector = `.dropdown-page-one ${selector}`;
} }
return $('body').on( return $('body').on('keydown', e => {
'keydown',
(function(_this) {
return function(e) {
var $listItems, PREV_INDEX, currentKeyCode; var $listItems, PREV_INDEX, currentKeyCode;
currentKeyCode = e.which; currentKeyCode = e.which;
if (ARROW_KEY_CODES.indexOf(currentKeyCode) !== -1) { if (ARROW_KEY_CODES.indexOf(currentKeyCode) !== -1) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
PREV_INDEX = currentIndex; PREV_INDEX = currentIndex;
$listItems = $(selector, _this.dropdown); $listItems = $(selector, this.dropdown);
// if @options.filterable // if @options.filterable
// $input.blur() // $input.blur()
if (currentKeyCode === 40) { if (currentKeyCode === 40) {
...@@ -887,29 +813,27 @@ GitLabDropdown = (function() { ...@@ -887,29 +813,27 @@ GitLabDropdown = (function() {
} }
} }
if (currentIndex !== PREV_INDEX) { if (currentIndex !== PREV_INDEX) {
_this.highlightRowAtIndex($listItems, currentIndex); this.highlightRowAtIndex($listItems, currentIndex);
} }
return false; return false;
} }
if (currentKeyCode === 13 && currentIndex !== -1) { if (currentKeyCode === 13 && currentIndex !== -1) {
e.preventDefault(); e.preventDefault();
_this.selectRowAtIndex(); this.selectRowAtIndex();
} }
}; });
})(this), };
);
};
GitLabDropdown.prototype.removeArrowKeyEvent = function() { GitLabDropdown.prototype.removeArrowKeyEvent = function() {
return $('body').off('keydown'); return $('body').off('keydown');
}; };
GitLabDropdown.prototype.resetRows = function resetRows() { GitLabDropdown.prototype.resetRows = function resetRows() {
currentIndex = -1; currentIndex = -1;
$('.is-focused', this.dropdown).removeClass('is-focused'); $('.is-focused', this.dropdown).removeClass('is-focused');
}; };
GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) { GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) {
var $dropdownContent, var $dropdownContent,
$listItem, $listItem,
dropdownContentBottom, dropdownContentBottom,
...@@ -956,9 +880,9 @@ GitLabDropdown = (function() { ...@@ -956,9 +880,9 @@ GitLabDropdown = (function() {
listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING, listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING,
); );
} }
}; };
GitLabDropdown.prototype.updateLabel = function(selected, el, instance) { GitLabDropdown.prototype.updateLabel = function(selected, el, instance) {
if (selected == null) { if (selected == null) {
selected = null; selected = null;
} }
...@@ -978,14 +902,11 @@ GitLabDropdown = (function() { ...@@ -978,14 +902,11 @@ GitLabDropdown = (function() {
return $(this.el) return $(this.el)
.find('.dropdown-toggle-text') .find('.dropdown-toggle-text')
.text(toggleText); .text(toggleText);
}; };
GitLabDropdown.prototype.clearField = function(field, isInput) { GitLabDropdown.prototype.clearField = function(field, isInput) {
return isInput ? field.val('') : field.remove(); return isInput ? field.val('') : field.remove();
}; };
return GitLabDropdown;
})();
$.fn.glDropdown = function(opts) { $.fn.glDropdown = function(opts) {
return this.each(function() { return this.each(function() {
......
---
title: Remove IIFEs from gl_dropdown.js
merge_request: 19983
author: nuwe1
type: other
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