Update droplab

app/assets/javascripts/droplab/droplab_ajax.js

 /* eslint-disable */
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 /* global droplab */
-droplab.plugin(function init(DropLab) {
-  var _addData = DropLab.prototype.addData;
-  var _setData = DropLab.prototype.setData;
 
-  var _loadUrlData = function(url) {
-    return new Promise(function(resolve, reject) {
-      var xhr = new XMLHttpRequest;
-      xhr.open('GET', url, true);
-      xhr.onreadystatechange = function () {
-        if(xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            var data = JSON.parse(xhr.responseText);
-            return resolve(data);
-          } else {
-            return reject([xhr.responseText, xhr.status]);
+require('../window')(function(w){
+  w.droplabAjax = {
+    _loadUrlData: function _loadUrlData(url) {
+      return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+          if(xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+              var data = JSON.parse(xhr.responseText);
+              return resolve(data);
+            } else {
+              return reject([xhr.responseText, xhr.status]);
+            }
           }
-        }
-      };
-      xhr.send();
-    });
-  };
-
-  Object.assign(DropLab.prototype, {
-    addData: function(trigger, data) {
-      this.processData(trigger, data, _addData);
-    },
-    setData: function(trigger, data) {
-      this.processData(trigger, data, _setData);
+        };
+        xhr.send();
+      });
     },
-    processData: function(trigger, data, methodName) {
-      var _this = this;
-      if('string' === typeof data) {
-        _loadUrlData(data).then(function(d) {
-          methodName.call(_this, trigger, d);
-        }).catch(function(e) {
-          if(e.message)
-            console.error(e.message, e.stack); // eslint-disable-line no-console
-          else
-            console.error(e); // eslint-disable-line no-console
-        })
-      } else {
-        methodName.apply(this, arguments);
+
+    init: function init(hook) {
+      var config = hook.config.droplabAjax;
+
+      if (!config || !config.endpoint || !config.method) {
+        return;
       }
+
+      if (config.method !== 'setData' && config.method !== 'addData') {
+        return;
+      }
+
+      this._loadUrlData(config.endpoint).then(function(d) {
+        hook.list[config.method].call(hook.list, d);
+      }).catch(function(e) {
+        if(e.message) {
+          console.error(e.message, e.stack); // eslint-disable-line no-console
+        } else {
+          console.error(e); // eslint-disable-line no-console
+        }
+      });
     },
-  });
+
+    destroy: function() {
+    }
+  };
 });
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
 
 },{}]},{},[1])(1)
-});
+});
\ No newline at end of file

app/assets/javascripts/droplab/droplab_filter.js

 /* eslint-disable */
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.filter||(g.filter = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 /* global droplab */
-droplab.plugin(function init(DropLab) {
-  var keydown = function keydown(e) {
-    var list = e.detail.hook.list;
-    var data = list.data;
-    var value = e.detail.hook.trigger.value.toLowerCase();
-    var config = droplab.config[e.detail.hook.id];
-    var matches = [];
-    // will only work on dynamically set data 
-    // and if a config text property is set
-    if(!data || (!config.hasOwnProperty('text') && !config.hasOwnProperty('filter'))){
-      return;
-    }
 
-    var filterFunction = function(o){
-      // cheap string search
-      o.droplab_hidden = o[config.text].toLowerCase().indexOf(value) === -1;
-      return o;
-    };
+require('../window')(function(w){
+  w.droplabFilter = {
 
-    if (config.hasOwnProperty('filter') && config.filter !== undefined) {
-      filterFunction = config.filter;
-    }
+    keydownWrapper: function(e){
+        var list = e.detail.hook.list;
+        var data = list.data;
+        var value = e.detail.hook.trigger.value.toLowerCase();
+        var config = e.detail.hook.config.droplabFilter;
+        var matches = [];
+        var filterFunction;
+        // will only work on dynamically set data
+        if(!data){
+          return;
+        }
+
+        if (config && config.filterFunction && typeof config.filterFunction === 'function') {
+          filterFunction = config.filterFunction;
+        } else {
+          filterFunction = function(o){
+            // cheap string search
+            o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
+            return o;
+          };
+        }
+
+        matches = data.map(function(o) {
+          return filterFunction(o, value);
+        });
+        list.render(matches);
+    },
+
+    init: function init(hookInput) {
+      var config = hookInput.config.droplabFilter;
 
-    matches = data.map(function(o) {
-      return filterFunction(o, value);
-    });
-    list.render(matches);
-  }
-  window.addEventListener('keyup.dl', keydown);
+      if (!config || (!config.template && !config.filterFunction)) {
+        return;
+      }
+
+      this.hookInput = hookInput;
+      this.hookInput.trigger.addEventListener('keyup.dl', this.keydownWrapper);
+    },
+
+    destroy: function destroy(){
+      this.hookInput.trigger.removeEventListener('keyup.dl', this.keydownWrapper);
+    }
+  };
 });
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
 },{}]},{},[1])(1)
 });
