DHTML WYSIWYG-control for PDF-relations

This commit is contained in:
Garvin Hicking
2003-06-23 14:39:49 +00:00
parent bc7fa0c447
commit 0ee43863a7
9 changed files with 474 additions and 11 deletions

View File

@@ -5,6 +5,14 @@ phpMyAdmin - Changelog
$Id$
$Source$
2003-06-23 Garvin Hicking <me@supergarv.de>
* ChangeLog, Documentation.html, config.inc.php3, pdf_pages.php3,
css/phpmyadmin.css.php3, libraries/common.lib.php3,
libraries/config_import.lib.php3, libraries/dom-drag.js,
libraries/functions.js: Added Patch #757907: DHTML WYSIWYG-control
for PDF-relation setup. Based on DOM-drag.js, a library provided
by Aaron Boodman (youngpup.net).
2003-06-23 Alexander M. Turek <rabus@users.sourceforge.net>
* lang/arabic-*.inc.php3, lang/czech-*.inc.php3, lang/finnish-*.inc.php3,
lang/french-*.inc.php3, lang/georgian-utf-8.inc.php3,

View File

@@ -1645,6 +1645,31 @@ $cfg['PmaAbsoluteUri'] = (!empty($_SERVER['HTTPS']) ? 'https' : 'http') . '://'
<br /><br />
</dd>
<dt><b>$cfg['WYSIWYG-PDF'] </b>boolean</dt>
<dd>
Utilizes a WYSIWYG editing control to easily place elements of a PDF page.
By clicking on the button 'toggle Drag and Drop area' on the page wher you
edit x/y coordinates of those elements you can activate a scratchboard where
all your elements are placed. By clicking on an element, you can move them
around in the pre-defined area and the x/y coordinates will get updated
dynamically. Likewise, when entering a new position directly into the
input field, the new position in the scratchboard changes after your
cursors leaves the input field.<br />
You have to click on the 'OK'-button below the tables to save the new positions.
If you want to place a new element, first add it to the table of elements and
then you can drag the new element around.<br />
By changing the paper size and the orientation you can change the size of the
scratchboard as well. You can do so by just changing the dropdown field below,
and the scratchboard will resize automatically, without interfering with the
current placement of the elements.<br />
If ever an element gets out of range you can either enlarge the paper size
or click on the 'reset' button to place all elements below each other.<br />
<b>NOTE:</b> You have to use a recent browser like IE6 or Mozilla to get this control
to work. The basic Drag&amp;Drop script functionality was kindly borrowed from www.youngpup.net and
is underlying so specific license.
<br /><br />
</dd>
<dt><b>$cfg['SQP']['fmtType']</b> string [<tt>html</tt>|<tt>none</tt>]</dt>
<dd>
The main use of the new SQL Parser is to pretty-print SQL queries. By

View File

@@ -471,6 +471,8 @@ $cfg['QueryHistoryMax'] = 25; // When using DB-based query history
$cfg['BrowseMIME'] = TRUE; // Use MIME-Types (stored in column comments table) for
$cfg['MaxExactCount'] = 20000; // When approximate count < this, PMA will get exact count for
// table rows.
$cfg['WYSIWYG-PDF'] = TRUE; // Utilize DHTML/JS capabilities to allow WYSIWYG editing of
// the PDF page editor. Requires an IE6/Mozilla based browser.
/**
* SQL Query box settings

View File

@@ -190,6 +190,29 @@ fieldset fieldset {
margin: 0.8em;
}
.pdflayout {
overflow: hidden;
clip: inherit;
background-color: #FFFFFF;
display: none;
border: 1px solid #000000;
position: relative;
}
.pdflayout_table {
background: <?php echo $GLOBALS['cfg']['ThBgcolor']; ?>;
color: #000000;
overflow: hidden;
clip: inherit;
z-index: 2;
display: inline;
visibility: inherit;
cursor: move;
position: absolute;
font-size: <?php echo $font_smaller; ?>;
border: 1px dashed #000000;
}
.print{font-family:arial;font-size:8pt;}
.syntax {font-family: sans-serif; font-size: <?php echo $font_smaller; ?>;}

View File

@@ -138,7 +138,7 @@ h1 {font-family: sans-serif; font-size: large; font-weight: bold}
* Includes compatibility code for older config.inc.php3 revisions
* if necessary
*/
if (!isset($cfg['FileRevision']) || (int) substr($cfg['FileRevision'], 13, 3) < 185) {
if (!isset($cfg['FileRevision']) || (int) substr($cfg['FileRevision'], 13, 3) < 188) {
include('./libraries/config_import.lib.php3');
}

View File

@@ -741,6 +741,10 @@ if (!defined('PMA_CONFIG_IMPORT_LIB_INCLUDED')) {
$cfg['MaxExactCount'] = 20000;
}
if (!isset($cfg['WYSIWYG-PDF'])) {
$cfg['WYSIWYG-PDF'] = TRUE;
}
if (!isset($cfg['ShowTooltipAliasDB'])) {
$cfg['ShowTooltipAliasDB'] = FALSE;
}

121
libraries/dom-drag.js Executable file
View File

@@ -0,0 +1,121 @@
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 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;
}
};

