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>
|