mirror/php-h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-08-09 15:26:46 +02:00
Code Issues Releases Wiki Activity

Improved tree scrollbar.

Browse Source
This commit is contained in:
Lars Jung
2011-07-26 16:40:18 +02:00
parent 89fd74c4ab
commit 8aed077297
11 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -1,4 +1,4 @@
# h5ai v0.10.1   ·   a beautified Apache index # h5ai v0.10.2   ·   a beautified Apache index
h5ai aims to make browsing files on a Apache HTTP server more comfortable. h5ai aims to make browsing files on a Apache HTTP server more comfortable.
See the [live demo](http://larsjung.de/h5ai/sample). See the [live demo](http://larsjung.de/h5ai/sample).
@@ -20,6 +20,12 @@ please respect their rights.
## Changelog ## Changelog
### v0.10.2
*2011-07-26*
* improved tree scrollbar
### v0.10.1 ### v0.10.1
*2011-07-24* *2011-07-24*

2
build.properties
View File

@@ -3,7 +3,7 @@ custom = true
# project # project
project.name = h5ai project.name = h5ai
project.version = 0.10.1 project.version = 0.10.2
# src # src

4
src/h5ai/css/inc/tree.less
View File

@@ -6,14 +6,14 @@
top: 0; top: 0;
overflow: auto; overflow: auto;
font-size: 0.85em; font-size: 0.85em;
padding: 16px 32px 16px 16px; padding: 16px 16px 16px 16px;
background-color: rgb(241,241,241); background-color: rgb(241,241,241);
border: 2px solid rgb(210,210,210); border: 2px solid rgb(210,210,210);
border-left: none; border-left: none;
.border-radius ( 0 15px 15px 0 ); .border-radius ( 0 15px 15px 0 );
> .scrollbar { > .scrollbar {
margin: 12px; margin: 12px 12px 12px 0;
width: 6px; width: 6px;
background-color: rgb(210,210,210); background-color: rgb(210,210,210);
.border-radius( 3px ); .border-radius( 3px );

3
src/h5ai/js/inc/path.js
View File

@@ -339,6 +339,7 @@ var Path = function ( pathCache, folder, tableRow ) {
this.status = status; this.status = status;
this.content = content; this.content = content;
this.treeOpen = true; this.treeOpen = true;
$( "#tree" ).get( 0 ).updateScrollbar( true );
this.updateTreeHtml( function() { this.updateTreeHtml( function() {
$( "#tree" ).get( 0 ).updateScrollbar(); $( "#tree" ).get( 0 ).updateScrollbar();
} ); } );
@@ -346,12 +347,14 @@ var Path = function ( pathCache, folder, tableRow ) {
} else if ( $indicator.hasClass( "open" ) ) { } else if ( $indicator.hasClass( "open" ) ) {
this.treeOpen = false; this.treeOpen = false;
$indicator.removeClass( "open" ); $indicator.removeClass( "open" );
$( "#tree" ).get( 0 ).updateScrollbar( true );
$html.find( "> ul.content" ).slideUp( function() { $html.find( "> ul.content" ).slideUp( function() {
$( "#tree" ).get( 0 ).updateScrollbar(); $( "#tree" ).get( 0 ).updateScrollbar();
} ); } );
} else { } else {
this.treeOpen = true; this.treeOpen = true;
$indicator.addClass( "open" ); $indicator.addClass( "open" );
$( "#tree" ).get( 0 ).updateScrollbar( true );
$html.find( "> ul.content" ).slideDown( function() { $html.find( "> ul.content" ).slideDown( function() {
$( "#tree" ).get( 0 ).updateScrollbar(); $( "#tree" ).get( 0 ).updateScrollbar();
} ); } );

17
src/h5ai/js/inc/tree.js
View File

@@ -179,8 +179,16 @@ var Tree = function ( pathCache, h5ai ) {
var $wrapper = $element.find( "> .wrapper" ); var $wrapper = $element.find( "> .wrapper" );
var $content = $wrapper.find( "> .content" ); var $content = $wrapper.find( "> .content" );
var mouseOffsetY = 0; var mouseOffsetY = 0;
var updateId = undefined;
var update = function ( repeat ) {
if ( updateId !== undefined && !repeat ) {
clearInterval( updateId );
updateId = undefined;
} else if ( updateId === undefined && repeat ) {
updateId = setInterval( function() { update( true ); }, 50 );
};
var update = function () {
$wrapper.css( "height", $element.height() ); $wrapper.css( "height", $element.height() );
var visibleHeight = $element.height(); var visibleHeight = $element.height();
var contentHeight = $content.outerHeight(); var contentHeight = $content.outerHeight();
@@ -189,9 +197,8 @@ var Tree = function ( pathCache, h5ai ) {
var visVertFrac = Math.min( visibleHeight / contentHeight, 1 ); var visVertFrac = Math.min( visibleHeight / contentHeight, 1 );
if ( visVertFrac < 1 ) { if ( visVertFrac < 1 ) {
$wrapper.css( "padding-right", $scrollbar.outerWidth( true ) );
$scrollbar $scrollbar
.show() .fadeIn( 50 )
.css( { .css( {
height: $element.innerHeight() + $scrollbar.height() - $scrollbar.outerHeight( true ) height: $element.innerHeight() + $scrollbar.height() - $scrollbar.outerHeight( true )
} ); } );
@@ -201,8 +208,7 @@ var Tree = function ( pathCache, h5ai ) {
height: $scrollbar.height() * visVertFrac height: $scrollbar.height() * visVertFrac
} ); } );
} else { } else {
$wrapper.css( "padding-right", 0 ); $scrollbar.fadeOut( 50 );
$scrollbar.hide()
}; };
}; };
var scroll = function ( event ) { var scroll = function ( event ) {
@@ -222,6 +228,7 @@ var Tree = function ( pathCache, h5ai ) {
$element.get( 0 ).updateScrollbar = update; $element.get( 0 ).updateScrollbar = update;
$wrapper $wrapper
.css( { .css( {
"padding-right": $scrollbar.outerWidth( true ),
height: $element.height(), height: $element.height(),
overflow: "hidden" overflow: "hidden"
} ); } );

4
target/dot.htaccess
View File

@@ -1,5 +1,5 @@
################################ ################################
# h5ai 0.10.1 # h5ai 0.10.2
# customized .htaccess # customized .htaccess
################################ ################################
@@ -62,7 +62,7 @@
IndexOrderDefault Ascending Name IndexOrderDefault Ascending Name
IndexOptions Type=text/html;h5ai=0.10.1 IndexOptions Type=text/html;h5ai=0.10.2
IndexOptions Charset=UTF-8 IndexOptions Charset=UTF-8
IndexOptions FancyIndexing IndexOptions FancyIndexing
IndexOptions HTMLTable IndexOptions HTMLTable

2
target/h5ai/css/main.css
View File

File diff suppressed because one or more lines are too long

2
target/h5ai/footer.html
View File

@@ -11,7 +11,7 @@
<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" /> <img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" /> <img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
</a> </a>
<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai 0.10.1</a> <a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai 0.10.2</a>
<span class="l10n-footerUsing">using</span> <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> <a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
</footer> </footer>

2
target/h5ai/header.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Directory index · styled with h5ai</title> <title>Directory index · styled with h5ai</title>
<meta name="h5ai-version" content="h5ai 0.10.1"> <meta name="h5ai-version" content="h5ai 0.10.2">
<meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)"> <meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)">
<meta name="keywords" content="directory, index, autoindex, h5ai"> <meta name="keywords" content="directory, index, autoindex, h5ai">
<link rel="shortcut icon" type="image/png" href="/h5ai/images/h5ai-16x16.png"> <link rel="shortcut icon" type="image/png" href="/h5ai/images/h5ai-16x16.png">

2
target/h5ai/js/main.js
View File

File diff suppressed because one or more lines are too long

2
target/h5ai/options.js
View File

@@ -1,5 +1,5 @@
/* /*
* h5ai 0.10.1 * h5ai 0.10.2
* Options and localization * Options and localization
*/ */