View File

@@ -701,3 +701,216 @@ function getElement(e,f){
}
return document.getElementById(e);
}
/**
* Refresh the WYSIWYG-PDF scratchboard after changes have been made
*/
function refreshDragOption(e) {
myid = getElement(e);
if (myid.style.visibility == 'visible') {
refreshLayout();
}
}
/**
* Refresh/resize the WYSIWYG-PDF scratchboard
*/
function refreshLayout() {
myid = getElement('pdflayout');
if (document.pdfoptions.orientation.value == 'P') {
posa = 'x';
posb = 'y';
} else {
posa = 'y';
posb = 'x';
}
myid.style.width = pdfPaperSize(document.pdfoptions.paper.value, posa) + 'px';
myid.style.height = pdfPaperSize(document.pdfoptions.paper.value, posb) + 'px';
}
/**
* Show/hide the WYSIWYG-PDF scratchboard
*/
function ToggleDragDrop(e) {
myid = getElement(e);
if (myid.style.visibility == 'hidden') {
init();
myid.style.visibility = 'visible';
myid.style.display = 'block';
document.edcoord.showwysiwyg.value = '1';
} else {
myid.style.visibility = 'hidden';
myid.style.display = 'none';
document.edcoord.showwysiwyg.value = '0';
}
}
/**
* PDF scratchboard: When a position is entered manually, update
* the fields inside the scratchboard.
*/
function dragPlace(no, axis, value) {
if (axis == 'x') {
getElement("table_" + no).style.left = value + 'px';
} else {
getElement("table_" + no).style.top = value + 'px';
}
}
/**
* Returns paper sizes for a given format
*/
function pdfPaperSize(format, axis) {
switch (format) {
case '4A0':
if (axis == 'x') return 4767.87; else return 6740.79;
break;
case '2A0':
if (axis == 'x') return 3370.39; else return 4767.87;
break;
case 'A0':
if (axis == 'x') return 2383.94; else return 3370.39;
break;
case 'A1':
if (axis == 'x') return 1683.78; else return 2383.94;
break;
case 'A2':
if (axis == 'x') return 1190.55; else return 1683.78;
break;
case 'A3':
if (axis == 'x') return 841.89; else return 1190.55;
break;
case 'A4':
if (axis == 'x') return 595.28; else return 841.89;
break;
case 'A5':
if (axis == 'x') return 419.53; else return 595.28;
break;
case 'A6':
if (axis == 'x') return 297.64; else return 419.53;
break;
case 'A7':
if (axis == 'x') return 209.76; else return 297.64;
break;
case 'A8':
if (axis == 'x') return 147.40; else return 209.76;
break;
case 'A9':
if (axis == 'x') return 104.88; else return 147.40;
break;
case 'A10':
if (axis == 'x') return 73.70; else return 104.88;
break;
case 'B0':
if (axis == 'x') return 2834.65; else return 4008.19;
break;
case 'B1':
if (axis == 'x') return 2004.09; else return 2834.65;
break;
case 'B2':
if (axis == 'x') return 1417.32; else return 2004.09;
break;
case 'B3':
if (axis == 'x') return 1000.63; else return 1417.32;
break;
case 'B4':
if (axis == 'x') return 708.66; else return 1000.63;
break;
case 'B5':
if (axis == 'x') return 498.90; else return 708.66;
break;
case 'B6':
if (axis == 'x') return 354.33; else return 498.90;
break;
case 'B7':
if (axis == 'x') return 249.45; else return 354.33;
break;
case 'B8':
if (axis == 'x') return 175.75; else return 249.45;
break;
case 'B9':
if (axis == 'x') return 124.72; else return 175.75;
break;
case 'B10':
if (axis == 'x') return 87.87; else return 124.72;
break;
case 'C0':
if (axis == 'x') return 2599.37; else return 3676.54;
break;
case 'C1':
if (axis == 'x') return 1836.85; else return 2599.37;
break;
case 'C2':
if (axis == 'x') return 1298.27; else return 1836.85;
break;
case 'C3':
if (axis == 'x') return 918.43; else return 1298.27;
break;
case 'C4':
if (axis == 'x') return 649.13; else return 918.43;
break;
case 'C5':
if (axis == 'x') return 459.21; else return 649.13;
break;
case 'C6':
if (axis == 'x') return 323.15; else return 459.21;
break;
case 'C7':
if (axis == 'x') return 229.61; else return 323.15;
break;
case 'C8':
if (axis == 'x') return 161.57; else return 229.61;
break;
case 'C9':
if (axis == 'x') return 113.39; else return 161.57;
break;
case 'C10':
if (axis == 'x') return 79.37; else return 113.39;
break;
case 'RA0':
if (axis == 'x') return 2437.80; else return 3458.27;
break;
case 'RA1':
if (axis == 'x') return 1729.13; else return 2437.80;
break;
case 'RA2':
if (axis == 'x') return 1218.90; else return 1729.13;
break;
case 'RA3':
if (axis == 'x') return 864.57; else return 1218.90;
break;
case 'RA4':
if (axis == 'x') return 609.45; else return 864.57;
break;
case 'SRA0':
if (axis == 'x') return 2551.18; else return 3628.35;
break;
case 'SRA1':
if (axis == 'x') return 1814.17; else return 2551.18;
break;
case 'SRA2':
if (axis == 'x') return 1275.59; else return 1814.17;
break;
case 'SRA3':
if (axis == 'x') return 907.09; else return 1275.59;
break;
case 'SRA4':
if (axis == 'x') return 637.80; else return 907.09;
break;
case 'LETTER':
if (axis == 'x') return 612.00; else return 792.00;
break;
case 'LEGAL':
if (axis == 'x') return 612.00; else return 1008.00;
break;
case 'EXECUTIVE':
if (axis == 'x') return 521.86; else return 756.00;
break;
case 'FOLIO':
if (axis == 'x') return 612.00; else return 936.00;
break;
} // end switch
}

