| 1 | <html>
|
| 2 | <head>
|
| 3 | <title>listing directory {directory}</title>
|
| 4 | <style>{style}</style>
|
| 5 | <script>
|
| 6 | function $(id){
|
| 7 | var el = 'string' == typeof id
|
| 8 | ? document.getElementById(id)
|
| 9 | : id;
|
| 10 |
|
| 11 | el.on = function(event, fn){
|
| 12 | if ('content loaded' == event) event = 'DOMContentLoaded';
|
| 13 | el.addEventListener(event, fn, false);
|
| 14 | };
|
| 15 |
|
| 16 | el.all = function(selector){
|
| 17 | return $(el.querySelectorAll(selector));
|
| 18 | };
|
| 19 |
|
| 20 | el.each = function(fn){
|
| 21 | for (var i = 0, len = el.length; i < len; ++i) {
|
| 22 | fn($(el[i]), i);
|
| 23 | }
|
| 24 | };
|
| 25 |
|
| 26 | el.getClasses = function(){
|
| 27 | return this.getAttribute('class').split(/\s+/);
|
| 28 | };
|
| 29 |
|
| 30 | el.addClass = function(name){
|
| 31 | var classes = this.getAttribute('class');
|
| 32 | el.setAttribute('class', classes
|
| 33 | ? classes + ' ' + name
|
| 34 | : name);
|
| 35 | };
|
| 36 |
|
| 37 | el.removeClass = function(name){
|
| 38 | var classes = this.getClasses().filter(function(curr){
|
| 39 | return curr != name;
|
| 40 | });
|
| 41 | this.setAttribute('class', classes);
|
| 42 | };
|
| 43 |
|
| 44 | return el;
|
| 45 | }
|
| 46 |
|
| 47 | function search() {
|
| 48 | var str = $('search').value
|
| 49 | , links = $('files').all('a');
|
| 50 |
|
| 51 | links.each(function(link){
|
| 52 | var text = link.textContent;
|
| 53 |
|
| 54 | if ('..' == text) return;
|
| 55 | if (str.length && ~text.indexOf(str)) {
|
| 56 | link.addClass('highlight');
|
| 57 | } else {
|
| 58 | link.removeClass('highlight');
|
| 59 | }
|
| 60 | });
|
| 61 | }
|
| 62 |
|
| 63 | $(window).on('content loaded', function(){
|
| 64 | $('search').on('keyup', search);
|
| 65 | });
|
| 66 | </script>
|
| 67 | </head>
|
| 68 | <body class="directory">
|
| 69 | <input id="search" type="text" placeholder="Search" autocomplete="off" />
|
| 70 | <div id="wrapper">
|
| 71 | <h1>{linked-path}</h1>
|
| 72 | {files}
|
| 73 | </div>
|
| 74 | </body>
|
| 75 | </html> |
| \ | No newline at end of file |