[interface] Convert upload progress bar to jQuery.

patch #2986073
This commit is contained in:
Philip Frank
2010-04-15 10:36:23 +02:00
committed by Michal Čihař
parent 97a5c047d1
commit c77216d532
7 changed files with 196 additions and 214 deletions

View File

@@ -67,6 +67,8 @@ $Id$
event, thanks to sutharshan. event, thanks to sutharshan.
- [edit] CURRENT_TIMESTAMP is also valid for datetime fields. - [edit] CURRENT_TIMESTAMP is also valid for datetime fields.
- patch #2985068 [engines] Fix parsing of PBXT status, thanks to Madhura Jayaratne. - patch #2985068 [engines] Fix parsing of PBXT status, thanks to Madhura Jayaratne.
- patch #2986073 [interface] Convert upload progress bar to jQuery, thanks to
Philip Frank.
3.3.3.0 (not yet released) 3.3.3.0 (not yet released)
- patch #2982480 [navi] Do not group if there would be one table in group, - patch #2982480 [navi] Do not group if there would be one table in group,

View File

@@ -11,11 +11,6 @@
*/ */
require_once './libraries/common.inc.php'; require_once './libraries/common.inc.php';
/**
* Load mootools for upload progress bar
*/
$GLOBALS['js_include'][] = 'mootools-more.js';
/** /**
* Gets tables informations and displays top links * Gets tables informations and displays top links
*/ */

View File

@@ -14,7 +14,6 @@
require_once './libraries/common.inc.php'; require_once './libraries/common.inc.php';
//require_once './libraries/display_import_functions.lib.php'; //require_once './libraries/display_import_functions.lib.php';
$GLOBALS['js_include'][] = 'functions.js'; $GLOBALS['js_include'][] = 'functions.js';
$GLOBALS['js_include'][] = 'mootools-more.js';
// reset import messages for ajax request // reset import messages for ajax request
$_SESSION['Import_message']['message'] = null; $_SESSION['Import_message']['message'] = null;

View File

