mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-03-14 01:19:49 +01:00
Lots of changes. See README.md changelog.
This commit is contained in:
Lars Jung
parent
a339814582
commit
0d4edcb047
18
README.md
18
README.md
@ -1,4 +1,4 @@
|
||||
# h5ai v0.7   ·   a beautified Apache index
|
||||
# h5ai v0.8   ·   a beautified Apache index
|
||||
|
||||
|
||||
## Screenshots
|
||||
@ -47,6 +47,16 @@ please respect their rights.
|
||||
|
||||
## Changelog
|
||||
|
||||
### v0.8
|
||||
*2011-07-08*
|
||||
|
||||
* removed slashes from folder labels
|
||||
* optionally rename parent folder entries to real folder names, see `options.js`
|
||||
* long breadcrumbs (multiple rows) no longer hide content
|
||||
* error folder icons are opaque now
|
||||
* refactored js a lot (again...)
|
||||
|
||||
|
||||
### v0.7
|
||||
*2011-07-07*
|
||||
|
||||
@ -58,15 +68,15 @@ please respect their rights.
|
||||
*2011-07-05*
|
||||
|
||||
* refactored js
|
||||
* added localization, see options.js
|
||||
* added localization, see `options.js`
|
||||
|
||||
|
||||
### v0.5.3
|
||||
*2011-07-04*
|
||||
|
||||
* refactored js
|
||||
* added basic options support
|
||||
* commented options.js
|
||||
* added basic options support via `options.js`
|
||||
* commented `options.js`
|
||||
* optional tree sidebar
|
||||
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ custom = true
|
||||
|
||||
# project
|
||||
project.name = h5ai
|
||||
project.version = 0.7
|
||||
project.version = 0.8
|
||||
|
||||
|
||||
# src
|
||||
|
||||
@ -46,13 +46,16 @@
|
||||
}
|
||||
&.error {
|
||||
> a, > a:visited {
|
||||
opacity: 0.7;
|
||||
color: #999;
|
||||
|
||||
.hint {
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
color: #c55;
|
||||
.label {
|
||||
opacity: 0.7;
|
||||
|
||||
.hint {
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
color: #c55;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -145,7 +148,6 @@
|
||||
color: #e80;
|
||||
border-color: #eee;
|
||||
background-color: #f6f6f6;
|
||||
//.box-shadow( 0, 0, 20px, #999 );
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
@ -169,13 +171,16 @@
|
||||
}
|
||||
&.error {
|
||||
> a, > a:visited {
|
||||
opacity: 0.7;
|
||||
color: #999;
|
||||
|
||||
.hint {
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
color: #c55;
|
||||
.label {
|
||||
opacity: 0.7;
|
||||
|
||||
.hint {
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
color: #c55;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,143 +0,0 @@
|
||||
|
||||
var File = function ( utils, folder, tableRow ) {
|
||||
|
||||
var THIS = this;
|
||||
|
||||
|
||||
|
||||
if ( ! /\/$/.test( folder ) ) {
|
||||
folder += "/";
|
||||
};
|
||||
|
||||
if ( tableRow !== undefined ) {
|
||||
var $tds = $( tableRow ).find( "td" );
|
||||
var $img = $tds.eq( 0 ).find( "img" );
|
||||
var $a= $tds.eq( 1 ).find( "a" );
|
||||
|
||||
this.parentFolder = folder;
|
||||
this.icon16 = $img.attr( "src" );
|
||||
this.alt = $img.attr( "alt" );
|
||||
this.label = $a.text();
|
||||
this.href = decodeURI( $a.attr("href") );
|
||||
this.date = $tds.eq( 2 ).text();
|
||||
this.size = $tds.eq( 3 ).text();
|
||||
} else {
|
||||
var splits = utils.splitPathname( folder );
|
||||
|
||||
this.parentFolder = splits[0];
|
||||
this.label = splits[1];
|
||||
this.icon16 = "/h5ai/icons/16x16/folder.png";
|
||||
this.alt = "[DIR]";
|
||||
this.href = this.label;
|
||||
this.date = "";
|
||||
this.size = "";
|
||||
if ( this.label === "/" ) {
|
||||
this.label = document.domain + "/";
|
||||
};
|
||||
};
|
||||
|
||||
this.icon48 = this.icon16.replace( "16x16", "48x48" );
|
||||
this.isFolder = ( this.alt === "[DIR]" );
|
||||
this.isParentFolder = ( this.isFolder && this.label === "Parent Directory" );
|
||||
this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href;
|
||||
this.status = undefined; // undefined, "h5ai" or HTTP response code
|
||||
this.content = undefined;
|
||||
this.$treeHtml = undefined;
|
||||
|
||||
|
||||
this.isEmpty = function() {
|
||||
|
||||
if ( this.content === undefined ) {
|
||||
return true;
|
||||
};
|
||||
for ( var prop in this.content ) {
|
||||
if( this.content.hasOwnProperty( prop ) ) {
|
||||
return false;
|
||||
};
|
||||
};
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
this.updateTreeHtml = function () {
|
||||
|
||||
var $html = $( "<div class='entry' />" ).data( "file", this );
|
||||
var $blank = $( "<span class='blank' />" ).appendTo( $html );
|
||||
|
||||
try {
|
||||
var $a = $( "<a href='" + this.absHref + "' />" )
|
||||
.appendTo( $html )
|
||||
.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
|
||||
.append( $( "<span class='label'>" + this.label + "</span>" ) );
|
||||
|
||||
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 {
|
||||
$indicator.addClass( "open" );
|
||||
};
|
||||
$indicator.click( function( event ) {
|
||||
if ( $indicator.hasClass( "unknown" ) ) {
|
||||
tree.fetchEntry( THIS.absHref, function ( newEntry ) {
|
||||
$html.replaceWith( newEntry.updateTreeHtml() );
|
||||
} );
|
||||
} else if ( $indicator.hasClass( "open" ) ) {
|
||||
$indicator.removeClass( "open" );
|
||||
$html.find( "> ul.content" ).slideUp();
|
||||
} else {
|
||||
$indicator.addClass( "open" );
|
||||
$html.find( "> ul.content" ).slideDown();
|
||||
};
|
||||
} );
|
||||
$blank.replaceWith( $indicator );
|
||||
};
|
||||
|
||||
// is this the current folder?
|
||||
if ( this.absHref === decodeURI( document.location.pathname ) ) {
|
||||
$html.addClass( "current" );
|
||||
$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-open.png" );
|
||||
};
|
||||
|
||||
// does it have subfolders?
|
||||
if ( !this.isEmpty() ) {
|
||||
var $ul = $( "<ul class='content' />" ).appendTo( $html );
|
||||
for ( idx in this.content ) {
|
||||
$( "<li />" ).append( this.content[idx].updateTreeHtml() ).appendTo( $ul );
|
||||
};
|
||||
};
|
||||
|
||||
// reflect folder status
|
||||
if ( !isNaN( this.status ) ) {
|
||||
if ( this.status === 200 ) {
|
||||
$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
|
||||
$a.append( $( "<span class='hint'><img src='/h5ai/images/page.png' /></span>" ) );
|
||||
} else {
|
||||
$html.addClass( "error" );
|
||||
$a.append( $( "<span class='hint'>" + this.status + "</span>" ) );
|
||||
};
|
||||
};
|
||||
|
||||
} else {
|
||||
$html.addClass( "file" );
|
||||
};
|
||||
|
||||
|
||||
} catch( err ) {
|
||||
console.log( "updateTreeHtml failed", err );
|
||||
$( "<span class='fail'>failed</span>" ).appendTo( $html );
|
||||
};
|
||||
|
||||
if ( this.$treeHtml !== undefined ) {
|
||||
this.$treeHtml.replaceWith( $html );
|
||||
};
|
||||
this.$treeHtml = $html;
|
||||
|
||||
return $html;
|
||||
};
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
var H5ai = function ( options ) {
|
||||
var H5ai = function ( options, langs ) {
|
||||
|
||||
var THIS = this;
|
||||
|
||||
@ -10,7 +10,6 @@ var H5ai = function ( options ) {
|
||||
*******************************/
|
||||
|
||||
var defaults = {
|
||||
columnClasses: [ "icon", "name", "date", "size" ],
|
||||
defaultSortOrder: "C=N;O=A",
|
||||
store: {
|
||||
viewmode: "h5ai.viewmode"
|
||||
@ -32,7 +31,8 @@ var H5ai = function ( options ) {
|
||||
folderStatus: {
|
||||
},
|
||||
lang: undefined,
|
||||
useBrowserLang: true
|
||||
useBrowserLang: true,
|
||||
setParentFolderLabels: true
|
||||
};
|
||||
this.config = $.extend( {}, defaults, options );
|
||||
|
||||
@ -67,11 +67,14 @@ var H5ai = function ( options ) {
|
||||
|
||||
this.init = function () {
|
||||
|
||||
document.title = document.domain + decodeURI( document.location.pathname );
|
||||
|
||||
this.applyViewmode();
|
||||
this.initBreadcrumb();
|
||||
this.initTopSpace();
|
||||
this.initViews();
|
||||
this.customize();
|
||||
this.localize( h5aiLangs, this.config.lang, this.config.useBrowserLang );
|
||||
this.localize( langs, this.config.lang, this.config.useBrowserLang );
|
||||
};
|
||||
|
||||
|
||||
@ -115,7 +118,8 @@ var H5ai = function ( options ) {
|
||||
};
|
||||
viewmode = this.getViewmode();
|
||||
|
||||
$( "body > nav li.view" ).hide();
|
||||
$( "body > nav li.view" ).hide().removeClass( "current" );
|
||||
|
||||
if ( this.config.viewmodes.length > 1 ) {
|
||||
if ( $.inArray( "details", this.config.viewmodes ) >= 0 ) {
|
||||
$( "#viewdetails" ).show();
|
||||
@ -125,7 +129,6 @@ var H5ai = function ( options ) {
|
||||
};
|
||||
};
|
||||
|
||||
$( "body > nav li.view" ).removeClass( "current" );
|
||||
if ( viewmode === "details" ) {
|
||||
$( "#viewdetails" ).closest( "li" ).addClass( "current" );
|
||||
$( "#table" ).hide();
|
||||
@ -143,26 +146,47 @@ var H5ai = function ( options ) {
|
||||
|
||||
|
||||
/*******************************
|
||||
* breadcrumb and doc title
|
||||
* breadcrumb
|
||||
*******************************/
|
||||
|
||||
this.initBreadcrumb = function () {
|
||||
|
||||
$( "#domain span" ).text( document.domain );
|
||||
var pathname = decodeURI( document.location.pathname );
|
||||
var parts = pathname.split( "/" );
|
||||
var path = "/";
|
||||
var $ul = $( "nav ul" );
|
||||
for ( idx in parts ) {
|
||||
var part = parts[idx];
|
||||
var $domain = $( "#domain" );
|
||||
var $ul = $domain.closest( "ul" );
|
||||
|
||||
$domain.find( "span" ).text( document.domain );
|
||||
var pathnameParts = decodeURI( document.location.pathname ).split( "/" );
|
||||
var pathname = "/";
|
||||
for ( idx in pathnameParts ) {
|
||||
var part = pathnameParts[idx];
|
||||
if ( part !== "" ) {
|
||||
path += part + "/";
|
||||
$ul.append( $( "<li class='crumb'><a href='" + path + "'><img src='" + this.config.icons.crumb + "' alt='>' />" + part + "</a></li>" ) );
|
||||
pathname += part + "/";
|
||||
var path = pathCache.getPathForFolder( pathname );
|
||||
$ul.append( path.updateCrumbHtml() );
|
||||
};
|
||||
};
|
||||
$( "body > nav .crumb:last" ).addClass( "current" );
|
||||
};
|
||||
|
||||
document.title = document.domain + pathname;
|
||||
|
||||
|
||||
/*******************************
|
||||
* top space, depending on nav height
|
||||
*******************************/
|
||||
|
||||
this.initTopSpace = function () {
|
||||
|
||||
function adjustTopSpace() {
|
||||
|
||||
var height = $( "body > nav" ).height();
|
||||
var space = height + 50;
|
||||
$( "body" ).css( "margin-top", "" + space + "px" );
|
||||
$( "#tree" ).css( "top", "" + space + "px" );
|
||||
};
|
||||
|
||||
$( window ).resize( function () {
|
||||
adjustTopSpace();
|
||||
} );
|
||||
adjustTopSpace();
|
||||
};
|
||||
|
||||
|
||||
@ -173,21 +197,7 @@ var H5ai = function ( options ) {
|
||||
|
||||
this.initTableView = function () {
|
||||
|
||||
function getColumnClass( idx ) {
|
||||
|
||||
if ( idx >= 0 && idx < THIS.config.columnClasses.length ) {
|
||||
return THIS.config.columnClasses[idx];
|
||||
};
|
||||
return "unknown";
|
||||
};
|
||||
|
||||
$( "#table td" ).removeAttr( "align" ).removeAttr( "valign" );
|
||||
$( "#table tr" ).each( function () {
|
||||
var colIdx = 0;
|
||||
$( this ).find( "th,td" ).each( function () {
|
||||
$( this ).addClass( getColumnClass( colIdx++ ) );
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
@ -201,9 +211,10 @@ var H5ai = function ( options ) {
|
||||
var $ul = $( "<ul/>" );
|
||||
|
||||
// headers
|
||||
var $label = $( "th.name a" );
|
||||
var $date = $( "th.date a" );
|
||||
var $size = $( "th.size a" );
|
||||
var $ths = $( "#table th" );
|
||||
var $label = $ths.eq( 1 ).find( "a" );
|
||||
var $date = $ths.eq( 2 ).find( "a" );
|
||||
var $size = $ths.eq( 3 ).find( "a" );
|
||||
var $li = $( "<li class='header' />" ).appendTo( $ul );
|
||||
$( "<a class='icon'></a>" ).appendTo( $li );
|
||||
$( "<a class='label' href='" + $label.attr( "href" ) + "'><span class='l10n-columnName'>" + $label.text() + "</span></a>" ).appendTo( $li );
|
||||
@ -230,31 +241,9 @@ var H5ai = function ( options ) {
|
||||
};
|
||||
|
||||
// entries
|
||||
$( "#table td.name a" ).closest( "tr" ).each( function () {
|
||||
var file = new File( utils, decodeURI( document.location.pathname ), this );
|
||||
|
||||
var $li = $( "<li class='entry' />" ).data( "file", file ).appendTo( $ul );
|
||||
if ( file.isFolder ) {
|
||||
$li.addClass( "folder" )
|
||||
.click( function() {
|
||||
THIS.triggerFolderClick( file );
|
||||
} );
|
||||
} else {
|
||||
$li.addClass( "file" )
|
||||
.click( function() {
|
||||
THIS.triggerFileClick( file );
|
||||
} );
|
||||
};
|
||||
var $a = $( "<a href='" + file.href + "' />" ).appendTo( $li );
|
||||
$( "<span class='icon small'><img src='" + file.icon16 + "' alt='" + file.alt + "' /></span>" ).appendTo( $a );
|
||||
$( "<span class='icon big'><img src='" + file.icon48 + "' alt='" + file.alt + "' /></span>" ).appendTo( $a );
|
||||
var $label = $( "<span class='label'>" + file.label + "</span>" ).appendTo( $a );
|
||||
$( "<span class='date'>" + file.date + "</span>" ).appendTo( $a );
|
||||
$( "<span class='size'>" + file.size + "</span>" ).appendTo( $a );
|
||||
if ( file.isParentFolder ) {
|
||||
$label.addClass( "l10n-parentDirectory" );
|
||||
$li.addClass( "parentfolder" );
|
||||
};
|
||||
$( "#table td" ).closest( "tr" ).each( function () {
|
||||
var path = pathCache.getPathForTableRow( decodeURI( document.location.pathname ), this );
|
||||
$ul.append( path.updateExtendedHtml() );
|
||||
} );
|
||||
|
||||
$( "#extended" ).append( $ul );
|
||||
@ -265,7 +254,7 @@ var H5ai = function ( options ) {
|
||||
};
|
||||
|
||||
// in case of floats
|
||||
$( "#extended" ).append( $( "<div class='clearfix' />" ) );
|
||||
$( "#extended" ).addClass( "clearfix" );
|
||||
};
|
||||
|
||||
|
||||
|
||||
291
src/h5ai/js/inc/path.js
Normal file
291
src/h5ai/js/inc/path.js
Normal file
@ -0,0 +1,291 @@
|
||||
|
||||
|
||||
var PathCache = function ( utils ) {
|
||||
|
||||
this.cache = {};
|
||||
|
||||
|
||||
this.getPathForFolder = function ( folder ) {
|
||||
|
||||
return this.getCachedPath( new Path( utils, folder ) );
|
||||
};
|
||||
|
||||
|
||||
this.getPathForTableRow = function ( parentFolder, tableRow ) {
|
||||
|
||||
return this.getCachedPath( new Path( utils, parentFolder, tableRow ) );
|
||||
};
|
||||
|
||||
|
||||
this.getCachedPath = function ( path ) {
|
||||
|
||||
if ( path.isParentFolder ) {
|
||||
return path;
|
||||
};
|
||||
|
||||
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;
|
||||
return path;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
var Path = function ( utils, folder, tableRow ) {
|
||||
|
||||
var THIS = this;
|
||||
|
||||
if ( ! /\/$/.test( folder ) ) {
|
||||
folder += "/";
|
||||
};
|
||||
|
||||
if ( tableRow !== undefined ) {
|
||||
var $tds = $( tableRow ).find( "td" );
|
||||
var $img = $tds.eq( 0 ).find( "img" );
|
||||
var $a= $tds.eq( 1 ).find( "a" );
|
||||
|
||||
this.parentFolder = folder;
|
||||
this.icon16 = $img.attr( "src" );
|
||||
this.alt = $img.attr( "alt" );
|
||||
this.label = $a.text();
|
||||
this.href = decodeURI( $a.attr("href") );
|
||||
this.date = $tds.eq( 2 ).text();
|
||||
this.size = $tds.eq( 3 ).text();
|
||||
} else {
|
||||
var splits = utils.splitPathname( folder );
|
||||
|
||||
this.parentFolder = splits[0];
|
||||
this.label = splits[1];
|
||||
this.icon16 = "/h5ai/icons/16x16/folder.png";
|
||||
this.alt = "[DIR]";
|
||||
this.href = this.label;
|
||||
this.date = "";
|
||||
this.size = "";
|
||||
if ( this.label === "/" ) {
|
||||
this.label = document.domain + "/";
|
||||
};
|
||||
};
|
||||
|
||||
if ( /\/$/.test( this.label ) ) {
|
||||
this.label = this.label.slice( 0, -1 );
|
||||
};
|
||||
|
||||
this.icon48 = this.icon16.replace( "16x16", "48x48" );
|
||||
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 );
|
||||
|
||||
if ( this.isParentFolder && h5ai.config.setParentFolderLabels ) {
|
||||
if ( this.absHref === "/" ) {
|
||||
this.label = decodeURI( document.domain );
|
||||
} else {
|
||||
this.label = utils.splitPathname( utils.splitPathname( this.parentFolder )[0] )[1].slice( 0, -1 );
|
||||
};
|
||||
};
|
||||
|
||||
this.status = undefined; // undefined, "h5ai" or HTTP response code
|
||||
this.content = undefined; // associative array path.absHref -> path
|
||||
this.html = {
|
||||
$crumb: undefined,
|
||||
$extended: undefined,
|
||||
$tree: undefined
|
||||
};
|
||||
|
||||
|
||||
this.isEmpty = function() {
|
||||
|
||||
if ( this.content === undefined ) {
|
||||
return true;
|
||||
};
|
||||
for ( var prop in this.content ) {
|
||||
if( this.content.hasOwnProperty( prop ) ) {
|
||||
return false;
|
||||
};
|
||||
};
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
this.updateHtml = function () {
|
||||
|
||||
this.updateCrumbHtml();
|
||||
this.updateExtendedHtml();
|
||||
this.updateTreeHtml();
|
||||
};
|
||||
|
||||
|
||||
this.updateCrumbHtml = function () {
|
||||
|
||||
var $html = $( "<li class='crumb' />" ).data( "path", this );
|
||||
|
||||
try {
|
||||
var $a = $( "<a href='" + this.absHref + "'><img src='/h5ai/images/crumb.png' alt='>' />" + this.label + "</a>" );
|
||||
$html.append( $a );
|
||||
|
||||
if ( !isNaN( this.status ) ) {
|
||||
if ( this.status === 200 ) {
|
||||
$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
|
||||
} else {
|
||||
$( "<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 );
|
||||
};
|
||||
|
||||
if ( this.html.$crumb !== undefined ) {
|
||||
this.html.$crumb.replaceWith( $html );
|
||||
};
|
||||
this.html.$crumb = $html;
|
||||
|
||||
return $html;
|
||||
};
|
||||
|
||||
|
||||
this.updateExtendedHtml = function () {
|
||||
|
||||
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 );
|
||||
} );
|
||||
};
|
||||
var $a = $( "<a href='" + this.href + "' />" ).appendTo( $html );
|
||||
$( "<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 );
|
||||
$( "<span class='date'>" + this.date + "</span>" ).appendTo( $a );
|
||||
$( "<span class='size'>" + this.size + "</span>" ).appendTo( $a );
|
||||
|
||||
if ( this.isParentFolder ) {
|
||||
if ( !h5ai.config.setParentFolderLabels ) {
|
||||
$label.addClass( "l10n-parentDirectory" );
|
||||
};
|
||||
$html.addClass( "parentfolder" );
|
||||
};
|
||||
|
||||
if ( !isNaN( this.status ) ) {
|
||||
if ( this.status === 200 ) {
|
||||
$html.addClass( "page" );
|
||||
$a.find( ".icon.small img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
|
||||
$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>" ) );
|
||||
};
|
||||
};
|
||||
} catch( err ) {
|
||||
console.log( "updateExtendedHtml failed", err );
|
||||
$( "<span class='fail'>failed</span>" ).appendTo( $html );
|
||||
};
|
||||
|
||||
if ( this.html.$extended !== undefined ) {
|
||||
this.html.$extended.replaceWith( $html );
|
||||
};
|
||||
this.html.$extended = $html;
|
||||
|
||||
return $html;
|
||||
};
|
||||
|
||||
|
||||
this.updateTreeHtml = function () {
|
||||
|
||||
var $html = $( "<div class='entry' />" ).data( "path", this );
|
||||
var $blank = $( "<span class='blank' />" ).appendTo( $html );
|
||||
|
||||
try {
|
||||
var $a = $( "<a href='" + this.absHref + "' />" )
|
||||
.appendTo( $html )
|
||||
.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
|
||||
.append( $( "<span class='label'>" + this.label + "</span>" ) );
|
||||
|
||||
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 {
|
||||
$indicator.addClass( "open" );
|
||||
};
|
||||
$indicator.click( function( event ) {
|
||||
if ( $indicator.hasClass( "unknown" ) ) {
|
||||
tree.fetchPath( THIS.absHref, function ( path ) {
|
||||
$html.replaceWith( path.updateTreeHtml() );
|
||||
} );
|
||||
} else if ( $indicator.hasClass( "open" ) ) {
|
||||
$indicator.removeClass( "open" );
|
||||
$html.find( "> ul.content" ).slideUp();
|
||||
} else {
|
||||
$indicator.addClass( "open" );
|
||||
$html.find( "> ul.content" ).slideDown();
|
||||
};
|
||||
} );
|
||||
$blank.replaceWith( $indicator );
|
||||
};
|
||||
|
||||
// is this the current folder?
|
||||
if ( this.isCurrentFolder ) {
|
||||
$html.addClass( "current" );
|
||||
$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-open.png" );
|
||||
};
|
||||
|
||||
// does it have subfolders?
|
||||
if ( !this.isEmpty() ) {
|
||||
var $ul = $( "<ul class='content' />" ).appendTo( $html );
|
||||
for ( idx in this.content ) {
|
||||
$( "<li />" ).append( this.content[idx].updateTreeHtml() ).appendTo( $ul );
|
||||
};
|
||||
};
|
||||
|
||||
// reflect folder status
|
||||
if ( !isNaN( this.status ) ) {
|
||||
if ( this.status === 200 ) {
|
||||
$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
|
||||
$a.append( $( "<span class='hint'><img src='/h5ai/images/page.png' /></span>" ) );
|
||||
} else {
|
||||
$html.addClass( "error" );
|
||||
$a.append( $( "<span class='hint'>" + this.status + "</span>" ) );
|
||||
};
|
||||
};
|
||||
|
||||
} else {
|
||||
$html.addClass( "file" );
|
||||
};
|
||||
} catch( err ) {
|
||||
console.log( "updateTreeHtml failed", err );
|
||||
$( "<span class='fail'>failed</span>" ).appendTo( $html );
|
||||
};
|
||||
|
||||
if ( this.html.$tree !== undefined ) {
|
||||
this.html.$tree.replaceWith( $html );
|
||||
};
|
||||
this.html.$tree = $html;
|
||||
|
||||
return $html;
|
||||
};
|
||||
};
|
||||
@ -7,57 +7,30 @@ var Tree = function ( utils, h5ai ) {
|
||||
this.init = function () {
|
||||
|
||||
if ( h5ai.config.showTree ) {
|
||||
this.checkCrumb();
|
||||
this.checkCurrentFolder();
|
||||
this.updatePaths();
|
||||
this.populateTree();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
this.checkCrumb = function () {
|
||||
this.updatePath = function ( path ) {
|
||||
|
||||
$( "li.crumb a" ).each( function() {
|
||||
|
||||
var $a = $( this );
|
||||
var pathname = $a.attr( "href" );
|
||||
THIS.checkPathname( pathname, function ( status ) {
|
||||
if ( !isNaN( status ) ) {
|
||||
if ( status === 200 ) {
|
||||
$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
|
||||
} else {
|
||||
$( "<span class='hint'>(" + status + ")</span>" ).appendTo( $a );
|
||||
};
|
||||
if ( path.isFolder && !path.isParentFolder && path.status === undefined ) {
|
||||
this.fetchStatus( path.absHref, function ( status ) {
|
||||
if ( status !== "h5ai" ) {
|
||||
path.status = status;
|
||||
};
|
||||
path.updateHtml();
|
||||
} );
|
||||
} );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
this.checkCurrentFolder = function () {
|
||||
this.updatePaths = function () {
|
||||
|
||||
$( "#extended li.entry.folder" ).each( function() {
|
||||
|
||||
var $entry = $( this );
|
||||
if ( $entry.hasClass( "parentfolder" ) ) {
|
||||
return;
|
||||
};
|
||||
|
||||
var $a = $entry.find( "a" );
|
||||
var pathname = decodeURI( document.location.pathname ) + $a.attr( "href" );
|
||||
THIS.checkPathname( pathname, function ( status ) {
|
||||
if ( !isNaN( status ) ) {
|
||||
if ( status === 200 ) {
|
||||
$a.find( ".icon.small img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
|
||||
$a.find( ".icon.big img" ).attr( "src", "/h5ai/icons/48x48/folder-page.png" );
|
||||
} else {
|
||||
$entry.addClass( "error" );
|
||||
$a.find( ".label" )
|
||||
.append( " " )
|
||||
.append( $( "<span class='hint'>" + status + "</span>" ) );
|
||||
};
|
||||
};
|
||||
} );
|
||||
} );
|
||||
for ( var ref in pathCache.cache ) {
|
||||
this.updatePath( pathCache.cache[ref] );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -73,59 +46,47 @@ var Tree = function ( utils, h5ai ) {
|
||||
};
|
||||
};
|
||||
|
||||
$tree.hover(
|
||||
function () {
|
||||
shiftTree( true );
|
||||
},
|
||||
function () {
|
||||
shiftTree();
|
||||
}
|
||||
);
|
||||
$tree.hover( function () { shiftTree( true ); }, function () { shiftTree(); } );
|
||||
$( window ).resize( function() { shiftTree(); } );
|
||||
|
||||
$( window ).resize( function() {
|
||||
shiftTree();
|
||||
} );
|
||||
|
||||
this.fetchTree( decodeURI( document.location.pathname ), function( entry ) {
|
||||
$tree.append( entry.updateTreeHtml() );
|
||||
this.fetchTree( decodeURI( document.location.pathname ), function( path ) {
|
||||
$tree.append( path.updateTreeHtml() );
|
||||
shiftTree();
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
this.fetchTree = function ( pathname, callback, child ) {
|
||||
this.fetchTree = function ( pathname, callback, childPath ) {
|
||||
|
||||
this.fetchEntry( pathname, function ( entry ) {
|
||||
if ( child !== undefined ) {
|
||||
entry.content[ child.absHref ] = child;
|
||||
this.fetchPath( pathname, function ( path ) {
|
||||
if ( childPath !== undefined ) {
|
||||
path.content[ childPath.absHref ] = childPath;
|
||||
};
|
||||
|
||||
var parent = utils.splitPathname( pathname )[0];
|
||||
if ( parent === "" ) {
|
||||
callback( entry );
|
||||
callback( path );
|
||||
} else {
|
||||
THIS.fetchTree( parent, callback, entry );
|
||||
THIS.fetchTree( parent, callback, path );
|
||||
};
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
this.fetchEntry = function ( pathname, callback ) {
|
||||
this.fetchPath = function ( pathname, callback ) {
|
||||
|
||||
this.fetchEntries( pathname, false, function ( status, entries ) {
|
||||
var entry = new File( utils, pathname );
|
||||
entry.status = status;
|
||||
entry.content = entries;
|
||||
callback( entry );
|
||||
this.fetchStatusAndContent( pathname, false, function ( status, content ) {
|
||||
var path = pathCache.getPathForFolder( pathname );
|
||||
path.status = status;
|
||||
path.content = content;
|
||||
callback( path );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
this.fetchEntries = function ( pathname, includeParent, callback ) {
|
||||
this.fetchStatusAndContent = function ( pathname, includeParent, callback ) {
|
||||
|
||||
this.checkPathname( pathname, function ( status ) {
|
||||
|
||||
console.log( "checkPathname", pathname, status );
|
||||
this.fetchStatus( pathname, function ( status ) {
|
||||
|
||||
if ( status !== "h5ai" ) {
|
||||
callback( status, {} );
|
||||
@ -145,35 +106,30 @@ var Tree = function ( utils, h5ai ) {
|
||||
return;
|
||||
};
|
||||
|
||||
var entries = {};
|
||||
$( html ).find( "#table table td" ).closest( "tr" ).each( function () {
|
||||
var entry = new File( utils, pathname, this );
|
||||
if ( entry.isFolder && ( !entry.isParentFolder || includeParent ) ) {
|
||||
entries[ entry.absHref ] = entry;
|
||||
THIS.checkPathname( entry.absHref, function ( status ) {
|
||||
if ( status !== "h5ai" ) {
|
||||
entry.status = status;
|
||||
entry.updateTreeHtml();
|
||||
};
|
||||
} );
|
||||
var content = {};
|
||||
$( html ).find( "#table td" ).closest( "tr" ).each( function () {
|
||||
var path = pathCache.getPathForTableRow( pathname, this );
|
||||
if ( path.isFolder && ( !path.isParentFolder || includeParent ) ) {
|
||||
content[path.absHref] = path;
|
||||
THIS.updatePath( path );
|
||||
};
|
||||
} );
|
||||
callback( "h5ai", entries );
|
||||
callback( "h5ai", content );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
var pathnameCache = {};
|
||||
|
||||
this.checkPathname = function ( pathname, callback ) {
|
||||
var pathnameStatusCache = {};
|
||||
|
||||
this.fetchStatus = function ( pathname, callback ) {
|
||||
|
||||
if ( h5ai.config.folderStatus[ pathname ] !== undefined ) {
|
||||
callback( h5ai.config.folderStatus[ pathname ] );
|
||||
return;
|
||||
} else if ( pathnameCache[ pathname ] !== undefined ) {
|
||||
callback( pathnameCache[ pathname ] );
|
||||
} else if ( pathnameStatusCache[ pathname ] !== undefined ) {
|
||||
callback( pathnameStatusCache[ pathname ] );
|
||||
return;
|
||||
};
|
||||
|
||||
@ -185,7 +141,7 @@ var Tree = function ( utils, h5ai ) {
|
||||
if ( status === 200 && contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
|
||||
status = "h5ai";
|
||||
};
|
||||
pathnameCache[ pathname ] = status;
|
||||
pathnameStatusCache[ pathname ] = status;
|
||||
callback( status );
|
||||
}
|
||||
} );
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
// @include "inc/utils.js"
|
||||
// @include "inc/h5ai.js"
|
||||
// @include "inc/file.js"
|
||||
// @include "inc/path.js"
|
||||
// @include "inc/tree.js"
|
||||
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
*******************************/
|
||||
|
||||
var utils = new Utils();
|
||||
var h5ai = new H5ai( h5aiOptions );
|
||||
var pathCache = new PathCache( utils );
|
||||
var h5ai = new H5ai( h5aiOptions, h5aiLangs );
|
||||
var tree = new Tree( utils, h5ai );
|
||||
|
||||
|
||||
|
||||
@ -51,7 +51,12 @@ h5aiOptions = {
|
||||
/*
|
||||
* Try to use browser language, falls back to previous specified lang.
|
||||
*/
|
||||
useBrowserLang: true
|
||||
useBrowserLang: true,
|
||||
|
||||
/*
|
||||
* Set parent folder labels to real folder names.
|
||||
*/
|
||||
setParentFolderLabels: true
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
################################
|
||||
# h5ai 0.7
|
||||
# h5ai 0.8
|
||||
# customized .htaccess
|
||||
################################
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
|
||||
IndexOrderDefault Ascending Name
|
||||
|
||||
IndexOptions Type=text/html;h5ai=0.7
|
||||
IndexOptions Type=text/html;h5ai=0.8
|
||||
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.7">h5ai</a>
|
||||
<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.8">h5ai</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.7">
|
||||
<meta name="h5ai-version" content="h5ai 0.8">
|
||||
<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">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* h5ai 0.7
|
||||
* h5ai 0.8
|
||||
* Options and localization
|
||||
*/
|
||||
|
||||
@ -51,7 +51,12 @@ h5aiOptions = {
|
||||
/*
|
||||
* Try to use browser language, falls back to previous specified lang.
|
||||
*/
|
||||
useBrowserLang: true
|
||||
useBrowserLang: true,
|
||||
|
||||
/*
|
||||
* Set parent folder labels to real folder names.
|
||||
*/
|
||||
setParentFolderLabels: true
|
||||
};
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user