Commit de34f4c6 authored by Ian Dennis Miller's avatar Ian Dennis Miller

article picker toggle

parent b3de8cde
......@@ -14,6 +14,12 @@ var handler = function(e) {
e.stopPropagation();
toggle_search();
}
else if (e.ctrlKey && charCode == '80') {
// p: pick article
e.preventDefault();
e.stopPropagation();
toggle_picker();
}
else if (e.ctrlKey && charCode == '90') {
// z: zoom
e.preventDefault();
......
......@@ -9,6 +9,7 @@ var swiper = new Swipe(document.getElementsByTagName('body')[0]);
function main() {
// display all cards
show_all();
close_ui();
// init keyboard
document.onkeydown = handler;
......
......@@ -186,18 +186,45 @@ var close_ui = function() {
}
}
var toggle_ui = function() {
var open_ui = function() {
var content = document.getElementById("ui-content");
var ui_control = document.getElementById("ui-control");
content.style.display = "inline";
ui_control.classList.add('expanded');
}
var toggle_ui = function() {
var content = document.getElementById("ui-content");
// close the window
if (content.style.display != "none") {
close_ui();
}
// open up the window
else {
content.style.display = "inline";
ui_control.classList.add('expanded');
open_ui();
}
}
/* picker */
var hide_picker = function() {
var els = document.querySelectorAll('#article-list');
els[0].style.display = "none";
close_ui();
}
var show_picker = function() {
var els = document.querySelectorAll('#article-list');
els[0].style.display = "block";
open_ui();
}
var toggle_picker = function() {
var els = document.querySelectorAll('#article-list');
if (els[0].style.display == "block") {
hide_picker();
}
else {
show_picker();
}
}
......
......@@ -30,23 +30,26 @@
</ul>
<ul id="ui-config">
<li><a href="#" onclick="toggle_help(); return false;">[h]elp</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>
<li><a href="#" onclick="toggle_picker(); return false;">[ctrl-p] pick article</a></li>
<li><a href="#" onclick="toggle_search(); return false;">[ctrl-s] search</a></li>
<li><a href="#" onclick="toggle_focus(); return false;">[ctrl-z] zoom</a></li>
<li><a href="#" onclick="toggle_appearances(); return false;">[ctrl-a] appearances</a></li>
<li><a href="#" onclick="toggle_dark_mode(); return false;">[ctrl-d] dark mode</a></li>
<li><a href="#" onclick="toggle_help(); return false;">[ctrl-h] help</a></li>
</ul>
</div>
<div id="ui-help">
<ul>
<li><b>ESC</b>: show/hide UI control</li>
<li><b>ctrl-h</b>: show/hide help</li>
<li><b>ctrl-p</b>: pick article</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>
<li><b>ctrl-h</b>: show/hide help</li>
</ul>
<div id="info"><a href="http://projects.sisrlab.com/idm/visfact">visfact</a></div>
</div>
</div>
......@@ -54,11 +57,11 @@
</div>
<script>
{% include 'swiper.js' %}
{% include 'pager.js' %}
{% include 'search.js' %}
{% include 'keyboard.js' %}
{% include 'main.js' %}
{% include 'js/swiper.js' %}
{% include 'js/pager.js' %}
{% include 'js/search.js' %}
{% include 'js/keyboard.js' %}
{% include 'js/main.js' %}
</script>
</body>
</html>
......@@ -17,6 +17,15 @@ body.focused {
column-count: 4;
}
#info {
text-align: center;
}
#info a {
color: #fff !important;
font-weight: bold;
}
.card {
border: 1px solid;
margin: 0em auto 1em auto;
......@@ -106,6 +115,10 @@ a#ui-control {
transform: rotate(90deg);
}
#article-list {
display: none;
}
#ui ul#article-list li {
border: 1px solid #999;
padding: 0.3em;
......
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