Commit 44740d4c authored by Ian Dennis Miller's avatar Ian Dennis Miller

search is partly working

parent 74323c51
<div class="card" id="{{ id }}" about="#{{ appearance_id }}">
<p class="appearance">{{ appearance }}</p>
<div class="quote">"{{ quote }}"</div>
<div class="quote">{{ quote }}</div>
<div class="search">
<ul>
{% for source in sources %}
......
......@@ -20,7 +20,7 @@
<div id="ui">
<a href="#" id="ui-control" class="control expanded" onclick="toggle_ui(); return false;">&gt;</a>
<div id="ui-search">
<input name="query" type="text"></input>
<input id="ui-query" name="query" type="text" onchange="new_search();"></input>
</div>
<div id="ui-content">
<ul id="article-list">
......@@ -56,6 +56,7 @@
<script>
{% include 'swiper.js' %}
{% include 'pager.js' %}
{% include 'search.js' %}
{% include 'keyboard.js' %}
{% include 'main.js' %}
</script>
......
......@@ -4,15 +4,22 @@ var filtered = false;
var focused = true;
var filter_id = "";
var appearances = "visible";
var swiper = new Swipe(document.getElementsByTagName('body')[0]);
function main() {
// display all cards
show_all();
// init keyboard
document.onkeydown = handler;
// init touch swiper
swiper.onLeft(show_next);
swiper.onRight(show_previous);
swiper.run();
// init search
init_search();
}
var swiper = new Swipe(document.getElementsByTagName('body')[0]);
document.onkeydown = handler;
main();
......@@ -9,10 +9,14 @@ var toggle_focus = function() {
}
}
var hide_all = function() {
var really_hide_all = function() {
for (var i = 0; i < divs.length; i++){
divs[i].style.display = "none";
}
}
var hide_all = function() {
really_hide_all();
focused = true;
close_ui();
......@@ -164,28 +168,6 @@ var toggle_appearances = function() {
}
}
/* search */
var hide_search = function() {
var els = document.querySelectorAll('#ui-search');
els[0].style.display = "none";
}
var show_search = function() {
var els = document.querySelectorAll('#ui-search');
els[0].style.display = "block";
}
var toggle_search = function() {
var els = document.querySelectorAll('#ui-search');
if (els[0].style.display == "block") {
hide_search();
}
else {
show_search();
}
}
/* UI */
var close_ui = function() {
......
/* search */
var cards_content = {};
var hide_search = function() {
var els = document.querySelectorAll('#ui-search');
els[0].style.display = "none";
}
var show_search = function() {
close_ui();
var els = document.querySelectorAll('#ui-search');
els[0].style.display = "block";
document.querySelector("#ui-query").focus();
}
var toggle_search = function() {
var els = document.querySelectorAll('#ui-search');
if (els[0].style.display == "block") {
hide_search();
}
else {
show_search();
}
}
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;
cards_content[key] = val;
}
}
var new_search = function() {
terms_raw = document.querySelector("#ui-query").value
if (terms_raw != "") {
var terms = terms_raw.split(" ");
var matches = do_search(terms);
show_results(terms, matches);
}
else {
show_all();
}
}
var do_search = function(terms) {
var matches = {};
// for now, this will do OR by default
// TODO: grab title and authors for search, too
if (terms.length > 0) {
for (var t_id in terms) {
var re = new RegExp(terms[t_id], 'i');
for (var id in cards_content) {
var content = cards_content[id];
if (content.match(re)) {
matches[id] = content;
}
}
}
}
return(matches);
}
var show_results = function(terms, matches) {
really_hide_all();
for (var id in matches) {
show_card(id);
for (t_id in terms) {
var term = terms[t_id];
console.log(term);
highlight_keyword(id, term);
}
}
}
var show_card = function(id) {
var el = document.querySelector('#' + id);
el.style.display = "block";
}
var highlight_keyword = function(id, keyword) {
var card = document.querySelector('#' + id);
var quote_el = card.querySelector(".quote");
var original_content = quote_el.textContent;
var search = quote_el.textContent;
var re = new RegExp(keyword, 'ig');
if (search.length > 0)
quote_el.innerHTML = original_content.replace(re, `<mark>$&</mark>`);
else quote_el.innerHTML = original_content;
}
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