[interface] Convert upload progress bar to jQuery.

patch #2986073

ChangeLog

@@ -67,6 +67,8 @@ $Id$
   event, thanks to sutharshan.
 - [edit] CURRENT_TIMESTAMP is also valid for datetime fields.
 - 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)
 - patch #2982480 [navi] Do not group if there would be one table in group,

db_import.php

@@ -11,11 +11,6 @@
  */
 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
  */

import.php

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

libraries/display_import.lib.php

@@ -32,16 +32,16 @@ if (empty($import_list)) {
     <img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
     <script type="text/javascript">
         //<![CDATA[
-window.addEvent('domready', function() {
+        $(document).ready( function() {
             // 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
 if ($_SESSION[$SESSION_KEY]["handler"]!="noplugin") {
     ?>
-    $('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
+                $('#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;
@@ -51,59 +51,57 @@ window.addEvent('domready', function() {
                 var perform_upload;
                 var periodical_upload;
 
-    var request_upload = new Request({
+                var request_upload = [];
-      url: 'import_status.php?id=<?php echo $upload_id ; ?>&<?php echo PMA_generate_common_url(); ?>', // the "&" is causing problems for webkit browsers
-      method: 'get',
-      update: 'upload_form_status',
-      onComplete: function(response) {
-	   objectsReturned = JSON.decode(response);
 
-	$each(objectsReturned, function(item, index) {
+                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 (index=="finished") {
-	    finished = item;
                           if (finished==true) {
-	      $clear(periodical_upload);
+                                    $('#importmain').css('display', 'none');
-	      $('importmain').setStyle('display', 'none');
+                                    $('#import_form_status').css('display', 'inline');
-	      $('import_form_status').setStyle('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').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
-	      $('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 finished
-	  if (index=="percent")
+                          else {
-	    percent = item;
+                                window.setTimeout(perform_upload, 1000);
-	  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);
+
+                      }
+                  );
+
+              }
+                window.setTimeout(perform_upload, 1000);
+
     <?php
-	} else {
+} else { // no plugin avaliable
     ?>
-	  $('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_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').setStyle("display", "none");
+                        $('#upload_form_status').css("display", "none");
     <?php
 } // else
 ?>
-  }); // if click
+                    }); // onclick
                 }); // 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"'; ?>>');

libraries/header_scripts.inc.php

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

server_import.php

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

tbl_import.php

@@ -11,11 +11,6 @@
  */
 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
  */