[ticket/13740] Implement progress bar for AJAX UI

PHPBB3-13740

phpBB/adm/style/admin.css

@@ -2521,3 +2521,30 @@ fieldset.permissions .padding {
 	clear: both;
 	display: block;
 }
+
+#progress-bar {
+    position: relative;
+    width: 90%;
+    height: 25px;
+    margin: 20px auto;
+    border: 1px solid #cecece;
+}
+
+#progress-bar #progress-bar-text {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    text-align: center;
+    line-height: 25px;
+    font-weight: bold;
+}
+
+#progress-bar #progress-bar-filler {
+    display: block;
+    position: relative;
+    top: 0;
+    left: 0;
+    background-color: #3c84ad;
+    width: 0;
+    height: 25px;
+}

phpBB/assets/javascript/installer.js

@@ -3,9 +3,12 @@
  */
 
 (function($) { // Avoid conflicts with other libraries
-    // Global variables
+    // Installer variables
     var pollTimer = null;
     var nextReadPosition = 0;
+    var progressBarTriggered = false;
+    var progressTimer = null;
+    var currentProgress = 0;
 
     // Template related variables
     var $contentWrapper = $('.install-body').find('.main');
@@ -56,49 +59,112 @@
         if (responseObject.hasOwnProperty('form')) {
             add_form(responseObject.form);
         }
+
+        if (responseObject.hasOwnProperty('progress')) {
+            set_progress(responseObject.progress);
+        }
     }
 
     function add_message(type, messages) {
         // Get message containers
-        var errorContainer = $('#error-container');
+        var $errorContainer = $('#error-container');
-        var warningContainer = $('#warning-container');
+        var $warningContainer = $('#warning-container');
-        var logContainer = $('#log-container');
+        var $logContainer = $('#log-container');
 
-        var title, description, msgElement, arraySize = messages.length;
+        var $title, $description, $msgElement, arraySize = messages.length;
         for (var i = 0; i < arraySize; i++) {
-            msgElement = $('<div />');
+            $msgElement = $('<div />');
-            title = $(document.createElement('strong'));
+            $title = $(document.createElement('strong'));
-            title.text(messages[i].title);
+            $title.text(messages[i].title);
-            msgElement.append(title);
+            $msgElement.append($title);
 
             if (messages[i].hasOwnProperty('description')) {
-                description = $(document.createElement('p'));
+                $description = $(document.createElement('p'));
-                description.text(messages[i].description);
+                $description.text(messages[i].description);
-                msgElement.append(description);
+                $msgElement.append($description);
             }
 
             switch (type) {
                 case 'error':
-                    msgElement.addClass('errorbox');
+                    $msgElement.addClass('errorbox');
-                    errorContainer.append(msgElement);
+                    $errorContainer.append($msgElement);
                     break;
                 case 'warning':
-                    msgElement.addClass('warningbox');
+                    $msgElement.addClass('warningbox');
-                    warningContainer.append(msgElement);
+                    $warningContainer.append($msgElement);
                     break;
                 case 'log':
-                    msgElement.addClass('log');
+                    $msgElement.addClass('log');
-                    logContainer.append(msgElement);
+                    $logContainer.append($msgElement);
                     break;
             }
         }
     }
 
     function add_form(formHtml) {
-        var formContainer = $('#content-container');
+        var $formContainer = $('#content-container');
-        formContainer.html(formHtml);
+        $formContainer.html(formHtml);
-        var form = $('#install_install');
+        var $form = $('#install_install');
-        intercept_form_submit(form);
+        intercept_form_submit($form);
+    }
+
+    function set_progress(progressObject) {
+        var $statusText, $progressBar, $progressText, $progressFiller;
+
+        if (progressObject.task_name.length) {
+            if (!progressBarTriggered) {
+                // Create progress bar
+                var $contentContainer = $('#content-container');
+
+                // Create progress bar elements
+                $progressBar = $('<div />');
+                $progressBar.attr('id', 'progress-bar');
+                $progressText = $('<p />');
+                $progressText.attr('id', 'progress-bar-text');
+                $progressFiller = $('<span />');
+                $progressFiller.attr('id', 'progress-bar-filler');
+
+                $statusText = $('<p />');
+                $statusText.attr('id', 'progress-status-text');
+
+                $progressBar.append($progressFiller);
+                $progressBar.append($progressText);
+
+                $contentContainer.append($statusText);
+                $contentContainer.append($progressBar);
+
+                progressBarTriggered = true;
+            } else {
+                $statusText = $('#progress-status-text');
+            }
+
+            // Update progress bar
+            $statusText.text(progressObject.task_name + '…');
+            increment_progress_bar(Math.round(progressObject.task_num / progressObject.task_count * 100));
+        }
+    }
+
+    function increment_progress_bar(progressLimit) {
+        var $progressFiller = $('#progress-bar-filler');
+        var $progressText = $('#progress-bar-text');
+        var progressStart = $progressFiller.width() / $progressFiller.offsetParent().width() * 100;
+        currentProgress = Math.floor(progressStart);
+
+        clearInterval(progressTimer);
+        progressTimer = setInterval(function() {
+            incrementFiller($progressText, $progressFiller, progressLimit);
+        }, 10);
+    }
+
+    function incrementFiller($progressText, $progressFiller, progressLimit) {
+        currentProgress++;
+        $progressText.text(currentProgress + '%');
+        $progressFiller.css('width', currentProgress + '%');
+
+        if (currentProgress >= progressLimit || currentProgress >= 100) {
+            console.log("In if; " + progressLimit + "; " + currentProgress);
+            clearInterval(progressTimer);
+        }
     }
 
     function start_polling(xhReq) {
@@ -113,14 +179,14 @@
         nextReadPosition = 0;
     }
 
-    function submit_form(form, submitBtn) {
+    function submit_form($form, $submitBtn) {
-        form.css('display', 'none');
+        $form.css('display', 'none');
 
         var xhReq = create_xhr_object();
-        xhReq.open('POST', form.attr('action'), true);
+        xhReq.open('POST', $form.attr('action'), true);
         xhReq.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
         xhReq.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-        xhReq.send(get_form_fields(form, submitBtn));
+        xhReq.send(get_form_fields($form, $submitBtn));
 
         // Clear content
         setup_ajax_layout();
@@ -130,23 +196,22 @@
     }
 
     // Workaround for submit buttons
-    function get_form_fields(form, submitBtn) {
+    function get_form_fields($form, $submitBtn) {
-        var formData = form.serialize();
+        var formData = $form.serialize();
-        //var submitBtn = form.find(':submit');
+        formData += ((formData.length) ? '&' : '') + encodeURIComponent($submitBtn.attr('name')) + '=';
-        formData += ((formData.length) ? '&' : '') + encodeURIComponent(submitBtn.attr('name')) + '=';
+        formData += encodeURIComponent($submitBtn.attr('value'));
-        formData += encodeURIComponent(submitBtn.attr('value'));
 
         return formData;
     }
 
-    function intercept_form_submit(form) {
+    function intercept_form_submit($form) {
-        if (!form.length) {
+        if (!$form.length) {
             return;
         }
 
-        form.find(':submit').bind('click', function (event) {
+        $form.find(':submit').bind('click', function (event) {
             event.preventDefault();
-            submit_form(form, $(this));
+            submit_form($form, $(this));
         });
 
     }

phpBB/install/helper/iohandler/ajax_iohandler.php

@@ -177,6 +177,16 @@ class ajax_iohandler extends iohandler_base
 			$this->form = '';
 		}
 
+		// If current task name is set, we push progress message to the client side
+		if (!empty($this->current_task_name))
+		{
+			$json_array['progress'] = array(
+				'task_name'		=> $this->current_task_name,
+				'task_num'		=> $this->current_task_progress,
+				'task_count'	=> $this->task_progress_count,
+			);
+		}
+
 		$this->errors = array();
 		$this->warnings = array();
 		$this->logs = array();
@@ -184,6 +194,15 @@ class ajax_iohandler extends iohandler_base
 		return $json_array;
 	}
 
+	/**
+	 * {@inheritdoc}
+	 */
+	public function set_progress($task_lang_key, $task_number)
+	{
+		parent::set_progress($task_lang_key, $task_number);
+		$this->send_response();
+	}
+
 	/**
 	 * Callback function for language replacing
 	 *