From b7ef709549597f2fa4f9c8525bfd602f81644530 Mon Sep 17 00:00:00 2001 From: MateBartus Date: Wed, 3 Jun 2015 01:31:48 +0200 Subject: [PATCH] [ticket/13740] Implement progress bar for AJAX UI PHPBB3-13740 --- phpBB/adm/style/admin.css | 27 ++++ phpBB/assets/javascript/installer.js | 135 +++++++++++++----- .../helper/iohandler/ajax_iohandler.php | 19 +++ 3 files changed, 146 insertions(+), 35 deletions(-) diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index dd5878a976..ca5daf5bc5 100644 --- a/phpBB/adm/style/admin.css +++ b/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; +} diff --git a/phpBB/assets/javascript/installer.js b/phpBB/assets/javascript/installer.js index 302d95e7c6..ea5ca638b8 100644 --- a/phpBB/assets/javascript/installer.js +++ b/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 warningContainer = $('#warning-container'); - var logContainer = $('#log-container'); + var $errorContainer = $('#error-container'); + var $warningContainer = $('#warning-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 = $('
'); - title = $(document.createElement('strong')); - title.text(messages[i].title); - msgElement.append(title); + $msgElement = $('
'); + $title = $(document.createElement('strong')); + $title.text(messages[i].title); + $msgElement.append($title); if (messages[i].hasOwnProperty('description')) { - description = $(document.createElement('p')); - description.text(messages[i].description); - msgElement.append(description); + $description = $(document.createElement('p')); + $description.text(messages[i].description); + $msgElement.append($description); } switch (type) { case 'error': - msgElement.addClass('errorbox'); - errorContainer.append(msgElement); + $msgElement.addClass('errorbox'); + $errorContainer.append($msgElement); break; case 'warning': - msgElement.addClass('warningbox'); - warningContainer.append(msgElement); + $msgElement.addClass('warningbox'); + $warningContainer.append($msgElement); break; case 'log': - msgElement.addClass('log'); - logContainer.append(msgElement); + $msgElement.addClass('log'); + $logContainer.append($msgElement); break; } } } function add_form(formHtml) { - var formContainer = $('#content-container'); - formContainer.html(formHtml); - var form = $('#install_install'); - intercept_form_submit(form); + var $formContainer = $('#content-container'); + $formContainer.html(formHtml); + var $form = $('#install_install'); + 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 = $('
'); + $progressBar.attr('id', 'progress-bar'); + $progressText = $('

'); + $progressText.attr('id', 'progress-bar-text'); + $progressFiller = $(''); + $progressFiller.attr('id', 'progress-bar-filler'); + + $statusText = $('

'); + $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) { - form.css('display', 'none'); + function submit_form($form, $submitBtn) { + $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) { - var formData = form.serialize(); - //var submitBtn = form.find(':submit'); - formData += ((formData.length) ? '&' : '') + encodeURIComponent(submitBtn.attr('name')) + '='; - formData += encodeURIComponent(submitBtn.attr('value')); + function get_form_fields($form, $submitBtn) { + var formData = $form.serialize(); + formData += ((formData.length) ? '&' : '') + encodeURIComponent($submitBtn.attr('name')) + '='; + formData += encodeURIComponent($submitBtn.attr('value')); return formData; } - function intercept_form_submit(form) { - if (!form.length) { + function intercept_form_submit($form) { + 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)); }); } diff --git a/phpBB/install/helper/iohandler/ajax_iohandler.php b/phpBB/install/helper/iohandler/ajax_iohandler.php index 44a185139e..960dd615b5 100644 --- a/phpBB/install/helper/iohandler/ajax_iohandler.php +++ b/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 *