Commit a1ca5c76 authored by Clement Ho's avatar Clement Ho

Add droplab updates

parent 3c075580
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
/*= require_directory ./extensions */ /*= require_directory ./extensions */
/*= require_directory ./lib/utils */ /*= require_directory ./lib/utils */
/*= require_directory ./u2f */ /*= require_directory ./u2f */
/*= require_directory ./droplab */
/*= require_directory . */ /*= require_directory . */
/*= require fuzzaldrin-plus */ /*= require fuzzaldrin-plus */
/*= require es6-promise.auto */ /*= require es6-promise.auto */
......
...@@ -38,6 +38,7 @@ var DropDown = function(list, trigger) { ...@@ -38,6 +38,7 @@ var DropDown = function(list, trigger) {
this.items = []; this.items = [];
this.getItems(); this.getItems();
this.addEvents(); this.addEvents();
this.initialState = list.innerHTML;
}; };
Object.assign(DropDown.prototype, { Object.assign(DropDown.prototype, {
...@@ -50,7 +51,8 @@ Object.assign(DropDown.prototype, { ...@@ -50,7 +51,8 @@ Object.assign(DropDown.prototype, {
var self = this; var self = this;
// event delegation. // event delegation.
this.list.addEventListener('click', function(e) { this.list.addEventListener('click', function(e) {
if(e.target.tagName === 'A') { if(e.target.tagName === 'A' || e.target.tagName === 'button') {
e.preventDefault();
self.hide(); self.hide();
var listEvent = new CustomEvent('click.dl', { var listEvent = new CustomEvent('click.dl', {
detail: { detail: {
...@@ -72,6 +74,11 @@ Object.assign(DropDown.prototype, { ...@@ -72,6 +74,11 @@ Object.assign(DropDown.prototype, {
} }
}, },
setData: function(data) {
this.data = data;
this.render(data);
},
addData: function(data) { addData: function(data) {
this.data = (this.data || []).concat(data); this.data = (this.data || []).concat(data);
this.render(data); this.render(data);
...@@ -155,8 +162,17 @@ require('./window')(function(w){ ...@@ -155,8 +162,17 @@ require('./window')(function(w){
addData: function () { addData: function () {
var args = [].slice.apply(arguments); 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) { if(this.ready) {
this._addData.apply(this, args); this[methodName].apply(this, args);
} else { } else {
this.queuedData = this.queuedData || []; this.queuedData = this.queuedData || [];
this.queuedData.push(args); this.queuedData.push(args);
...@@ -164,10 +180,18 @@ require('./window')(function(w){ ...@@ -164,10 +180,18 @@ require('./window')(function(w){
}, },
_addData: function(trigger, data) { _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) { this.hooks.forEach(function(hook) {
if(hook.trigger.dataset.hasOwnProperty('id')) { if(hook.trigger.dataset.hasOwnProperty('id')) {
if(hook.trigger.dataset.id === trigger) { if(hook.trigger.dataset.id === trigger) {
hook.list.addData(data); hook.list[methodName](data);
} }
} }
}); });
...@@ -189,21 +213,48 @@ require('./window')(function(w){ ...@@ -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'){ if(!(hook instanceof HTMLElement) && typeof hook === 'string'){
hook = document.querySelector(hook); hook = document.querySelector(hook);
} }
var list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]); if(!list){
if(hook.tagName === 'A' || hook.tagName === 'BUTTON') { list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]);
this.hooks.push(new HookButton(hook, list)); }
} else if(hook.tagName === 'INPUT') {
this.hooks.push(new HookInput(hook, list)); 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; return this;
}, },
addHooks: function(hooks) { addHooks: function(hooks) {
hooks.forEach(this.addHook.bind(this)); hooks.forEach(function(hook) {
this.addHook(hook, null);
}.bind(this));
return this; return this;
}, },
...@@ -302,7 +353,8 @@ var HookInput = function(trigger, list) { ...@@ -302,7 +353,8 @@ var HookInput = function(trigger, list) {
Object.assign(HookInput.prototype, { Object.assign(HookInput.prototype, {
addEvents: function(){ addEvents: function(){
var self = this; var self = this;
this.trigger.addEventListener('mousedown', function(e){
function mousedown(e) {
var mouseEvent = new CustomEvent('mousedown.dl', { var mouseEvent = new CustomEvent('mousedown.dl', {
detail: { detail: {
hook: self, hook: self,
...@@ -312,9 +364,9 @@ Object.assign(HookInput.prototype, { ...@@ -312,9 +364,9 @@ Object.assign(HookInput.prototype, {
cancelable: true cancelable: true
}); });
e.target.dispatchEvent(mouseEvent); e.target.dispatchEvent(mouseEvent);
}); }
this.trigger.addEventListener('input', function(e){ function input(e) {
var inputEvent = new CustomEvent('input.dl', { var inputEvent = new CustomEvent('input.dl', {
detail: { detail: {
hook: self, hook: self,
...@@ -325,15 +377,15 @@ Object.assign(HookInput.prototype, { ...@@ -325,15 +377,15 @@ Object.assign(HookInput.prototype, {
}); });
e.target.dispatchEvent(inputEvent); e.target.dispatchEvent(inputEvent);
self.list.show(); self.list.show();
}); }
this.trigger.addEventListener('keyup', function(e){ function keyup(e) {
keyEvent(e, 'keyup.dl'); keyEvent(e, 'keyup.dl');
}); }
this.trigger.addEventListener('keydown', function(e){ function keydown(e) {
keyEvent(e, 'keydown.dl'); keyEvent(e, 'keydown.dl');
}); }
function keyEvent(e, keyEventName){ function keyEvent(e, keyEventName){
var keyEvent = new CustomEvent(keyEventName, { var keyEvent = new CustomEvent(keyEventName, {
...@@ -349,6 +401,16 @@ Object.assign(HookInput.prototype, { ...@@ -349,6 +401,16 @@ Object.assign(HookInput.prototype, {
e.target.dispatchEvent(keyEvent); e.target.dispatchEvent(keyEvent);
self.list.show(); 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);
}, },
}); });
......
...@@ -2,18 +2,17 @@ ...@@ -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){ (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 */ /* global droplab */
droplab.plugin(function init(DropLab) { droplab.plugin(function init(DropLab) {
var keydown = function keydown(e) { var keydown = function keydown(e) {
var list = e.detail.hook.list; var list = e.detail.hook.list;
var data = list.data; var data = list.data;
var value = e.detail.hook.trigger.value.toLowerCase(); var value = e.detail.hook.trigger.value.toLowerCase();
var config; var config = droplab.config[e.detail.hook.id];
var matches = []; var matches = [];
// will only work on dynamically set data // will only work on dynamically set data
if(!data){ // and if a config text property is set
if(!data || !config.hasOwnProperty('text')){
return; return;
} }
config = droplab.config[e.detail.hook.id];
matches = data.map(function(o){ matches = data.map(function(o){
// cheap string search // cheap string search
o.droplab_hidden = o[config.text].toLowerCase().indexOf(value) === -1; o.droplab_hidden = o[config.text].toLowerCase().indexOf(value) === -1;
...@@ -21,8 +20,7 @@ droplab.plugin(function init(DropLab) { ...@@ -21,8 +20,7 @@ droplab.plugin(function init(DropLab) {
}); });
list.render(matches); list.render(matches);
} }
window.addEventListener('keyup.dl', keydown); window.addEventListener('keyup.dl', keydown);
}); });
},{}]},{},[1])(1) },{}]},{},[1])(1)
}); });
\ No newline at end of file
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