Merge pull request #16522 from mauriciofauth/jquery-sortable-table
Remove jquery.sortableTable.js from js/vendor dir
This commit is contained in:
commit
80fdca1401
@ -1,4 +1,3 @@
|
||||
/* vim: set expandtab sw=4 ts=4 sts=4: */
|
||||
/**
|
||||
* This file is internal to phpMyAdmin.
|
||||
* @license see the main phpMyAdmin license.
|
||||
@ -9,41 +8,41 @@
|
||||
* @name Sortable Table JQuery plugin
|
||||
*
|
||||
* @requires jQuery
|
||||
*
|
||||
*/
|
||||
|
||||
/* Options:
|
||||
/**
|
||||
* Options:
|
||||
*
|
||||
* $('table').sortableTable({
|
||||
* ignoreRect: { top, left, width, height } - Relative coordinates on each element. If the user clicks
|
||||
* in this area, it is not seen as a drag&drop request. Useful for toolbars etc.
|
||||
* events: {
|
||||
* start: callback function when the user starts dragging
|
||||
* drop: callback function after an element has been dropped
|
||||
* }
|
||||
* })
|
||||
*/
|
||||
|
||||
$('table').sortableTable({
|
||||
ignoreRect: { top, left, width, height } - relative coordinates on each element. If the user clicks
|
||||
in this area, it is not seen as a drag&drop request. Useful for toolbars etc.
|
||||
events: {
|
||||
start: callback function when the user starts dragging
|
||||
drop: callback function after an element has been dropped
|
||||
}
|
||||
})
|
||||
*/
|
||||
/**
|
||||
* Commands:
|
||||
*
|
||||
* $('table').sortableTable('init') - equivalent to $('table').sortableTable()
|
||||
* $('table').sortableTable('refresh') - if the table has been changed, refresh correctly assigns all events again
|
||||
* $('table').sortableTable('destroy') - removes all events from the table
|
||||
*/
|
||||
|
||||
/* Commands:
|
||||
|
||||
$('table').sortableTable('init') - equivalent to $('table').sortableTable()
|
||||
$('table').sortableTable('refresh') - if the table has been changed, refresh correctly assigns all events again
|
||||
$('table').sortableTable('destroy') - removes all events from the table
|
||||
|
||||
*/
|
||||
|
||||
/* Setup:
|
||||
|
||||
Can be applied on any table, there is just one convention.
|
||||
Each cell (<td>) has to contain one and only one element (preferably div or span)
|
||||
which is the actually draggable element.
|
||||
*/
|
||||
/**
|
||||
* Setup:
|
||||
*
|
||||
* Can be applied on any table, there is just one convention.
|
||||
* Each cell (<td>) has to contain one and only one element (preferably div or span)
|
||||
* which is the actually draggable element.
|
||||
*/
|
||||
(function ($) {
|
||||
jQuery.fn.sortableTable = function (method) {
|
||||
|
||||
var methods = {
|
||||
init: function (options) {
|
||||
var tb = new sortableTableInstance(this, options);
|
||||
var tb = new SortableTableInstance(this, options);
|
||||
tb.init();
|
||||
$(this).data('sortableTable', tb);
|
||||
},
|
||||
@ -63,113 +62,124 @@ $('table').sortableTable('destroy') - removes all events from the table
|
||||
$.error('Method ' + method + ' does not exist on jQuery.sortableTable');
|
||||
}
|
||||
|
||||
function sortableTableInstance(table, options) {
|
||||
function SortableTableInstance (table, options = {}) {
|
||||
var down = false;
|
||||
var $draggedEl, oldCell, previewMove, id;
|
||||
|
||||
if (!options) options = {};
|
||||
var $draggedEl;
|
||||
var oldCell;
|
||||
var previewMove;
|
||||
var id;
|
||||
|
||||
/* Mouse handlers on the child elements */
|
||||
var onMouseUp = function (e) {
|
||||
dropAt(e.pageX, e.pageY);
|
||||
}
|
||||
};
|
||||
|
||||
var onMouseDown = function (e) {
|
||||
$draggedEl = $(this).children();
|
||||
if ($draggedEl.length == 0) return;
|
||||
if (options.ignoreRect && insideRect({ x: e.pageX - $draggedEl.offset().left, y: e.pageY - $draggedEl.offset().top }, options.ignoreRect)) return;
|
||||
if ($draggedEl.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (options.ignoreRect && insideRect({ x: e.pageX - $draggedEl.offset().left, y: e.pageY - $draggedEl.offset().top }, options.ignoreRect)) {
|
||||
return;
|
||||
}
|
||||
|
||||
down = true;
|
||||
oldCell = this;
|
||||
//move(e.pageX,e.pageY);
|
||||
|
||||
if (options.events && options.events.start)
|
||||
if (options.events && options.events.start) {
|
||||
options.events.start(this);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
var globalMouseMove = function (e) {
|
||||
if (down) {
|
||||
move(e.pageX, e.pageY);
|
||||
|
||||
if (inside($(oldCell), e.pageX, e.pageY)) {
|
||||
if (previewMove != null) {
|
||||
if (previewMove !== null) {
|
||||
moveTo(previewMove);
|
||||
previewMove = null;
|
||||
}
|
||||
} else
|
||||
} else {
|
||||
$(table).find('td').each(function () {
|
||||
if (inside($(this), e.pageX, e.pageY)) {
|
||||
if ($(previewMove).attr('class') != $(this).children().first().attr('class')) {
|
||||
if (previewMove != null) moveTo(previewMove);
|
||||
if ($(previewMove).attr('class') !== $(this).children().first().attr('class')) {
|
||||
if (previewMove !== null) {
|
||||
moveTo(previewMove);
|
||||
}
|
||||
previewMove = $(this).children().first();
|
||||
if (previewMove.length > 0)
|
||||
if (previewMove.length > 0) {
|
||||
moveTo($(previewMove), {
|
||||
pos: {
|
||||
top: $(oldCell).offset().top - $(previewMove).parent().offset().top,
|
||||
left: $(oldCell).offset().left - $(previewMove).parent().offset().left
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
var globalMouseOut = function () {
|
||||
if (down) {
|
||||
down = false;
|
||||
if (previewMove) moveTo(previewMove);
|
||||
if (previewMove) {
|
||||
moveTo(previewMove);
|
||||
}
|
||||
moveTo($draggedEl);
|
||||
previewMove = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize sortable table
|
||||
this.init = function () {
|
||||
id = 1;
|
||||
// Add some required css to each child element in the <td>s
|
||||
$(table).find('td').children().each(function () {
|
||||
// Remove any old occurences of our added draggable-num class
|
||||
$(this).attr('class', $(this).attr('class').replace(/\s*draggable\-\d+/g, ''));
|
||||
// Remove any old occurrences of our added draggable-num class
|
||||
$(this).attr('class', $(this).attr('class').replace(/\s*draggable-\d+/g, ''));
|
||||
$(this).addClass('draggable-' + (id++));
|
||||
});
|
||||
|
||||
// Mouse events
|
||||
$(table).find('td').bind('mouseup', onMouseUp);
|
||||
$(table).find('td').bind('mousedown', onMouseDown);
|
||||
$(table).find('td').on('mouseup', onMouseUp);
|
||||
$(table).find('td').on('mousedown', onMouseDown);
|
||||
|
||||
$(document).mousemove(globalMouseMove);
|
||||
$(document).bind('mouseleave', globalMouseOut);
|
||||
}
|
||||
$(document).on('mousemove', globalMouseMove);
|
||||
$(document).on('mouseleave', globalMouseOut);
|
||||
};
|
||||
|
||||
// Call this when the table has been updated
|
||||
this.refresh = function () {
|
||||
this.destroy();
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
this.destroy = function () {
|
||||
// Add some required css to each child element in the <td>s
|
||||
$(table).find('td').children().each(function () {
|
||||
// Remove any old occurences of our added draggable-num class
|
||||
$(this).attr('class', $(this).attr('class').replace(/\s*draggable\-\d+/g, ''));
|
||||
// Remove any old occurrences of our added draggable-num class
|
||||
$(this).attr('class', $(this).attr('class').replace(/\s*draggable-\d+/g, ''));
|
||||
});
|
||||
|
||||
// Mouse events
|
||||
$(table).find('td').unbind('mouseup', onMouseUp)
|
||||
$(table).find('td').unbind('mousedown', onMouseDown);
|
||||
$(table).find('td').off('mouseup', onMouseUp);
|
||||
$(table).find('td').off('mousedown', onMouseDown);
|
||||
|
||||
$(document).unbind('mousemove', globalMouseMove);
|
||||
$(document).unbind('mouseleave', globalMouseOut);
|
||||
}
|
||||
$(document).off('mousemove', globalMouseMove);
|
||||
$(document).off('mouseleave', globalMouseOut);
|
||||
};
|
||||
|
||||
function switchElement(drag, dropTo) {
|
||||
function switchElement (drag, dropTo) {
|
||||
var dragPosDiff = {
|
||||
left: $(drag).children().first().offset().left - $(dropTo).offset().left,
|
||||
top: $(drag).children().first().offset().top - $(dropTo).offset().top
|
||||
@ -187,16 +197,17 @@ $('table').sortableTable('destroy') - removes all events from the table
|
||||
// Put the element in the way to old place
|
||||
$(drag).append($(dropTo).children().first()).children()
|
||||
.stop(true, true)
|
||||
.bind('mouseup', onMouseUp);
|
||||
.on('mouseup', onMouseUp);
|
||||
|
||||
if (dropPosDiff)
|
||||
if (dropPosDiff) {
|
||||
$(drag).append($(dropTo).children().first()).children()
|
||||
.css('left', dropPosDiff.left + 'px')
|
||||
.css('top', dropPosDiff.top + 'px');
|
||||
}
|
||||
|
||||
// Put our dragged element into the space we just freed up
|
||||
$(dropTo).append($(drag).children().first()).children()
|
||||
.bind('mouseup', onMouseUp)
|
||||
.on('mouseup', onMouseUp)
|
||||
.css('left', dragPosDiff.left + 'px')
|
||||
.css('top', dragPosDiff.top + 'px');
|
||||
|
||||
@ -208,61 +219,67 @@ $('table').sortableTable('destroy') - removes all events from the table
|
||||
// and vice versa. So the parameters are switched.
|
||||
|
||||
// Calculate row and column index
|
||||
colIdx = $(dropTo).prevAll().length;
|
||||
rowIdx = $(dropTo).parent().prevAll().length;
|
||||
const colIdx = $(dropTo).prevAll().length;
|
||||
const rowIdx = $(dropTo).parent().prevAll().length;
|
||||
|
||||
options.events.drop(drag, dropTo, { col: colIdx, row: rowIdx });
|
||||
}
|
||||
}
|
||||
|
||||
function move(x, y) {
|
||||
function move (x, y) {
|
||||
$draggedEl.offset({
|
||||
top: Math.min($(document).height(), Math.max(0, y - $draggedEl.height() / 2)),
|
||||
left: Math.min($(document).width(), Math.max(0, x - $draggedEl.width() / 2))
|
||||
});
|
||||
}
|
||||
|
||||
function inside($el, x, y) {
|
||||
function inside ($el, x, y) {
|
||||
var off = $el.offset();
|
||||
return y >= off.top && x >= off.left && x < off.left + $el.width() && y < off.top + $el.height();
|
||||
}
|
||||
|
||||
function insideRect(pos, r) {
|
||||
function insideRect (pos, r) {
|
||||
return pos.y > r.top && pos.x > r.left && pos.y < r.top + r.height && pos.x < r.left + r.width;
|
||||
}
|
||||
|
||||
function dropAt(x, y) {
|
||||
if (!down) return;
|
||||
function dropAt (x, y) {
|
||||
if (!down) {
|
||||
return;
|
||||
}
|
||||
down = false;
|
||||
|
||||
var switched = false;
|
||||
|
||||
$(table).find('td').each(function () {
|
||||
if ($(this).children().first().attr('class') != $(oldCell).children().first().attr('class') && inside($(this), x, y)) {
|
||||
if ($(this).children().first().attr('class') !== $(oldCell).children().first().attr('class') && inside($(this), x, y)) {
|
||||
switchElement(oldCell, this);
|
||||
switched = true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!switched) {
|
||||
if (previewMove) moveTo(previewMove);
|
||||
if (previewMove) {
|
||||
moveTo(previewMove);
|
||||
}
|
||||
moveTo($draggedEl);
|
||||
}
|
||||
|
||||
previewMove = null;
|
||||
}
|
||||
|
||||
function moveTo(elem, opts) {
|
||||
if (!opts) opts = {};
|
||||
if (!opts.pos) opts.pos = { left: 0, top: 0 };
|
||||
if (!opts.duration) opts.duration = 200;
|
||||
function moveTo (elem, opts = {}) {
|
||||
if (!opts.pos) {
|
||||
opts.pos = { left: 0, top: 0 };
|
||||
}
|
||||
if (!opts.duration) {
|
||||
opts.duration = 200;
|
||||
}
|
||||
|
||||
$(elem).css('position', 'relative');
|
||||
$(elem).animate({ top: opts.pos.top, left: opts.pos.left }, {
|
||||
duration: opts.duration,
|
||||
complete: function () {
|
||||
if (opts.pos.left == 0 && opts.pos.top == 0) {
|
||||
if (opts.pos.left === 0 && opts.pos.top === 0) {
|
||||
$(elem)
|
||||
.css('position', '')
|
||||
.css('left', '')
|
||||
@ -272,6 +289,5 @@ $('table').sortableTable('destroy') - removes all events from the table
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
};
|
||||
}(jQuery));
|
||||
@ -47,7 +47,7 @@ class MonitorController extends AbstractController
|
||||
|
||||
$this->addScriptFiles([
|
||||
'vendor/jquery/jquery.tablesorter.js',
|
||||
'vendor/jquery/jquery.sortableTable.js',
|
||||
'jquery.sortable-table.js',
|
||||
'vendor/jqplot/jquery.jqplot.js',
|
||||
'vendor/jqplot/plugins/jqplot.pieRenderer.js',
|
||||
'vendor/jqplot/plugins/jqplot.enhancedPieLegendRenderer.js',
|
||||
|
||||
@ -13,14 +13,12 @@ cd ${ROOT_DIR}
|
||||
|
||||
# Remove each '-not -path' when a new package can be used from npm
|
||||
echo 'Delete vendor files we can replace from source dists'
|
||||
# jquery.sortableTable.js is an internal lib
|
||||
find ./js/vendor/ \
|
||||
-not -path './js/vendor/openlayers/*' \
|
||||
-not -path './js/vendor/sprintf.js' \
|
||||
-not -path './js/vendor/jqplot/jquery.jqplot.js' \
|
||||
-not -path './js/vendor/jqplot/plugins/jqplot.*.js' \
|
||||
-not -path './js/vendor/jquery/jquery-ui.min.js' \
|
||||
-not -path './js/vendor/jquery/jquery.sortableTable.js' \
|
||||
-not -path './js/vendor/jquery/jquery.svg.js' \
|
||||
-type f -delete -print
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user