From 5ecd3d385bcac88a7b23082e407870401bf86d33 Mon Sep 17 00:00:00 2001 From: Alexander Sulfrian Date: Wed, 22 May 2013 10:42:29 +0200 Subject: add list.js for interactive search --- templates/index.html | 36 +++++++++++++++++++++++++++--------- templates/layout.html | 1 + www/css/custom.css | 10 +++++++--- www/js/list.min.js | 1 + 4 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 www/js/list.min.js diff --git a/templates/index.html b/templates/index.html index 161bf01..ebc2408 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,13 +3,31 @@ {% block content %}

Hostinfo

- +
+
+ + + +
+ + +
+ + {% endblock %} diff --git a/templates/layout.html b/templates/layout.html index c90acb3..e7d9014 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -11,6 +11,7 @@ + diff --git a/www/css/custom.css b/www/css/custom.css index 0657847..0c0b6de 100644 --- a/www/css/custom.css +++ b/www/css/custom.css @@ -12,20 +12,20 @@ h1 { text-align: center; } -#hosts li { +#hostlist .list li { list-style-type: none; text-align: center; margin-top: 20px; display: table; } -#hosts li a { +#hostlist .list li a { height: 100px; display: table-cell; vertical-align: middle; } -#hosts li a:hover { +#hostlist .list li a:hover { background-color: #CCC; color: #000; text-decoration: none; @@ -34,3 +34,7 @@ h1 { td.centering, p.centering { text-align: center; } + +.searchbox { + margin-top: 2em; +} diff --git a/www/js/list.min.js b/www/js/list.min.js new file mode 100644 index 0000000..d9727da --- /dev/null +++ b/www/js/list.min.js @@ -0,0 +1 @@ +(function(a,b){"use strict";var c=a.document,d;var e=function(a,e,f){var g=this,i,j,k,l,m,n,o={updated:[]};this.listContainer=typeof a=="string"?c.getElementById(a):a;if(!this.listContainer)return;this.items=[];this.visibleItems=[];this.matchingItems=[];this.searched=false;this.filtered=false;this.list=null;this.templateEngines={};this.page=e.page||200;this.i=e.i||1;j={start:function(a,b){b.plugins=b.plugins||{};this.classes(b);i=new m(g,b);this.callbacks(b);this.items.start(a,b);g.update();this.plugins(b.plugins)},classes:function(a){a.listClass=a.listClass||"list";a.searchClass=a.searchClass||"search";a.sortClass=a.sortClass||"sort"},callbacks:function(a){g.list=d.getByClass(a.listClass,g.listContainer,true);d.addEvent(d.getByClass(a.searchClass,g.listContainer),"keyup",g.search);n=d.getByClass(a.sortClass,g.listContainer);d.addEvent(n,"click",g.sort)},items:{start:function(a,c){if(c.valueNames){var d=this.get(),e=c.valueNames;if(c.indexAsync){this.indexAsync(d,e)}else{this.index(d,e)}}if(a!==b){g.add(a)}},get:function(){var a=g.list.childNodes,c=[];for(var d=0,e=a.length;d0){setTimeout(function(){j.items.indexAsync(a,b)},10)}else{g.update()}}},plugins:function(a){var b={templater:i,init:j,initialItems:k,Item:l,Templater:m,sortButtons:n,events:o,reset:r};for(var c=0;cg.page?true:false;i=new l(a[f],b,e)}g.items.push(i);d.push(i)}g.update();return d};var p=function(a,b,c){var d=a.splice(0,100);c=c||[];c=c.concat(g.add(d));if(a.length>0){setTimeout(function(){p(a,b,c)},10)}else{g.update();b(c)}};this.show=function(a,b){this.i=a;this.page=b;g.update()};this.remove=function(a,b,c){var d=0;for(var e=0,f=g.items.length;e-1){e=true}}}if(e){f.found=true;d.push(f)}else{f.found=false}}g.update()}return g.visibleItems};this.filter=function(a){g.i=1;r.filter();if(a===b){g.filtered=false}else{g.filtered=true;var c=g.items;for(var d=0,e=c.length;d=g.i&&g.visibleItems.length=1){f.removeChild(f.firstChild)}}}};d={getByClass:function(){if(c.getElementsByClassName){return function(a,b,c){if(c){return b.getElementsByClassName(a)[0]}else{return b.getElementsByClassName(a)}}}else{return function(a,b,d){var e=[],f="*";if(b==null){b=c}var g=b.getElementsByTagName(f);var h=g.length;var i=new RegExp("(^|\\s)"+a+"(\\s|$)");for(var j=0,k=0;j0)){return true}return false},hasClass:function(a,b){var c=this.getAttribute(a,"class")||this.getAttribute(a,"className")||"";return c.search(b)>-1},addClass:function(a,b){if(!this.hasClass(a,b)){var c=this.getAttribute(a,"class")||this.getAttribute(a,"className")||"";c=c+" "+b+" ";c=c.replace(/\s{2,}/g," ");a.setAttribute("class",c)}},removeClass:function(a,b){if(this.hasClass(a,b)){var c=this.getAttribute(a,"class")||this.getAttribute(a,"className")||"";c=c.replace(b,"");a.setAttribute("class",c)}},sorter:{alphanum:function(a,c,d){if(a===b||a===null){a=""}if(c===b||c===null){c=""}a=a.toString().replace(/&(lt|gt);/g,function(a,b){return b=="lt"?"<":">"});a=a.replace(/<\/?[^>]+(>|$)/g,"");c=c.toString().replace(/&(lt|gt);/g,function(a,b){return b=="lt"?"<":">"});c=c.replace(/<\/?[^>]+(>|$)/g,"");var e=this.chunkify(a);var f=this.chunkify(c);for(var g=0;e[g]&&f[g];g++){if(e[g]!==f[g]){var h=Number(e[g]),i=Number(f[g]);if(d){if(h==e[g]&&i==f[g]){return h-i}else{return e[g]>f[g]?1:-1}}else{if(h==e[g]&&i==f[g]){return i-h}else{return e[g]>f[g]?-1:1}}}}return e.length-f.length},chunkify:function(a){var b=[],c=0,d=-1,e=0,f,g;while(f=(g=a.charAt(c++)).charCodeAt(0)){var h=f==45||f==46||f>=48&&f<=57;if(h!==e){b[++d]="";e=h}b[d]+=g}return b}}};a.List=e;a.ListJsHelpers=d})(window) \ No newline at end of file -- cgit v1.2.3-1-g7c22