From 421c5a237d2c7e65f126e6ffd4dbbbda31550636 Mon Sep 17 00:00:00 2001 From: "J.M" Date: Tue, 22 Jan 2013 20:15:35 +0100 Subject: [PATCH] Use native scrollbar for navigation area --- js/navigation.js | 158 +----------------- .../navigation/NavigationHeader.class.php | 4 - themes/original/css/navigation.css.php | 24 +-- themes/pmahomme/css/common.css.php | 1 + themes/pmahomme/css/navigation.css.php | 24 +-- 5 files changed, 13 insertions(+), 198 deletions(-) diff --git a/js/navigation.js b/js/navigation.js index 635869ac0f..d8bf9188c4 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -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 @@ -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'); @@ -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') @@ -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 * @@ -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); @@ -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( @@ -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 @@ -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(); }; diff --git a/libraries/navigation/NavigationHeader.class.php b/libraries/navigation/NavigationHeader.class.php index 7d5af8cdd0..582830ce89 100644 --- a/libraries/navigation/NavigationHeader.class.php +++ b/libraries/navigation/NavigationHeader.class.php @@ -41,10 +41,6 @@ class PMA_NavigationHeader $buffer .= '
'; $buffer .= '
'; $buffer .= '
'; - $buffer .= '
'; - $buffer .= '
'; - $buffer .= '
'; - $buffer .= '
'; $buffer .= sprintf( '', $link_url diff --git a/themes/original/css/navigation.css.php b/themes/original/css/navigation.css.php index 634e6ebdac..9be84e9355 100644 --- a/themes/original/css/navigation.css.php +++ b/themes/original/css/navigation.css.php @@ -221,14 +221,14 @@ li.fast_filter.db_fast_filter { } #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; - : px; + : px; text-align: center; cursor: pointer; z-index: 800; @@ -236,21 +236,3 @@ li.fast_filter.db_fast_filter { filter: dropshadow(color=#fff, offx=0, offy=1); border: 1px solid #888; } - - -/* Scroll handler */ -#pma_navigation_scrollbar { - display: none; - position: fixed; - top: 25px; - : 220px; - width: 20px; - background: #ddd; - height: 100%; - z-index: 1; -} -#pma_navigation_scrollbar_handle { - position: absolute; - width: 20px; - background: #888; -} diff --git a/themes/pmahomme/css/common.css.php b/themes/pmahomme/css/common.css.php index 1c56b678f6..beeb550425 100644 --- a/themes/pmahomme/css/common.css.php +++ b/themes/pmahomme/css/common.css.php @@ -1122,6 +1122,7 @@ div#tablestatistics table { border-bottom: 1px solid #fff; background: #888; padding: .3em .9em; + padding-: 2.2em; text-shadow: 0 1px 0 #000; width: 10000px; overflow: hidden; diff --git a/themes/pmahomme/css/navigation.css.php b/themes/pmahomme/css/navigation.css.php index 7382c4d853..b75cfe9655 100644 --- a/themes/pmahomme/css/navigation.css.php +++ b/themes/pmahomme/css/navigation.css.php @@ -19,6 +19,7 @@ if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) { #pma_navigation { width: px; overflow: hidden; + overflow-y: auto; position: fixed; top: 0; : 0; @@ -216,14 +217,14 @@ li.fast_filter.db_fast_filter { } #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; - : 220px; + : px; text-align: center; cursor: pointer; z-index: 800; @@ -231,20 +232,3 @@ li.fast_filter.db_fast_filter { filter: dropshadow(color=#fff, offx=0, offy=1); border: 1px solid #888; } - -/* Scroll handler */ -#pma_navigation_scrollbar { - display: none; - position: fixed; - top: 25px; - : px; - width: 20px; - background: #ddd; - height: 100%; - z-index: 1; -} -#pma_navigation_scrollbar_handle { - position: absolute; - width: 20px; - background: #888; -}