@@ -29,193 +29,191 @@ if (empty($import_list)) {
<iframe id="import_upload_iframe" name="import_upload_iframe" width="1" height="1" style="display: none"></iframe> <iframe id="import_upload_iframe" name="import_upload_iframe" width="1" height="1" style="display: none"></iframe>
<div id="import_form_status" style="display: none;"></div> <div id="import_form_status" style="display: none;"></div>
<div id="importmain"> <div id="importmain">
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" /> <img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
window.addEvent('domready', function() { $(document).ready( function() {
// add event when user click on "Go" button // add event when user click on "Go" button
$('buttonGo').addEvent('click', function() { $('#buttonGo').bind('click', function() {
$('upload_form_form').setStyle("display", "none"); // hide form $('#upload_form_form').css("display", "none"); // hide form
$('upload_form_status').setStyle("display", "inline"); // show progress bar $('#upload_form_status').css("display", "inline"); // show progress bar
$('upload_form_status_info').setStyle("display", "inline"); // - || - $('#upload_form_status_info').css("display", "inline"); // - || -
<?php <?php
if ($_SESSION[$SESSION_KEY]["handler"]!="noplugin") { if ($_SESSION[$SESSION_KEY]["handler"]!="noplugin") {
?>
$('#upload_form_status').html('<div class="upload_progress_bar_outer"><div id="status" class="upload_progress_bar_inner"></div></div>'); // add the progress bar
var finished = false;
var percent = 0.0;
var total = 0;
var complete = 0;
var perform_upload;
var periodical_upload;
var request_upload = [];
perform_upload = function () {
new $.getJSON(
'import_status.php?id=<?php echo $upload_id ; ?>&<?php echo PMA_generate_common_url(); ?>',
{},
function(response) {
finished = response.finished;
percent = response.percent;
total = response.total;
complete = total.complete;
if (total==0 && complete==0 && percent==0) {
$('#upload_form_status_info').html('<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" /> <?php echo PMA_jsFormat($strImportLargeFileUploading); ?>');
$('#upload_form_status').css("display", "none");
} else {
$('#upload_form_status_info').html(' '+Math.round(percent)+'%, '+complete+'/'+total);
$('#status').animate({width: Math.round(percent)*2+'px'},150);
} // else
if (finished==true) {
$('#importmain').css('display', 'none');
$('#import_form_status').css('display', 'inline');
$('#import_form_status').html('<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" /> <?php echo $strImportProceedingFile; ?> ');
$('#import_form_status').load('import_status.php?message=true&<?php echo PMA_generate_common_url(); ?>'); // loads the message, either success or mysql error
<?php
// reload the left sidebar when the import is finished
$GLOBALS['reload']=true;
PMA_reloadNavigation(true);
?>
} // if finished
else {
window.setTimeout(perform_upload, 1000);
}
}
);
}
window.setTimeout(perform_upload, 1000);
<?php
} else { // no plugin avaliable
?>
$('#upload_form_status_info').html('<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" /> <?php echo $strImportUploadInfoNotAvailable . PMA_showDocu('faq2_9'); ?>');
$('#upload_form_status').css("display", "none");
<?php
} // else
?> ?>
$('upload_form_status').set('html', '<div class="upload_progress_bar_outer"><div id="status" class="upload_progress_bar_inner"></div></div>'); // add the progress bar }); // onclick
}); // domready
var finished = false; document.write('<form action="import.php" method="post" enctype="multipart/form-data" name="import"<?php if ($_SESSION[$SESSION_KEY]["handler"]!="noplugin") echo ' target="import_upload_iframe"'; ?>>');
var percent = 0.0; //]]>
var total = 0; </script>
var complete = 0; <noscript>
<form action="import.php" method="post" enctype="multipart/form-data" name="import">
var perform_upload; </noscript>
var periodical_upload; <input type="hidden" name="<?php echo $ID_KEY; ?>" value="<?php echo $upload_id ; ?>" />
<?php
var request_upload = new Request({ if ($import_type == 'server') {
url: 'import_status.php?id=<?php echo $upload_id ; ?>&<?php echo PMA_generate_common_url(); ?>', // the "&" is causing problems for webkit browsers echo PMA_generate_common_hidden_inputs('', '', 1);
method: 'get', } elseif ($import_type == 'database') {
update: 'upload_form_status', echo PMA_generate_common_hidden_inputs($db, '', 1);
onComplete: function(response) { } else {
objectsReturned = JSON.decode(response); echo PMA_generate_common_hidden_inputs($db, $table, 1);
}
$each(objectsReturned, function(item, index) { echo ' <input type="hidden" name="import_type" value="' . $import_type . '" />'."\n";
echo PMA_pluginGetJavascript($import_list);
if (index=="finished") { ?>
finished = item;
if (finished==true) {
$clear(periodical_upload);
$('importmain').setStyle('display', 'none');
$('import_form_status').setStyle('display', 'inline');
$('import_form_status').set('html', '<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" /> <?php echo $strImportProceedingFile; ?> ');
$('import_form_status').load('import_status.php?message=true&<?php echo PMA_generate_common_url(); ?>'); // loads the message, either success or mysql error
<?php
// reload the left sidebar when the import is finished
$GLOBALS['reload']=true;
PMA_reloadNavigation(true);
?>
} // if finished==item
} // if index==finished
if (index=="percent")
percent = item;
if (index=="total")
total = item;
if (index=="complete")
complete = item;
}); // $each
if (total==0 && complete==0 && percent==0) {
$('upload_form_status_info').set('html', '<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" /> <?php echo PMA_jsFormat($strImportLargeFileUploading); ?>');
$('upload_form_status').setStyle("display", "none");
} else {
$('upload_form_status_info').set('html', ' '+Math.round(percent)+'%, '+complete+'/'+total);
$('status').tween('width', Math.round(percent)*2+'px');
} // else
} // onComplete
}); // [equest
perform_upload = function () {
request_upload.send('r=' + $time() + $random(0, 100)); // hack for IE7,8 & webkit (Safari, Chrome, Arora...)
}
periodical_upload = perform_upload.periodical(1000);
<?php
} else {
?>
$('upload_form_status_info').set('html', '<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" /> <?php echo $strImportUploadInfoNotAvailable . PMA_showDocu('faq2_9'); ?>');
$('upload_form_status').setStyle("display", "none");
<?php
} // else
?>
}); // if click
}); // domready
document.write('<form action="import.php" method="post" enctype="multipart/form-data" name="import"<?php if ($_SESSION[$SESSION_KEY]["handler"]!="noplugin") echo ' target="import_upload_iframe"'; ?>>');
//]]>
</script>
<noscript>
<form action="import.php" method="post" enctype="multipart/form-data" name="import">
</noscript>
<input type="hidden" name="<?php echo $ID_KEY; ?>" value="<?php echo $upload_id ; ?>" />
<?php
if ($import_type == 'server') {
echo PMA_generate_common_hidden_inputs('', '', 1);
} elseif ($import_type == 'database') {
echo PMA_generate_common_hidden_inputs($db, '', 1);
} else {
echo PMA_generate_common_hidden_inputs($db, $table, 1);
}
echo ' <input type="hidden" name="import_type" value="' . $import_type . '" />'."\n";
echo PMA_pluginGetJavascript($import_list);
?>
<fieldset class="options"> <fieldset class="options">
<legend><?php echo $strFileToImport; ?></legend> <legend><?php echo $strFileToImport; ?></legend>
<?php <?php
if ($GLOBALS['is_upload']) { if ($GLOBALS['is_upload']) {
$uid = uniqid(""); $uid = uniqid("");
?> ?>
<div class="formelementrow" id="upload_form"> <div class="formelementrow" id="upload_form">
<div id="upload_form_status" style="display: none;"></div> <div id="upload_form_status" style="display: none;"></div>
<div id="upload_form_status_info" style="display: none;"></div> <div id="upload_form_status_info" style="display: none;"></div>
<div id="upload_form_form"> <div id="upload_form_form">
<label for="input_import_file"><?php echo $strLocationTextfile; ?></label> <label for="input_import_file"><?php echo $strLocationTextfile; ?></label>
<input style="margin: 5px" type="file" name="import_file" id="input_import_file" onchange="match_file(this.value);" /> <input style="margin: 5px" type="file" name="import_file" id="input_import_file" onchange="match_file(this.value);" />
<?php <?php
echo PMA_displayMaximumUploadSize($max_upload_size) . "\n"; echo PMA_displayMaximumUploadSize($max_upload_size) . "\n";
// some browsers should respect this :) // some browsers should respect this :)
echo PMA_generateHiddenMaxFileSize($max_upload_size) . "\n"; echo PMA_generateHiddenMaxFileSize($max_upload_size) . "\n";
?> ?>
</div>
</div> </div>
</div> <?php
<?php } else {
} else { PMA_Message::warning('strUploadsNotAllowed')->display();
PMA_Message::warning('strUploadsNotAllowed')->display();
}
if (!empty($cfg['UploadDir'])) {
$extensions = '';
foreach ($import_list as $key => $val) {
if (!empty($extensions)) {
$extensions .= '|';
} }
$extensions .= $val['extension']; if (!empty($cfg['UploadDir'])) {
} $extensions = '';
$matcher = '@\.(' . $extensions . ')(\.(' . PMA_supportedDecompressions() . '))?$@'; foreach ($import_list as $key => $val) {
if (!empty($extensions)) {
$extensions .= '|';
}
$extensions .= $val['extension'];
}
$matcher = '@\.(' . $extensions . ')(\.(' . PMA_supportedDecompressions() . '))?$@';
$files = PMA_getFileSelectOptions(PMA_userDir($cfg['UploadDir']), $matcher, (isset($timeout_passed) && $timeout_passed && isset($local_import_file)) ? $local_import_file : ''); $files = PMA_getFileSelectOptions(PMA_userDir($cfg['UploadDir']), $matcher, (isset($timeout_passed) && $timeout_passed && isset($local_import_file)) ? $local_import_file : '');
echo '<div class="formelementrow">' . "\n"; echo '<div class="formelementrow">' . "\n";
if ($files === FALSE) { if ($files === FALSE) {
PMA_Message::error('strWebServerUploadDirectoryError')->display(); PMA_Message::error('strWebServerUploadDirectoryError')->display();
} elseif (!empty($files)) { } elseif (!empty($files)) {
echo "\n"; echo "\n";
echo ' <i>' . $strOr . '</i><br/><label for="select_local_import_file">' . $strWebServerUploadDirectory . '</label>&nbsp;: ' . "\n"; echo ' <i>' . $strOr . '</i><br/><label for="select_local_import_file">' . $strWebServerUploadDirectory . '</label>&nbsp;: ' . "\n";
echo ' <select style="margin: 5px" size="1" name="local_import_file" onchange="match_file(this.value)" id="select_local_import_file">' . "\n"; echo ' <select style="margin: 5px" size="1" name="local_import_file" onchange="match_file(this.value)" id="select_local_import_file">' . "\n";
echo ' <option value="">&nbsp;</option>' . "\n"; echo ' <option value="">&nbsp;</option>' . "\n";
echo $files; echo $files;
echo ' </select>' . "\n"; echo ' </select>' . "\n";
} }
echo '</div>' . "\n"; echo '</div>' . "\n";
} // end if (web-server upload directory) } // end if (web-server upload directory)
// charset of file // charset of file
echo '<div class="formelementrow">' . "\n"; echo '<div class="formelementrow">' . "\n";
if ($cfg['AllowAnywhereRecoding']) { if ($cfg['AllowAnywhereRecoding']) {
echo '<label for="charset_of_file">' . $strCharsetOfFile . '</label>'; echo '<label for="charset_of_file">' . $strCharsetOfFile . '</label>';
reset($cfg['AvailableCharsets']); reset($cfg['AvailableCharsets']);
echo '<select id="charset_of_file" name="charset_of_file" size="1">'; echo '<select id="charset_of_file" name="charset_of_file" size="1">';
foreach ($cfg['AvailableCharsets'] as $temp_charset) { foreach ($cfg['AvailableCharsets'] as $temp_charset) {
echo '<option value="' . htmlentities($temp_charset) . '"'; echo '<option value="' . htmlentities($temp_charset) . '"';
if ((empty($cfg['Import']['charset']) && $temp_charset == $charset) if ((empty($cfg['Import']['charset']) && $temp_charset == $charset)
|| $temp_charset == $cfg['Import']['charset']) { || $temp_charset == $cfg['Import']['charset']) {
echo ' selected="selected"'; echo ' selected="selected"';
} }
echo '>' . htmlentities($temp_charset) . '</option>'; echo '>' . htmlentities($temp_charset) . '</option>';
} }
echo ' </select><br />'; echo ' </select><br />';
} else { } else {
echo '<label for="charset_of_file">' . $strCharsetOfFile . '</label>' . "\n"; echo '<label for="charset_of_file">' . $strCharsetOfFile . '</label>' . "\n";
echo PMA_generateCharsetDropdownBox(PMA_CSDROPDOWN_CHARSET, 'charset_of_file', 'charset_of_file', 'utf8', FALSE); echo PMA_generateCharsetDropdownBox(PMA_CSDROPDOWN_CHARSET, 'charset_of_file', 'charset_of_file', 'utf8', FALSE);
} // end if (recoding) } // end if (recoding)
echo '</div>' . "\n"; echo '</div>' . "\n";
// zip, gzip and bzip2 encode features // zip, gzip and bzip2 encode features
$compressions = $strNone; $compressions = $strNone;
if ($cfg['GZipDump'] && @function_exists('gzopen')) { if ($cfg['GZipDump'] && @function_exists('gzopen')) {
$compressions .= ', gzip'; $compressions .= ', gzip';
} }
if ($cfg['BZipDump'] && @function_exists('bzopen')) { if ($cfg['BZipDump'] && @function_exists('bzopen')) {
$compressions .= ', bzip2'; $compressions .= ', bzip2';
} }
if ($cfg['ZipDump'] && @function_exists('zip_open')) { if ($cfg['ZipDump'] && @function_exists('zip_open')) {
$compressions .= ', zip'; $compressions .= ', zip';
} }
// We don't have show anything about compression, when no supported // We don't have show anything about compression, when no supported
if ($compressions != $strNone) { if ($compressions != $strNone) {
echo '<div class="formelementrow">' . "\n"; echo '<div class="formelementrow">' . "\n";
printf($strCompressionWillBeDetected, $compressions); printf($strCompressionWillBeDetected, $compressions);
echo '</div>' . "\n"; echo '</div>' . "\n";
} }
echo "\n"; echo "\n";
?> ?>
</fieldset> </fieldset>
<fieldset class="options"> <fieldset class="options">
<legend><?php echo $strPartialImport; ?></legend> <legend><?php echo $strPartialImport; ?></legend>
@@ -229,51 +227,51 @@ echo "\n";
} }
?> ?>
<div class="formelementrow"> <div class="formelementrow">
<input type="checkbox" name="allow_interrupt" value="yes" <input type="checkbox" name="allow_interrupt" value="yes"
id="checkbox_allow_interrupt" <?php echo PMA_pluginCheckboxCheck('Import', 'allow_interrupt'); ?>/> id="checkbox_allow_interrupt" <?php echo PMA_pluginCheckboxCheck('Import', 'allow_interrupt'); ?>/>
<label for="checkbox_allow_interrupt"><?php echo $strAllowInterrupt; ?></label><br /> <label for="checkbox_allow_interrupt"><?php echo $strAllowInterrupt; ?></label><br />
</div> </div>
<?php <?php
if (! (isset($timeout_passed) && $timeout_passed)) { if (! (isset($timeout_passed) && $timeout_passed)) {
?> ?>
<div class="formelementrow"> <div class="formelementrow">
<label for="text_skip_queries"><?php echo $strSkipQueries; ?></label> <label for="text_skip_queries"><?php echo $strSkipQueries; ?></label>
<input type="text" name="skip_queries" value="<?php echo PMA_pluginGetDefault('Import', 'skip_queries');?>" id="text_skip_queries" /> <input type="text" name="skip_queries" value="<?php echo PMA_pluginGetDefault('Import', 'skip_queries');?>" id="text_skip_queries" />
</div> </div>
<?php <?php
} else { } else {
// If timeout has passed, // If timeout has passed,
// do not show the Skip dialog to avoid the risk of someone // do not show the Skip dialog to avoid the risk of someone
// entering a value here that would interfere with "skip" // entering a value here that would interfere with "skip"
?> ?>
<input type="hidden" name="skip_queries" value="<?php echo PMA_pluginGetDefault('Import', 'skip_queries');?>" id="text_skip_queries" /> <input type="hidden" name="skip_queries" value="<?php echo PMA_pluginGetDefault('Import', 'skip_queries');?>" id="text_skip_queries" />
<?php <?php
} }
?> ?>
</fieldset> </fieldset>
<fieldset class="options"> <fieldset class="options">
<legend><?php echo $strImportFormat; ?></legend> <legend><?php echo $strImportFormat; ?></legend>
<?php <?php
// Let's show format options now // Let's show format options now
echo '<div style="float: left;">'; echo '<div style="float: left;">';
echo PMA_pluginGetChoice('Import', 'format', $import_list); echo PMA_pluginGetChoice('Import', 'format', $import_list);
echo '</div>'; echo '</div>';
echo '<div style="float: left;">'; echo '<div style="float: left;">';
echo PMA_pluginGetOptions('Import', $import_list); echo PMA_pluginGetOptions('Import', $import_list);
echo '</div>'; echo '</div>';
?> ?>
<div class="clearfloat"></div> <div class="clearfloat"></div>
</fieldset> </fieldset>
<?php <?php
// Encoding setting form appended by Y.Kawada // Encoding setting form appended by Y.Kawada
if (function_exists('PMA_set_enc_form')) { if (function_exists('PMA_set_enc_form')) {
echo PMA_set_enc_form(' '); echo PMA_set_enc_form(' ');
} }
echo "\n"; echo "\n";
?> ?>
<fieldset class="tblFooters"> <fieldset class="tblFooters">
<input type="submit" value="<?php echo $strGo; ?>" id="buttonGo" /> <input type="submit" value="<?php echo $strGo; ?>" id="buttonGo" />
</fieldset> </fieldset>

View File

@@ -73,7 +73,6 @@ if (isset($GLOBALS['db'])) {
$GLOBALS['js_include'][] = 'messages.php' . PMA_generate_common_url($params); $GLOBALS['js_include'][] = 'messages.php' . PMA_generate_common_url($params);
$GLOBALS['js_events'][] = array( $GLOBALS['js_events'][] = array(
'object' => 'window',
'event' => 'load', 'event' => 'load',
'function' => 'PMA_TT_init', 'function' => 'PMA_TT_init',
); );
@@ -101,7 +100,7 @@ if (typeof(parent.document) != 'undefined' && typeof(parent.document) != 'unknow
<?php <?php
foreach ($GLOBALS['js_events'] as $js_event) { foreach ($GLOBALS['js_events'] as $js_event) {
echo "window.parent.addEvent(" . $js_event['object'] . ", '" . $js_event['event'] . "', " echo "$(window.parent).bind('" . $js_event['event'] . "', "
. $js_event['function'] . ");\n"; . $js_event['function'] . ");\n";
} }
?> ?>

View File

@@ -11,12 +11,6 @@
*/ */
require_once './libraries/common.inc.php'; require_once './libraries/common.inc.php';
/**
* Load mootools for upload progress bar
*/
$GLOBALS['js_include'][] = 'mootools-more.js';
/** /**
* Does the common work * Does the common work
*/ */

View File

@@ -11,11 +11,6 @@
*/ */
require_once './libraries/common.inc.php'; require_once './libraries/common.inc.php';
/**
* Load mootools for upload progress bar
*/
$GLOBALS['js_include'][] = 'mootools-more.js';
/** /**
* Gets tables informations and displays top links * Gets tables informations and displays top links
*/ */