Remove-IIFEs-from-gl_dropdown.js

app/assets/javascripts/gl_dropdown.js

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

changelogs/unreleased/Remove-IIFEs-from-gl_dropdown-js.yml

+---
+title: Remove IIFEs from gl_dropdown.js
+merge_request: 19983
+author: nuwe1
+type: other