mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-07 20:08:53 +00:00
[ticket/13740] Implement progress bar for AJAX UI
PHPBB3-13740
This commit is contained in:
MateBartus
Mate Bartus
parent
37b0134aa4
commit
b7ef709549
3 changed files with 146 additions and 35 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = $('<div />');
|
||||
title = $(document.createElement('strong'));
|
||||
title.text(messages[i].title);
|
||||
msgElement.append(title);
|
||||
$msgElement = $('<div />');
|
||||
$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 = $('<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) {
|
||||
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));
|
||||
});
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue