Commit 769d6dbe authored by Ian Dennis Miller's avatar Ian Dennis Miller

non-functioning search interface

parent c919a0f0
......@@ -19,10 +19,8 @@
<div id="container">
<div id="ui">
<a href="#" id="ui-control" class="control expanded" onclick="toggle_ui(); return false;">&gt;</a>
<div id="search-ui">
<form name="search">
<input name="query" type="text"></input>
</form>
<div id="ui-search">
<input name="query" type="text"></input>
</div>
<div id="ui-content">
<ul id="article-list">
......@@ -33,19 +31,21 @@
<ul id="ui-config">
<li><a href="#" onclick="toggle_help(); return false;">[h]elp</a></li>
<li><a href="#" onclick="toggle_focus(); return false;">toggle [f]ocus</a></li>
<li><a href="#" onclick="toggle_appearances(); return false;">toggle [a]ppearances</a></li>
<li><a href="#" onclick="toggle_search(); return false;">[s]earch</a></li>
<li><a href="#" onclick="toggle_focus(); return false;">[z]oom</a></li>
<li><a href="#" onclick="toggle_appearances(); return false;">[a]ppearances</a></li>
<li><a href="#" onclick="toggle_dark_mode(); return false;">[d]ark mode</a></li>
</ul>
</div>
<div id="ui-help">
<ul>
<li><b>A</b>: toggle appearance (title)</li>
<li><b>F</b>: focus on card</li>
<li><b>left/right</b>: previous/next (in focus mode)</li>
<li><b>D</b>: toggle dark mode</li>
<li><b>ESC</b>: show/hide UI control</li>
<li><b>?</b>: show/hide help</li>
<li><b>ctrl-h</b>: show/hide help</li>
<li><b>ctrl-s</b>: search</li>
<li><b>ctrl-d</b>: toggle dark mode</li>
<li><b>ctrl-a</b>: toggle titles (appearance)</li>
<li><b>ctrl-z</b>: zoom cards</li>
<li><b>left/right</b>: previous/next (while zoomed)</li>
</ul>
</div>
</div>
......
......@@ -128,6 +128,8 @@ var toggle_article = function(id) {
}
}
/* Appearance */
var toggle_appearance = function(id) {
var container = document.getElementById(id);
var el = container.getElementsByClassName("appearance")[0];
......@@ -164,10 +166,36 @@ 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() {
var content = document.getElementById("ui-content");
var ui_control = document.getElementById("ui-control");
hide_search();
content.style.display = "none";
ui_control.classList.remove('expanded');
......@@ -219,14 +247,20 @@ var handler = function(e) {
if (e.ctrlKey && charCode == '65') {
// a: all
e.preventDefault();
e.stopPropagation();
toggle_appearances();
}
else if (e.ctrlKey && charCode == '70') {
else if (e.ctrlKey && charCode == '83') {
// s: search
hide_all();
}
else if (e.ctrlKey && charCode == '70') {
// f: focus
e.preventDefault();
e.stopPropagation();
toggle_search();
}
else if (e.ctrlKey && charCode == '90') {
// z: zoom
e.preventDefault();
e.stopPropagation();
toggle_focus();
}
else if (charCode == '37') {
......@@ -243,10 +277,14 @@ var handler = function(e) {
}
else if (e.ctrlKey && charCode == '68') {
// d: dark
e.preventDefault();
e.stopPropagation();
toggle_dark_mode();
}
else if (e.shiftKey && charCode == '191') {
// question
else if (e.ctrlKey && charCode == '72') {
// h: help
e.preventDefault();
e.stopPropagation();
toggle_help();
}
}
......
......@@ -144,7 +144,7 @@ body.dark a, body.dark a:visited {
color: #999;
}
#search-ui {
div#ui-search {
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