625 lines
25 KiB
JavaScript
625 lines
25 KiB
JavaScript
(function ($) {
|
|
$.grid = function(t) {
|
|
// prepare the grid
|
|
var g = {
|
|
// constant
|
|
minColWidth: 5,
|
|
|
|
// variables, assigned with default value, changed later
|
|
alignment: 'horizontal', // 3 possibilities: vertical, horizontal, horizontalflipped
|
|
actionSpan: 5,
|
|
colOrder: new Array(), // array of column order
|
|
tableCreateTime: null, // table creation time, only available in "Browse tab"
|
|
hintShown: false, // true if hint balloon is shown, used by updateHint() method
|
|
reorderHint: '', // string, hint for column reordering
|
|
sortHint: '', // string, hint for column sorting
|
|
markHint: '', // string, hint for column marking
|
|
showReorderHint: false, // boolean, used by showHint() method
|
|
showSortHint: false, // boolean, used by showHint() method
|
|
showMarkHint: false,
|
|
hintIsHiding: false, // true when hint is still shown, but hide() already called
|
|
|
|
// functions
|
|
dragStartRsz: function(e, obj) { // start column resize
|
|
var n = $(this.cRsz).find('div').index(obj);
|
|
this.colRsz = {
|
|
x0: e.pageX,
|
|
n: n,
|
|
obj: obj,
|
|
objLeft: $(obj).position().left,
|
|
objWidth: this.alignment != 'vertical' ?
|
|
$(this.t).find('th.draggable:eq(' + n + ') span').outerWidth() :
|
|
$(this.t).find('tr:first td:eq(' + n + ') span').outerWidth()
|
|
};
|
|
$('body').css('cursor', 'col-resize');
|
|
$('body').noSelect();
|
|
},
|
|
|
|
dragStartMove: function(e, obj) { // start column move
|
|
// prepare the cCpy and cPointer from the dragged column
|
|
$(this.cCpy).text($(obj).text());
|
|
var objPos = $(obj).position();
|
|
if (this.alignment != 'vertical') {
|
|
$(this.cCpy).css({
|
|
top: objPos.top + 20,
|
|
left: objPos.left,
|
|
height: $(obj).height(),
|
|
width: $(obj).width()
|
|
});
|
|
$(this.cPointer).css({
|
|
top: objPos.top
|
|
});
|
|
} else { // vertical alignment
|
|
$(this.cCpy).css({
|
|
top: objPos.top,
|
|
left: objPos.left + 30,
|
|
height: $(obj).height(),
|
|
width: $(obj).width()
|
|
});
|
|
$(this.cPointer).css({
|
|
top: objPos.top
|
|
});
|
|
}
|
|
|
|
// get the column index, zero-based
|
|
var n = this.getHeaderIdx(obj);
|
|
|
|
this.colMov = {
|
|
x0: e.pageX,
|
|
y0: e.pageY,
|
|
n: n,
|
|
newn: n,
|
|
obj: obj,
|
|
objTop: objPos.top,
|
|
objLeft: objPos.left
|
|
};
|
|
$('body').css('cursor', 'move');
|
|
this.hideHint();
|
|
$('body').noSelect();
|
|
},
|
|
|
|
dragMove: function(e) {
|
|
if (this.colRsz) {
|
|
var dx = e.pageX - this.colRsz.x0;
|
|
if (this.colRsz.objWidth + dx > this.minColWidth)
|
|
$(this.colRsz.obj).css('left', this.colRsz.objLeft + dx + 'px');
|
|
} else if (this.colMov) {
|
|
// dragged column animation
|
|
if (this.alignment != 'vertical') {
|
|
var dx = e.pageX - this.colMov.x0;
|
|
$(this.cCpy)
|
|
.css('left', this.colMov.objLeft + dx)
|
|
.show();
|
|
} else { // vertical alignment
|
|
var dy = e.pageY - this.colMov.y0;
|
|
$(this.cCpy)
|
|
.css('top', this.colMov.objTop + dy)
|
|
.show();
|
|
}
|
|
|
|
// pointer animation
|
|
var hoveredCol = this.getHoveredCol(e);
|
|
if (hoveredCol) {
|
|
var newn = this.getHeaderIdx(hoveredCol);
|
|
this.colMov.newn = newn;
|
|
if (newn != this.colMov.n) {
|
|
// show the column pointer in the right place
|
|
var colPos = $(hoveredCol).position();
|
|
if (this.alignment != 'vertical') {
|
|
var newleft = newn < this.colMov.n ?
|
|
colPos.left :
|
|
colPos.left + $(hoveredCol).outerWidth();
|
|
$(this.cPointer)
|
|
.css({
|
|
left: newleft,
|
|
visibility: 'visible'
|
|
});
|
|
} else { // vertical alignment
|
|
var newtop = newn < this.colMov.n ?
|
|
colPos.top :
|
|
colPos.top + $(hoveredCol).outerHeight();
|
|
$(this.cPointer)
|
|
.css({
|
|
top: newtop,
|
|
visibility: 'visible'
|
|
});
|
|
}
|
|
} else {
|
|
// no movement to other column, hide the column pointer
|
|
$(this.cPointer).css('visibility', 'hidden');
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
dragEnd: function(e) {
|
|
if (this.colRsz) {
|
|
var dx = e.pageX - this.colRsz.x0;
|
|
var nw = this.colRsz.objWidth + dx;
|
|
if (nw < this.minColWidth) {
|
|
nw = this.minColWidth;
|
|
}
|
|
var n = this.colRsz.n;
|
|
// do the resizing
|
|
if (this.alignment != 'vertical') {
|
|
$(this.t).find('tr').each(function() {
|
|
$(this).find('th.draggable:eq(' + n + ') span,' +
|
|
'td:eq(' + (g.actionSpan + n) + ') span')
|
|
.css('width', nw);
|
|
});
|
|
} else { // vertical alignment
|
|
$(this.t).find('tr').each(function() {
|
|
$(this).find('td:eq(' + n + ') span')
|
|
.css('width', nw);
|
|
});
|
|
}
|
|
$('body').css('cursor', 'default');
|
|
this.reposRsz();
|
|
this.colRsz = false;
|
|
} else if (this.colMov) {
|
|
// shift columns
|
|
if (this.colMov.newn != this.colMov.n) {
|
|
this.shiftCol(this.colMov.n, this.colMov.newn);
|
|
// assign new position
|
|
var objPos = $(this.colMov.obj).position();
|
|
this.colMov.objTop = objPos.top;
|
|
this.colMov.objLeft = objPos.left;
|
|
this.colMov.n = this.colMov.newn;
|
|
// send request to server to remember the column order
|
|
if (this.tableCreateTime) {
|
|
this.sendColOrder();
|
|
}
|
|
this.refreshRestoreButton();
|
|
}
|
|
|
|
// animate new column position
|
|
$(this.cCpy).stop(true, true)
|
|
.animate({
|
|
top: g.colMov.objTop,
|
|
left: g.colMov.objLeft
|
|
}, 'fast')
|
|
.fadeOut();
|
|
$(this.cPointer).css('visibility', 'hidden');
|
|
|
|
this.colMov = false;
|
|
}
|
|
$('body').css('cursor', 'default');
|
|
$('body').noSelect(false);
|
|
},
|
|
|
|
/**
|
|
* Reposition column resize bars.
|
|
*/
|
|
reposRsz: function() {
|
|
$(this.cRsz).find('div').hide();
|
|
$firstRowCols = this.alignment != 'vertical' ?
|
|
$(this.t).find('tr:first th.draggable') :
|
|
$(this.t).find('tr:first td');
|
|
for (var n = 0; n < $firstRowCols.length; n++) {
|
|
$this = $($firstRowCols[n]);
|
|
$cb = $(g.cRsz).find('div:eq(' + n + ')'); // column border
|
|
var pad = parseInt($this.css('padding-right'));
|
|
$cb.css('left', Math.floor($this.position().left + $this.width() + pad))
|
|
.show();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shift column from index oldn to newn.
|
|
*/
|
|
shiftCol: function(oldn, newn) {
|
|
if (this.alignment != 'vertical') {
|
|
$(this.t).find('tr').each(function() {
|
|
if (newn < oldn) {
|
|
$(this).find('th.draggable:eq(' + newn + '),' +
|
|
'td:eq(' + (g.actionSpan + newn) + ')')
|
|
.before($(this).find('th.draggable:eq(' + oldn + '),' +
|
|
'td:eq(' + (g.actionSpan + oldn) + ')'));
|
|
} else {
|
|
$(this).find('th.draggable:eq(' + newn + '),' +
|
|
'td:eq(' + (g.actionSpan + newn) + ')')
|
|
.after($(this).find('th.draggable:eq(' + oldn + '),' +
|
|
'td:eq(' + (g.actionSpan + oldn) + ')'));
|
|
}
|
|
});
|
|
// reposition the column resize bars
|
|
this.reposRsz();
|
|
|
|
} else { // vertical alignment
|
|
// shift rows
|
|
if (newn < oldn) {
|
|
$(this.t).find('tr:eq(' + (g.actionSpan + newn) + ')')
|
|
.before($(this.t).find('tr:eq(' + (g.actionSpan + oldn) + ')'));
|
|
} else {
|
|
$(this.t).find('tr:eq(' + (g.actionSpan + newn) + ')')
|
|
.after($(this.t).find('tr:eq(' + (g.actionSpan + oldn) + ')'));
|
|
}
|
|
}
|
|
// adjust the colOrder
|
|
var tmp = this.colOrder[oldn];
|
|
this.colOrder.splice(oldn, 1);
|
|
this.colOrder.splice(newn, 0, tmp);
|
|
},
|
|
|
|
/**
|
|
* Find currently hovered table column's header (excluding actions column).
|
|
* @return the hovered column's th object or undefined if no hovered column found.
|
|
*/
|
|
getHoveredCol: function(e) {
|
|
var hoveredCol;
|
|
$headers = $(this.t).find('th.draggable');
|
|
if (this.alignment != 'vertical') {
|
|
$headers.each(function() {
|
|
var left = $(this).position().left;
|
|
var right = left + $(this).outerWidth();
|
|
if (left <= e.pageX && e.pageX <= right) {
|
|
hoveredCol = this;
|
|
}
|
|
});
|
|
} else { // vertical alignment
|
|
$headers.each(function() {
|
|
var top = $(this).position().top;
|
|
var bottom = top + $(this).height();
|
|
if (top <= e.pageY && e.pageY <= bottom) {
|
|
hoveredCol = this;
|
|
}
|
|
});
|
|
}
|
|
return hoveredCol;
|
|
},
|
|
|
|
/**
|
|
* Get a zero-based index from a <th class="draggable"> tag in a table.
|
|
*/
|
|
getHeaderIdx: function(obj) {
|
|
var n;
|
|
if (this.alignment != 'vertical') {
|
|
n = $(obj).parents('tr').find('th.draggable').index(obj);
|
|
} else {
|
|
var column_idx = $(obj).index();
|
|
var $th_in_same_column = $(this.t).find('th.draggable:nth-child(' + (column_idx + 1) + ')');
|
|
n = $th_in_same_column.index(obj);
|
|
}
|
|
return n;
|
|
},
|
|
|
|
/**
|
|
* Reposition the table back to normal order.
|
|
*/
|
|
restore: function() {
|
|
// use insertion sort, since we already have shiftCol function
|
|
for (var i = 1; i < this.colOrder.length; i++) {
|
|
var x = this.colOrder[i];
|
|
var j = i - 1;
|
|
while (j >= 0 && x < this.colOrder[j]) {
|
|
j--;
|
|
}
|
|
if (j != i - 1) {
|
|
this.shiftCol(i, j + 1);
|
|
}
|
|
}
|
|
if (this.tableCreateTime) {
|
|
// send request to server to remember the column order
|
|
this.sendColOrder();
|
|
}
|
|
this.refreshRestoreButton();
|
|
},
|
|
|
|
/**
|
|
* Send column order to the server.
|
|
*/
|
|
sendColOrder: function() {
|
|
$.post('sql.php', {
|
|
ajax_request: true,
|
|
db: window.parent.db,
|
|
table: window.parent.table,
|
|
token: window.parent.token,
|
|
server: window.parent.server,
|
|
set_col_order: true,
|
|
col_order: this.colOrder.toString(),
|
|
table_create_time: this.tableCreateTime
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Refresh restore button state.
|
|
* Make restore button disabled if the table is similar with initial state.
|
|
*/
|
|
refreshRestoreButton: function() {
|
|
// check if table state is as initial state
|
|
var isInitial = true;
|
|
for (var i = 0; i < this.colOrder.length; i++) {
|
|
if (this.colOrder[i] != i) {
|
|
isInitial = false;
|
|
break;
|
|
}
|
|
}
|
|
// enable or disable restore button
|
|
if (isInitial) {
|
|
$('.restore_column').hide();
|
|
} else {
|
|
$('.restore_column').show();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Show hint with the text supplied.
|
|
*/
|
|
showHint: function(e) {
|
|
if (!this.colRsz && !this.colMov) { // if not resizing or dragging
|
|
var text = '';
|
|
if (this.showReorderHint && this.reorderHint) {
|
|
text += this.reorderHint;
|
|
}
|
|
if (this.showSortHint && this.sortHint) {
|
|
text += text.length > 0 ? '<br />' : '';
|
|
text += this.sortHint;
|
|
}
|
|
if (this.showMarkHint && this.markHint &&
|
|
!this.showSortHint // we do not show mark hint, when sort hint is shown
|
|
) {
|
|
text += text.length > 0 ? '<br />' : '';
|
|
text += this.markHint;
|
|
}
|
|
|
|
// hide the hint if no text
|
|
if (!text) {
|
|
this.hideHint();
|
|
return;
|
|
}
|
|
|
|
$(this.dHint).html(text);
|
|
if (!this.hintShown || this.hintIsHiding) {
|
|
$(this.dHint)
|
|
.stop(true, true)
|
|
.css({
|
|
top: e.pageY,
|
|
left: e.pageX + 15
|
|
})
|
|
.show('fast');
|
|
this.hintShown = true;
|
|
this.hintIsHiding = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hide the hint.
|
|
*/
|
|
hideHint: function() {
|
|
if (this.hintShown) {
|
|
$(this.dHint)
|
|
.stop(true, true)
|
|
.hide(300, function() {
|
|
g.hintShown = false;
|
|
g.hintIsHiding = false;
|
|
});
|
|
this.hintIsHiding = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Update hint position.
|
|
*/
|
|
updateHint: function(e) {
|
|
if (this.hintShown) {
|
|
$(this.dHint).css({
|
|
top: e.pageY,
|
|
left: e.pageX + 15
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
g.gDiv = document.createElement('div'); // create global div
|
|
g.cRsz = document.createElement('div'); // column resizer
|
|
g.cCpy = document.createElement('div'); // column copy, to store copy of dragged column header
|
|
g.cPointer = document.createElement('div'); // column pointer, used when reordering column
|
|
g.dHint = document.createElement('div'); // draggable hint
|
|
|
|
// assign the table alignment
|
|
g.alignment = $("#top_direction_dropdown").val();
|
|
|
|
// adjust g.cCpy
|
|
g.cCpy.className = 'cCpy';
|
|
$(g.cCpy).hide();
|
|
|
|
// adjust g.cPoint
|
|
g.cPointer.className = g.alignment != 'vertical' ? 'cPointer' : 'cPointerVer';
|
|
$(g.cPointer).css('visibility', 'hidden');
|
|
|
|
// adjust g.dHint
|
|
g.dHint.className = 'dHint';
|
|
$(g.dHint).hide();
|
|
|
|
// chain table and grid together
|
|
t.grid = g;
|
|
g.t = t;
|
|
|
|
// get first row data columns
|
|
var $firstRowCols = g.alignment != 'vertical' ?
|
|
$(t).find('tr:first th.draggable') :
|
|
$(t).find('tr:first td');
|
|
|
|
// assign first column (actions) span
|
|
if (! $(t).find('tr:first th:first').hasClass('draggable')) { // action header exist
|
|
g.actionSpan = g.alignment != 'vertical' ?
|
|
$(t).find('tr:first th:first').prop('colspan') :
|
|
$(t).find('tr:first th:first').prop('rowspan');
|
|
} else {
|
|
g.actionSpan = 0;
|
|
}
|
|
|
|
// assign table create time
|
|
// #table_create_time will only available if we are in "Browse" tab
|
|
g.tableCreateTime = $('#table_create_time').val();
|
|
|
|
// assign column reorder & column sort hint
|
|
g.reorderHint = $('#col_order_hint').val();
|
|
g.sortHint = $('#sort_hint').val();
|
|
g.markHint = $('#col_mark_hint').val();
|
|
|
|
// initialize column order
|
|
$col_order = $('#col_order');
|
|
if ($col_order.length > 0) {
|
|
g.colOrder = $col_order.val().split(',');
|
|
for (var i = 0; i < g.colOrder.length; i++) {
|
|
g.colOrder[i] = parseInt(g.colOrder[i]);
|
|
}
|
|
} else {
|
|
g.colOrder = new Array();
|
|
for (var i = 0; i < $firstRowCols.length; i++) {
|
|
g.colOrder.push(i);
|
|
}
|
|
}
|
|
|
|
// create column borders
|
|
$firstRowCols.each(function() {
|
|
$this = $(this);
|
|
var cb = document.createElement('div'); // column border
|
|
var pad = parseInt($this.css('padding-right'));
|
|
$(cb).css('left', Math.floor($this.position().left + $this.width() + pad));
|
|
$(cb).addClass('colborder');
|
|
$(cb).mousedown(function(e) {
|
|
g.dragStartRsz(e, this);
|
|
});
|
|
$(g.cRsz).append(cb);
|
|
});
|
|
|
|
// wrap all data cells, except actions cell, with span
|
|
$(t).find('th, td:not(:has(span))')
|
|
.wrapInner('<span />');
|
|
|
|
// register events
|
|
if ($firstRowCols.length > 1 && g.reorderHint) { // make sure columns is reorderable
|
|
$(t).find('th.draggable')
|
|
.css('cursor', 'move')
|
|
.mousedown(function(e) {
|
|
g.dragStartMove(e, this);
|
|
})
|
|
.mouseenter(function(e) {
|
|
g.showReorderHint = true;
|
|
g.showHint(e);
|
|
})
|
|
.mouseleave(function(e) {
|
|
g.showReorderHint = false;
|
|
g.showHint(e);
|
|
});
|
|
}
|
|
$(t).find('th.draggable a')
|
|
.attr('title', '') // hide default tooltip for sorting
|
|
.mouseenter(function(e) {
|
|
g.showSortHint = true;
|
|
g.showHint(e);
|
|
})
|
|
.mouseleave(function(e) {
|
|
g.showSortHint = false;
|
|
g.showHint(e);
|
|
});
|
|
$(t).find('th.marker')
|
|
.mouseenter(function(e) {
|
|
g.showMarkHint = true;
|
|
g.showHint(e);
|
|
})
|
|
.mouseleave(function(e) {
|
|
g.showMarkHint = false;
|
|
g.showHint(e);
|
|
});
|
|
$(document).mousemove(function(e) {
|
|
g.dragMove(e);
|
|
g.updateHint(e);
|
|
});
|
|
$(document).mouseup(function(e) {
|
|
g.dragEnd(e);
|
|
});
|
|
$('.restore_column').click(function() {
|
|
g.restore();
|
|
});
|
|
|
|
// add table class
|
|
$(t).addClass('pma_table');
|
|
|
|
// link all divs
|
|
$(t).before(g.gDiv);
|
|
$(g.gDiv).append(t);
|
|
$(g.gDiv).prepend(g.cRsz);
|
|
$(g.gDiv).append(g.cCpy);
|
|
$(g.gDiv).append(g.cPointer);
|
|
$(g.gDiv).append(g.dHint);
|
|
|
|
// some adjustment
|
|
g.refreshRestoreButton();
|
|
g.cRsz.className = 'cRsz';
|
|
$(t).removeClass('data');
|
|
$(g.gDiv).addClass('data');
|
|
$(g.cRsz).css('height', $(t).height());
|
|
$(t).find('th a').bind('dragstart', function() {
|
|
return false;
|
|
});
|
|
};
|
|
|
|
// document ready checking
|
|
var docready = false;
|
|
$(document).ready(function() {
|
|
docready = true;
|
|
});
|
|
|
|
// Additional jQuery functions
|
|
/**
|
|
* Make resizable, reorderable grid.
|
|
*/
|
|
$.fn.makegrid = function() {
|
|
return this.each(function() {
|
|
if (!docready) {
|
|
var t = this;
|
|
$(document).ready(function() {
|
|
$.grid(t);
|
|
});
|
|
} else {
|
|
$.grid(this);
|
|
}
|
|
});
|
|
};
|
|
/**
|
|
* Refresh grid. This must be called after changing the grid's content.
|
|
*/
|
|
$.fn.refreshgrid = function() {
|
|
return this.each(function() {
|
|
if (!docready) {
|
|
var t = this;
|
|
$(document).ready(function() {
|
|
if (t.grid) t.grid.reposRsz();
|
|
});
|
|
} else {
|
|
if (this.grid) this.grid.reposRsz();
|
|
}
|
|
});
|
|
}
|
|
$.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);
|
|
|
