| <html> |
| <head> |
| <title>listing directory {directory}</title> |
| <style>{style}</style> |
| <script> |
| function $(id){ |
| var el = 'string' == typeof id |
| ? document.getElementById(id) |
| : id; |
| |
| el.on = function(event, fn){ |
| if ('content loaded' == event) event = 'DOMContentLoaded'; |
| el.addEventListener(event, fn, false); |
| }; |
| |
| el.all = function(selector){ |
| return $(el.querySelectorAll(selector)); |
| }; |
| |
| el.each = function(fn){ |
| for (var i = 0, len = el.length; i < len; ++i) { |
| fn($(el[i]), i); |
| } |
| }; |
| |
| el.getClasses = function(){ |
| return this.getAttribute('class').split(/\s+/); |
| }; |
| |
| el.addClass = function(name){ |
| var classes = this.getAttribute('class'); |
| el.setAttribute('class', classes |
| ? classes + ' ' + name |
| : name); |
| }; |
| |
| el.removeClass = function(name){ |
| var classes = this.getClasses().filter(function(curr){ |
| return curr != name; |
| }); |
| this.setAttribute('class', classes); |
| }; |
| |
| return el; |
| } |
| |
| function search() { |
| var str = $('search').value |
| , links = $('files').all('a'); |
| |
| links.each(function(link){ |
| var text = link.textContent; |
| |
| if ('..' == text) return; |
| if (str.length && ~text.indexOf(str)) { |
| link.addClass('highlight'); |
| } else { |
| link.removeClass('highlight'); |
| } |
| }); |
| } |
| |
| $(window).on('content loaded', function(){ |
| $('search').on('keyup', search); |
| }); |
| </script> |
| </head> |
| <body class="directory"> |
| <input id="search" type="text" placeholder="Search" autocomplete="off" /> |
| <div id="wrapper"> |
| <h1>{linked-path}</h1> |
| {files} |
| </div> |
| </body> |
| </html> |
