index: list is now navigatable with cursor up and down

5 files changed, 67 insertions, 1 deletions

diff --git a/htdocs/static/css/custom.css b/htdocs/static/css/custom.css
index 1d990d7..afb8e31 100644
--- a/htdocs/static/css/custom.css
+++ b/htdocs/static/css/custom.css
@@ -40,6 +40,15 @@ h1 {
     text-decoration: none;
 }
 
+#hostlist .list .selected {
+    border-color: rgba(82,168,236,0.8);
+    outline: 0;
+    outline: thin dotted 9;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
+    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
+}
+
 #hostlist .ips {
   margin: 0px;
 }
diff --git a/htdocs/static/js/jquery.scrollTo-1.4.3.1-min.js b/htdocs/static/js/jquery.scrollTo-1.4.3.1-min.js
new file mode 100644
index 0000000..8b5f447
--- /dev/null
+++ b/htdocs/static/js/jquery.scrollTo-1.4.3.1-min.js
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2007-2012 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+ * Dual licensed under MIT and GPL.
+ * @author Ariel Flesler
+ * @version 1.4.3.1
+ */
+;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
\ No newline at end of file
diff --git a/htdocs/static/js/navigation.js b/htdocs/static/js/navigation.js
new file mode 100644
index 0000000..cb56db5
--- /dev/null
+++ b/htdocs/static/js/navigation.js
@@ -0,0 +1,44 @@
+var liSelected;
+$(window).keydown(function(e) {
+    var li = $('#hostlist .list .thumbnail');
+    if (e.which === 40) {
+        if (liSelected) {
+            liSelected.removeClass('selected');
+            next = liSelected.next();
+            if (next.length > 0) {
+                liSelected = next.addClass('selected');
+            } else {
+                liSelected = li.eq(0).addClass('selected');
+            }
+        } else {
+            liSelected = li.eq(0).addClass('selected');
+        }
+
+	$('body').scrollTo(liSelected, {offset: -20});
+	return false;
+    }
+
+    if (e.which === 38) {
+        if (liSelected) {
+            liSelected.removeClass('selected');
+            next = liSelected.prev();
+            if (next.length > 0) {
+                liSelected = next.addClass('selected');
+            } else {
+                liSelected = li.last().addClass('selected');
+            }
+        } else {
+            liSelected = li.last().addClass('selected');
+        }
+
+	$('body').scrollTo(liSelected, {offset: -20});
+	return false;
+    }
+
+    if (e.which === 13) {
+        if (liSelected) {
+            window.location = liSelected.find('a').attr('href');
+            return false;
+        }
+    }
+});
diff --git a/templates/index.html b/templates/index.html
index b0a5e98..574f8e0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,11 @@
 {% extends 'layout.html' %}
 
+{% block head %}
+    <script src="static/js/list.min.js"></script>
+    <script src="static/js/jquery.scrollTo-1.4.3.1-min.js"></script>
+    <script src="static/js/navigation.js"></script>
+{% endblock %}
+
 {% block content %}
 <h1>Hostinfo</h1>
 
diff --git a/templates/layout.html b/templates/layout.html
index d5739cb..f0d12ea 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -12,7 +12,7 @@
     <script src="static/js/jquery-2.0.0.min.js"></script>
     <script src="static/js/jquery.tablesorter.min.js"></script>
     <script src="static/js/bootstrap.min.js"></script>
-    <script src="static/js/list.min.js"></script>
+    {% block head %}{% endblock %}
   </head>
 
   <body>