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

Remove darline dependency

Browse source
This commit is contained in:
Yohan Boniface 2014-02-10 00:48:20 +01:00
parent e4706c4495
commit cf2f5a4838
6 changed files with 379 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
fabfile.py vendored
View file

@ -244,7 +244,6 @@ def collect_remote_statics():
'storage': 'git://github.com/yohanboniface/Leaflet.Storage.git@master',
'edit_in_osm': 'git://github.com/yohanboniface/Leaflet.EditInOSM.git@master',
'minimap': 'git://github.com/Norkart/Leaflet-MiniMap.git@master',
'darline': 'git://github.com/yohanboniface/Darline.git@master',
'i18n': 'git://github.com/yohanboniface/Leaflet.i18n.git@master',
'csv2geojson': 'git://github.com/mapbox/csv2geojson.git@gh-pages',
'togeojson': 'git://github.com/mapbox/togeojson.git@gh-pages',

1
umap/static/darline

@ -1 +0,0 @@
Subproject commit 987916f72bf3601e4c70402a4434d53b951284ac

BIN
umap/static/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 638 B

339
umap/static/umap/js/autocomplete.js Normal file
View file

@ -0,0 +1,339 @@
L.S.autoComplete = function (el, options) {
var API = {
options: {
placeholder: "Start typing...",
emptyMessage: "No result",
allowFree: true,
minChar: 2,
maxResults: 5
},
CACHE: '',
RESULTS: [],
_init: function (el, options) {
this.el = L.DomUtil.get(el);
this.options = L.Util.extend(this.options, options);
var CURRENT = null;
try {
Object.defineProperty(this, "CURRENT", {
get: function () {
return CURRENT;
},
set: function (index) {
if (typeof index === "object") {
index = this.resultToIndex(index);
}
CURRENT = index;
}
});
} catch (e) {
// Hello IE8
}
return this;
},
createInput: function () {
this.input = L.DomUtil.element('input', {
type: 'text',
placeholder: this.options.placeholder,
autocomplete: "off"
});
L.DomUtil.before(this.el, this.input);
L.DomEvent.on(this.input, "keydown", this.onKeyDown, this);
L.DomEvent.on(this.input, "keyup", this.onKeyUp, this);
L.DomEvent.on(this.input, "blur", this.onBlur, this);
},
createContainer: function () {
this.container = L.DomUtil.element('ul', {className: 'umap-autocomplete'}, document.querySelector('body'));
},
resizeContainer: function()
{
var l = this.getLeft(this.input);
var t = this.getTop(this.input) + this.input.offsetHeight;
this.container.style.left = l + 'px';
this.container.style.top = t + 'px';
var width = this.options.width ? this.options.width : this.input.offsetWidth - 2;
this.container.style.width = width + "px";
},
onKeyDown: function (e) {
switch (e.keyCode) {
case L.S.Keys.TAB:
if(this.CURRENT !== null)
{
this.setChoice();
}
L.DomEvent.stop(e);
break;
case L.S.Keys.RETURN:
L.DomEvent.stop(e);
this.setChoice();
break;
case L.S.Keys.ESC:
L.DomEvent.stop(e);
this.hide();
break;
case L.S.Keys.DOWN:
if(this.RESULTS.length > 0) {
if(this.CURRENT !== null && this.CURRENT < this.RESULTS.length - 1) { // what if one resutl?
this.CURRENT++;
this.highlight();
}
else if(this.CURRENT === null) {
this.CURRENT = 0;
this.highlight();
}
}
break;
case L.S.Keys.UP:
if(this.CURRENT !== null) {
L.DomEvent.stop(e);
}
if(this.RESULTS.length > 0) {
if(this.CURRENT > 0) {
this.CURRENT--;
this.highlight();
}
else if(this.CURRENT === 0) {
this.CURRENT = null;
this.highlight();
}
}
break;
}
},
onKeyUp: function (e) {
var special = [
L.S.Keys.TAB,
L.S.Keys.RETURN,
L.S.Keys.LEFT,
L.S.Keys.RIGHT,
L.S.Keys.DOWN,
L.S.Keys.UP,
L.S.Keys.APPLE,
L.S.Keys.SHIFT,
L.S.Keys.ALT,
L.S.Keys.CTRL
];
if (special.indexOf(e.keyCode) === -1)
{
this.search();
}
},
onBlur: function (e) {
var self = this;
setTimeout(function () {
self.hide();
}, 100);
},
clear: function () {
this.RESULTS = [];
this.CURRENT = null;
this.CACHE = '';
this.container.innerHTML = '';
},
hide: function() {
this.clear();
this.container.style.display = 'none';
this.input.value = "";
},
setChoice: function (choice) {
choice = choice || this.RESULTS[this.CURRENT];
if (choice) {
this.input.value = choice.display;
this.select(choice);
this.displaySelected(choice);
this.hide();
if (this.options.callback) {
L.Util.bind(this.options.callback, this)(choice);
}
}
},
search: function() {
var val = this.input.value;
if (val.length < this.options.minChar) {
this.clear();
return;
}
if(!val) {
this.clear();
return;
}
if( val + '' === this.CACHE + '') {
return;
}
else {
this.CACHE = val;
}
var results = this._do_search(val);
return this.handleResults(results);
},
createResult: function (item) {
var el = L.DomUtil.element('li', {}, this.container);
el.innerHTML = item.display;
var result = {
value: item.value,
display: item.display,
el: el
};
L.DomEvent.on(el, 'mouseover', function (e) {
this.CURRENT = result;
this.highlight();
}, this);
L.DomEvent.on(el, 'mousedown', function (e) {
this.setChoice();
}, this);
return result;
},
resultToIndex: function (result) {
var out = null;
this.forEach(this.RESULTS, function (item, index) {
if (item.value == result.value) {
out = index;
return;
}
});
return out;
},
handleResults: function(data) {
var self = this;
this.clear();
this.container.style.display = "block";
this.resizeContainer();
this.forEach(data, function (item, index) {
self.RESULTS.push(self.createResult(item));
});
this.CURRENT = 0;
this.highlight();
//TODO manage no results
},
highlight: function () {
var self = this;
this.forEach(this.RESULTS, function (item, index) {
if (index === self.CURRENT) {
L.DomUtil.addClass(item.el, 'on');
}
else {
L.DomUtil.removeClass(item.el, 'on');
}
});
},
getLeft: function (el) {
var tmp = el.offsetLeft;
el = el.offsetParent;
while(el) {
tmp += el.offsetLeft;
el = el.offsetParent;
}
return tmp;
},
getTop: function (el) {
var tmp = el.offsetTop;
el = el.offsetParent;
while(el) {
tmp += el.offsetTop;
el = el.offsetParent;
}
return tmp;
},
forEach: function (els, callback) {
Array.prototype.forEach.call(els, callback);
}
};
var MULTISELECT = {
init: function (el, options) {
this._init(el, options);
if (!this.el) return this;
this.el.style.display = "none";
this.createInput();
this.createContainer();
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) {
return {
value: option.value,
display: option.innerHTML
};
},
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) {
var results = [],
self = this,
count = 0;
this.forEach(this.el, function (item, index) {
if (item.innerHTML.toLowerCase().indexOf(val.toLowerCase()) !== -1 && !item.selected && count < self.options.maxResults) {
results.push(self.optionToResult(item));
count++;
}
});
return results;
},
select: function (option) {
this.forEach(this.el, function (item, index) {
if (item.value == option.value) {
item.selected = true;
}
});
},
unselect: function (option) {
this.forEach(this.el, function (item, index) {
if (item.value == option.value) {
item.selected = false;
}
});
}
};
this.multiselect = function () {
return L.Util.extend(API, MULTISELECT).init(el, options);
};
return this;
};

