jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor autocomplete and add a simple select one

Browse source
This commit is contained in:
Yohan Boniface 2014-06-19 00:11:12 +02:00
parent ae27d8d504
commit 9257264b8d
3 changed files with 361 additions and 321 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
umap/static/umap/js/autocomplete.js
View file

@ -1,10 +1,8 @@
L.S.AutoComplete = L.Class.extend({
L.S.autoComplete = function (el, options) {
var API = {
options: { options: {
placeholder: "Start typing...", placeholder: 'Start typing...',
emptyMessage: "No result", emptyMessage: 'No result',
allowFree: true, allowFree: true,
minChar: 2, minChar: 2,
maxResults: 5 maxResults: 5
@ -13,17 +11,17 @@ L.S.autoComplete = function (el, options) {
CACHE: '', CACHE: '',
RESULTS: [], RESULTS: [],
_init: function (el, options) { initialize: function (el, options) {
this.el = L.DomUtil.get(el); this.el = L.DomUtil.get(el);
this.options = L.Util.extend(this.options, options); L.setOptions(options);
var CURRENT = null; var CURRENT = null;
try { try {
Object.defineProperty(this, "CURRENT", { Object.defineProperty(this, 'CURRENT', {
get: function () { get: function () {
return CURRENT; return CURRENT;
}, },
set: function (index) { set: function (index) {
if (typeof index === "object") { if (typeof index === 'object') {
index = this.resultToIndex(index); index = this.resultToIndex(index);
} }
CURRENT = index; CURRENT = index;
@ -39,16 +37,16 @@ L.S.autoComplete = function (el, options) {
this.input = L.DomUtil.element('input', { this.input = L.DomUtil.element('input', {
type: 'text', type: 'text',
placeholder: this.options.placeholder, placeholder: this.options.placeholder,
autocomplete: "off" autocomplete: 'off'
}); });
L.DomUtil.before(this.el, this.input); L.DomUtil.before(this.el, this.input);
L.DomEvent.on(this.input, "keydown", this.onKeyDown, this); L.DomEvent.on(this.input, 'keydown', this.onKeyDown, this);
L.DomEvent.on(this.input, "keyup", this.onKeyUp, this); L.DomEvent.on(this.input, 'keyup', this.onKeyUp, this);
L.DomEvent.on(this.input, "blur", this.onBlur, this); L.DomEvent.on(this.input, 'blur', this.onBlur, this);
}, },
createContainer: function () { createContainer: function () {
this.container = L.DomUtil.element('ul', {className: 'umap-autocomplete'}, document.querySelector('body')); this.container = L.DomUtil.element('ul', {className: 'umap-autocomplete'}, document.body);
}, },
resizeContainer: function() resizeContainer: function()
@ -58,9 +56,10 @@ L.S.autoComplete = function (el, options) {
this.container.style.left = l + 'px'; this.container.style.left = l + 'px';
this.container.style.top = t + 'px'; this.container.style.top = t + 'px';
var width = this.options.width ? this.options.width : this.input.offsetWidth - 2; var width = this.options.width ? this.options.width : this.input.offsetWidth - 2;
this.container.style.width = width + "px"; this.container.style.width = width + 'px';
}, },
onKeyDown: function (e) { onKeyDown: function (e) {
switch (e.keyCode) { switch (e.keyCode) {
case L.S.Keys.TAB: case L.S.Keys.TAB:
@ -70,7 +69,7 @@ L.S.autoComplete = function (el, options) {
} }
L.DomEvent.stop(e); L.DomEvent.stop(e);
break; break;
case L.S.Keys.RETURN: case L.S.Keys.ENTER:
L.DomEvent.stop(e); L.DomEvent.stop(e);
this.setChoice(); this.setChoice();
break; break;
@ -111,7 +110,7 @@ L.S.autoComplete = function (el, options) {
onKeyUp: function (e) { onKeyUp: function (e) {
var special = [ var special = [
L.S.Keys.TAB, L.S.Keys.TAB,
L.S.Keys.RETURN, L.S.Keys.ENTER,
L.S.Keys.LEFT, L.S.Keys.LEFT,
L.S.Keys.RIGHT, L.S.Keys.RIGHT,
L.S.Keys.DOWN, L.S.Keys.DOWN,
@ -127,7 +126,7 @@ L.S.autoComplete = function (el, options) {
} }
}, },
onBlur: function (e) { onBlur: function () {
var self = this; var self = this;
setTimeout(function () { setTimeout(function () {
self.hide(); self.hide();
@ -144,7 +143,7 @@ L.S.autoComplete = function (el, options) {
hide: function() { hide: function() {
this.clear(); this.clear();
this.container.style.display = 'none'; this.container.style.display = 'none';
this.input.value = ""; this.input.value = '';
}, },
setChoice: function (choice) { setChoice: function (choice) {
@ -188,11 +187,11 @@ L.S.autoComplete = function (el, options) {
display: item.display, display: item.display,
el: el el: el
}; };
L.DomEvent.on(el, 'mouseover', function (e) { L.DomEvent.on(el, 'mouseover', function () {
this.CURRENT = result; this.CURRENT = result;
this.highlight(); this.highlight();
}, this); }, this);
L.DomEvent.on(el, 'mousedown', function (e) { L.DomEvent.on(el, 'mousedown', function () {
this.setChoice(); this.setChoice();
}, this); }, this);
return result; return result;
@ -212,9 +211,9 @@ L.S.autoComplete = function (el, options) {
handleResults: function(data) { handleResults: function(data) {
var self = this; var self = this;
this.clear(); this.clear();
this.container.style.display = "block"; this.container.style.display = 'block';
this.resizeContainer(); this.resizeContainer();
this.forEach(data, function (item, index) { this.forEach(data, function (item) {
self.RESULTS.push(self.createResult(item)); self.RESULTS.push(self.createResult(item));
}); });
this.CURRENT = 0; this.CURRENT = 0;
@ -258,29 +257,20 @@ L.S.autoComplete = function (el, options) {
Array.prototype.forEach.call(els, callback); Array.prototype.forEach.call(els, callback);
} }
}; });
var MULTISELECT = {
init: function (el, options) { L.S.AutoComplete.BaseSelect = L.S.AutoComplete.extend({
this._init(el, options);
initialize: function (el, options) {
L.S.AutoComplete.prototype.initialize.call(this, el, options);
if (!this.el) return this; if (!this.el) return this;
this.el.style.display = "none"; this.el.style.display = 'none';
this.createInput(); this.createInput();
this.createContainer(); this.createContainer();
this.initSelectedContainer(); this.initSelectedContainer();
}, },
initSelectedContainer: function (initial) {
this.selected_container = L.DomUtil.after(this.input, L.DomUtil.element('ul', {className: 'umap-multiresult'}));
var self = this;
this.forEach(this.el, function (option) {
if (option.selected) {
self.displaySelected(self.optionToResult(option));
}
});
},
optionToResult: function (option) { optionToResult: function (option) {
return { return {
value: option.value, value: option.value,
@ -288,23 +278,11 @@ L.S.autoComplete = function (el, options) {
}; };
}, },
displaySelected: function (result) {
var result_el = L.DomUtil.element('li', {}, this.selected_container);
result_el.innerHTML = result.display;
var close = L.DomUtil.element('span', {className: 'close'}, result_el);
close.innerHTML = "×";
L.DomEvent.on(close, 'click', function () {
this.selected_container.removeChild(result_el);
this.unselect(result);
}, this);
this.hide();
},
_do_search: function (val) { _do_search: function (val) {
var results = [], var results = [],
self = this, self = this,
count = 0; count = 0;
this.forEach(this.el, function (item, index) { this.forEach(this.el, function (item) {
if (item.innerHTML.toLowerCase().indexOf(val.toLowerCase()) !== -1 && !item.selected && count < self.options.maxResults) { if (item.innerHTML.toLowerCase().indexOf(val.toLowerCase()) !== -1 && !item.selected && count < self.options.maxResults) {
results.push(self.optionToResult(item)); results.push(self.optionToResult(item));
count++; count++;
@ -314,7 +292,7 @@ L.S.autoComplete = function (el, options) {
}, },
select: function (option) { select: function (option) {
this.forEach(this.el, function (item, index) { this.forEach(this.el, function (item) {
if (item.value == option.value) { if (item.value == option.value) {
item.selected = true; item.selected = true;
} }
@ -322,18 +300,72 @@ L.S.autoComplete = function (el, options) {
}, },
unselect: function (option) { unselect: function (option) {
this.forEach(this.el, function (item, index) { this.forEach(this.el, function (item) {
if (item.value == option.value) { if (item.value == option.value) {
item.selected = false; item.selected = false;
} }
}); });
} }
});
L.S.AutoComplete.MultiSelect = L.S.AutoComplete.BaseSelect.extend({
initSelectedContainer: function () {
this.selected_container = L.DomUtil.after(this.input, L.DomUtil.element('ul', {className: 'umap-multiresult'}));
var self = this;
this.forEach(this.el, function (option) {
if (option.selected) {
self.displaySelected(self.optionToResult(option));
}
});
},
displaySelected: function (result) {
var result_el = L.DomUtil.element('li', {}, this.selected_container);
result_el.innerHTML = result.display;
var close = L.DomUtil.element('span', {className: 'close'}, result_el);
close.innerHTML = '×';
L.DomEvent.on(close, 'click', function () {
this.selected_container.removeChild(result_el);
this.unselect(result);
}, this);
this.hide();
}
});
L.S.AutoComplete.multiSelect = function (el, options) {
return new L.S.AutoComplete.MultiSelect(el, options);
}; };
this.multiselect = function () {
return L.Util.extend(API, MULTISELECT).init(el, options);
};
return this;
L.S.AutoComplete.Select = L.S.AutoComplete.BaseSelect.extend({
initSelectedContainer: function () {
this.selected_container = L.DomUtil.after(this.input, L.DomUtil.element('div', {className: 'umap-singleresult'}));
var self = this;
if (this.el.selectedIndex !== -1) {
self.displaySelected(self.optionToResult(this.el[this.el.selectedIndex]));
}
},
displaySelected: function (result) {
var result_el = L.DomUtil.element('div', {}, this.selected_container);
result_el.innerHTML = result.display;
var close = L.DomUtil.element('span', {className: 'close'}, result_el);
close.innerHTML = '×';
this.input.style.display = 'none';
L.DomEvent.on(close, 'click', function () {
this.selected_container.innerHTML = '';
this.unselect(result);
this.input.style.display = 'block';
}, this);
this.hide();
}
});
L.S.AutoComplete.select = function (el, options) {
return new L.S.AutoComplete.Select(el, options);
}; };

5
umap/static/umap/umap.css
View file

@ -549,6 +549,10 @@ ul.umap-autocomplete {
background-color: SeaGreen; background-color: SeaGreen;
cursor: pointer; cursor: pointer;
} }
.umap-singleresult {
margin-bottom: 10px;
}
.umap-singleresult div,
.umap-multiresult li { .umap-multiresult li {
width: 100%; width: 100%;
background-color: #e5e5e5; background-color: #e5e5e5;
@ -559,6 +563,7 @@ ul.umap-autocomplete {
.umap-multiresult li + li { .umap-multiresult li + li {
margin-top: 7px; margin-top: 7px;
} }
.umap-singleresult div .close,
.umap-multiresult li .close { .umap-multiresult li .close {
float: right; float: right;
cursor: pointer; cursor: pointer;

7
umap/templates/base.html
View file

@ -35,9 +35,12 @@
{% block bottom_js %} {% block bottom_js %}
<script type="text/javascript"> <script type="text/javascript">
L.S.on('ui:ready', function () { L.S.on('ui:ready', function () {
L.S.autoComplete('id_editors', { L.S.AutoComplete.multiSelect('id_editors', {
placeholder: "{% trans 'Type editors nick to add…' %}" placeholder: "{% trans 'Type editors nick to add…' %}"
}).multiselect(); });
L.S.AutoComplete.select('id_owner', {
placeholder: "{% trans 'Type new owner nick…' %}"
});
}); });
</script> </script>
{% endblock %} {% endblock %}