Add droplab updates

app/assets/javascripts/application.js

@@ -58,6 +58,7 @@
 /*= require_directory ./extensions */
 /*= require_directory ./lib/utils */
 /*= require_directory ./u2f */
+/*= require_directory ./droplab */
 /*= require_directory . */
 /*= require fuzzaldrin-plus */
 /*= require es6-promise.auto */

app/assets/javascripts/droplab/droplab.js

@@ -38,6 +38,7 @@ var DropDown = function(list, trigger) {
   this.items = [];
   this.getItems();
   this.addEvents();
+  this.initialState = list.innerHTML;
 };
 
 Object.assign(DropDown.prototype, {
@@ -50,7 +51,8 @@ Object.assign(DropDown.prototype, {
     var self = this;
     // event delegation.
     this.list.addEventListener('click', function(e) {
-      if(e.target.tagName === 'A') {
+      if(e.target.tagName === 'A' || e.target.tagName === 'button') {
+        e.preventDefault();
         self.hide();
         var listEvent = new CustomEvent('click.dl', {
           detail: {
@@ -72,6 +74,11 @@ Object.assign(DropDown.prototype, {
     }
   },
 
+  setData: function(data) {
+    this.data = data;
+    this.render(data);
+  },
+
   addData: function(data) {
     this.data = (this.data || []).concat(data);
     this.render(data);
@@ -155,8 +162,17 @@ require('./window')(function(w){
 
       addData: function () {
         var args = [].slice.apply(arguments);
+        this.applyArgs(args, '_addData');
+      },
+
+      setData: function() {
+        var args = [].slice.apply(arguments);
+        this.applyArgs(args, '_setData');
+      },
+
+      applyArgs: function(args, methodName) {
         if(this.ready) {
-          this._addData.apply(this, args);
+          this[methodName].apply(this, args);
         } else {
           this.queuedData = this.queuedData || [];
           this.queuedData.push(args);
@@ -164,10 +180,18 @@ require('./window')(function(w){
       },
 
       _addData: function(trigger, data) {
+        this._processData(trigger, data, 'addData');
+      },
+
+      _setData: function(trigger, data) {
+        this._processData(trigger, data, 'setData');
+      },
+
+      _processData: function(trigger, data, methodName) {
         this.hooks.forEach(function(hook) {
           if(hook.trigger.dataset.hasOwnProperty('id')) {
             if(hook.trigger.dataset.id === trigger) {
-              hook.list.addData(data);
+              hook.list[methodName](data);
             }
           }
         });
@@ -189,21 +213,48 @@ require('./window')(function(w){
         });
       },
 
-      addHook: function(hook) {
+      changeHookList: function(trigger, list) {
+        trigger = document.querySelector('[data-id="'+trigger+'"]');
+        list = document.querySelector(list);
+        this.hooks.every(function(hook, i) {
+          if(hook.trigger === trigger) {
+            // Restore initial State
+            hook.list.list.innerHTML = hook.list.initialState;
+            hook.list.hide();
+            hook.trigger.removeEventListener('mousedown', hook.events.mousedown);
+            hook.trigger.removeEventListener('input', hook.events.input);
+            hook.trigger.removeEventListener('keyup', hook.events.keyup);
+            hook.trigger.removeEventListener('keydown', hook.events.keydown);
+            this.hooks.splice(i, 1);
+            this.addHook(trigger, list);
+            return false;
+          }
+          return true
+        }.bind(this));
+      },
+
+      addHook: function(hook, list) {
         if(!(hook instanceof HTMLElement) && typeof hook === 'string'){
           hook = document.querySelector(hook);
         }
-        var list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]);
+        if(!list){
+          list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]);
+        }
+        
+        if(hook) {
           if(hook.tagName === 'A' || hook.tagName === 'BUTTON') {
             this.hooks.push(new HookButton(hook, list));
           } else if(hook.tagName === 'INPUT') {
             this.hooks.push(new HookInput(hook, list));
           }
+        }
         return this;
       },
 
       addHooks: function(hooks) {
-        hooks.forEach(this.addHook.bind(this));
+        hooks.forEach(function(hook) {
+          this.addHook(hook, null);
+        }.bind(this));
         return this;
       },
 
@@ -302,7 +353,8 @@ var HookInput = function(trigger, list) {
 Object.assign(HookInput.prototype, {
   addEvents: function(){
     var self = this;
-    this.trigger.addEventListener('mousedown', function(e){
+
+    function mousedown(e) {
       var mouseEvent = new CustomEvent('mousedown.dl', {
         detail: {
           hook: self,
@@ -312,9 +364,9 @@ Object.assign(HookInput.prototype, {
         cancelable: true
       });
       e.target.dispatchEvent(mouseEvent);
-    });
+    }
 
-    this.trigger.addEventListener('input', function(e){
+    function input(e) {
       var inputEvent = new CustomEvent('input.dl', {
         detail: {
           hook: self,
@@ -325,15 +377,15 @@ Object.assign(HookInput.prototype, {
       });
       e.target.dispatchEvent(inputEvent);
       self.list.show();
-    });
+    }
 
-    this.trigger.addEventListener('keyup', function(e){
+    function keyup(e) {
       keyEvent(e, 'keyup.dl');
-    });
+    }
 
-    this.trigger.addEventListener('keydown', function(e){
+    function keydown(e) {
       keyEvent(e, 'keydown.dl');
-    });
+    }
 
     function keyEvent(e, keyEventName){
       var keyEvent = new CustomEvent(keyEventName, {
@@ -349,6 +401,16 @@ Object.assign(HookInput.prototype, {
       e.target.dispatchEvent(keyEvent);
       self.list.show();
     }
+
+    this.events = this.events || {};
+    this.events.mousedown = mousedown;
+    this.events.input = input;
+    this.events.keyup = keyup;
+    this.events.keydown = keydown;
+    this.trigger.addEventListener('mousedown', mousedown);
+    this.trigger.addEventListener('input', input);
+    this.trigger.addEventListener('keyup', keyup);
+    this.trigger.addEventListener('keydown', keydown);
   },
 });
 

app/assets/javascripts/droplab/droplab_filter.js

@@ -2,18 +2,17 @@
 (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;
+    var config = droplab.config[e.detail.hook.id];
     var matches = [];
     // will only work on dynamically set data 
-    if(!data){
+    // and if a config text property is set
+    if(!data || !config.hasOwnProperty('text')){
       return;
     }
-    config = droplab.config[e.detail.hook.id];
     matches = data.map(function(o){
       // cheap string search
       o.droplab_hidden = o[config.text].toLowerCase().indexOf(value) === -1;
@@ -21,7 +20,6 @@ droplab.plugin(function init(DropLab) {
     });
     list.render(matches);
   }
-
   window.addEventListener('keyup.dl', keydown);
 });
 },{}]},{},[1])(1)