gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented resizing and collapsing of the navigation

Browse Source
This commit is contained in:
Rouslan Placella 2012-06-26 02:21:08 +01:00
parent 2b12872c2a
commit c21afeb2dc
8 changed files with 236 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/functions.js
View File

@ -3620,7 +3620,7 @@ AJAX.registerOnload('functions.js', function() {
if ($("#floating_menubar").length && $('#PMA_disable_floating_menubar').length == 0) {
var left = $('html').attr('dir') == 'ltr' ? 'left' : 'right';
$("#floating_menubar")
.css('margin-' + left, $('#pma_navigation').width())
.css('margin-' + left, $('#pma_navigation').width() + $('#pma_navigation_resizer').width())
.css(left, 0)
.css({
'position': 'fixed',

4
js/messages.php
View File

@ -367,6 +367,10 @@ $js_messages['strChangePassword'] = __('Change Password');
/* navigation tabs */
$js_messages['strMore'] = __('More');
/* navigation panel */
$js_messages['strShowPanel'] = __('Show Panel');
$js_messages['strHidePanel'] = __('Hide Panel');
/* update */
$js_messages['strNewerVersion'] = __('A newer version of phpMyAdmin is available and you should consider upgrading. The newest version is %s, released on %s.');
/* l10n: Latest available phpMyAdmin version */

270
js/navigation.js
View File

@ -5,14 +5,6 @@
* @package phpMyAdmin-Navigation
*/
/**
* init
*/
var today = new Date();
var expires = new Date(today.getTime() + (56 * 86400000));
var pma_navi_width;
var pma_saveframesize_timeout = null;
/**
* opens/closes (hides/shows) tree elements
* loads data via ajax
@ -56,108 +48,186 @@ $(document).ready(function() {
});
});
function PMA_callFunctionDelayed(myfunction, delay)
{
if (typeof pma_saveframesize_timeout == "number") {
window.clearTimeout(pma_saveframesize_timeout);
pma_saveframesize_timeout = null;
}
}
/**
* saves current navigation frame width in a cookie
* usally called on resize of the navigation frame
* @var ResizeHandler Custom object that manages the resizing of the navigation
*
* XXX: Must only be ever instanciated once
* XXX: Inside event handlers the 'this' object is accessed as 'e.data.this'
*/
function PMA_saveFrameSizeReal()
{
if (parent.text_dir == 'ltr') {
pma_navi_width = parseInt(parent.document.getElementById('mainFrameset').cols);
} else {
pma_navi_width = parent.document.getElementById('mainFrameset').cols.match(/\d+$/);
}
if ((pma_navi_width > 0) && (pma_navi_width != PMA_getCookie('pma_navi_width'))) {
PMA_setCookie('pma_navi_width', pma_navi_width, expires);
}
}
/**
* calls PMA_saveFrameSizeReal with delay
*/
function PMA_saveFrameSize()
{
//alert(typeof(pma_saveframesize_timeout) + ' : ' + pma_saveframesize_timeout);
if (typeof pma_saveframesize_timeout == "number") {
window.clearTimeout(pma_saveframesize_timeout);
pma_saveframesize_timeout = null;
}
pma_saveframesize_timeout = window.setTimeout(PMA_saveFrameSizeReal, 2000);
}
/**
* sets navigation frame width to the value stored in the cookie
* usally called on document load
*/
function PMA_setFrameSize()
{
pma_navi_width = PMA_getCookie('pma_navi_width');
//alert('from cookie: ' + typeof(pma_navi_width) + ' : ' + pma_navi_width);
if (pma_navi_width != null && parent.document != document) {
if (parent.text_dir == 'ltr') {
parent.document.getElementById('mainFrameset').cols = pma_navi_width + ',*';
var ResizeHandler = function () {
/**
* Whether we are busy
*/
this.active = false;
/**
* @var int goto Used by the collapser to know where to go
* back to when uncollapsing the panel
*/
this.goto = 0;
/**
* @var string left Used to provide support for RTL languages
*/
this.left = $('html').attr('dir') == 'ltr' ? 'left' : 'right';
/**
* Adjusts the width of the navigation panel to the specified value
*
* @param int pos Navigation width in pixels
*
* @return void
*/
this.setWidth = function (pos) {
var resizer_width = $('#pma_navigation_resizer').width();
var $collapser = $('#pma_navigation_collapser');
$('#pma_navigation').width(pos);
$('body').css('margin-' + this.left, pos + 'px');
$("#floating_menubar").css('margin-' + this.left, (pos + resizer_width) + 'px');
$('#pma_navigation_resizer').css(this.left, pos + 'px');
if (pos === 0) {
$collapser
.css(this.left, pos + resizer_width)
.html(this.getSymbol(pos))
.prop('title', PMA_messages['strShowPanel']);
$('#serverinfo').css('padding-' + this.left, '2.2em');
} else {
parent.document.getElementById('mainFrameset').cols = '*,' + pma_navi_width;
$collapser
.css(this.left, pos - $collapser.width())
.html(this.getSymbol(pos))
.prop('title', PMA_messages['strHidePanel']);
$('#serverinfo').css('padding-' + this.left, '0.9em');
}
//alert('framesize set');
menuResize();
};
/**
* Returns the horizontal position of the mouse,
* relative to the outer side of the navigation panel
*
* @param int pos Navigation width in pixels
*
* @return void
*/
this.getPos = function (e) {
var pos = e.pageX;
if (this.left != 'left') {
pos = $(window).width() - e.pageX;
}
if (pos < 0) {
pos = 0;
} else if (pos + 100 >= $(window).width()) {
pos = $(window).width() - 100;
} else {
this.goto = 0;
}
return pos;
};
/**
* Returns the HTML code for the arrow symbol used in the collapser
*
* @param int width The width of the panel
*
* @return string
*/
this.getSymbol = function (width) {
if (this.left == 'left') {
if (width == 0) {
return '&rarr;';
} else {
return '&larr;';
}
} else {
if (width == 0) {
return '&larr;';
} else {
return '&rarr;';
}
}
};
/**
* Event handler for initiating a resize of the panel
*
* @param object e Event data (contains a reference to resizeHandler)
*
* @return void
*/
this.mousedown = function (e) {
e.preventDefault();
e.data.this.active = true;
$('body').css('cursor', 'col-resize');
};
/**
* Event handler for terminating a resize of the panel
*
* @param object e Event data (contains a reference to resizeHandler)
*
* @return void
*/
this.mouseup = function (e) {
if (e.data.this.active) {
e.data.this.active = false;
$('body').css('cursor', '');
$.cookie('pma_navi_width', e.data.this.getPos(e));
}
};
/**
* Event handler for updating the panel during a resize operation
*
* @param object e Event data (contains a reference to resizeHandler)
*
* @return void
*/
this.mousemove = function (e) {
if (e.data.this.active) {
e.preventDefault();
var pos = e.data.this.getPos(e);
e.data.this.setWidth(pos);
menuResize();
}
};
/**
* Event handler for collapsing the panel
*
* @param object e Event data (contains a reference to resizeHandler)
*
* @return void
*/
this.collapse = function (e) {
e.preventDefault();
e.data.active = false;
var goto = e.data.this.goto;
var width = $('#pma_navigation').width();
if (width === 0 && goto === 0) {
goto = 240;
}
e.data.this.setWidth(goto);
e.data.this.goto = width;
};
/* Initialisation section begins here */
if ($.cookie('pma_navi_width')) {
// If we have a cookie, set the width of the panel to its value
var pos = Math.abs(parseInt($.cookie('pma_navi_width'), 10));
this.setWidth(pos);
menuResize();
}
}
// Register the events for the resizer and the collapser
$('#pma_navigation_resizer')
.bind('mousedown', {'this':this}, this.mousedown);
$(document)
.bind('mouseup', {'this':this}, this.mouseup)
.bind('mousemove', {'this':this}, this.mousemove);
var $collapser = $('#pma_navigation_collapser');
$collapser.bind('click', {'this':this}, this.collapse);
// Add the correct arrow symbol to the collapser
$collapser.html(this.getSymbol($('#pma_navigation').width()));
}; // End of ResizeHandler
/**
* retrieves a named value from cookie
*
* @param string name name of the value to retrieve
* @return string value value for the given name from cookie
*/
function PMA_getCookie(name)
{
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) && (name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) {
return null;
}
var end = document.cookie.indexOf(";", len);
if (end == -1) {
end = document.cookie.length;
}
return unescape(document.cookie.substring(len,end));
}
/**
* stores a named value into cookie
*
* @param string name name of value
* @param string value value to be stored
* @param Date expires expire time
* @param string path
* @param string domain
* @param boolean secure
*/
function PMA_setCookie(name, value, expires, path, domain, secure)
{
document.cookie = name + "=" + escape(value) +
( (expires) ? ";expires=" + expires.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
}
/* Performed on load */
$(function(){
/* Instanciate the resize handler */
if ($('#pma_navigation').length) {
new ResizeHandler();
}
// Ajax handler for database pagination
$('#pma_navigation_tree div.pageselector a.ajax').live('click', function (e) {
e.preventDefault();
var $msgbox = PMA_ajaxShowMessage();

1
libraries/Header.class.php
View File

@ -146,6 +146,7 @@ class PMA_Header
$this->_scripts->addFile('ajax.js');
$this->_scripts->addFile('jquery/jquery-ui-1.8.16.custom.js');
$this->_scripts->addFile('jquery/jquery.sprintf.js');
$this->_scripts->addFile('jquery/jquery.cookie.js');
$this->_scripts->addFile('update-location.js');
$this->_scripts->addFile('jquery/jquery.qtip-1.0.0-rc3.js');

2
libraries/NavigationHeader.class.php
View File

@ -29,6 +29,8 @@ class PMA_NavigationHeader
);
$buffer = '<div id="pma_navigation">';
$buffer .= '<div id="pma_navigation_resizer"></div>';
$buffer .= '<div id="pma_navigation_collapser"></div>';
$buffer .= $this->logo();
$buffer .= $this->links();
$buffer .= $this->serverChoice();

29
themes/original/css/navigation.css.php
View File

@ -180,3 +180,32 @@ li.fast_filter span {
font-weight: bold;
color: #800;
}
/* Resize handler */
#pma_navigation_resizer {
width: 3px;
height: 100%;
background-color: #aaa;
cursor: col-resize;
position: fixed;
top: 0;
<?php echo $left; ?>: 240px;
z-index: 801;
}
#pma_navigation_collapser {
width: 20px;
height: 23px;
line-height: 23px;
background: #eee;
color: #555;
font-weight: bold;
position: fixed;
top: 0;
<?php echo $left; ?>: 220px;
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;
}

29
themes/pmahomme/css/navigation.css.php
View File

@ -187,3 +187,32 @@ li.fast_filter span {
font-weight: bold;
color: #800;
}
/* Resize handler */
#pma_navigation_resizer {
width: 3px;
height: 100%;
background-color: #aaa;
cursor: col-resize;
position: fixed;
top: 0;
<?php echo $left; ?>: 240px;
z-index: 801;
}
#pma_navigation_collapser {
width: 20px;
height: 23px;
line-height: 23px;
background: #eee;
color: #555;
font-weight: bold;
position: fixed;
top: 0;
<?php echo $left; ?>: 220px;
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;
}

BIN
themes/pmahomme/img/left_nav_bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 236 B

After

Width:  |  Height:  |  Size: 297 B