\ No newline at end of file

app/assets/javascripts/filtered_search/dropdown_assignee.js.es6

@@ -3,8 +3,8 @@
 
 ((global) => {
   class DropdownAssignee extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-assignee';
     }
 
@@ -20,8 +20,13 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=');
+      // TODO: Pass elements instead of querySelectors
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-assignee', [droplabAjax], {
+        droplabAjax: {
+          endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=',
+          method: 'setData',
+        }
+      });
     }
 
     filterMethod(item, query) {

app/assets/javascripts/filtered_search/dropdown_author.js.es6

@@ -3,8 +3,8 @@
 
 ((global) => {
   class DropdownAuthor extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-author';
     }
 
@@ -16,8 +16,13 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=');
+      // TODO: Pass elements instead of querySelectors
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjax], {
+        droplabAjax: {
+          endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=',
+          method: 'setData',
+        }
+      });
     }
 
     filterMethod(item, query) {

app/assets/javascripts/filtered_search/dropdown_hint.js.es6

@@ -21,10 +21,9 @@
   }];
 
   class DropdownHint extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input, filterKeyword) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-hint';
-      this.filterKeyword = filterKeyword;
     }
 
     itemClicked(e) {
@@ -39,8 +38,13 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, dropdownData);
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-hint', [droplabFilter], {
+        droplabFilter: {
+          template: 'hint',
+          filterFunction: this.filterMethod,
+        }
+      });
+      this.droplab.setData(this.hookId, dropdownData);
     }
 
     filterMethod(item, query) {
@@ -54,6 +58,14 @@
 
       return item;
     }
+
+    configure() {
+      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], {
+        droplabFilter: {
+          template: 'hint',
+        }
+      }).init();
+    }
   }
 
   global.DropdownHint = DropdownHint;

app/assets/javascripts/filtered_search/dropdown_label.js.es6

@@ -3,9 +3,10 @@
 
 ((global) => {
   class DropdownLabel extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-label';
+      this.filterSymbol = '~';
     }
 
     itemClicked(e) {
@@ -21,20 +22,17 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, 'labels.json');
-    }
-
-    filterMethod(item, query) {
-      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
-      const valueWithoutColon = value.slice(1).toLowerCase();
-      const valueWithoutPrefix = valueWithoutColon.slice(1);
-
-      const title = item.title.toLowerCase();
-      const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1;
-
-      item.droplab_hidden = noTitleMatch;
-      return item;
+      // TODO: Pass elements instead of querySelectors
+      // TODO: Don't bind filterWithSymbol to (this), just pass the symbol
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-label', [droplabAjax, droplabFilter], {
+        droplabAjax: {
+          endpoint: 'labels.json',
+          method: 'setData',
+        },
+        droplabFilter: {
+          filterFunction: this.filterWithSymbol.bind(this),
+        }
+      });
     }
   }
 

