Commit 1c4443e0 authored by Remi Rampin's avatar Remi Rampin

WIP search box

parent af98fe9f
Pipeline #71161060 passed with stage
in 1 minute and 55 seconds
......@@ -27,6 +27,10 @@
text-decoration: underline;
}
#highlight-add-tags li.active {
background-color: #e7f2ff;
}
/* Change body font */
body {
font-family: Montserrat !important;
......
......@@ -1061,12 +1061,15 @@ function selectionChanged() {
}
document.addEventListener('selectionchange', selectionChanged);
var highlight_modal_search = document.getElementById('highlight-add-search');
function createHighlight(selection) {
document.getElementById('highlight-add-id').value = '';
document.getElementById('highlight-add-start').value = selection[0];
document.getElementById('highlight-add-end').value = selection[1];
document.getElementById('highlight-add-form').reset();
$(highlight_add_modal).modal();
highlight_modal_search.focus();
}
// TRANSLATORS: Key used to create a new highlight
......@@ -1078,6 +1081,44 @@ document.addEventListener('keyup', function(e) {
}
});
// Search bar keyboard shortcuts
var search_selected_index = -1;
highlight_modal_search.addEventListener('keydown', function(e) {
if(e.key == 'ArrowUp' || e.key == 'ArrowDown') {
var max = tags_modal_list.children.length - 1;
if(search_selected_index < 0 || search_selected_index > max) {
search_selected_index = -1;
}
[].forEach.call(tags_modal_list.querySelectorAll('li.active'), function(e) {
e.classList.remove('active');
});
search_selected_index += e.key == 'ArrowUp'?-1:1;
search_selected_index = Math.max(0, Math.min(max, search_selected_index));
tags_modal_list.children[search_selected_index].classList.add('active');
} else if(e.key == 'Enter') {
// Toggle the currently selected tag if any
var checkbox = tags_modal_list.querySelector('li.active input[type=checkbox]');
if(checkbox) {
checkbox.checked = !checkbox.checked;
} else {
// Otherwise, submit the form
return;
}
// Reset the form
highlight_modal_search.value = '';
search_selected_index = -1;
[].forEach.call(tags_modal_list.querySelectorAll('li.active'), function(e) {
e.classList.remove('active');
});
} else {
return; // Don't preventDefault
}
e.preventDefault();
});
highlight_modal_search.addEventListener('change', function() {
// TODO: filter the list
});
function editHighlight(e) {
document.getElementById('highlight-add-form').reset();
var id = this.getAttribute('data-highlight-id');
......@@ -1089,6 +1130,7 @@ function editHighlight(e) {
document.getElementById('highlight-add-tags-' + hl_tags[i]).checked = true;
}
$(highlight_add_modal).modal();
highlight_modal_search.focus();
}
// Save highlight button
......
......@@ -224,6 +224,7 @@
<input type="hidden" id="highlight-add-start" />
<input type="hidden" id="highlight-add-end" />
<div class="container">
<input type="text" placeholder="{% trans %}Search tags{% endtrans %}" id="highlight-add-search" autocomplete="off" />
<ul class="list-unstyled" id="highlight-add-tags">
<li>{% trans %}Loading...{% endtrans %}</li>
<li class="special-item-button"><a href="javascript:createTag()">{% trans %}Create a tag{% endtrans %}</a></li>
......
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