Commit 5f652cab authored by Ian Dennis Miller's avatar Ian Dennis Miller

clear search, show all cards in search, small fixes to ui navigation

parent aa3a2c4d
......@@ -5,12 +5,14 @@
</div>
{{ appearance_authors }}. ({{ appearance_year }}). {{ appearance_title }}
</div>
<div class="quote">
<div class="quote_container">
<div class="identicon">
<img src="data:image/png;base64,{{ quote_identicon }}">
</div>
{{ quote }}
<div class="quote">
{{ quote }}
</div>
</div>
<div class="search">
<ul>
......
......@@ -195,9 +195,11 @@ var open_ui = function() {
var toggle_ui = function() {
var content = document.getElementById("ui-content");
var search = document.getElementById("ui-search");
if (content.style.display != "none") {
if (content.style.display != "none" || search.style.display != "none") {
close_ui();
hide_picker();
}
else {
open_ui();
......
......@@ -9,6 +9,7 @@ var hide_search = function() {
var show_search = function() {
close_ui();
document.querySelector("#ui-query").value = "";
var els = document.querySelectorAll('#ui-search');
els[0].style.display = "block";
document.querySelector("#ui-query").focus();
......@@ -27,18 +28,23 @@ var toggle_search = function() {
var init_search = function() {
var els = document.querySelectorAll('.card');
for (var i = 0; i < els.length; i++) {
key = els[i].getAttribute("id");
val = els[i].querySelector(".quote").textContent;
var key = els[i].getAttribute("id");
var val = els[i].querySelector(".quote").textContent;
var cite_els = els[i].querySelectorAll(".search a");
for (var j = 0; j < cite_els.length; j++) {
val += cite_els[j].textContent;
}
cards_content[key] = val;
}
}
var new_search = function() {
terms_raw = document.querySelector("#ui-query").value
terms_raw = document.querySelector("#ui-query").value;
if (terms_raw != "") {
var terms = terms_raw.split(" ");
var matches = do_search(terms);
show_results(terms, matches);
hide_search();
}
else {
show_all();
......@@ -88,12 +94,49 @@ var show_card = function(id) {
var highlight_keyword = function(id, keyword) {
var card = document.querySelector('#' + id);
var quote_el = card.querySelector(".quote");
var re = new RegExp(keyword, 'ig');
// process quotes
var original_content = quote_el.innerHTML;
var search = quote_el.innerHTML;
var re = new RegExp(keyword, 'ig');
if (search.length > 0)
if (search.length > 0) {
quote_el.innerHTML = original_content.replace(re, `<mark>$&</mark>`);
else quote_el.innerHTML = original_content;
}
else {
quote_el.innerHTML = original_content;
}
// process citations
var cite_els = card.querySelectorAll(".search a");
for (var j = 0; j < cite_els.length; j++) {
original_content = cite_els[j].innerHTML;
search = cite_els[j].innerHTML;
if (search.length > 0) {
cite_els[j].innerHTML = original_content.replace(re, `<mark>$&</mark>`);
}
else {
cite_els[j].innerHTML = original_content;
}
}
}
var search_clear_marks = function() {
hide_search();
new_search();
var els = document.querySelectorAll('.card');
for (var i = 0; i < els.length; i++) {
var quote_el = els[i].querySelector(".quote")
quote_el.innerHTML = quote_el.textContent;
var cite_els = els[i].querySelectorAll(".search a");
for (var j = 0; j < cite_els.length; j++) {
cite_els[j].innerHTML = cite_els[j].textContent;
}
}
}
var search_show_all = function() {
document.querySelector("#ui-query").value = "";
hide_search();
new_search();
}
......@@ -21,6 +21,8 @@
<a href="#" id="ui-control" class="control expanded" onclick="toggle_ui(); return false;">&gt;</a>
<div id="ui-search">
<input id="ui-query" name="query" type="text" onchange="new_search();"></input>
<a href="#" id="ui-search-show-all" onclick="search_show_all(); return false;">[show all]</a>
<a href="#" id="ui-search-clear" onclick="search_clear_marks(); return false;">[clear]</a>
</div>
<div id="ui-content">
<ul id="article-list">
......
......@@ -46,6 +46,16 @@ ul {
list-style-type: none;
}
#ui-search {
margin: 0.5em;
}
#ui-search a {
display: inline !important;
color: #fff;
font-size: 9pt;
}
.appearance {
font-style: italic;
display: none;
......
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