redesign search buttons

This commit is contained in:
azivner 2018-03-13 20:02:00 -04:00
parent db514e8f41
commit efcc804149
2 changed files with 30 additions and 13 deletions

View File

@ -3,7 +3,9 @@
const searchTree = (function() {
const $tree = $("#tree");
const $searchInput = $("input[name='search-text']");
const $resetSearchButton = $("button#reset-search-button");
const $resetSearchButton = $("#reset-search-button");
const $doSearchButton = $("#do-search-button");
const $saveSearchButton = $("#save-search-button");
const $searchBox = $("#search-box");
$resetSearchButton.click(resetSearch);
@ -30,7 +32,20 @@ const searchTree = (function() {
return $tree.fancytree('getTree');
}
$searchInput.keyup(async e => {
async function doSearch() {
const searchText = $searchInput.val();
const noteIds = await server.get('notes?search=' + encodeURIComponent(searchText));
for (const noteId of noteIds) {
await noteTree.expandToNote(noteId, {noAnimation: true, noEvents: true});
}
// Pass a string to perform case insensitive matching
getTree().filterBranches(node => noteIds.includes(node.data.noteId));
}
$searchInput.keyup(e => {
const searchText = $searchInput.val();
if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(searchText) === "") {
@ -39,17 +54,14 @@ const searchTree = (function() {
}
if (e && e.which === $.ui.keyCode.ENTER) {
const noteIds = await server.get('notes?search=' + encodeURIComponent(searchText));
for (const noteId of noteIds) {
await noteTree.expandToNote(noteId, {noAnimation: true, noEvents: true});
}
// Pass a string to perform case insensitive matching
getTree().filterBranches(node => noteIds.includes(node.data.noteId));
doSearch();
}
}).focus();
$doSearchButton.click(doSearch);
$saveSearchButton.click(() => alert("Save search"));
$(document).bind('keydown', 'ctrl+s', e => {
toggleSearch();

View File

@ -58,9 +58,14 @@
<div id="search-box" class="hide-toggle" style="grid-area: search; display: none; padding: 10px; margin-top: 10px;">
<div style="display: flex; align-items: center;">
<label>Search:</label>
<input name="search-text" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
<button id="reset-search-button" class="btn btn-sm" title="Reset search">&times;</button>
<input name="search-text" placeholder="Search text, attributes" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
<button id="do-search-button" class="btn btn-primary btn-sm" title="Search">Search</button>
</div>
<div style="display: flex; align-items: center; justify-content: space-evenly; margin-top: 10px;">
<button id="reset-search-button" class="btn btn-sm" title="Reset search">Reset search</button>
<button id="save-search-button" class="btn btn-sm" title="Save search">Save search</button>
</div>
</div>