app/assets/javascripts/filtered_search/dropdown_milestone.js.es6

@@ -3,9 +3,10 @@
 
 ((global) => {
   class DropdownMilestone extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-milestone';
+      this.filterSymbol = '%';
     }
 
     itemClicked(e) {
@@ -21,21 +22,16 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, 'milestones.json');
-    }
-
-    filterMethod(item, query) {
-      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
-      const valueWithoutColon = value.slice(1).toLowerCase();
-      const valueWithoutPrefix = valueWithoutColon.slice(1);
-
-      const title = item.title.toLowerCase();
-
-      const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1;
-
-      item.droplab_hidden = noTitleMatch;
-      return item;
+      // TODO: Pass elements instead of querySelectors
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-milestone', [droplabAjax, droplabFilter], {
+        droplabAjax: {
+          endpoint: 'milestones.json',
+          method: 'setData',
+        },
+        droplabFilter: {
+          filterFunction: this.filterWithSymbol.bind(this),
+        }
+      });
     }
   }
 

app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6

@@ -3,7 +3,8 @@
   const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
 
   class FilteredSearchDropdown {
-    constructor(dropdown, input) {
+    constructor(droplab, dropdown, input) {
+      this.droplab = droplab;
       this.hookId = 'filtered-search';
       this.input = input;
       this.dropdown = dropdown;
@@ -66,25 +67,11 @@
 
     destroy() {
       this.input.setAttribute(DATA_DROPDOWN_TRIGGER, '');
-      droplab.setConfig(this.getFilterConfig());
-      droplab.setData(this.hookId, []);
+      this.droplab.setConfig(this.getFilterConfig());
+      this.droplab.setData(this.hookId, []);
       this.unbindEvents();
     }
 
-    show() {
-      const currentHook = this.getCurrentHook();
-      if (currentHook) {
-        currentHook.list.show();
-      }
-    }
-
-    hide() {
-      const currentHook = this.getCurrentHook();
-      if (currentHook) {
-        currentHook.list.hide();
-      }
-    }
-
     dismissDropdown() {
       this.input.focus();
       // Propogate input change to FilteredSearchManager
@@ -111,30 +98,24 @@
     }
 
     getCurrentHook() {
-      return droplab.hooks.filter(h => h.id === this.hookId)[0];
+      return this.droplab.hooks.filter(h => h.id === this.hookId)[0];
     }
 
     renderContent() {
-      droplab.setConfig(this.getFilterConfig(this.filterKeyword));
+      // Overriden by dropdown sub class
     }
 
-    render(hide) {
+    render(forceRenderContent) {
       this.setAsDropdown();
 
       const firstTimeInitialized = this.getCurrentHook() === undefined;
 
-      if (firstTimeInitialized) {
+      if (firstTimeInitialized || forceRenderContent) {
         this.renderContent();
       } else if(this.getCurrentHook().list.list.id !== this.listId) {
-        droplab.changeHookList(this.hookId, `#${this.listId}`);
+        // this.droplab.changeHookList(this.hookId, `#${this.listId}`);
         this.renderContent();
       }
-
-      if (hide) {
-        this.hide();
-      } else {
-        this.show();
-      }
     }
 
     resetFilters() {
@@ -152,6 +133,29 @@
         }
       }
     }
+
+    hide() {
+      const currentHook = this.getCurrentHook();
+      if (currentHook) {
+        currentHook.list.hide();
+      }
+    }
+
+    filterWithSymbol(item, query) {
+      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
+      const valueWithoutColon = value.slice(1).toLowerCase();
+      const prefix = valueWithoutColon[0];
+      const valueWithoutPrefix = valueWithoutColon.slice(1);
+
+      const title = item.title.toLowerCase();
+
+      // Eg. this.filterSymbol = ~ for labels
+      const matchWithoutPrefix = prefix === this.filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
+      const match = title.indexOf(valueWithoutColon) !== -1;
+
+      item.droplab_hidden = !match && !matchWithoutPrefix;
+      return item;
+    }
   }
 
   global.FilteredSearchDropdown = FilteredSearchDropdown;

app/assets/javascripts/filtered_search/filtered_search_manager.js.es6

@@ -101,11 +101,18 @@
     }
 
     loadDropdown(dropdownName = '', hideDropdown) {
+      let firstLoad = false;
+      const filteredSearch = document.querySelector('.filtered-search');
+
+      if(!this.droplab) {
+        firstLoad = true;
+        this.droplab = new DropLab();
+      }
+
       dropdownName = dropdownName.toLowerCase();
 
       const filterIconPadding = 27;
       const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0];
-      const filteredSearch = document.querySelector('.filtered-search');
 
       if (!this.font) {
         this.font = window.getComputedStyle(filteredSearch).font;
@@ -116,34 +123,38 @@
 
         const dynamicDropdownPadding = 12;
         const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding + dynamicDropdownPadding;
+        const dropdownAuthorElement = document.querySelector('#js-dropdown-author');
+        const dropdownAssigneeElement = document.querySelector('#js-dropdown-assignee');
+        const dropdownMilestoneElement = document.querySelector('#js-dropdown-milestone');
+        const dropdownLabelElemenet = document.querySelector('#js-dropdown-label');
 
         this.dismissCurrentDropdown();
         this.currentDropdown = match.key;
 
         if (match.key === 'author') {
           if (!dropdownAuthor) {
-            dropdownAuthor = new gl.DropdownAuthor(document.querySelector('#js-dropdown-author'), filteredSearch);
+            dropdownAuthor = new gl.DropdownAuthor(this.droplab, dropdownAuthorElement, filteredSearch);
           }
 
           dropdownAuthor.setOffset(dropdownOffset);
           dropdownAuthor.render();
         } else if (match.key === 'assignee') {
           if (!dropdownAssignee) {
-            dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), filteredSearch);
+            dropdownAssignee = new gl.DropdownAssignee(this.droplab, dropdownAssigneeElement, filteredSearch);
           }
 
           dropdownAssignee.setOffset(dropdownOffset);
           dropdownAssignee.render();
         } else if (match.key === 'milestone') {
           if (!dropdownMilestone) {
-            dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), filteredSearch);
+            dropdownMilestone = new gl.DropdownMilestone(this.droplab, dropdownMilestoneElement, filteredSearch);
           }
 
           dropdownMilestone.setOffset(dropdownOffset);
           dropdownMilestone.render();
         } else if (match.key === 'label') {
           if (!dropdownLabel) {
-            dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), filteredSearch);
+            dropdownLabel = new gl.DropdownLabel(this.droplab, dropdownLabelElemenet, filteredSearch);
           }
 
           dropdownLabel.setOffset(dropdownOffset);
@@ -154,22 +165,29 @@
         console.log('🦄 load hint dropdown');
 
         const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding;
-        console.log(dropdownOffset)
+        const dropdownHintElement = document.querySelector('#js-dropdown-hint');
+
         this.dismissCurrentDropdown();
         this.currentDropdown = 'hint';
-
         if (!dropdownHint) {
-          dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), filteredSearch, this.currentDropdown);
+          dropdownHint = new gl.DropdownHint(this.droplab, dropdownHintElement, filteredSearch);
+        }
+
+        if (firstLoad) {
+          dropdownHint.configure();
         }
+
         dropdownHint.setOffset(dropdownOffset);
-        dropdownHint.render(hideDropdown);
+        dropdownHint.render(firstLoad);
       }
     }
 
     dismissCurrentDropdown() {
-      if (this.currentDropdown === 'hint') {
-        dropdownHint.destroy();
-      }
+      // if (this.currentDropdown === 'hint') {
+      //   dropdownHint.hide();
+      // } else if (this.currentDropdown === 'author') {
+      //   // dropdownAuthor.hide();
+      // }
     }
 
     setDropdown() {