mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-30 06:55:16 -04:00
Improved preformance for large directories. Changed build process.
This commit is contained in:
Lars Jung
parent
2e179df6e5
commit
5db74d054f
157 changed files with 150 additions and 440 deletions
|
|
@ -28,8 +28,7 @@ var H5ai = function ( options, langs, pathCache ) {
|
|||
};
|
||||
this.config = $.extend( {}, defaults, options );
|
||||
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* public api
|
||||
*******************************/
|
||||
|
|
@ -93,7 +92,7 @@ var H5ai = function ( options, langs, pathCache ) {
|
|||
};
|
||||
viewmode = this.getViewmode();
|
||||
|
||||
$( "body > nav li.view" ).hide().removeClass( "current" );
|
||||
$( "#viewdetails,#viewicons" ).hide().removeClass( "current" );
|
||||
|
||||
if ( this.config.viewmodes.length > 1 ) {
|
||||
if ( $.inArray( "details", this.config.viewmodes ) >= 0 ) {
|
||||
|
|
@ -106,14 +105,11 @@ var H5ai = function ( options, langs, pathCache ) {
|
|||
|
||||
if ( viewmode === "details" ) {
|
||||
$( "#viewdetails" ).closest( "li" ).addClass( "current" );
|
||||
$( "#table" ).hide();
|
||||
$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
|
||||
} else if ( viewmode === "icons" ) {
|
||||
$( "#viewicons" ).closest( "li" ).addClass( "current" );
|
||||
$( "#table" ).hide();
|
||||
$( "#extended" ).removeClass( "details-view" ).addClass( "icons-view" ).show();
|
||||
} else {
|
||||
$( "#table" ).show();
|
||||
$( "#extended" ).hide();
|
||||
};
|
||||
};
|
||||
|
|
@ -179,17 +175,6 @@ var H5ai = function ( options, langs, pathCache ) {
|
|||
|
||||
|
||||
|
||||
/*******************************
|
||||
* table view
|
||||
*******************************/
|
||||
|
||||
this.initTableView = function () {
|
||||
|
||||
$( "#table td" ).removeAttr( "align" ).removeAttr( "valign" );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* extended view
|
||||
*******************************/
|
||||
|
|
@ -228,14 +213,17 @@ var H5ai = function ( options, langs, pathCache ) {
|
|||
$li.find( "a.size" ).prepend( $icon );
|
||||
};
|
||||
|
||||
$.timer.log( "start entries" );
|
||||
// entries
|
||||
$( "#table td" ).closest( "tr" ).each( function () {
|
||||
var path = pathCache.getPathForTableRow( document.location.pathname, this );
|
||||
$ul.append( path.updateExtendedHtml() );
|
||||
} );
|
||||
$.timer.log( "end entries" );
|
||||
$( "#table" ).remove();
|
||||
|
||||
$( "#extended" ).append( $ul );
|
||||
console.log( "folders", $( "#extended .folder" ).size() , "files", $( "#extended .file" ).size() );
|
||||
|
||||
// empty
|
||||
if ( $ul.children( ".entry:not(.parentfolder)" ).size() === 0 ) {
|
||||
|
|
@ -254,7 +242,6 @@ var H5ai = function ( options, langs, pathCache ) {
|
|||
|
||||
this.initViews = function () {
|
||||
|
||||
this.initTableView();
|
||||
this.initExtendedView();
|
||||
|
||||
$( "#viewdetails" ).closest( "li" )
|
||||
|
|
|
|||
|
|
@ -1,45 +1,42 @@
|
|||
|
||||
var pathnameSplitRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
|
||||
var pathEndsWithSlashRegEx = /\/$/;
|
||||
|
||||
var PathCache = function () {
|
||||
|
||||
|
||||
var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
|
||||
|
||||
this.cache = {};
|
||||
this.objectCache = {};
|
||||
|
||||
|
||||
this.splitPathname = function ( pathname ) {
|
||||
|
||||
if ( pathname === "/" ) {
|
||||
return [ "", "/" ];
|
||||
};
|
||||
var match = pathnameRegEx.exec( pathname );
|
||||
var match = pathnameSplitRegEx.exec( pathname );
|
||||
return [ match[1], match[3] ];
|
||||
};
|
||||
|
||||
|
||||
this.cache = {};
|
||||
|
||||
|
||||
|
||||
|
||||
this.loadCache = function () {
|
||||
|
||||
var json = localStorage.getItem( "h5ai.cache" );
|
||||
var objs = $.evalJSON( json );
|
||||
var cache = {};
|
||||
var objectCache = {};
|
||||
for ( idx in objs ) {
|
||||
var obj = objs[idx];
|
||||
var path = this.objectToPath( obj );
|
||||
cache[path.absHref] = path;
|
||||
objectCache[obj.r] = obj;
|
||||
};
|
||||
return cache;
|
||||
return objectCache;
|
||||
};
|
||||
|
||||
|
||||
this.storeCache = function () {
|
||||
|
||||
var objs = [];
|
||||
for ( ref in this.cache ) {
|
||||
var path = this.cache[ref];
|
||||
if ( path.isFolder ) {
|
||||
objs.push( this.pathToObject( path ) );
|
||||
};
|
||||
for ( ref in this.objectCache ) {
|
||||
objs.push( this.objectCache[ref] );
|
||||
};
|
||||
var json = $.toJSON( objs );
|
||||
localStorage.setItem( "h5ai.cache", json );
|
||||
|
|
@ -77,45 +74,103 @@ var PathCache = function () {
|
|||
};
|
||||
return path;
|
||||
};
|
||||
|
||||
|
||||
|
||||
this.getAbsHref = function ( folder, tableRow ) {
|
||||
|
||||
if ( ! pathEndsWithSlashRegEx.test( folder ) ) {
|
||||
folder += "/";
|
||||
};
|
||||
|
||||
if ( tableRow === undefined ) {
|
||||
return folder;
|
||||
};
|
||||
|
||||
var $a = $( tableRow ).find( "td" ).eq( 1 ).find( "a" );
|
||||
var isParentFolder = ( $a.text() === "Parent Directory" );
|
||||
var href = $a.attr( "href" );
|
||||
return isParentFolder ? undefined : folder + href;
|
||||
};
|
||||
|
||||
|
||||
this.getPathForFolder = function ( folder ) {
|
||||
|
||||
return this.getCachedPath( new Path( this, folder ) );
|
||||
var absHref = this.getAbsHref( folder );
|
||||
|
||||
var cachedPath = this.cache[absHref];
|
||||
if ( cachedPath !== undefined ) {
|
||||
return cachedPath;
|
||||
};
|
||||
|
||||
var path = new Path( this, folder );
|
||||
this.cache[path.absHref] = path;
|
||||
|
||||
var obj = this.objectCache[absHref];
|
||||
if ( obj !== undefined ) {
|
||||
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 );
|
||||
};
|
||||
} else {
|
||||
var obj = this.pathToObject( path );
|
||||
this.objectCache[obj.r] = obj;
|
||||
this.storeCache();
|
||||
};
|
||||
|
||||
return path;
|
||||
};
|
||||
|
||||
|
||||
this.getPathForTableRow = function ( parentFolder, tableRow ) {
|
||||
|
||||
return this.getCachedPath( new Path( this, parentFolder, tableRow ) );
|
||||
};
|
||||
|
||||
|
||||
this.getCachedPath = function ( path ) {
|
||||
|
||||
if ( path.isParentFolder ) {
|
||||
return path;
|
||||
};
|
||||
|
||||
var cachedPath = this.cache[path.absHref];
|
||||
var absHref = this.getAbsHref( parentFolder, tableRow );
|
||||
|
||||
var cachedPath = this.cache[absHref];
|
||||
if ( cachedPath !== undefined ) {
|
||||
return cachedPath;
|
||||
};
|
||||
|
||||
var path = new Path( this, parentFolder, tableRow );
|
||||
if ( ! path.isParentFolder ) {
|
||||
this.cache[path.absHref] = path;
|
||||
|
||||
var obj = this.objectCache[absHref];
|
||||
if ( obj !== undefined ) {
|
||||
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 );
|
||||
};
|
||||
} else {
|
||||
if ( path.isFolder && path.status !== undefined ) {
|
||||
var obj = this.pathToObject( path );
|
||||
this.objectCache[obj.r] = obj;
|
||||
this.storeCache();
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
this.cache[path.absHref] = path;
|
||||
this.storeCache();
|
||||
return path;
|
||||
};
|
||||
|
||||
this.cache = this.loadCache();
|
||||
|
||||
this.objectCache = this.loadCache();
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var Path = function ( pathCache, folder, tableRow ) {
|
||||
|
||||
if ( ! /\/$/.test( folder ) ) {
|
||||
if ( ! pathEndsWithSlashRegEx.test( folder ) ) {
|
||||
folder += "/";
|
||||
};
|
||||
|
||||
|
|
@ -128,7 +183,7 @@ var Path = function ( pathCache, folder, tableRow ) {
|
|||
this.icon16 = $img.attr( "src" );
|
||||
this.alt = $img.attr( "alt" );
|
||||
this.label = $a.text();
|
||||
this.href = $a.attr("href"); //decodeURI( $a.attr("href") );
|
||||
this.href = $a.attr("href");
|
||||
this.date = $tds.eq( 2 ).text();
|
||||
this.size = $tds.eq( 3 ).text();
|
||||
} else {
|
||||
|
|
@ -146,7 +201,7 @@ var Path = function ( pathCache, folder, tableRow ) {
|
|||
};
|
||||
};
|
||||
|
||||
if ( /\/$/.test( this.label ) ) {
|
||||
if ( pathEndsWithSlashRegEx.test( this.label ) ) {
|
||||
this.label = this.label.slice( 0, -1 );
|
||||
};
|
||||
|
||||
|
|
@ -223,7 +278,14 @@ var Path = function ( pathCache, folder, tableRow ) {
|
|||
|
||||
this.updateCrumbHtml = function () {
|
||||
|
||||
if ( this.html.$crumb !== undefined && this.html.$crumb.data( "status" ) === this.status ) {
|
||||
return this.html.$crumb;
|
||||
};
|
||||
|
||||
var $html = $( "<li class='crumb' />" ).data( "path", this );
|
||||
if ( this.status !== undefined ) {
|
||||
$html.data( "status", this.status );
|
||||
};
|
||||
|
||||
try {
|
||||
$html.addClass( this.isFolder ? "folder" : "file" );
|
||||
|
|
@ -264,7 +326,14 @@ var Path = function ( pathCache, folder, tableRow ) {
|
|||
|
||||
this.updateExtendedHtml = function () {
|
||||
|
||||
if ( this.html.$extended !== undefined && this.html.$extended.data( "status" ) === this.status ) {
|
||||
return this.html.$extended;
|
||||
};
|
||||
|
||||
var $html = $( "<li class='entry' />" ).data( "path", this );
|
||||
if ( this.status !== undefined ) {
|
||||
$html.data( "status", this.status );
|
||||
};
|
||||
|
||||
try {
|
||||
$html.addClass( this.isFolder ? "folder" : "file" );
|
||||
|
|
@ -339,6 +408,7 @@ var Path = function ( pathCache, folder, tableRow ) {
|
|||
this.status = status;
|
||||
this.content = content;
|
||||
this.treeOpen = true;
|
||||
pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
|
||||
$( "#tree" ).get( 0 ).updateScrollbar( true );
|
||||
this.updateTreeHtml( function() {
|
||||
$( "#tree" ).get( 0 ).updateScrollbar();
|
||||
|
|
@ -346,6 +416,7 @@ var Path = function ( pathCache, folder, tableRow ) {
|
|||
}, this ) );
|
||||
} else if ( $indicator.hasClass( "open" ) ) {
|
||||
this.treeOpen = false;
|
||||
pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
|
||||
$indicator.removeClass( "open" );
|
||||
$( "#tree" ).get( 0 ).updateScrollbar( true );
|
||||
$html.find( "> ul.content" ).slideUp( function() {
|
||||
|
|
@ -353,6 +424,7 @@ var Path = function ( pathCache, folder, tableRow ) {
|
|||
} );
|
||||
} else {
|
||||
this.treeOpen = true;
|
||||
pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
|
||||
$indicator.addClass( "open" );
|
||||
$( "#tree" ).get( 0 ).updateScrollbar( true );
|
||||
$html.find( "> ul.content" ).slideDown( function() {
|
||||
|
|
|
|||
|
|
@ -6,12 +6,27 @@
|
|||
// @include "inc/h5ai.js"
|
||||
// @include "inc/tree.js"
|
||||
|
||||
|
||||
var Timer = function () {
|
||||
|
||||
this.start = new Date().getTime();;
|
||||
this.last = this.start;
|
||||
this.log = function ( label ) {
|
||||
var now = new Date().getTime();
|
||||
console.log( "timer", label, "+" + (now - this.last), "=" + (now - this.start) );
|
||||
this.last = now;
|
||||
};
|
||||
};
|
||||
$.timer = new Timer();
|
||||
|
||||
|
||||
/*******************************
|
||||
* create
|
||||
*******************************/
|
||||
|
||||
$.timer.log( "start pathcache" );
|
||||
var pathCache = new PathCache();
|
||||
$.timer.log( "end pathcache" );
|
||||
var h5ai = new H5ai( h5aiOptions, h5aiLangs, pathCache );
|
||||
var tree = new Tree( pathCache, h5ai );
|
||||
|
||||
|
|
@ -30,11 +45,12 @@
|
|||
|
||||
$( function() {
|
||||
h5ai.init();
|
||||
tree.init();
|
||||
tree.init();
|
||||
|
||||
// just for testing, resets the local cache /////////
|
||||
$( ".l10n-footerUsing" ).click( function () {
|
||||
pathCache.cache = {};
|
||||
pathCache.objectCache = {};
|
||||
pathCache.storeCache();
|
||||
} );
|
||||
/////////////////////////////////////////////////////
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue