From 9ae87854ed6474e111a4d77a0d747215e1cff9f6 Mon Sep 17 00:00:00 2001 From: Aris Feryanto Date: Fri, 27 May 2011 14:05:45 +0700 Subject: [PATCH] Add ability to resize column when browsing tables --- js/makegrid.js | 145 ++++++++++++++++++++++++ js/sql.js | 5 + sql.php | 1 + themes/original/css/theme_right.css.php | 18 +++ themes/pmahomme/css/theme_right.css.php | 16 +++ 5 files changed, 185 insertions(+) create mode 100644 js/makegrid.js diff --git a/js/makegrid.js b/js/makegrid.js new file mode 100644 index 0000000000..c452ea8dfc --- /dev/null +++ b/js/makegrid.js @@ -0,0 +1,145 @@ +(function ($) { + $.grid = function(t) { + // prepare the grid + var g = { + // constant + minColWidth: 5, + + // functions + dragStartRsz: function(e, obj) { + var n = $('div', this.cRsz).index(obj); + this.colRsz = { + x0: e.screenX, + n: n, + obj: obj, + objLeft: parseInt(obj.style.left), + objWidth: $('th div:eq(' + (1 + n) + ')', this.t).width() + }; + $('body').css('cursor', 'col-resize'); + $('body').noSelect(); + }, + dragMove: function(e) { + if (this.colRsz) { + var dx = e.screenX - this.colRsz.x0; + if (this.colRsz.objWidth + dx > this.minColWidth) + $(this.colRsz.obj).css('left', this.colRsz.objLeft + dx); + } + }, + dragEnd: function(e) { + if (this.colRsz) { + var dx = e.screenX - this.colRsz.x0; + var nw = this.colRsz.objWidth + dx; + if (nw < this.minColWidth) { + nw = this.minColWidth; + } + var n = this.colRsz.n; + $('tr', this.t).each(function() { + $('th:eq(' + (1 + n) + ') div, td:eq(' + (5 + n) + ') div', this).each(function() { + $(this).css('width', nw + 'px'); + }); + }); + $('body').css('cursor', 'default'); + this.reposRsz(); + this.colRsz = false; + } + }, + reposRsz: function() { + $(this.t).find('thead tr:first th:gt(0)').each(function() { + $this = $(this); + var n = $this.index(); + $cb = $('div:eq(' + (n - 1) + ')', g.cRsz); // column border + $cb.css('left', $this.position().left + $this.width()); + }); + } + } + g.gDiv = document.createElement('div'); // create global div + g.cRsz = document.createElement('div'); // column resizer + g.t = t; + + // create column borders + $(t).find('thead tr:first th:gt(0)').each(function() { + $this = $(this); + var cb = document.createElement('div'); // column border + cb.style.left = $this.position().left + $this.width() + 'px'; + cb.style.height = '100%'; + cb.className = 'colborder'; + $(cb).mousedown(function(e) { + g.dragStartRsz(e, this); + }); + $(g.cRsz).append(cb); + }); + + // wrap all cells with div + $(t).find('th, td').each(function() { + $(this).wrapInner('
'); + }); + + // register events + $(document).mousemove(function(e) { + g.dragMove(e); + }); + $(document).mouseup(function(e) { + g.dragEnd(e); + }); + + // add table class + $(t).addClass('pma_table'); + + // link all divs + $(t).before(g.gDiv); + $(g.gDiv).append(t); + $(g.gDiv).prepend(g.cRsz); + + // some adjustment + g.cRsz.className = 'cRsz'; + $(g.cRsz).css('height', $(t).height()); + $(t).removeClass('data'); + $(g.gDiv).addClass('data'); + }; + + // document ready checking + var docready = false; + $(document).ready(function() { + docready = true; + }); + + // Additional jQuery functions + $.fn.makegrid = function() { + return this.each(function() { + if (!docready) { + var t = this; + $(document).ready(function() { + $.grid(t); + }); + } else { + $.grid(this); + } + }); + }; + $.fn.noSelect = function (p) { //no select plugin by Paulo P.Marinas + var prevent = (p == null) ? true : p; + if (prevent) { + return this.each(function () { + if ($.browser.msie || $.browser.safari) $(this).bind('selectstart', function () { + return false; + }); + else if ($.browser.mozilla) { + $(this).css('MozUserSelect', 'none'); + $('body').trigger('focus'); + } else if ($.browser.opera) $(this).bind('mousedown', function () { + return false; + }); + else $(this).attr('unselectable', 'on'); + }); + } else { + return this.each(function () { + if ($.browser.msie || $.browser.safari) $(this).unbind('selectstart'); + else if ($.browser.mozilla) $(this).css('MozUserSelect', 'inherit'); + else if ($.browser.opera) $(this).unbind('mousedown'); + else $(this).removeAttr('unselectable', 'on'); + }); + } + }; //end noSelect + +})(jQuery); + diff --git a/js/sql.js b/js/sql.js index 32a5bbaf1a..5e2f376cfb 100644 --- a/js/sql.js +++ b/js/sql.js @@ -1142,6 +1142,11 @@ $(document).ready(function() { $('.column_heading').live('click', function() { PMA_changeClassForColumn($(this), 'marked'); }); + + /** + * create resizable table + */ + $('#table_results').makegrid(); }) /**#@- */ diff --git a/sql.php b/sql.php index d07022b568..3a47018237 100644 --- a/sql.php +++ b/sql.php @@ -815,6 +815,7 @@ else { $GLOBALS['js_include'][] = 'functions.js'; $GLOBALS['js_include'][] = 'sql.js'; + $GLOBALS['js_include'][] = 'makegrid.js'; unset($message); diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php index 406dc9d8e9..a6858a143e 100644 --- a/themes/original/css/theme_right.css.php +++ b/themes/original/css/theme_right.css.php @@ -1771,3 +1771,21 @@ fieldset .disabled-field td { -webkit-box-sizing: border-box; } + + +.colborder { + border-right: solid 1px #FFFFFF; + cursor: col-resize; + margin-left: 5px; + position: absolute; + width: 3px; +} + +.pma_table thead th div, .pma_table tbody td div { + display: block; + overflow: hidden; +} + +.cRsz { + position: absolute; +} diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php index fc1b36c371..e53bdfb02d 100644 --- a/themes/pmahomme/css/theme_right.css.php +++ b/themes/pmahomme/css/theme_right.css.php @@ -2126,3 +2126,19 @@ fieldset .disabled-field td { margin: 0 6px; } +.colborder { + border-right: solid 1px #FFFFFF; + cursor: col-resize; + margin-left: -1px; + position: absolute; + width: 3px; +} + +.pma_table thead th div, .pma_table tbody td div { + display: block; + overflow: hidden; +} + +.cRsz { + position: absolute; +}