Skip to content

Commit

Permalink
Use native scrollbar for navigation area
Browse files Browse the repository at this point in the history
  • Loading branch information
@mynetx
mynetx committed Jan 22, 2013
1 parent ecf055c commit 421c5a2
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 198 deletions.
158 changes: 5 additions & 153 deletions js/navigation.js
View file
Expand Up @@ -14,9 +14,8 @@ $(function() {
return;
}

// Fire up the resize and scroll handlers
// Fire up the resize handlers
new ResizeHandler();
ScrollHandler.init();

/**
* opens/closes (hides/shows) tree elements
Expand All @@ -31,14 +30,10 @@ $(function() {
if ($this.hasClass('loaded')) {
if ($icon.is('.ic_b_plus')) {
$icon.removeClass('ic_b_plus').addClass('ic_b_minus');
$children.show('fast', function () {
ScrollHandler.displayScrollbar();
});
$children.show('fast');
} else {
$icon.removeClass('ic_b_minus').addClass('ic_b_plus');
$children.hide('fast', function () {
ScrollHandler.displayScrollbar();
});
$children.hide('fast');
}
} else {
var $destination = $this.closest('li');
Expand Down Expand Up @@ -70,12 +65,7 @@ $(function() {
$icon.removeClass('ic_b_plus').addClass('ic_b_minus');
$destination
.children('div.list_container')
.show(
'fast',
function () {
ScrollHandler.displayScrollbar();
}
);
.show('fast');
if ($destination.find('ul > li').length == 1) {
$destination.find('ul > li')
.find('a.expander.container')
Expand Down Expand Up @@ -351,135 +341,6 @@ function PMA_navigationTreePagination($this)
});
};

/**
* @var ScrollHandler Custom object that manages the scrolling of the navigation
*/
var ScrollHandler = {
/**
* Limits the percentage of scrolling within sane values
*
* @param double The value to be sanitised
*
* @return double
*/
sanitize: function (value) {
if (value < 0) {
value = 0;
} else if (value > 1) {
value = 1;
}
return value;
},
/**
* Positions the scrollbar at the requested height
*
* @param double The value to set the positions of the scrollbar to
*
* @return void
*/
setScrollbar: function (value) {
value = ScrollHandler.sanitize(value);
var elms = ScrollHandler.elms;
var height = elms.$scrollbar.height() - elms.$handle.height() - elms.$scrollbar.offset().top;
var offset = Math.floor(
value * height
);
elms.$handle.css('top', offset);
},
/**
* Positions the navigation at the requested height
*
* @param double The value to set the positions of the navigation to
*
* @return void
*/
setContent: function (value) {
value = ScrollHandler.sanitize(value);
var elms = ScrollHandler.elms;
var diff = elms.$content.height() - $(window).height();
var offset = Math.floor(
value * diff
);
elms.$content.css('top', -offset);
},
/**
* Shows/hides the scrollbar as necessary
*
* @return void
*/
displayScrollbar: function () {
var elms = ScrollHandler.elms;
if (elms.$content.height() > $(window).height()) {
elms.$scrollbar.show().data('active', 1);
var visibleRatio = (
$(window).height() - elms.$scrollbar.offset().top
) / elms.$content.height();
elms.$handle.height(
Math.floor(
visibleRatio * $(window).height()
)
);
} else {
elms.$scrollbar.hide().data('active', 0);
elms.$content.css('top', 0);
}
},
/**
* Initialises the scrollHandler
*
* @return void
*/
init: function () {
this.elms = {
$content: $('#pma_navigation_content'),
$scrollbar: $('#pma_navigation_scrollbar'),
$handle: $('#pma_navigation_scrollbar_handle')
};
this.displayScrollbar();
$(window).bind('resize', this.displayScrollbar);
this.elms.$scrollbar.drag(
$.throttle(function (event, drag) {
var elms = ScrollHandler.elms;
var scrollbarOffset = elms.$scrollbar.offset().top;
var pos = drag.offsetY - scrollbarOffset;
var height = $(window).height() - scrollbarOffset - elms.$handle.height();
value = ScrollHandler.sanitize(pos / height);
ScrollHandler.setScrollbar(value);
ScrollHandler.setContent(value);
}, 4),
{ handle:"#pma_navigation_scrollbar_handle" }
);
this.elms.$scrollbar.bind('mousedown', function (event) {
if ($(event.target).attr('id') === $(this).attr('id')) {
var $scrollbar = ScrollHandler.elms.$scrollbar;
var $handle = ScrollHandler.elms.$handle;
var pos = event.pageY - $scrollbar.offset().top - ($handle.height() / 2);
var height = $scrollbar.height() - $scrollbar.offset().top - $handle.height();
var target = pos / height;
ScrollHandler.setScrollbar(target);
ScrollHandler.setContent(target);
}
});
$('#pma_navigation').bind(
'mousewheel',
function(event, delta, deltaX, deltaY) {
event.preventDefault();
var elms = ScrollHandler.elms;
if (elms.$scrollbar.data('active')) {
var elms = ScrollHandler.elms;
var pixelValue = 1 / (elms.$content.height() - $(window).height());
var offset = -deltaY * 20 * pixelValue;
var pos = Math.abs(elms.$content.offset().top);
var diff = elms.$content.height() - $(window).height();
var target = ScrollHandler.sanitize((pos / diff) + offset);
ScrollHandler.setScrollbar(target);
ScrollHandler.setContent(target);
}
}
);
}
};

/**
* @var ResizeHandler Custom object that manages the resizing of the navigation
*
Expand Down Expand Up @@ -521,18 +382,12 @@ var ResizeHandler = function () {
.css(this.left, pos + resizer_width)
.html(this.getSymbol(pos))
.prop('title', PMA_messages['strShowPanel']);
$('#serverinfo').css('padding-' + this.left, '2.2em');
} else {
$collapser
.css(this.left, pos - $collapser.width())
.css(this.left, pos)
.html(this.getSymbol(pos))
.prop('title', PMA_messages['strHidePanel']);
$('#serverinfo').css('padding-' + this.left, '0.9em');
}
$('#pma_navigation_scrollbar').css(
this.left,
(pos - $('#pma_navigation_scrollbar').width()) + 'px'
);
setTimeout(function (){
$(window).trigger('resize');
}, 4);
Expand Down Expand Up @@ -808,7 +663,6 @@ var PMA_fastFilter = {
});
};
container_filter($obj, str);
ScrollHandler.displayScrollbar();
if ($(this).val() != this.defaultValue && $(this).val() != '') {
if (! $obj.data('fastFilter')) {
$obj.data(
Expand Down Expand Up @@ -923,7 +777,6 @@ PMA_fastFilter.filter.prototype.swap = function (list)
.find('li.fast_filter input.searchClause')
.val(this.searchClause);
this.$this.data('fastFilter', this);
ScrollHandler.displayScrollbar();
};
/**
* Restores the navigation to the original state after the fast filter is cleared
Expand All @@ -946,5 +799,4 @@ PMA_fastFilter.filter.prototype.restore = function (focus)
this.$this.find('.moreResults').remove();
this.$this.find('div.pageselector').show();
this.$this.find('div.throbber').remove();
ScrollHandler.displayScrollbar();
};
4 changes: 0 additions & 4 deletions libraries/navigation/NavigationHeader.class.php
View file
Expand Up @@ -41,10 +41,6 @@ public function getDisplay()
$buffer .= '<div id="pma_navigation_resizer"></div>';
$buffer .= '<div id="pma_navigation_collapser"></div>';
$buffer .= '<div id="pma_navigation_content">';
$buffer .= '<div id="pma_navigation_scrollbar">';
$buffer .= '<div id="pma_navigation_scrollbar_handle">';
$buffer .= '</div>';
$buffer .= '</div>';
$buffer .= sprintf(
'<a class="hide navigation_url" href="navigation.php%s"></a>',
$link_url
Expand Down
24 changes: 3 additions & 21 deletions themes/original/css/navigation.css.php
View file
Expand Up @@ -221,36 +221,18 @@
}
#pma_navigation_collapser {
width: 20px;
height: 23px;
line-height: 23px;
height: 22px;
line-height: 22px;
background: #eee;
color: #555;
font-weight: bold;
position: fixed;
top: 0;
<?php echo $left; ?>: <?php echo $GLOBALS['cfg']['NaviWidth'] - 20; ?>px;
<?php echo $left; ?>: <?php echo $GLOBALS['cfg']['NaviWidth']; ?>px;
text-align: center;
cursor: pointer;
z-index: 800;
text-shadow: 0px 1px 0px #fff;
filter: dropshadow(color=#fff, offx=0, offy=1);
border: 1px solid #888;
}


/* Scroll handler */
#pma_navigation_scrollbar {
display: none;
position: fixed;
top: 25px;
<?php echo $left; ?>: 220px;
width: 20px;
background: #ddd;
height: 100%;
z-index: 1;
}
#pma_navigation_scrollbar_handle {
position: absolute;
width: 20px;
background: #888;
}
1 change: 1 addition & 0 deletions themes/pmahomme/css/common.css.php
View file
Expand Up @@ -1122,6 +1122,7 @@
border-bottom: 1px solid #fff;
background: #888;
padding: .3em .9em;
padding-<?php echo $left; ?>: 2.2em;
text-shadow: 0 1px 0 #000;
width: 10000px;
overflow: hidden;
Expand Down
24 changes: 4 additions & 20 deletions themes/pmahomme/css/navigation.css.php
View file
Expand Up @@ -19,6 +19,7 @@
#pma_navigation {
width: <?php echo $GLOBALS['cfg']['NaviWidth']; ?>px;
overflow: hidden;
overflow-y: auto;
position: fixed;
top: 0;
<?php echo $left; ?>: 0;
Expand Down Expand Up @@ -216,35 +217,18 @@
}
#pma_navigation_collapser {
width: 20px;
height: 23px;
line-height: 23px;
height: 22px;
line-height: 22px;
background: #eee;
color: #555;
font-weight: bold;
position: fixed;
top: 0;
<?php echo $left; ?>: 220px;
<?php echo $left; ?>: <?php echo $GLOBALS['cfg']['NaviWidth']; ?>px;
text-align: center;
cursor: pointer;
z-index: 800;
text-shadow: 0px 1px 0px #fff;
filter: dropshadow(color=#fff, offx=0, offy=1);
border: 1px solid #888;
}

/* Scroll handler */
#pma_navigation_scrollbar {
display: none;
position: fixed;
top: 25px;
<?php echo $left; ?>: <?php echo $GLOBALS['cfg']['NaviWidth'] - 20; ?>px;
width: 20px;
background: #ddd;
height: 100%;
z-index: 1;
}
#pma_navigation_scrollbar_handle {
position: absolute;
width: 20px;
background: #888;
}

0 comments on commit 421c5a2

Please sign in to comment.