View File

@@ -285,6 +285,67 @@ if ($cfgRelation['pdfwork']) {
<hr />
<h2><?php echo $strSelectTables ;?></h2>
<?php
$page_query = 'SELECT * FROM ' . PMA_backquote($cfgRelation['table_coords'])
. ' WHERE db_name = \'' . PMA_sqlAddslashes($db) . '\''
. ' AND pdf_page_number = ' . $chpage;
$page_rs = PMA_query_as_cu($page_query);
$array_sh_page = array();
$draginit = '';
$reset_draginit = '';
$i = 0;
while ($temp_sh_page = @PMA_mysql_fetch_array($page_rs)) {
$array_sh_page[] = $temp_sh_page;
}
reset($array_sh_page);
// garvin: Display WYSIWYG-PDF parts?
if ($cfg['WYSIWYG-PDF']) {
?>
<script type="text/javascript" src="./libraries/dom-drag.js"></script>
<form method="post" action="pdf_pages.php3" name="dragdrop">
<input type="button" name="dragdrop" value="toggle Drag and Drop area" onclick="ToggleDragDrop('pdflayout');" />
<input type="button" name="dragdropreset" value="reset" onclick="resetDrag();" />
</form>
<div id="pdflayout" class="pdflayout" style="visibility: hidden;">
<?php
while (list($key, $temp_sh_page) = each($array_sh_page)) {
$drag_x = $temp_sh_page['x'];
$drag_y = $temp_sh_page['y'];
$draginit .= ' Drag.init(getElement("table_' . $i . '"), null, 0, parseInt(myid.style.width)-2, 0, parseInt(myid.style.height)-5);' . "\n";
$draginit .= ' getElement("table_' . $i . '").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 .= ' getElement("table_' . $i . '").style.left = "' . $drag_x . 'px";' . "\n";
$draginit .= ' getElement("table_' . $i . '").style.top = "' . $drag_y . 'px";' . "\n";
$reset_draginit .= ' getElement("table_' . $i . '").style.left = "2px";' . "\n";
$reset_draginit .= ' getElement("table_' . $i . '").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 . '" class="pdflayout_table">' . $temp_sh_page['table_name'] . '</div>' . "\n";
$i++;
}
reset($array_sh_page);
?>
</div>
<script type="text/javascript">
<!--
function init() {
refreshLayout();
myid = getElement('pdflayout');
<?php echo $draginit; ?>
}
function resetDrag() {
<?php echo $reset_draginit; ?>
}
// -->
</script>
<?php
} // end if WYSIWYG-PDF
?>
<form method="post" action="pdf_pages.php3" name="edcoord">
<?php echo PMA_generate_common_hidden_inputs($db, $table); ?>
<input type="hidden" name="chpage" value="<?php echo $chpage; ?>" />
@@ -301,13 +362,9 @@ if ($cfgRelation['pdfwork']) {
unset($ctable);
}
$page_query = 'SELECT * FROM ' . PMA_backquote($cfgRelation['table_coords'])
. ' WHERE db_name = \'' . PMA_sqlAddslashes($db) . '\''
. ' AND pdf_page_number = ' . $chpage;
$page_rs = PMA_query_as_cu($page_query);
$i = 0;
while ($sh_page = @PMA_mysql_fetch_array($page_rs)) {
while (list($dummy_sh_page, $sh_page) = each($array_sh_page)) {
$_mtab = $sh_page['table_name'];
$tabExist[$_mtab] = FALSE;
echo "\n" . ' <tr ';
@@ -334,10 +391,10 @@ if ($cfgRelation['pdfwork']) {
. "\n" . ' <input type="checkbox" name="c_table_' . $i . '[delete]" value="y" />' . $strDelete;
echo "\n" . ' </td>';
echo "\n" . ' <td>'
. "\n" . ' <input type="text" name="c_table_' . $i . '[x]" value="' . $sh_page['x'] . '" />';
. "\n" . ' <input type="text" ' . ($cfg['WYSIWYG-PDF'] ? 'onchange="dragPlace(' . $i . ', \'x\', this.value)"' : '') . ' name="c_table_' . $i . '[x]" value="' . $sh_page['x'] . '" />';
echo "\n" . ' </td>';
echo "\n" . ' <td>'
. "\n" . ' <input type="text" name="c_table_' . $i . '[y]" value="' . $sh_page['y'] . '" />';
. "\n" . ' <input type="text" ' . ($cfg['WYSIWYG-PDF'] ? 'onchange="dragPlace(' . $i . ', \'y\', this.value)"' : '') . ' name="c_table_' . $i . '[y]" value="' . $sh_page['y'] . '" />';
echo "\n" . ' </td>';
echo "\n" . ' </tr>';
$i++;
@@ -371,6 +428,7 @@ if ($cfgRelation['pdfwork']) {
echo "\n" . ' </table>' . "\n";
echo "\n" . ' <input type="hidden" name="c_table_rows" value="' . ($i + 1) . '" />';
echo ($cfg['WYSIWYG-PDF'] ? "\n" . ' <input type="hidden" name="showwysiwyg" value="' . ((isset($showwysiwyg) && $showwysiwyg == '1') ? '1' : '0') . '" />' : '');
echo "\n" . ' <input type="submit" value="' . $strGo . '" />';
echo "\n" . '</form>' . "\n\n";
} // end if
@@ -411,7 +469,7 @@ if ($cfgRelation['pdfwork']) {
|| ($do == 'choosepage' && isset($chpage))
|| ($do == 'createpage' && isset($chpage)))) {
?>
<form method="post" action="pdf_schema.php3">
<form method="post" action="pdf_schema.php3" name="pdfoptions">
<?php echo PMA_generate_common_hidden_inputs($db); ?>
<input type="hidden" name="pdf_page_number" value="<?php echo $chpage; ?>" />
<?php echo $strDisplayPDF; ?>&nbsp;:<br />
@@ -426,12 +484,12 @@ if ($cfgRelation['pdfwork']) {
<input type="checkbox" name="with_doc" id="with_doc" checked="checked" />
<label for="with_doc"><?php echo $strDataDict; ?></label> <br />
<?php echo $strShowDatadictAs; ?>
<select name="orientation">
<select name="orientation" <?php echo ($cfg['WYSIWYG-PDF'] ? 'onchange="refreshDragOption(\'pdflayout\');"' : ''); ?>>
<option value="L"><?php echo $strLandscape;?></option>
<option value="P"><?php echo $strPortrait;?></option>
</select><br />
<?php echo $strPaperSize; ?>
<select name="paper">
<select name="paper" <?php echo ($cfg['WYSIWYG-PDF'] ? 'onchange="refreshDragOption(\'pdflayout\');"' : ''); ?>>
<?php
while (list($key,$val) = each($cfg['PDFPageSizes'])) {
echo '<option value="' . $val . '"';
@@ -445,6 +503,15 @@ if ($cfgRelation['pdfwork']) {
&nbsp;&nbsp;<input type="submit" value="<?php echo $strGo; ?>" />
</form>
<?php
if ((isset($showwysiwyg) && $showwysiwyg == '1')) {
?>
<script type="text/javascript">
<!--
ToggleDragDrop('pdflayout');
// -->
</script>
<?php
}
} // end if
} // end if ($cfgRelation['pdfwork'])