35
umap/static/umap/umap.css
View file

@ -552,6 +552,41 @@ a {
}
/* **************************** */
/* Autocomplete */
/* **************************** */
ul.umap-autocomplete {
position: absolute;
background-color: white;
z-index: 1000;
box-shadow: 0 4px 9px #999999;
}
.umap-autocomplete li {
height: 56px;
line-height: 28px;
padding: 14px;
}
.umap-autocomplete li.on {
background-color: SeaGreen;
cursor: pointer;
}
.umap-multiresult li {
width: 100%;
background-color: #e5e5e5;
border-radius: 2px;
padding: 7px;
color: #464646;
}
.umap-multiresult li + li {
margin-top: 7px;
}
.umap-multiresult li .close {
float: right;
cursor: pointer;
}
/* **************************** */
/* Override Leaflet.Storage */
/* **************************** */

13
umap/templates/base.html
View file

@ -6,21 +6,18 @@
<meta charset="utf-8">
{% compress css %}
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}darline/src/css/autocomplete.css">
<link rel="stylesheet" href="{{ STATIC_URL }}storage/contrib/css/storage.ui.default.css">
<link rel="stylesheet" href="{{ STATIC_URL }}umap/umap.css">
{% endcompress css %}
{% compress js %}
<script src="{{ STATIC_URL }}darline/src/js/core.js"></script>
<script src="{{ STATIC_URL }}darline/src/js/debug.js"></script>
<script src="{{ STATIC_URL }}darline/src/js/autocomplete.js"></script>
{% endcompress js %}
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{% block extra_head %}
{% endblock extra_head %}
{% compress js %}
<script src="{{ STATIC_URL }}umap/js/autocomplete.js"></script>
{% endcompress js %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
@ -37,8 +34,8 @@
{% block bottom_js %}
<script type="text/javascript">
L.Storage.on('ui:ready', function () {
D.autoComplete('#id_editors', {
L.S.on('ui:ready', function () {
L.S.autoComplete('id_editors', {
placeholder: "Type editors nick to add..."
}).multiselect();
});