Finally decided to release v0.9. Totally flushed by the feedback of the last 2 days. Thanks. See README.md for changes.
This commit is contained in:
Lars Jung
parent
0d4edcb047
commit
0293d54789
23 changed files with 2265 additions and 243 deletions
14
README.md
14
README.md
|
|
@ -1,4 +1,4 @@
|
|||
# h5ai v0.8   ·   a beautified Apache index
|
||||
# h5ai v0.9   ·   a beautified Apache index
|
||||
|
||||
|
||||
## Screenshots
|
||||
|
|
@ -47,6 +47,18 @@ please respect their rights.
|
|||
|
||||
## Changelog
|
||||
|
||||
### v0.9
|
||||
*2011-07-18*
|
||||
|
||||
* linked hover states between crumb, extended view and tree
|
||||
* fixed size of tree view (now there's a ugly scrollbar, hopefully will be fixed)
|
||||
* refactored js to improve performance and cleaned code
|
||||
* added caching for folder status codes and content
|
||||
* added fr translation by [Nicolas](http://github.com/Nicosmos)
|
||||
* added nl translation by [Stefan de Konink](http://github.com/skinkie)
|
||||
* added sv translation by Oscar Carlsson
|
||||
|
||||
|
||||
### v0.8
|
||||
*2011-07-08*
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ custom = true
|
|||
|
||||
# project
|
||||
project.name = h5ai
|
||||
project.version = 0.8
|
||||
project.version = 0.9
|
||||
|
||||
|
||||
# src
|
||||
|
|
|
|||
|
|
@ -12,51 +12,56 @@
|
|||
white-space: nowrap;
|
||||
clear: both;
|
||||
|
||||
&.header a {
|
||||
padding-bottom: 18px;
|
||||
color: #555;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
.transition( all 0.2s ease-in-out );
|
||||
|
||||
&:visited {
|
||||
&.header {
|
||||
a, a:active, a:visited {
|
||||
padding-bottom: 18px;
|
||||
color: #555;
|
||||
}
|
||||
&:hover {
|
||||
color: #555;
|
||||
opacity: 0.9;
|
||||
}
|
||||
img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 0 8px;
|
||||
text-decoration: none;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
.transition( all 0.2s ease-in-out );
|
||||
|
||||
&:hover {
|
||||
color: #555;
|
||||
opacity: 0.9;
|
||||
}
|
||||
img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.entry {
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
a {
|
||||
a, a:active, a:visited {
|
||||
display: block;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: #f6f6f6;
|
||||
color: #e80;
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
> a, > a:visited {
|
||||
color: #999;
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: #aaa;
|
||||
|
||||
.label {
|
||||
opacity: 0.7;
|
||||
|
||||
.hint {
|
||||
margin-left: 12px;
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
color: #c55;
|
||||
}
|
||||
}
|
||||
&:hover, &.hover {
|
||||
opacity: 1;
|
||||
background-color: #f6f6f6;
|
||||
color: #e80;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -115,7 +120,7 @@
|
|||
|
||||
#extended.icons-view {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
padding: 3px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 15px;
|
||||
|
||||
|
|
@ -131,7 +136,7 @@
|
|||
&.entry {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
a, a:active, a:visited {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
|
|
@ -139,12 +144,14 @@
|
|||
height: 120px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
border: 2px solid rgba(0,0,0,0);
|
||||
|
||||
&:hover {
|
||||
&:hover, &.hover {
|
||||
color: #e80;
|
||||
border-color: #eee;
|
||||
background-color: #f6f6f6;
|
||||
|
|
@ -170,18 +177,22 @@
|
|||
}
|
||||
}
|
||||
&.error {
|
||||
> a, > a:visited {
|
||||
color: #999;
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: #aaa;
|
||||
text-decoration: none;
|
||||
|
||||
.label {
|
||||
opacity: 0.7;
|
||||
|
||||
.hint {
|
||||
padding: 0 6px;
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
color: #c55;
|
||||
}
|
||||
}
|
||||
&:hover, &.hover {
|
||||
color: #e80;
|
||||
border-color: #eee;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@
|
|||
#tree {
|
||||
position: fixed;
|
||||
left: -200px;
|
||||
top: 80px;
|
||||
display: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
font-size: 0.85em;
|
||||
padding: 16px 32px 16px 16px;
|
||||
background-color: rgb(241,241,241);
|
||||
|
|
@ -43,15 +46,18 @@
|
|||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
> a, > a.visited {
|
||||
> a, > a:active, > a.visited {
|
||||
margin-left: 16px;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
.border-radius( 5px );
|
||||
display: block;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
&:hover, &.hover {
|
||||
color: #e80;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -70,7 +76,6 @@
|
|||
.hint {
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
font-style: italic;
|
||||
font-size: 0.9em;
|
||||
color: #ccc;
|
||||
img {
|
||||
|
|
@ -84,15 +89,18 @@
|
|||
display: none;
|
||||
}
|
||||
&.current {
|
||||
> a, > a:visited {
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
> a, > a:active, > a:visited {
|
||||
border: 1px solid rgb(221,221,221);
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
> a, > a:visited {
|
||||
> a, > a:active, > a:visited {
|
||||
color: #999;
|
||||
&:hover, &.hover {
|
||||
color: #e80;
|
||||
}
|
||||
}
|
||||
.hint {
|
||||
color: #c55;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ html.no-js {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: Ubuntu, sans-serif;
|
||||
font-size: 16px;
|
||||
|
|
@ -22,16 +23,6 @@ body {
|
|||
}
|
||||
|
||||
|
||||
a, a:visited {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #e80;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body > nav {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
|
|
@ -41,7 +32,7 @@ body > nav {
|
|||
font-size: 0.85em;
|
||||
background-color: rgb(241,241,241);
|
||||
border-bottom: 2px solid rgb(210,210,210);
|
||||
|
||||
|
||||
span.jsDisabledFallback {
|
||||
display: block;
|
||||
height: 30px;
|
||||
|
|
@ -49,45 +40,27 @@ body > nav {
|
|||
padding: 0 10px;
|
||||
color: #999;
|
||||
}
|
||||
li {
|
||||
a, a:active, a:visited {
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
.transition( all 0.2s ease-in-out );
|
||||
|
||||
&.crumb {
|
||||
float: left;
|
||||
border-right: 1px solid rgb(231,231,231);
|
||||
.hint {
|
||||
margin-left: 8px;
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
img.hint {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
vertical-align: baseline;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
&.current {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1.0;
|
||||
}
|
||||
&.view {
|
||||
float: right;
|
||||
border-left: 1px solid rgb(230,230,230);
|
||||
}
|
||||
&:hover, &:hover a {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
color: #e80;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover, &.hover {
|
||||
color: #e80;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
.current a {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1.0;
|
||||
}
|
||||
img {
|
||||
width: 16px;
|
||||
|
|
@ -95,11 +68,30 @@ body > nav {
|
|||
vertical-align: bottom;
|
||||
padding: 0 6px 6px 0;
|
||||
}
|
||||
.crumb {
|
||||
float: left;
|
||||
border-right: 1px solid rgb(231,231,231);
|
||||
.hint {
|
||||
margin-left: 8px;
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
img.hint {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
vertical-align: baseline;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
.view {
|
||||
float: right;
|
||||
border-left: 1px solid rgb(231,231,231);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#content {
|
||||
max-width: 980px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
|
||||
> header {
|
||||
|
|
@ -136,8 +128,9 @@ body > footer {
|
|||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
|
||||
a, a:visited {
|
||||
a, a:active, a:visited {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
.transition( all 0.2s ease-in-out );
|
||||
|
||||
&:hover {
|
||||
|
|
@ -151,15 +144,14 @@ body > footer {
|
|||
position: absolute;
|
||||
left: 6px;
|
||||
bottom: 6px;
|
||||
float: left;
|
||||
opacity: 0.4;
|
||||
.transition( all 0.2s ease-in-out );
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.4;
|
||||
.transition( all 0.2s ease-in-out );
|
||||
}
|
||||
&:hover img {
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
|
||||
<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
|
||||
</a>
|
||||
<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai %BUILD_VERSION%">h5ai</a>
|
||||
<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai %BUILD_VERSION%">h5ai %BUILD_VERSION%</a>
|
||||
<span class="l10n-footerUsing">using</span>
|
||||
<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -13,12 +13,9 @@
|
|||
<script src="/h5ai/js/lib/modernizr.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<nav class="clearfix">
|
||||
<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
|
||||
<ul>
|
||||
<li id="domain" class="crumb">
|
||||
<a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a>
|
||||
</li>
|
||||
<li id="viewicons" class="view">
|
||||
<a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" /><span class="l10n-viewIcons">icons</span></a>
|
||||
</li>
|
||||
|
|
@ -26,7 +23,6 @@
|
|||
<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-viewDetails">details</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</nav>
|
||||
<section id="content">
|
||||
<header></header>
|
||||
|
|
|
|||
BIN
src/h5ai/icons/16x16/folder-home.png
Normal file
BIN
src/h5ai/icons/16x16/folder-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 B |
BIN
src/h5ai/icons/48x48/folder-home.png
Normal file
BIN
src/h5ai/icons/48x48/folder-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -1,8 +1,5 @@
|
|||
|
||||
var H5ai = function ( options, langs ) {
|
||||
|
||||
var THIS = this;
|
||||
|
||||
var H5ai = function ( options, langs, pathCache ) {
|
||||
|
||||
|
||||
/*******************************
|
||||
|
|
@ -14,16 +11,10 @@ var H5ai = function ( options, langs ) {
|
|||
store: {
|
||||
viewmode: "h5ai.viewmode"
|
||||
},
|
||||
icons: {
|
||||
crumb: "/h5ai/images/crumb.png",
|
||||
ascending: "/h5ai/images/ascending.png",
|
||||
descending: "/h5ai/images/descending.png"
|
||||
},
|
||||
customHeader: "h5ai.header.html",
|
||||
customFooter: "h5ai.footer.html",
|
||||
callbacks: {
|
||||
folderClick: [],
|
||||
fileClick: []
|
||||
pathClick: []
|
||||
},
|
||||
|
||||
viewmodes: [ "details", "icons" ],
|
||||
|
|
@ -32,7 +23,8 @@ var H5ai = function ( options, langs ) {
|
|||
},
|
||||
lang: undefined,
|
||||
useBrowserLang: true,
|
||||
setParentFolderLabels: true
|
||||
setParentFolderLabels: true,
|
||||
linkHoverStates: true
|
||||
};
|
||||
this.config = $.extend( {}, defaults, options );
|
||||
|
||||
|
|
@ -41,20 +33,11 @@ var H5ai = function ( options, langs ) {
|
|||
/*******************************
|
||||
* public api
|
||||
*******************************/
|
||||
|
||||
this.folderClick = function ( fn ) {
|
||||
|
||||
if ( typeof fn === "function" ) {
|
||||
this.config.callbacks.folderClick.push( fn );
|
||||
};
|
||||
return this;
|
||||
};
|
||||
this.pathClick = function ( fn ) {
|
||||
|
||||
|
||||
this.fileClick = function ( fn ) {
|
||||
|
||||
if ( typeof fn === "function" ) {
|
||||
this.config.callbacks.fileClick.push( fn );
|
||||
if ( $.isFunction( fn ) ) {
|
||||
this.config.callbacks.pathClick.push( fn );
|
||||
};
|
||||
return this;
|
||||
};
|
||||
|
|
@ -83,18 +66,10 @@ var H5ai = function ( options, langs ) {
|
|||
* callback triggers
|
||||
*******************************/
|
||||
|
||||
this.triggerFolderClick = function ( label ) {
|
||||
this.triggerPathClick = function ( path, context ) {
|
||||
|
||||
for ( idx in this.config.callbacks.folderClick ) {
|
||||
this.config.callbacks.folderClick[idx].call( window, label );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
this.triggerFileClick = function ( label ) {
|
||||
|
||||
for ( idx in this.config.callbacks.fileClick ) {
|
||||
this.config.callbacks.fileClick[idx].call( window, label );
|
||||
for ( idx in this.config.callbacks.pathClick ) {
|
||||
this.config.callbacks.pathClick[idx].call( window, path, context );
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -143,7 +118,7 @@ var H5ai = function ( options, langs ) {
|
|||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* breadcrumb
|
||||
|
|
@ -151,12 +126,13 @@ var H5ai = function ( options, langs ) {
|
|||
|
||||
this.initBreadcrumb = function () {
|
||||
|
||||
var $domain = $( "#domain" );
|
||||
var $ul = $domain.closest( "ul" );
|
||||
var $ul = $( "body > nav ul" );
|
||||
|
||||
$domain.find( "span" ).text( document.domain );
|
||||
var pathnameParts = decodeURI( document.location.pathname ).split( "/" );
|
||||
var pathname = "/";
|
||||
var path = pathCache.getPathForFolder( pathname );
|
||||
$ul.append( path.updateCrumbHtml() );
|
||||
|
||||
var pathnameParts = decodeURI( document.location.pathname ).split( "/" );
|
||||
for ( idx in pathnameParts ) {
|
||||
var part = pathnameParts[idx];
|
||||
if ( part !== "" ) {
|
||||
|
|
@ -177,10 +153,19 @@ var H5ai = function ( options, langs ) {
|
|||
|
||||
function adjustTopSpace() {
|
||||
|
||||
var height = $( "body > nav" ).height();
|
||||
var space = height + 50;
|
||||
$( "body" ).css( "margin-top", "" + space + "px" );
|
||||
$( "#tree" ).css( "top", "" + space + "px" );
|
||||
var winHeight = $( window ).height();
|
||||
var navHeight = $( "body > nav" ).outerHeight();
|
||||
var footerHeight = $( "body > footer" ).outerHeight();
|
||||
var contentSpacing = 50;
|
||||
var treeSpacing = 50;
|
||||
|
||||
$( "body" )
|
||||
.css( "margin-top", "" + ( navHeight + contentSpacing ) + "px" )
|
||||
.css( "margin-bottom", "" + ( footerHeight + contentSpacing ) + "px" );
|
||||
|
||||
$( "#tree" )
|
||||
.css( "top", "" + ( navHeight + treeSpacing ) + "px" )
|
||||
.css( "max-height", "" + ( winHeight - navHeight - footerHeight - 36 - 2 * treeSpacing ) + "px" );
|
||||
};
|
||||
|
||||
$( window ).resize( function () {
|
||||
|
|
@ -228,9 +213,9 @@ var H5ai = function ( options, langs ) {
|
|||
};
|
||||
var $icon;
|
||||
if ( order.indexOf( "O=A" ) >= 0 ) {
|
||||
$icon = $( "<img src='" + this.config.icons.ascending + "' class='sort' alt='ascending' />" );
|
||||
$icon = $( "<img src='/h5ai/images/ascending.png' class='sort' alt='ascending' />" );
|
||||
} else {
|
||||
$icon = $( "<img src='" + this.config.icons.descending + "' class='sort' alt='descending' />" );
|
||||
$icon = $( "<img src='/h5ai/images/descending.png' class='sort' alt='descending' />" );
|
||||
};
|
||||
if ( order.indexOf( "C=N" ) >= 0 ) {
|
||||
$li.find( "a.label" ).append( $icon );
|
||||
|
|
@ -269,13 +254,13 @@ var H5ai = function ( options, langs ) {
|
|||
this.initExtendedView();
|
||||
|
||||
$( "#viewdetails" ).closest( "li" )
|
||||
.click( function () {
|
||||
THIS.applyViewmode( "details" );
|
||||
} );
|
||||
.click( $.proxy( function () {
|
||||
this.applyViewmode( "details" );
|
||||
}, this ) );
|
||||
$( "#viewicons" ).closest( "li" )
|
||||
.click( function () {
|
||||
THIS.applyViewmode( "icons" );
|
||||
} );
|
||||
.click( $.proxy( function () {
|
||||
this.applyViewmode( "icons" );
|
||||
}, this ) );
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,94 @@
|
|||
|
||||
|
||||
var PathCache = function ( utils ) {
|
||||
var PathCache = function () {
|
||||
|
||||
|
||||
var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
|
||||
|
||||
this.splitPathname = function ( pathname ) {
|
||||
|
||||
if ( pathname === "/" ) {
|
||||
return [ "", "/" ];
|
||||
};
|
||||
var match = pathnameRegEx.exec( pathname );
|
||||
return [ match[1], match[3] ];
|
||||
};
|
||||
|
||||
|
||||
this.cache = {};
|
||||
|
||||
|
||||
this.loadCache = function () {
|
||||
|
||||
var json = localStorage.getItem( "h5ai.cache" );
|
||||
var objs = $.evalJSON( json );
|
||||
var cache = {};
|
||||
for ( idx in objs ) {
|
||||
var obj = objs[idx];
|
||||
var path = this.objectToPath( obj );
|
||||
cache[path.absHref] = path;
|
||||
};
|
||||
console.log( "loaded: ", cache );
|
||||
return cache;
|
||||
};
|
||||
|
||||
|
||||
this.storeCache = function () {
|
||||
|
||||
var objs = [];
|
||||
for ( ref in this.cache ) {
|
||||
var path = this.cache[ref];
|
||||
if ( path.isFolder ) {
|
||||
objs.push( this.pathToObject( path ) );
|
||||
};
|
||||
};
|
||||
var json = $.toJSON( objs );
|
||||
localStorage.setItem( "h5ai.cache", json );
|
||||
};
|
||||
|
||||
|
||||
this.pathToObject = function ( path ) {
|
||||
|
||||
var object = {
|
||||
r: path.absHref,
|
||||
s: path.status,
|
||||
c: [],
|
||||
o: path.treeOpen
|
||||
};
|
||||
|
||||
if ( path.content !== undefined ) {
|
||||
for ( ref in path.content ) {
|
||||
object.c.push( ref );
|
||||
};
|
||||
};
|
||||
|
||||
return object;
|
||||
};
|
||||
|
||||
|
||||
this.objectToPath = function ( obj ) {
|
||||
|
||||
var path = this.getPathForFolder( obj.r );
|
||||
path.status = obj.s;
|
||||
path.content = {};
|
||||
path.treeOpen = obj.o;
|
||||
for ( idx in obj.c ) {
|
||||
var href = obj.c[idx];
|
||||
path.content[href] = this.getPathForFolder( href );
|
||||
};
|
||||
return path;
|
||||
};
|
||||
|
||||
|
||||
this.getPathForFolder = function ( folder ) {
|
||||
|
||||
return this.getCachedPath( new Path( utils, folder ) );
|
||||
return this.getCachedPath( new Path( this, folder ) );
|
||||
};
|
||||
|
||||
|
||||
this.getPathForTableRow = function ( parentFolder, tableRow ) {
|
||||
|
||||
return this.getCachedPath( new Path( utils, parentFolder, tableRow ) );
|
||||
return this.getCachedPath( new Path( this, parentFolder, tableRow ) );
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -25,22 +100,21 @@ var PathCache = function ( utils ) {
|
|||
|
||||
var cachedPath = this.cache[path.absHref];
|
||||
if ( cachedPath !== undefined ) {
|
||||
console.log( "cached path:", cachedPath.absHref );
|
||||
return cachedPath;
|
||||
};
|
||||
|
||||
console.log( "new path:", path.absHref );
|
||||
this.cache[path.absHref] = path;
|
||||
this.storeCache();
|
||||
return path;
|
||||
};
|
||||
|
||||
this.cache = this.loadCache();
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
var Path = function ( utils, folder, tableRow ) {
|
||||
|
||||
var THIS = this;
|
||||
var Path = function ( pathCache, folder, tableRow ) {
|
||||
|
||||
if ( ! /\/$/.test( folder ) ) {
|
||||
folder += "/";
|
||||
|
|
@ -59,7 +133,7 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
this.date = $tds.eq( 2 ).text();
|
||||
this.size = $tds.eq( 3 ).text();
|
||||
} else {
|
||||
var splits = utils.splitPathname( folder );
|
||||
var splits = pathCache.splitPathname( folder );
|
||||
|
||||
this.parentFolder = splits[0];
|
||||
this.label = splits[1];
|
||||
|
|
@ -81,13 +155,14 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
this.isFolder = ( this.alt === "[DIR]" );
|
||||
this.isParentFolder = ( this.isFolder && this.label === "Parent Directory" );
|
||||
this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href;
|
||||
this.isCurrentFolder = ( decodeURI( document.location.pathname ) === this.absHref );
|
||||
this.isCurrentFolder = ( this.absHref === decodeURI( document.location.pathname ) );
|
||||
this.isDomain = ( this.absHref === "/" );
|
||||
|
||||
if ( this.isParentFolder && h5ai.config.setParentFolderLabels ) {
|
||||
if ( this.absHref === "/" ) {
|
||||
if ( this.isDomain ) {
|
||||
this.label = decodeURI( document.domain );
|
||||
} else {
|
||||
this.label = utils.splitPathname( utils.splitPathname( this.parentFolder )[0] )[1].slice( 0, -1 );
|
||||
this.label = pathCache.splitPathname( pathCache.splitPathname( this.parentFolder )[0] )[1].slice( 0, -1 );
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -98,19 +173,44 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
$extended: undefined,
|
||||
$tree: undefined
|
||||
};
|
||||
|
||||
this.treeOpen = false;
|
||||
|
||||
this.isEmpty = function() {
|
||||
|
||||
if ( this.content === undefined ) {
|
||||
return true;
|
||||
};
|
||||
for ( var prop in this.content ) {
|
||||
if( this.content.hasOwnProperty( prop ) ) {
|
||||
return false;
|
||||
return this.content === undefined || $.isEmptyObject( this.content );
|
||||
};
|
||||
|
||||
|
||||
this.onClick = function ( context ) {
|
||||
|
||||
pathCache.storeCache();
|
||||
h5ai.triggerPathClick( this, context );
|
||||
};
|
||||
|
||||
|
||||
this.onHoverIn = function () {
|
||||
|
||||
if ( h5ai.config.linkHoverStates ) {
|
||||
for ( ref in this.html ) {
|
||||
$ref = this.html[ref];
|
||||
if ( $ref !== undefined ) {
|
||||
$ref.find( "> a" ).addClass( "hover" );
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
this.onHoverOut = function () {
|
||||
|
||||
if ( h5ai.config.linkHoverStates ) {
|
||||
for ( ref in this.html ) {
|
||||
$ref = this.html[ref];
|
||||
if ( $ref !== undefined ) {
|
||||
$ref.find( "> a" ).removeClass( "hover" );
|
||||
};
|
||||
};
|
||||
};
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -127,9 +227,21 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
var $html = $( "<li class='crumb' />" ).data( "path", this );
|
||||
|
||||
try {
|
||||
$html.addClass( this.isFolder ? "folder" : "file" );
|
||||
var $a = $( "<a href='" + this.absHref + "'><img src='/h5ai/images/crumb.png' alt='>' />" + this.label + "</a>" );
|
||||
$a.click( $.proxy( function() { this.onClick( "crumb" ); }, this ) );
|
||||
$a.hover( $.proxy( function() { this.onHoverIn( "crumb" ); }, this ), $.proxy( function() { this.onHoverOut( "crumb" ); }, this ) );
|
||||
$html.append( $a );
|
||||
|
||||
if ( this.isDomain ) {
|
||||
$html.addClass( "domain" );
|
||||
$a.find( "img" ).attr( "src", "/h5ai/images/home.png" );
|
||||
};
|
||||
|
||||
if ( this.isCurrentFolder ) {
|
||||
$html.addClass( "current" );
|
||||
};
|
||||
|
||||
if ( !isNaN( this.status ) ) {
|
||||
if ( this.status === 200 ) {
|
||||
$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
|
||||
|
|
@ -137,10 +249,6 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
$( "<span class='hint'>(" + this.status + ")</span>" ).appendTo( $a );
|
||||
};
|
||||
};
|
||||
|
||||
if ( this.isCurrentFolder ) {
|
||||
$html.addClass( "current" );
|
||||
};
|
||||
} catch( err ) {
|
||||
console.log( "updateCrumbHtml failed", err );
|
||||
$( "<span class='fail'>failed</span>" ).appendTo( $html );
|
||||
|
|
@ -160,18 +268,11 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
var $html = $( "<li class='entry' />" ).data( "path", this );
|
||||
|
||||
try {
|
||||
if ( this.isFolder ) {
|
||||
$html.addClass( "folder" )
|
||||
.click( function() {
|
||||
h5ai.triggerFolderClick( THIS );
|
||||
} );
|
||||
} else {
|
||||
$html.addClass( "file" )
|
||||
.click( function() {
|
||||
h5ai.triggerFileClick( THIS );
|
||||
} );
|
||||
};
|
||||
$html.addClass( this.isFolder ? "folder" : "file" );
|
||||
var $a = $( "<a href='" + this.href + "' />" ).appendTo( $html );
|
||||
$a.click( $.proxy( function() { this.onClick( "extended" ); }, this ) );
|
||||
$a.hover( $.proxy( function() { this.onHoverIn( "extended" ); }, this ), $.proxy( function() { this.onHoverOut( "extended" ); }, this ) );
|
||||
|
||||
$( "<span class='icon small'><img src='" + this.icon16 + "' alt='" + this.alt + "' /></span>" ).appendTo( $a );
|
||||
$( "<span class='icon big'><img src='" + this.icon48 + "' alt='" + this.alt + "' /></span>" ).appendTo( $a );
|
||||
var $label = $( "<span class='label'>" + this.label + "</span>" ).appendTo( $a );
|
||||
|
|
@ -192,7 +293,7 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
$a.find( ".icon.big img" ).attr( "src", "/h5ai/icons/48x48/folder-page.png" );
|
||||
} else {
|
||||
$html.addClass( "error" );
|
||||
$label.append( " " ).append( $( "<span class='hint'>" + this.status + "</span>" ) );
|
||||
$label.append( $( "<span class='hint'> " + this.status + " </span>" ) );
|
||||
};
|
||||
};
|
||||
} catch( err ) {
|
||||
|
|
@ -215,39 +316,50 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
var $blank = $( "<span class='blank' />" ).appendTo( $html );
|
||||
|
||||
try {
|
||||
$html.addClass( this.isFolder ? "folder" : "file" );
|
||||
var $a = $( "<a href='" + this.absHref + "' />" )
|
||||
.appendTo( $html )
|
||||
.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
|
||||
.append( $( "<span class='label'>" + this.label + "</span>" ) );
|
||||
$a.click( $.proxy( function() { this.onClick( "tree" ); }, this ) );
|
||||
$a.hover( $.proxy( function() { this.onHoverIn( "tree" ); }, this ), $.proxy( function() { this.onHoverOut( "tree" ); }, this ) );
|
||||
|
||||
if ( this.isFolder ) {
|
||||
|
||||
$html.addClass( "folder" );
|
||||
|
||||
// indicator
|
||||
if ( this.status === undefined || !this.isEmpty() ) {
|
||||
var $indicator = $( "<span class='indicator'><img src='/h5ai/images/tree.png' /></span>" );
|
||||
if ( this.status === undefined ) {
|
||||
$indicator.addClass( "unknown" );
|
||||
} else {
|
||||
} else if ( this.treeOpen ) {
|
||||
$indicator.addClass( "open" );
|
||||
};
|
||||
$indicator.click( function( event ) {
|
||||
$indicator.click( $.proxy( function( event ) {
|
||||
if ( $indicator.hasClass( "unknown" ) ) {
|
||||
tree.fetchPath( THIS.absHref, function ( path ) {
|
||||
$html.replaceWith( path.updateTreeHtml() );
|
||||
} );
|
||||
tree.fetchStatusAndContent( this.absHref, false, $.proxy( function ( status, content ) {
|
||||
this.status = status;
|
||||
this.content = content;
|
||||
this.treeOpen = true;
|
||||
this.updateTreeHtml();
|
||||
}, this ) );
|
||||
} else if ( $indicator.hasClass( "open" ) ) {
|
||||
this.treeOpen = false;
|
||||
$indicator.removeClass( "open" );
|
||||
$html.find( "> ul.content" ).slideUp();
|
||||
} else {
|
||||
this.treeOpen = true;
|
||||
$indicator.addClass( "open" );
|
||||
$html.find( "> ul.content" ).slideDown();
|
||||
};
|
||||
} );
|
||||
}, this ) );
|
||||
$blank.replaceWith( $indicator );
|
||||
};
|
||||
|
||||
// is this the domain?
|
||||
if ( this.isDomain ) {
|
||||
$html.addClass( "domain" );
|
||||
$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-home.png" );
|
||||
};
|
||||
|
||||
// is this the current folder?
|
||||
if ( this.isCurrentFolder ) {
|
||||
$html.addClass( "current" );
|
||||
|
|
@ -260,6 +372,9 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
for ( idx in this.content ) {
|
||||
$( "<li />" ).append( this.content[idx].updateTreeHtml() ).appendTo( $ul );
|
||||
};
|
||||
if ( this.status === undefined || !this.treeOpen ) {
|
||||
$ul.hide();
|
||||
};
|
||||
};
|
||||
|
||||
// reflect folder status
|
||||
|
|
@ -272,9 +387,6 @@ var Path = function ( utils, folder, tableRow ) {
|
|||
$a.append( $( "<span class='hint'>" + this.status + "</span>" ) );
|
||||
};
|
||||
};
|
||||
|
||||
} else {
|
||||
$html.addClass( "file" );
|
||||
};
|
||||
} catch( err ) {
|
||||
console.log( "updateTreeHtml failed", err );
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
var Tree = function ( utils, h5ai ) {
|
||||
var Tree = function ( pathCache, h5ai ) {
|
||||
|
||||
var THIS = this;
|
||||
var contentTypeRegEx = /^text\/html;h5ai=/;
|
||||
|
|
@ -47,10 +47,12 @@ var Tree = function ( utils, h5ai ) {
|
|||
};
|
||||
|
||||
$tree.hover( function () { shiftTree( true ); }, function () { shiftTree(); } );
|
||||
$( window ).resize( function() { shiftTree(); } );
|
||||
$( window ).resize( function() {
|
||||
shiftTree();
|
||||
} );
|
||||
|
||||
this.fetchTree( decodeURI( document.location.pathname ), function( path ) {
|
||||
$tree.append( path.updateTreeHtml() );
|
||||
$tree.append( path.updateTreeHtml() ).show();
|
||||
shiftTree();
|
||||
} );
|
||||
};
|
||||
|
|
@ -58,18 +60,21 @@ var Tree = function ( utils, h5ai ) {
|
|||
|
||||
this.fetchTree = function ( pathname, callback, childPath ) {
|
||||
|
||||
this.fetchPath( pathname, function ( path ) {
|
||||
this.fetchPath( pathname, $.proxy( function ( path ) {
|
||||
|
||||
path.treeOpen = true;
|
||||
|
||||
if ( childPath !== undefined ) {
|
||||
path.content[ childPath.absHref ] = childPath;
|
||||
};
|
||||
|
||||
var parent = utils.splitPathname( pathname )[0];
|
||||
var parent = pathCache.splitPathname( pathname )[0];
|
||||
if ( parent === "" ) {
|
||||
callback( path );
|
||||
} else {
|
||||
THIS.fetchTree( parent, callback, path );
|
||||
this.fetchTree( parent, callback, path );
|
||||
};
|
||||
} );
|
||||
}, this ) );
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -131,7 +136,7 @@ var Tree = function ( utils, h5ai ) {
|
|||
} else if ( pathnameStatusCache[ pathname ] !== undefined ) {
|
||||
callback( pathnameStatusCache[ pathname ] );
|
||||
return;
|
||||
};
|
||||
};
|
||||
|
||||
$.ajax( {
|
||||
url: pathname,
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
|
||||
var Utils = function () {
|
||||
|
||||
var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
|
||||
|
||||
this.splitPathname = function ( pathname ) {
|
||||
|
||||
if ( pathname === "/" ) {
|
||||
return [ "", "/" ];
|
||||
};
|
||||
var match = pathnameRegEx.exec( pathname );
|
||||
return [ match[1], match[3] ];
|
||||
};
|
||||
|
||||
};
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
( function( $ ) {
|
||||
|
||||
// @include "inc/utils.js"
|
||||
// @include "inc/h5ai.js"
|
||||
// @include "inc/jquery.json.min.js"
|
||||
// @include "inc/path.js"
|
||||
// @include "inc/h5ai.js"
|
||||
// @include "inc/tree.js"
|
||||
|
||||
|
||||
|
|
@ -10,10 +10,9 @@
|
|||
* create
|
||||
*******************************/
|
||||
|
||||
var utils = new Utils();
|
||||
var pathCache = new PathCache( utils );
|
||||
var h5ai = new H5ai( h5aiOptions, h5aiLangs );
|
||||
var tree = new Tree( utils, h5ai );
|
||||
var pathCache = new PathCache();
|
||||
var h5ai = new H5ai( h5aiOptions, h5aiLangs, pathCache );
|
||||
var tree = new Tree( pathCache, h5ai );
|
||||
|
||||
|
||||
/*******************************
|
||||
|
|
@ -21,11 +20,18 @@
|
|||
*******************************/
|
||||
|
||||
$.h5ai = {
|
||||
folderClick: h5ai.folderClick,
|
||||
fileClick: h5ai.fileClick
|
||||
click: $.proxy( h5ai.pathClick, h5ai )
|
||||
};
|
||||
|
||||
$( ".l10n-footerUsing" ).click( function () {
|
||||
console.log( "clean" );
|
||||
pathCache.cache = {};
|
||||
console.log( "store" );
|
||||
pathCache.storeCache();
|
||||
console.log( "load", pathCache.loadCache() );
|
||||
} );
|
||||
|
||||
|
||||
/*******************************
|
||||
* init after dom load
|
||||
*******************************/
|
||||
|
|
|
|||
|
|
@ -56,7 +56,12 @@ h5aiOptions = {
|
|||
/*
|
||||
* Set parent folder labels to real folder names.
|
||||
*/
|
||||
setParentFolderLabels: true
|
||||
setParentFolderLabels: true,
|
||||
|
||||
/*
|
||||
* Link the hover effects between crumb, extended view and tree.
|
||||
*/
|
||||
linkHoverStates: true
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -86,6 +91,36 @@ h5aiLangs = {
|
|||
columnSize: "Größe",
|
||||
footerUsing: "nutzt",
|
||||
parentDirectory: "Übergeordnetes Verzeichnis"
|
||||
},
|
||||
|
||||
"fr": {
|
||||
viewDetails: "détails",
|
||||
viewIcons: "icônes",
|
||||
columnName: "Nom",
|
||||
columnLastModified: "Dernière modification",
|
||||
columnSize: "Taille",
|
||||
footerUsing: "utilise",
|
||||
parentDirectory: "Dossier parent"
|
||||
},
|
||||
|
||||
"nl": {
|
||||
viewDetails: "details",
|
||||
viewIcons: "iconen",
|
||||
columnName: "Naam",
|
||||
columnLastModified: "Laatste wijziging",
|
||||
columnSize: "Grootte",
|
||||
footerUsing: "gebruikt",
|
||||
parentDirectory: "Bovenliggende map"
|
||||
},
|
||||
|
||||
"sv": {
|
||||
viewDetails: "detaljerad",
|
||||
viewIcons: "ikoner",
|
||||
columnName: "Filnamn",
|
||||
columnLastModified: "Senast ändrad",
|
||||
columnSize: "Filstorlek",
|
||||
footerUsing: "använder",
|
||||
parentDirectory: "Till överordnad mapp"
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
################################
|
||||
# h5ai 0.8
|
||||
# h5ai 0.9
|
||||
# customized .htaccess
|
||||
################################
|
||||
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
IndexOrderDefault Ascending Name
|
||||
|
||||
IndexOptions Type=text/html;h5ai=0.8
|
||||
IndexOptions Type=text/html;h5ai=0.9
|
||||
IndexOptions Charset=UTF-8
|
||||
IndexOptions FancyIndexing
|
||||
IndexOptions HTMLTable
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,7 @@
|
|||
<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
|
||||
<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
|
||||
</a>
|
||||
<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.8">h5ai</a>
|
||||
<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.9">h5ai 0.9</a>
|
||||
<span class="l10n-footerUsing">using</span>
|
||||
<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Directory index · styled with h5ai</title>
|
||||
<meta name="h5ai-version" content="h5ai 0.8">
|
||||
<meta name="h5ai-version" content="h5ai 0.9">
|
||||
<meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)">
|
||||
<meta name="keywords" content="directory, index, autoindex, h5ai">
|
||||
<link rel="shortcut icon" type="image/png" href="/h5ai/images/h5ai-16x16.png">
|
||||
|
|
@ -13,12 +13,9 @@
|
|||
<script src="/h5ai/js/lib/modernizr.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<nav class="clearfix">
|
||||
<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
|
||||
<ul>
|
||||
<li id="domain" class="crumb">
|
||||
<a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a>
|
||||
</li>
|
||||
<li id="viewicons" class="view">
|
||||
<a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" /><span class="l10n-viewIcons">icons</span></a>
|
||||
</li>
|
||||
|
|
@ -26,7 +23,6 @@
|
|||
<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-viewDetails">details</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</nav>
|
||||
<section id="content">
|
||||
<header></header>
|
||||
|
|
|
|||
BIN
target/h5ai/icons/16x16/folder-home.png
Normal file
BIN
target/h5ai/icons/16x16/folder-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 B |
BIN
target/h5ai/icons/48x48/folder-home.png
Normal file
BIN
target/h5ai/icons/48x48/folder-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* h5ai 0.8
|
||||
* h5ai 0.9
|
||||
* Options and localization
|
||||
*/
|
||||
|
||||
|
|
@ -56,7 +56,12 @@ h5aiOptions = {
|
|||
/*
|
||||
* Set parent folder labels to real folder names.
|
||||
*/
|
||||
setParentFolderLabels: true
|
||||
setParentFolderLabels: true,
|
||||
|
||||
/*
|
||||
* Link the hover effects between crumb, extended view and tree.
|
||||
*/
|
||||
linkHoverStates: true
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -86,6 +91,16 @@ h5aiLangs = {
|
|||
columnSize: "Größe",
|
||||
footerUsing: "nutzt",
|
||||
parentDirectory: "Übergeordnetes Verzeichnis"
|
||||
},
|
||||
|
||||
"fr": {
|
||||
viewDetails: "détails",
|
||||
viewIcons: "icônes",
|
||||
columnName: "Nom",
|
||||
columnLastModified: "Dernière modification",
|
||||
columnSize: "Taille",
|
||||
footerUsing: "utilise",
|
||||
parentDirectory: "Dossier parent"
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue