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

Drop dom-drag.js and implement the functionality using jQuery (rfe#3597853)

Browse Source
This commit is contained in:
Michal Čihař 2013-01-03 13:59:21 +01:00
parent 9f5cde6c73
commit e312159db1
3 changed files with 47 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
js/dom-drag.js
View File

@ -1,169 +0,0 @@
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* Copyright 2001, Aaron Boodman
* This code is public domain. Please use it for good, not evil.
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left))) {
o.root.style.left = "0px";
}
if (o.vmode && isNaN(parseInt(o.root.style.top))) {
o.root.style.top = "0px";
}
if (!o.hmode && isNaN(parseInt(o.root.style.right))) {
o.root.style.right = "0px";
}
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) {
o.root.style.bottom = "0px";
}
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) {
o.minMouseX = e.clientX - x + o.minX;
}
if (o.maxX != null) {
o.maxMouseX = o.minMouseX + o.maxX - o.minX;
}
} else {
if (o.minX != null) {
o.maxMouseX = -o.minX + e.clientX + x;
}
if (o.maxX != null) {
o.minMouseX = -o.maxX + e.clientX + x;
}
}
if (o.vmode) {
if (o.minY != null) {
o.minMouseY = e.clientY - y + o.minY;
}
if (o.maxY != null) {
o.maxMouseY = o.minMouseY + o.maxY - o.minY;
}
} else {
if (o.minY != null) {
o.maxMouseY = -o.minY + e.clientY + y;
}
if (o.maxY != null) {
o.minMouseY = -o.maxY + e.clientY + y;
}
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) {
ex = o.hmode ?
Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
}
if (o.maxX != null) {
ex = o.hmode ?
Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
}
if (o.minY != null) {
ey = o.vmode ?
Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
}
if (o.maxY != null) {
ey = o.vmode ?
Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
}
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) {
nx = o.xMapper(y)
} else if (o.yMapper) {
ny = o.yMapper(x)
}
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == 'undefined') {
e = window.event;
}
if (typeof e.layerX == 'undefined') {
e.layerX = e.offsetX;
}
if (typeof e.layerY == 'undefined') {
e.layerY = e.offsetY;
}
return e;
}
};

39
js/functions.js
View File

@ -876,6 +876,42 @@ function refreshLayout()
$elm.css('height', pdfPaperSize(paper, posb) + 'px');
}
/**
* Initializes positions of elements.
*/
function TableDragInit() {
$('.pdflayout_table').each(function () {
var $this = $(this);
var number = $this.data('number');
var x = $('#c_table_' + number + '_x').val();
var y = $('#c_table_' + number + '_y').val();
$this.css('left', x + 'px');
$this.css('top', y + 'px');
/* Make elements draggable */
$this.draggable({
containment: "parent",
drag: function (evt, ui) {
var number = $this.data('number');
$('#c_table_' + number + '_x').val(parseInt(ui.position.left));
$('#c_table_' + number + '_y').val(parseInt(ui.position.top));
}
});
});
}
/**
* Resets drag and drop positions.
*/
function resetDrag() {
$('.pdflayout_table').each(function () {
var $this = $(this);
var x = $this.data('x');
var y = $this.data('y');
$this.css('left', x + 'px');
$this.css('top', y + 'px');
});
}
/**
* User schema handlers.
*/
@ -898,7 +934,8 @@ $(function () {
$('#toggle-dragdrop').live('click', function () {
var $elm = $('#pdflayout');
if ($elm.css('visibility') == 'hidden') {
PDFinit(); /* Defined in pdf_pages.php */
refreshLayout();
TableDragInit();
$elm.css('visibility', 'visible');
$elm.css('display', 'block');
$('#showwysiwyg').val('1');

43
libraries/schema/User_Schema.class.php
View File

@ -329,10 +329,10 @@ class PMA_User_Schema
. "\n" . ' <input type="checkbox" id="id_c_table_' . $i .'" name="c_table_' . $i . '[delete]" value="y" /><label for="id_c_table_' . $i .'">' . __('Delete') . '</label>';
echo "\n" . ' </td>';
echo "\n" . ' <td>'
. "\n" . ' <input type="text" class="position-change" data-axis="left" data-number="' . $i . '" name="c_table_' . $i . '[x]" value="' . $sh_page['x'] . '" />';
. "\n" . ' <input type="text" class="position-change" data-axis="left" data-number="' . $i . '" id="c_table_' . $i . '_x" name="c_table_' . $i . '[x]" value="' . $sh_page['x'] . '" />';
echo "\n" . ' </td>';
echo "\n" . ' <td>'
. "\n" . ' <input type="text" class="position-change" data-axis="top" data-number="' . $i . '" name="c_table_' . $i . '[y]" value="' . $sh_page['y'] . '" />';
. "\n" . ' <input type="text" class="position-change" data-axis="top" data-number="' . $i . '" id="c_table_' . $i . '_y" name="c_table_' . $i . '[y]" value="' . $sh_page['y'] . '" />';
echo "\n" . ' </td>';
echo "\n" . ' </tr>';
$i++;
@ -531,31 +531,25 @@ class PMA_User_Schema
{
global $with_field_names, $db;
?>
<script type="text/javascript" src="js/dom-drag.js"></script>
<form method="post" action="schema_edit.php" name="dragdrop">
<input type="button" name="dragdrop" id="toggle-dragdrop" value="<?php echo __('Toggle scratchboard'); ?>" />
<input type="button" name="dragdropreset" id="reset-dragdrop" value="<?php echo __('Reset'); ?>" />
</form>
<div id="pdflayout" class="pdflayout" style="visibility: hidden;">
<?php
$draginit = '';
$draginit2 = '';
$reset_draginit = '';
$i = 0;
foreach ($array_sh_page as $temp_sh_page) {
$drag_x = $temp_sh_page['x'];
$drag_y = $temp_sh_page['y'];
$draginit2 .= ' Drag.init($("#table_' . $i . '")[0], null, 0, parseInt(myid.style.width)-2, 0, parseInt(myid.style.height)-5);' . "\n";
$draginit2 .= ' $("#table_' . $i . '")[0].onDrag = function (x, y) { document.edcoord.elements["c_table_' . $i . '[x]"].value = parseInt(x); document.edcoord.elements["c_table_' . $i . '[y]"].value = parseInt(y) }' . "\n";
$draginit .= ' $("#table_' . $i . '")[0].style.left = "' . $drag_x . 'px";' . "\n";
$draginit .= ' $("#table_' . $i . '")[0].style.top = "' . $drag_y . 'px";' . "\n";
$reset_draginit .= ' $("#table_' . $i . '")[0].style.left = "2px";' . "\n";
$reset_draginit .= ' $("#table_' . $i . '")[0].style.top = "' . (15 * $i) . 'px";' . "\n";
$reset_draginit .= ' document.edcoord.elements["c_table_' . $i . '[x]"].value = "2"' . "\n";
$reset_draginit .= ' document.edcoord.elements["c_table_' . $i . '[y]"].value = "' . (15 * $i) . '"' . "\n";
echo '<div id="table_' . $i . '" '
. 'data-number="' . $i .'" '
. 'data-x="' . $drag_x . '" '
. 'data-y="' . $drag_y . '" '
. 'class="pdflayout_table"'
. '>'
. '<u>' . $temp_sh_page['table_name'] . '</u>';
echo '<div id="table_' . $i . '" class="pdflayout_table"><u>' . $temp_sh_page['table_name'] . '</u>';
if (isset($with_field_names)) {
$fields = PMA_DBI_get_columns($db, $temp_sh_page['table_name']);
// if the table has been dropped from outside phpMyAdmin,
@ -571,25 +565,6 @@ class PMA_User_Schema
}
?>
</div>
<script type="text/javascript">
//<![CDATA[
function PDFinit() {
refreshLayout();
myid = $('#pdflayout')[0];
<?php echo $draginit; ?>
TableDragInit();
}
function TableDragInit() {
myid = $('#pdflayout')[0];
<?php echo $draginit2; ?>
}
function resetDrag() {
<?php echo $reset_draginit; ?>
}
//]]>
</script>
<?php
}