Add droplab updates
This commit is contained in:
parent
3c0755809f
commit
a1ca5c76ab
|
@ -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 */
|
||||
|
|
|
@ -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(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));
|
||||
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);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -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){
|
||||
// will only work on dynamically set 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,8 +20,7 @@ droplab.plugin(function init(DropLab) {
|
|||
});
|
||||
list.render(matches);
|
||||
}
|
||||
|
||||
window.addEventListener('keyup.dl', keydown);
|
||||
});
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue