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 |