75 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			75 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <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> |