mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-04-13 09:01:52 +02:00
Added tree sidebar.
This commit is contained in:
Lars Jung
parent
13ddb670b8
commit
067e0970f8
@ -1,4 +1,4 @@
|
||||
# h5ai v0.4   ·   a beautified Apache index
|
||||
# h5ai v0.5   ·   a beautified Apache index
|
||||
|
||||
|
||||
## Screenshots
|
||||
@ -47,6 +47,13 @@ please respect their rights.
|
||||
|
||||
## Changelog
|
||||
|
||||
### v0.5
|
||||
*2011-07-01*
|
||||
|
||||
* added tree sidebar
|
||||
* some refactorings
|
||||
|
||||
|
||||
### v0.4
|
||||
*2011-06-27*
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ custom = true
|
||||
|
||||
# project
|
||||
project.name = h5ai
|
||||
project.version = 0.4
|
||||
project.version = 0.5
|
||||
|
||||
|
||||
# src
|
||||
|
||||
@ -1,86 +1,82 @@
|
||||
|
||||
#extended.details-view {
|
||||
display: none;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
li.header a {
|
||||
padding-bottom: 18px;
|
||||
color: #555;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
.transition( all 0.2s ease-in-out );
|
||||
|
||||
&:visited {
|
||||
color: #555;
|
||||
}
|
||||
&:hover {
|
||||
color: #555;
|
||||
opacity: 0.9;
|
||||
}
|
||||
img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
li.entry {
|
||||
display: block;
|
||||
border-bottom: 1px solid #ddd;
|
||||
&:first-child {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
a, a:hover {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #f0f0f0;
|
||||
color: #e80;
|
||||
li {
|
||||
white-space: nowrap;
|
||||
|
||||
&.header a {
|
||||
padding-bottom: 18px;
|
||||
color: #555;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
.transition( all 0.2s ease-in-out );
|
||||
|
||||
&:visited {
|
||||
color: #555;
|
||||
}
|
||||
&:hover {
|
||||
color: #555;
|
||||
opacity: 0.9;
|
||||
}
|
||||
img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
&.entry {
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f6f6f6;
|
||||
color: #e80;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon, .label, .date, .size {
|
||||
display: inline-block;
|
||||
padding: 3px 6px 6px 6px;
|
||||
text-align: left;
|
||||
}
|
||||
.icon {
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
|
||||
img {
|
||||
padding-top: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.icon.big {
|
||||
display: none;
|
||||
}
|
||||
.label {
|
||||
width: 682px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.date {
|
||||
text-align: right;
|
||||
width: 160px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.size {
|
||||
text-align: right;
|
||||
width: 70px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon, .label, .date, .size {
|
||||
display: inline-block;
|
||||
padding: 3px 6px 6px 6px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
}
|
||||
.icon {
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
|
||||
img {
|
||||
padding-top: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.icon.big {
|
||||
display: none;
|
||||
}
|
||||
.label {
|
||||
width: 682px;
|
||||
max-width: 682px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.date {
|
||||
text-align: right;
|
||||
width: 160px;
|
||||
min-width: 160px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.size {
|
||||
text-align: right;
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
margin: 50px 0;
|
||||
@ -101,48 +97,54 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
li.header {
|
||||
display: none;
|
||||
}
|
||||
li.entry {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
|
||||
&:hover {
|
||||
color: #e80;
|
||||
border-color: #eee;
|
||||
.box-shadow( 0, 0, 20px, #999 );
|
||||
li {
|
||||
&.header {
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 8px;
|
||||
&.entry {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 2px solid rgba(0,0,0,0);
|
||||
|
||||
&:hover {
|
||||
color: #e80;
|
||||
border-color: #eee;
|
||||
background-color: #f6f6f6;
|
||||
//.box-shadow( 0, 0, 20px, #999 );
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.icon.small {
|
||||
display: none;
|
||||
}
|
||||
.label {
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.date, .size {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon.small {
|
||||
display: none;
|
||||
}
|
||||
.label {
|
||||
display: block;
|
||||
}
|
||||
.date, .size {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
|
||||
@ -6,20 +6,6 @@
|
||||
}
|
||||
|
||||
|
||||
.border-top-right-radius ( @radius: 5px ) {
|
||||
-moz-border-radius-topright: @radius;
|
||||
-webkit-border-top-right-radius: @radius;
|
||||
border-top-right-radius: @radius;
|
||||
}
|
||||
|
||||
|
||||
.border-bottom-right-radius ( @radius: 5px ) {
|
||||
-moz-border-radius-bottomright: @radius;
|
||||
-webkit-border-bottom-right-radius: @radius;
|
||||
border-bottom-right-radius: @radius;
|
||||
}
|
||||
|
||||
|
||||
.box-shadow ( @x: 10px, @y: 10px, @blur: 5px, @color: #ccc ) {
|
||||
-moz-box-shadow: @x @y @blur @color;
|
||||
-webkit-box-shadow: @x @y @blur @color;
|
||||
@ -50,46 +36,3 @@
|
||||
background-size: @size;
|
||||
}
|
||||
|
||||
|
||||
.rhythm ( @height, @size ) {
|
||||
|
||||
@base: @size / 16;
|
||||
font-size: 1% * @base * 100;
|
||||
@factor: @height / @size;
|
||||
@rhythm: 1em * @factor;
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
line-height: @rhythm;
|
||||
margin-top: @rhythm;
|
||||
margin-bottom: @rhythm;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: @rhythm;
|
||||
line-height: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: @rhythm / 1.1;
|
||||
line-height: 1.1em;
|
||||
margin-bottom: 1.1em;
|
||||
margin-top: 1.1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: @rhythm / 1.2;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1.2em;
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: @rhythm / 1.3;
|
||||
line-height: 1.3em;
|
||||
margin-bottom: 1.3em;
|
||||
margin-top: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
71
src/h5ai/css/inc/tree.less
Normal file
71
src/h5ai/css/inc/tree.less
Normal file
@ -0,0 +1,71 @@
|
||||
|
||||
#tree {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 80px;
|
||||
font-size: 0.85em;
|
||||
padding: 16px 32px 16px 16px;
|
||||
background-color: rgb(240,240,240);
|
||||
border: 1px solid rgb(225,225,225);
|
||||
border-left: none;
|
||||
.border-radius ( 0 15px 15px 0 );
|
||||
.box-shadow( 0, 0, 30px, #999 );
|
||||
|
||||
.entry {
|
||||
> a, > a.visited {
|
||||
padding: 4px 6px;
|
||||
border: 1px solid rgba(0,0,0,0);
|
||||
.border-radius( 5px );
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
.label {
|
||||
display: inline-block;
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
.hint {
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
font-style: italic;
|
||||
color: #ccc;
|
||||
img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
.error {
|
||||
color: #c55;
|
||||
}
|
||||
}
|
||||
&.current {
|
||||
> a, > a:visited {
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.notListable {
|
||||
> a, > a:visited {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -58,14 +58,29 @@ body > nav {
|
||||
&.crumb {
|
||||
float: left;
|
||||
border-right: 1px dotted rgb(225,225,225);
|
||||
.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 dotted rgb(225,225,225);
|
||||
}
|
||||
&:hover, &:hover a {
|
||||
color: #e80;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
color: #e80;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
@ -105,6 +120,7 @@ body > nav {
|
||||
|
||||
@import "inc/table";
|
||||
@import "inc/extended";
|
||||
@import "inc/tree";
|
||||
|
||||
|
||||
body > footer {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<section id="extended"></section>
|
||||
<footer></footer>
|
||||
</section>
|
||||
<section id="tree"></section>
|
||||
<footer>
|
||||
<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
|
||||
<img class="logo" src="/h5ai/images/html5.png" alt="html5" />
|
||||
|
||||
BIN
src/h5ai/images/folder-closed.png
Normal file
BIN
src/h5ai/images/folder-closed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 409 B |
BIN
src/h5ai/images/folder-open.png
Normal file
BIN
src/h5ai/images/folder-open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 441 B |
BIN
src/h5ai/images/folder-page.png
Normal file
BIN
src/h5ai/images/folder-page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 587 B |
BIN
src/h5ai/images/folder-page2.png
Normal file
BIN
src/h5ai/images/folder-page2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 697 B |
BIN
src/h5ai/images/loading.png
Normal file
BIN
src/h5ai/images/loading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 649 B |
BIN
src/h5ai/images/page.png
Normal file
BIN
src/h5ai/images/page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 706 B |
326
src/h5ai/js/inc/h5ai.js
Normal file
326
src/h5ai/js/inc/h5ai.js
Normal file
@ -0,0 +1,326 @@
|
||||
( function( $ ) {
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* init after dom load
|
||||
*******************************/
|
||||
|
||||
$( function() {
|
||||
|
||||
$.h5ai = new H5ai();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
H5ai = function ( options ) {
|
||||
|
||||
/*******************************
|
||||
* config
|
||||
*******************************/
|
||||
|
||||
var config = {
|
||||
columnClasses: [ "icon", "name", "date", "size" ],
|
||||
defaultSortOrder: "C=N;O=A",
|
||||
viewmodes: [ "details", "icons" ],
|
||||
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: []
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* public api
|
||||
*******************************/
|
||||
|
||||
this.folderClick = function ( fn ) {
|
||||
|
||||
if ( typeof fn === "function" ) {
|
||||
config.callbacks.folderClick.push( fn );
|
||||
};
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
this.fileClick = function ( fn ) {
|
||||
|
||||
if ( typeof fn === "function" ) {
|
||||
config.callbacks.fileClick.push( fn );
|
||||
};
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* init (will be called at the bottom)
|
||||
*******************************/
|
||||
|
||||
var init = function () {
|
||||
|
||||
applyViewmode();
|
||||
initBreadcrumb();
|
||||
initViews();
|
||||
customize();
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* callback triggers
|
||||
*******************************/
|
||||
|
||||
var triggerFolderClick = function ( label ) {
|
||||
|
||||
for ( idx in config.callbacks.folderClick ) {
|
||||
config.callbacks.folderClick[idx].call( window, label );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
var triggerFileClick = function ( label ) {
|
||||
|
||||
for ( idx in config.callbacks.fileClick ) {
|
||||
config.callbacks.fileClick[idx].call( window, label );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* local stored viewmode
|
||||
*******************************/
|
||||
|
||||
var getViewmode = function () {
|
||||
|
||||
var viewmode = localStorage.getItem( config.store.viewmode );
|
||||
if ( $.inArray( viewmode, config.viewmodes ) ) {
|
||||
return viewmode;
|
||||
};
|
||||
return config.viewmodes[0];
|
||||
};
|
||||
|
||||
|
||||
var applyViewmode = function ( viewmode ) {
|
||||
|
||||
$( "#table" ).hide();
|
||||
if ( viewmode !== undefined ) {
|
||||
localStorage.setItem( config.store.viewmode, viewmode );
|
||||
};
|
||||
$( "body > nav li.view" ).removeClass( "current" );
|
||||
if ( getViewmode() === "icons" ) {
|
||||
$( "#viewicons" ).closest( "li" ).addClass( "current" );
|
||||
$( "#extended" ).removeClass( "details-view" ).addClass( "icons-view" ).show();
|
||||
} else {
|
||||
$( "#viewdetails" ).closest( "li" ).addClass( "current" );
|
||||
$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* breadcrumb and doc title
|
||||
*******************************/
|
||||
|
||||
var 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];
|
||||
if ( part !== "" ) {
|
||||
path += part + "/";
|
||||
$ul.append( $( "<li class='crumb'><a href='" + path + "'><img src='" + config.icons.crumb + "' alt='>' />" + part + "</a></li>" ) );
|
||||
};
|
||||
};
|
||||
$( "body > nav .crumb:last" ).addClass( "current" );
|
||||
|
||||
document.title = document.domain + pathname;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* table view
|
||||
*******************************/
|
||||
|
||||
var initTableView = function () {
|
||||
|
||||
function getColumnClass( idx ) {
|
||||
|
||||
if ( idx >= 0 && idx < config.columnClasses.length ) {
|
||||
return 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++ ) );
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* extended view
|
||||
*******************************/
|
||||
|
||||
var initExtendedView = function () {
|
||||
|
||||
var $ul = $( "<ul/>" );
|
||||
|
||||
// headers
|
||||
var $li = $( "<li class='header' />" ).appendTo( $ul );
|
||||
$( "<a class='icon'></a>" ).appendTo( $li );
|
||||
var $label = $( "th.name a" );
|
||||
var $date = $( "th.date a" );
|
||||
var $size = $( "th.size a" );
|
||||
$( "<a class='label' href='" + $label.attr( "href" ) + "'>" + $label.text() + "</a>" ).appendTo( $li );
|
||||
$( "<a class='date' href='" + $date.attr( "href" ) + "'>" + $date.text() + "</a>" ).appendTo( $li );
|
||||
$( "<a class='size' href='" + $size.attr( "href" ) + "'>" + $size.text() + "</a>" ).appendTo( $li );
|
||||
|
||||
// header sort icons
|
||||
var order = document.location.search;
|
||||
if ( order === "" ) {
|
||||
order = config.defaultSortOrder;
|
||||
};
|
||||
var $icon;
|
||||
if ( order.indexOf( "O=A" ) >= 0 ) {
|
||||
$icon = $( "<img src='" + config.icons.ascending + "' class='sort' alt='ascending' />" );
|
||||
} else {
|
||||
$icon = $( "<img src='" + config.icons.descending + "' class='sort' alt='descending' />" );
|
||||
};
|
||||
if ( order.indexOf( "C=N" ) >= 0 ) {
|
||||
$li.find( "a.label" ).append( $icon );
|
||||
} else if ( order.indexOf( "C=M" ) >= 0 ) {
|
||||
$li.find( "a.date" ).prepend( $icon );
|
||||
} else if ( order.indexOf( "C=S" ) >= 0 ) {
|
||||
$li.find( "a.size" ).prepend( $icon );
|
||||
};
|
||||
|
||||
// entries
|
||||
$( "#table td.name a" ).closest( "tr" ).each( function () {
|
||||
var $tr = $( this );
|
||||
var $img = $tr.find( "td.icon img" );
|
||||
var iconsmall = $img.attr( "src" );
|
||||
var iconbig = iconsmall.replace( "16x16", "48x48" );
|
||||
var alt = $img.attr( "alt" );
|
||||
var $link = $tr.find( "td.name a" );
|
||||
var label = $link.text();
|
||||
var href = $link.attr( "href" );
|
||||
var date = $tr.find( "td.date" ).text();
|
||||
var size = $tr.find( "td.size" ).text();
|
||||
|
||||
var $li = $( "<li class='entry' />" ).appendTo( $ul );
|
||||
if ( alt === "[DIR]" ) {
|
||||
$li.addClass( "folder" );
|
||||
} else {
|
||||
$li.addClass( "file" );
|
||||
}
|
||||
var $a = $( "<a href='" + href + "' />" ).appendTo( $li );
|
||||
$( "<span class='icon small'><img src='" + iconsmall + "' alt='" + alt + "' /></span>" ).appendTo( $a );
|
||||
$( "<span class='icon big'><img src='" + iconbig + "' alt='" + alt + "' /></span>" ).appendTo( $a );
|
||||
$( "<span class='label'>" + label + "</span>" ).appendTo( $a );
|
||||
$( "<span class='date'>" + date + "</span>" ).appendTo( $a );
|
||||
$( "<span class='size'>" + size + "</span>" ).appendTo( $a );
|
||||
} );
|
||||
|
||||
$( "#extended" ).append( $ul );
|
||||
|
||||
// empty
|
||||
$entries = $( "#extended .entry" );
|
||||
if ( $entries.size() === 0 || $entries.size() === 1 && $entries.find( ".label" ).text() === "Parent Directory" ) {
|
||||
$( "#extended" ).append( $( "<div class='empty'>empty</div>" ) );
|
||||
};
|
||||
|
||||
// in case of floats
|
||||
$( "#extended" ).append( $( "<div class='clearfix' />" ) );
|
||||
|
||||
|
||||
// click callbacks
|
||||
$( "#extended .entry.folder" )
|
||||
.click( function() {
|
||||
triggerFolderClick( $( this ).find( ".label" ).text() );
|
||||
} );
|
||||
$( "#extended .entry.file" )
|
||||
.click( function() {
|
||||
triggerFileClick( $( this ).find( ".label" ).text() );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* init views
|
||||
*******************************/
|
||||
|
||||
var initViews = function () {
|
||||
|
||||
initTableView();
|
||||
initExtendedView();
|
||||
|
||||
$( "#viewdetails" ).closest( "li" )
|
||||
.click( function () {
|
||||
applyViewmode( "details" );
|
||||
} );
|
||||
$( "#viewicons" ).closest( "li" )
|
||||
.click( function () {
|
||||
applyViewmode( "icons" );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* customize
|
||||
*******************************/
|
||||
|
||||
var customize = function () {
|
||||
|
||||
$.ajax( {
|
||||
url: config.customHeader,
|
||||
dataType: "html",
|
||||
success: function ( data ) {
|
||||
$( "#content > header" ).append( $( data ) ).show();
|
||||
}
|
||||
} );
|
||||
|
||||
$.ajax( {
|
||||
url: config.customFooter,
|
||||
dataType: "html",
|
||||
success: function ( data ) {
|
||||
$( "#content > footer" ).prepend( $( data ) ).show();
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* finally run init
|
||||
*******************************/
|
||||
|
||||
init();
|
||||
};
|
||||
|
||||
} )( jQuery );
|
||||
332
src/h5ai/js/inc/h5aitree.js
Normal file
332
src/h5ai/js/inc/h5aitree.js
Normal file
@ -0,0 +1,332 @@
|
||||
|
||||
( function( $ ) {
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* init after dom load
|
||||
*******************************/
|
||||
|
||||
$( function() {
|
||||
|
||||
window.setTimeout( function() {
|
||||
$.h5aiTree = new H5aiTree();
|
||||
}, 1 );
|
||||
} );
|
||||
|
||||
|
||||
H5aiTree = function ( options ) {
|
||||
|
||||
|
||||
var h5aiMetaRegEx = /<meta name="h5ai-version"/;
|
||||
var folderRegEx = /\/$/;
|
||||
var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
|
||||
|
||||
|
||||
function init() {
|
||||
|
||||
checkCrumb();
|
||||
initShifting();
|
||||
populateTree();
|
||||
};
|
||||
|
||||
|
||||
function splitPathname( pathname ) {
|
||||
|
||||
if ( pathname === "/" ) {
|
||||
return [ "", "/" ];
|
||||
};
|
||||
var match = pathnameRegEx.exec( pathname );
|
||||
return [ match[1], match[3] ];
|
||||
};
|
||||
|
||||
|
||||
function checkCrumb() {
|
||||
|
||||
$( "li.crumb a" ).each( function() {
|
||||
|
||||
var $a = $( this );
|
||||
var pathname = $a.attr( "href" );
|
||||
checkPathname( pathname, function ( status ) {
|
||||
if ( status !== 0 ) {
|
||||
$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
|
||||
if ( status !== 200 ) {
|
||||
$( "<span class='hint'>(" + status + ")</span>" ).appendTo( $a );
|
||||
};
|
||||
};
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
function shiftTree( show ) {
|
||||
|
||||
var $tree = $( "#tree" );
|
||||
var $extended = $( "#extended" );
|
||||
var show = show || false;
|
||||
|
||||
if ( $tree.outerWidth() < $extended.offset().left || show ) {
|
||||
$tree.stop().animate( { left: 0 } );
|
||||
} else {
|
||||
//var left = Math.max( 24 - $tree.outerWidth(), $extended.offset().left - $tree.outerWidth() - 16 );
|
||||
var left = 24 - $tree.outerWidth();
|
||||
$tree.stop().animate( { left: left } );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
function initShifting() {
|
||||
|
||||
$( "#tree" ).hover(
|
||||
function () {
|
||||
shiftTree( true );
|
||||
},
|
||||
function () {
|
||||
shiftTree();
|
||||
}
|
||||
);
|
||||
$( window ).resize( function() {
|
||||
shiftTree();
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
function populateTree() {
|
||||
|
||||
var $tree = $( "#tree" );
|
||||
$tree.css( { left: -400 } ).show();
|
||||
shiftTree();
|
||||
var pathname = decodeURI( document.location.pathname );
|
||||
fetchTree( pathname, function( entry ) {
|
||||
$tree.empty().append( entry.toHtml() );
|
||||
shiftTree();
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
function fetchTree( pathname, callback ) {
|
||||
|
||||
walkBack( pathname, function( walkbackedPathname ) {
|
||||
var entry = new Entry( walkbackedPathname );
|
||||
fetchFoldersRecursive( walkbackedPathname, function ( content ) {
|
||||
entry.content = content;
|
||||
callback( entry );
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
function walkBack( pathname, callback ) {
|
||||
|
||||
var splits = splitPathname( pathname );
|
||||
var parent = splits[0];
|
||||
if ( parent === "" ) {
|
||||
callback( pathname );
|
||||
} else {
|
||||
checkPathname( parent, function( state ) {
|
||||
if ( state === 0 ) {
|
||||
walkBack( parent, callback );
|
||||
} else {
|
||||
callback( pathname );
|
||||
};
|
||||
} );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
function fetchFoldersRecursive( pathname, callback ) {
|
||||
|
||||
fetchFolders( pathname, false, function ( folders ) {
|
||||
if ( folders instanceof Array ) {
|
||||
for ( idx in folders ) {
|
||||
( function ( entry ) {
|
||||
if ( entry.isFolder ) {
|
||||
fetchFoldersRecursive( entry.absHref, function( content ) {
|
||||
entry.content = content;
|
||||
callback( folders );
|
||||
} );
|
||||
};
|
||||
} ) ( folders[idx] );
|
||||
};
|
||||
};
|
||||
callback( folders );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
function fetchFolders( pathname, includeParent, callback ) {
|
||||
|
||||
fetchEntries( pathname, includeParent, function ( entries ) {
|
||||
|
||||
if ( entries instanceof Array ) {
|
||||
var folders = [];
|
||||
for ( idx in entries ) {
|
||||
var entry = entries[idx];
|
||||
if ( entry.isFolder ) {
|
||||
folders.push( entry );
|
||||
};
|
||||
};
|
||||
callback( folders );
|
||||
} else {
|
||||
callback( entries );
|
||||
};
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
function fetchEntries( pathname, includeParent, callback ) {
|
||||
|
||||
$.ajax( {
|
||||
url: pathname,
|
||||
type: "GET",
|
||||
dataType: "html",
|
||||
error: function ( xhr ) {
|
||||
|
||||
callback( xhr.status );
|
||||
},
|
||||
success: function ( html ) {
|
||||
|
||||
if ( ! h5aiMetaRegEx.test( html ) ) {
|
||||
callback( 200 );
|
||||
} else {
|
||||
var entries = [];
|
||||
$( html ).find( "#table table td" ).closest( "tr" ).each( function () {
|
||||
var entry = new Entry( pathname, this );
|
||||
if ( !entry.isParentFolder || includeParent ) {
|
||||
entries.push( entry );
|
||||
};
|
||||
} );
|
||||
callback( entries );
|
||||
};
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Checks pathname for accessibility.
|
||||
* Calls callback with argument 0 if pathname is a h5ai styled directory.
|
||||
* Otherwise it returns the http response status.
|
||||
*/
|
||||
function checkPathname( pathname, callback ) {
|
||||
|
||||
$.ajax( {
|
||||
url: pathname,
|
||||
type: "GET",
|
||||
dataType: "html",
|
||||
error: function ( xhr ) {
|
||||
|
||||
callback( xhr.status );
|
||||
},
|
||||
success: function ( html ) {
|
||||
|
||||
if ( h5aiMetaRegEx.test( html ) ) {
|
||||
callback( 0 );
|
||||
} else {
|
||||
callback( 200 );
|
||||
};
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
Entry = function ( folder, tableRow ) {
|
||||
|
||||
if ( !folderRegEx.test( folder ) ) {
|
||||
folder += "/";
|
||||
};
|
||||
|
||||
if ( tableRow !== undefined ) {
|
||||
var $tds = $( tableRow ).find( "td" );
|
||||
var $img = $( $tds.get( 0 ) ).find( "img" );
|
||||
var $a= $( $tds.get( 1 ) ).find( "a" );
|
||||
|
||||
this.parentFolder = folder;
|
||||
this.icon16 = $img.attr( "src" );
|
||||
this.alt = $img.attr( "alt" );
|
||||
this.label = $a.text();
|
||||
this.href = $a.attr("href");
|
||||
this.date = $( $tds.get(2) ).text();
|
||||
this.size = $( $tds.get(3) ).text();
|
||||
} else {
|
||||
var splits = 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.content = undefined;
|
||||
|
||||
|
||||
this.isComplete = function () {
|
||||
|
||||
if ( this.content === undefined ) {
|
||||
return false;
|
||||
};
|
||||
if ( this.content instanceof Array ) {
|
||||
for ( idx in this.content ) {
|
||||
if ( !this.content[idx].isComplete() ) {
|
||||
return false;
|
||||
};
|
||||
};
|
||||
};
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
this.toHtml = function () {
|
||||
|
||||
var $entry = $( "<div class='entry' />" );
|
||||
|
||||
try {
|
||||
var $a = $( "<a href='" + this.absHref + "' />" )
|
||||
.appendTo( $entry )
|
||||
.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
|
||||
.append( $( "<span class='label'>" + this.label + "</span>" ) );
|
||||
|
||||
if ( this.isFolder ) {
|
||||
if ( this.absHref === document.location.pathname ) {
|
||||
$a.find( ".icon img" ).attr( "src", "/h5ai/images/folder-open.png" );
|
||||
$entry.addClass( "current" );
|
||||
};
|
||||
if ( this.content instanceof Array ) {
|
||||
var $ul = $( "<ul class='content' />" ).appendTo( $entry );
|
||||
for ( idx in this.content ) {
|
||||
$( "<li />" ).append( this.content[idx].toHtml() ).appendTo( $ul );
|
||||
};
|
||||
} else if ( this.content === undefined ) {
|
||||
$a.append( $( "<span class='hint'><img src='/h5ai/images/loading.png' /></span>" ) );
|
||||
} else if ( this.content === 200 ) {
|
||||
$a.find( ".icon img" ).attr( "src", "/h5ai/images/folder-page.png" );
|
||||
$a.append( $( "<span class='hint'><img src='/h5ai/images/page.png' /></span>" ) );
|
||||
} else {
|
||||
$a.append( $( "<span class='hint error'>" + this.content + "</span>" ) );
|
||||
$entry.addClass( "notListable" );
|
||||
};
|
||||
};
|
||||
|
||||
} catch( err ) {
|
||||
$( "<span class='fail'>fail</span>" ).appendTo( $entry );
|
||||
};
|
||||
|
||||
return $entry;
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
init()
|
||||
};
|
||||
|
||||
} )( jQuery );
|
||||
31
src/h5ai/js/inc/jquery.json.min.js
vendored
Normal file
31
src/h5ai/js/inc/jquery.json.min.js
vendored
Normal file
@ -0,0 +1,31 @@
|
||||
// v2.2
|
||||
(function($){$.toJSON=function(o)
|
||||
{if(typeof(JSON)=='object'&&JSON.stringify)
|
||||
return JSON.stringify(o);var type=typeof(o);if(o===null)
|
||||
return"null";if(type=="undefined")
|
||||
return undefined;if(type=="number"||type=="boolean")
|
||||
return o+"";if(type=="string")
|
||||
return $.quoteString(o);if(type=='object')
|
||||
{if(typeof o.toJSON=="function")
|
||||
return $.toJSON(o.toJSON());if(o.constructor===Date)
|
||||
{var month=o.getUTCMonth()+1;if(month<10)month='0'+month;var day=o.getUTCDate();if(day<10)day='0'+day;var year=o.getUTCFullYear();var hours=o.getUTCHours();if(hours<10)hours='0'+hours;var minutes=o.getUTCMinutes();if(minutes<10)minutes='0'+minutes;var seconds=o.getUTCSeconds();if(seconds<10)seconds='0'+seconds;var milli=o.getUTCMilliseconds();if(milli<100)milli='0'+milli;if(milli<10)milli='0'+milli;return'"'+year+'-'+month+'-'+day+'T'+
|
||||
hours+':'+minutes+':'+seconds+'.'+milli+'Z"';}
|
||||
if(o.constructor===Array)
|
||||
{var ret=[];for(var i=0;i<o.length;i++)
|
||||
ret.push($.toJSON(o[i])||"null");return"["+ret.join(",")+"]";}
|
||||
var pairs=[];for(var k in o){var name;var type=typeof k;if(type=="number")
|
||||
name='"'+k+'"';else if(type=="string")
|
||||
name=$.quoteString(k);else
|
||||
continue;if(typeof o[k]=="function")
|
||||
continue;var val=$.toJSON(o[k]);pairs.push(name+":"+val);}
|
||||
return"{"+pairs.join(", ")+"}";}};$.evalJSON=function(src)
|
||||
{if(typeof(JSON)=='object'&&JSON.parse)
|
||||
return JSON.parse(src);return eval("("+src+")");};$.secureEvalJSON=function(src)
|
||||
{if(typeof(JSON)=='object'&&JSON.parse)
|
||||
return JSON.parse(src);var filtered=src;filtered=filtered.replace(/\\["\\\/bfnrtu]/g,'@');filtered=filtered.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']');filtered=filtered.replace(/(?:^|:|,)(?:\s*\[)+/g,'');if(/^[\],:{}\s]*$/.test(filtered))
|
||||
return eval("("+src+")");else
|
||||
throw new SyntaxError("Error parsing JSON, source is not valid.");};$.quoteString=function(string)
|
||||
{if(string.match(_escapeable))
|
||||
{return'"'+string.replace(_escapeable,function(a)
|
||||
{var c=_meta[a];if(typeof c==='string')return c;c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+(c%16).toString(16);})+'"';}
|
||||
return'"'+string+'"';};var _escapeable=/["\\\x00-\x1f\x7f-\x9f]/g;var _meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};})(jQuery);
|
||||
@ -1,322 +1,3 @@
|
||||
( function( $ ) {
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* init after dom load
|
||||
*******************************/
|
||||
|
||||
$( function() {
|
||||
|
||||
$.h5ai = new H5ai();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
H5ai = function ( options ) {
|
||||
|
||||
/*******************************
|
||||
* config
|
||||
*******************************/
|
||||
|
||||
var config = {
|
||||
columnClasses: [ "icon", "name", "date", "size" ],
|
||||
defaultSortOrder: "C=N;O=A",
|
||||
viewmodes: [ "details", "icons" ],
|
||||
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: []
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* public api
|
||||
*******************************/
|
||||
|
||||
this.folderClick = function ( fn ) {
|
||||
|
||||
if ( typeof fn === "function" ) {
|
||||
config.callbacks.folderClick.push( fn );
|
||||
};
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
this.fileClick = function ( fn ) {
|
||||
|
||||
if ( typeof fn === "function" ) {
|
||||
config.callbacks.fileClick.push( fn );
|
||||
};
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* init (will be called at the bottom)
|
||||
*******************************/
|
||||
|
||||
var init = function () {
|
||||
|
||||
applyViewmode();
|
||||
initBreadcrumb();
|
||||
initViews();
|
||||
customize();
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* callback triggers
|
||||
*******************************/
|
||||
|
||||
var triggerFolderClick = function ( label ) {
|
||||
|
||||
for ( idx in config.callbacks.folderClick ) {
|
||||
config.callbacks.folderClick[idx].call( window, label );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
var triggerFileClick = function ( label ) {
|
||||
|
||||
for ( idx in config.callbacks.fileClick ) {
|
||||
config.callbacks.fileClick[idx].call( window, label );
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* local stored viewmode
|
||||
*******************************/
|
||||
|
||||
var getViewmode = function () {
|
||||
|
||||
var viewmode = localStorage.getItem( config.store.viewmode );
|
||||
if ( $.inArray( viewmode, config.viewmodes ) ) {
|
||||
return viewmode;
|
||||
};
|
||||
return config.viewmodes[0];
|
||||
};
|
||||
|
||||
|
||||
var applyViewmode = function ( viewmode ) {
|
||||
|
||||
$( "#table" ).hide();
|
||||
if ( viewmode !== undefined ) {
|
||||
localStorage.setItem( config.store.viewmode, viewmode );
|
||||
};
|
||||
if ( getViewmode() === "icons" ) {
|
||||
$( "#extended" ).removeClass( "details-view" ).addClass( "icons-view" ).show();
|
||||
} else {
|
||||
$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* breadcrumb and doc title
|
||||
*******************************/
|
||||
|
||||
var 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];
|
||||
if ( part !== "" ) {
|
||||
path += part + "/";
|
||||
$ul.append( $( "<li class='crumb'><a href='" + path + "'><img src='" + config.icons.crumb + "' alt='>' />" + part + "</a></li>" ) );
|
||||
};
|
||||
};
|
||||
|
||||
document.title = document.domain + pathname;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* table view
|
||||
*******************************/
|
||||
|
||||
var initTableView = function () {
|
||||
|
||||
function getColumnClass( idx ) {
|
||||
|
||||
if ( idx >= 0 && idx < config.columnClasses.length ) {
|
||||
return 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++ ) );
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* extended view
|
||||
*******************************/
|
||||
|
||||
var initExtendedView = function () {
|
||||
|
||||
var $ul = $( "<ul/>" );
|
||||
|
||||
// headers
|
||||
var $li = $( "<li class='header' />" ).appendTo( $ul );
|
||||
$( "<a class='icon'></a>" ).appendTo( $li );
|
||||
var $label = $( "th.name a" );
|
||||
var $date = $( "th.date a" );
|
||||
var $size = $( "th.size a" );
|
||||
$( "<a class='label' href='" + $label.attr( "href" ) + "'>" + $label.text() + "</a>" ).appendTo( $li );
|
||||
$( "<a class='date' href='" + $date.attr( "href" ) + "'>" + $date.text() + "</a>" ).appendTo( $li );
|
||||
$( "<a class='size' href='" + $size.attr( "href" ) + "'>" + $size.text() + "</a>" ).appendTo( $li );
|
||||
|
||||
// header sort icons
|
||||
var order = document.location.search;
|
||||
if ( order === "" ) {
|
||||
order = config.defaultSortOrder;
|
||||
};
|
||||
var $icon;
|
||||
if ( order.indexOf( "O=A" ) >= 0 ) {
|
||||
$icon = $( "<img src='" + config.icons.ascending + "' class='sort' alt='ascending' />" );
|
||||
} else {
|
||||
$icon = $( "<img src='" + config.icons.descending + "' class='sort' alt='descending' />" );
|
||||
};
|
||||
if ( order.indexOf( "C=N" ) >= 0 ) {
|
||||
$li.find( "a.label" ).append( $icon );
|
||||
} else if ( order.indexOf( "C=M" ) >= 0 ) {
|
||||
$li.find( "a.date" ).prepend( $icon );
|
||||
} else if ( order.indexOf( "C=S" ) >= 0 ) {
|
||||
$li.find( "a.size" ).prepend( $icon );
|
||||
};
|
||||
|
||||
// entries
|
||||
$( "#table td.name a" ).closest( "tr" ).each( function () {
|
||||
var $tr = $( this );
|
||||
var $img = $tr.find( "td.icon img" );
|
||||
var iconsmall = $img.attr( "src" );
|
||||
var iconbig = iconsmall.replace( "16x16", "48x48" );
|
||||
var alt = $img.attr( "alt" );
|
||||
var $link = $tr.find( "td.name a" );
|
||||
var label = $link.text();
|
||||
var href = $link.attr( "href" );
|
||||
var date = $tr.find( "td.date" ).text();
|
||||
var size = $tr.find( "td.size" ).text();
|
||||
|
||||
var $li = $( "<li class='entry' />" ).appendTo( $ul );
|
||||
if ( alt === "[DIR]" ) {
|
||||
$li.addClass( "folder" );
|
||||
} else {
|
||||
$li.addClass( "file" );
|
||||
}
|
||||
var $a = $( "<a href='" + href + "' />" ).appendTo( $li );
|
||||
$( "<span class='icon small'><img src='" + iconsmall + "' alt='" + alt + "' /></span>" ).appendTo( $a );
|
||||
$( "<span class='icon big'><img src='" + iconbig + "' alt='" + alt + "' /></span>" ).appendTo( $a );
|
||||
$( "<span class='label'>" + label + "</span>" ).appendTo( $a );
|
||||
$( "<span class='date'>" + date + "</span>" ).appendTo( $a );
|
||||
$( "<span class='size'>" + size + "</span>" ).appendTo( $a );
|
||||
} );
|
||||
|
||||
$( "#extended" ).append( $ul );
|
||||
|
||||
// empty
|
||||
$entries = $( "#extended .entry" );
|
||||
if ( $entries.size() === 0 || $entries.size() === 1 && $entries.find( ".label" ).text() === "Parent Directory" ) {
|
||||
$( "#extended" ).append( $( "<div class='empty'>empty</div>" ) );
|
||||
};
|
||||
|
||||
// in case of floats
|
||||
$( "#extended" ).append( $( "<div class='clearfix' />" ) );
|
||||
|
||||
|
||||
// click callbacks
|
||||
$( "#extended .entry.folder" )
|
||||
.click( function() {
|
||||
triggerFolderClick( $( this ).find( ".label" ).text() );
|
||||
} );
|
||||
$( "#extended .entry.file" )
|
||||
.click( function() {
|
||||
triggerFileClick( $( this ).find( ".label" ).text() );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* init views
|
||||
*******************************/
|
||||
|
||||
var initViews = function () {
|
||||
|
||||
initTableView();
|
||||
initExtendedView();
|
||||
|
||||
$( "#viewdetails" ).closest( "li" )
|
||||
.click( function () {
|
||||
applyViewmode( "details" );
|
||||
} );
|
||||
$( "#viewicons" ).closest( "li" )
|
||||
.click( function () {
|
||||
applyViewmode( "icons" );
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* customize
|
||||
*******************************/
|
||||
|
||||
var customize = function () {
|
||||
|
||||
$.ajax( {
|
||||
url: config.customHeader,
|
||||
dataType: "html",
|
||||
success: function ( data ) {
|
||||
$( "#content > header" ).append( $( data ) ).show();
|
||||
}
|
||||
} );
|
||||
|
||||
$.ajax( {
|
||||
url: config.customFooter,
|
||||
dataType: "html",
|
||||
success: function ( data ) {
|
||||
$( "#content > footer" ).prepend( $( data ) ).show();
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
* finally run init
|
||||
*******************************/
|
||||
|
||||
init();
|
||||
};
|
||||
|
||||
} )( jQuery );
|
||||
// @include "inc/jquery.json.min.js"
|
||||
// @include "inc/h5ai.js"
|
||||
// @include "inc/h5aitree.js"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
################################
|
||||
# h5ai 0.4
|
||||
# h5ai 0.5
|
||||
# customized .htaccess
|
||||
################################
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -3,6 +3,7 @@
|
||||
<section id="extended"></section>
|
||||
<footer></footer>
|
||||
</section>
|
||||
<section id="tree"></section>
|
||||
<footer>
|
||||
<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
|
||||
<img class="logo" src="/h5ai/images/html5.png" alt="html5" />
|
||||
@ -10,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.4">h5ai</a>
|
||||
<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.5">h5ai</a>
|
||||
using
|
||||
<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.4">
|
||||
<meta name="h5ai-version" content="h5ai 0.5">
|
||||
<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">
|
||||
|
||||
BIN
target/h5ai/images/folder-closed.png
Normal file
BIN
target/h5ai/images/folder-closed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 409 B |
BIN
target/h5ai/images/folder-open.png
Normal file
BIN
target/h5ai/images/folder-open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 441 B |
BIN
target/h5ai/images/folder-page.png
Normal file
BIN
target/h5ai/images/folder-page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 587 B |
BIN
target/h5ai/images/folder-page2.png
Normal file
BIN
target/h5ai/images/folder-page2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 697 B |
BIN
target/h5ai/images/loading.png
Normal file
BIN
target/h5ai/images/loading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 649 B |
BIN
target/h5ai/images/page.png
Normal file
BIN
target/h5ai/images/page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 706 B |
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user