2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

locationinput: blur, escape and clear button

Browse source
This commit is contained in:
Laura Klünder 2017-10-28 16:57:13 +02:00
parent 49cff1cfb8
commit 96592b9355
3 changed files with 38 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/c3nav/site/static/site/css/c3nav.css
View file

@ -157,10 +157,10 @@ main.map {
background-image: url('../img/icons/locate.svg');
background-size: 36px 36px;
}
.locationinput button.reset {
.locationinput button.clear {
background-image: url('../img/icons/cross.svg');
}
.locationinput:not(.empty) button.locate, .locationinput.empty button.reset {
.locationinput:not(.empty) button.locate, .locationinput.empty button.clear {
transform: scale(0.7);
opacity: 0;
pointer-events:none;

36
src/c3nav/site/static/site/js/c3nav.js
View file

@ -25,7 +25,25 @@ c3nav = {
}
});
$('.locationinput input').on('input', c3nav._locationinput_input);
$('.locationinput input').on('input', c3nav._locationinput_input)
.on('blur', c3nav._locationinput_blur)
.on('keydown', c3nav._locationinput_keydown);
$('.locationinput .clear').on('click', c3nav._locationinput_clear);
},
_locationinput_set: function (elem, location) {
if (location === null || location === undefined) {
elem.removeClass('selected').addClass('empty');
elem.find('input').val('');
elem.find('small').val('');
return;
}
elem.addClass('selected').removeClass('empty').data('location', location);
elem.find('input').val(location.title);
elem.find('small').val(location.subtitle);
},
_locationinput_clear: function (e) {
c3nav._locationinput_set($(this).parent(), null);
$(this).parent().find('input').focus()
},
_locationinput_matches_compare: function (a, b) {
if (a[1] !== b[1]) return b[1] - a[1];
@ -33,6 +51,17 @@ c3nav = {
if (a[3] !== b[3]) return b[3] - a[3];
return a[4] - b[4];
},
_locationinput_blur: function (e) {
$('#autocomplete').html('');
c3nav._last_locationinput_words_key = null;
c3nav._locationinput_set($(this).parent(), $(this).parent().data('location'));
},
_locationinput_keydown: function (e) {
if (e.which === 27) {
// escape
$(this).blur().focus();
}
},
_locationinput_input: function (e) {
var matches = [],
val = $(this).val(),
@ -40,7 +69,10 @@ c3nav = {
val_words = val_trimmed.toLowerCase().split(/\s+/),
val_words_key = val_words.join(' '),
$autocomplete = $('#autocomplete');
$(this).parent().removeClass('selected').toggleClass('empty', (val === ''));
$(this).parent().removeClass('selected');
if (val === '') {
c3nav._locationinput_set($(this).parent(), null);
}
if (val_trimmed === '') {
$autocomplete.html('');

4
src/c3nav/site/templates/site/map.html
View file

@ -29,13 +29,13 @@
<input type="text" placeholder="{% trans 'Search any location…' %}">
<small></small>
<button class="button-clear locate"></button>
<button class="button-clear reset"></button>
<button class="button-clear clear"></button>
</div>
<div class="location locationinput empty" id="destination-input">
<input type="text" placeholder="{% trans 'Search any location…' %}">
<small></small>
<button class="button-clear locate"></button>
<button class="button-clear reset"></button>
<button class="button-clear clear"></button>
</div>
<!--<div class="buttons" id="search-buttons">
<button class="button-clear">Scan QR Code</button>