Merge remote-tracking branch 'prototech/ticket/11928' into develop

# By Cesar G
# Via Cesar G
* prototech/ticket/11928:
  [ticket/11928] Javascript requires camel case.
  [ticket/11928] Rename loadingAlert to loading_indicator.
  [ticket/11928] Make sure the indicator is on top of other elements.
  [ticket/11928] Replace AJAX loading popup with animation.

phpBB/adm/style/admin.css

@@ -1601,6 +1601,21 @@ input.button1:focus, input.button2:focus, input.button3:focus {
 	}
 }
 
+#loading_indicator {
+	background: #000000 url("../images/loading.gif") center center no-repeat;
+	border-radius: 5px;
+	display: none;
+	opacity: 0.8;
+	margin-top: -50px;
+	margin-left: -50px;
+	height: 50px;
+	width: 50px;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	z-index: 51;
+}
+
 /* Pagination
 ---------------------------------------- */
 .pagination {

phpBB/adm/style/overall_footer.html

@@ -17,8 +17,8 @@
 
 		<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
 			<div id="darken">&nbsp;</div>
-			<div class="jalert" id="loadingalert"><h3>{L_LOADING}</h3><p>{L_PLEASE_WAIT}</p></div>
 		</div>
+		<div id="loading_indicator"></div>
 
 		<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
 			<a href="#" class="alert_close"></a>

phpBB/assets/javascript/core.js

@@ -12,31 +12,27 @@ var keymap = {
 };
 
 var dark = $('#darkenwrapper');
-var loadingAlert = $('#loadingalert');
+var loadingIndicator = $('#loading_indicator');
 var phpbbAlertTimer = null;
 
 
 /**
  * Display a loading screen
  *
- * @returns object Returns loadingAlert.
+ * @returns object Returns loadingIndicator.
  */
-phpbb.loadingAlert = function() {
-	if (dark.is(':visible')) {
-		loadingAlert.fadeIn(phpbb.alertTime);
-	} else {
-		loadingAlert.show();
-		dark.fadeIn(phpbb.alertTime, function() {
-			// Wait fifteen seconds and display an error if nothing has been returned by then.
-			phpbbAlertTimer = setTimeout(function() {
-				if (loadingAlert.is(':visible')) {
-					phpbb.alert($('#phpbb_alert').attr('data-l-err'), $('#phpbb_alert').attr('data-l-timeout-processing-req'));
-				}
-			}, 15000);
-		});
+phpbb.loadingIndicator = function() {
+	if (!loadingIndicator.is(':visible')) {
+		loadingIndicator.fadeIn(phpbb.alertTime);
+		// Wait fifteen seconds and display an error if nothing has been returned by then.
+		phpbbAlertTimer = setTimeout(function() {
+			if (loadingIndicator.is(':visible')) {
+				phpbb.alert($('#phpbb_alert').attr('data-l-err'), $('#phpbb_alert').attr('data-l-timeout-processing-req'));
+			}
+		}, 15000);
 	}
 
-	return loadingAlert;
+	return loadingIndicator;
 };
 
 /**
@@ -66,6 +62,10 @@ phpbb.alert = function(title, msg, fadedark) {
 	div.find('.alert_title').html(title);
 	div.find('.alert_text').html(msg);
 
+	if (!dark.is(':visible')) {
+		dark.fadeIn(phpbb.alertTime);
+	}
+
 	div.bind('click', function(e) {
 		e.stopPropagation();
 	});
@@ -97,8 +97,8 @@ phpbb.alert = function(title, msg, fadedark) {
 		e.preventDefault();
 	});
 
-	if (loadingAlert.is(':visible')) {
-		loadingAlert.fadeOut(phpbb.alertTime, function() {
+	if (loadingIndicator.is(':visible')) {
+		loadingIndicator.fadeOut(phpbb.alertTime, function() {
 			dark.append(div);
 			div.fadeIn(phpbb.alertTime);
 		});
@@ -131,6 +131,10 @@ phpbb.confirm = function(msg, callback, fadedark) {
 	var div = $('#phpbb_confirm');
 	div.find('.alert_text').html(msg);
 
+	if (!dark.is(':visible')) {
+		dark.fadeIn(phpbb.alertTime);
+	}
+
 	div.bind('click', function(e) {
 		e.stopPropagation();
 	});
@@ -184,8 +188,8 @@ phpbb.confirm = function(msg, callback, fadedark) {
 		e.preventDefault();
 	});
 
-	if (loadingAlert.is(':visible')) {
-		loadingAlert.fadeOut(phpbb.alertTime, function() {
+	if (loadingIndicator.is(':visible')) {
+		loadingIndicator.fadeOut(phpbb.alertTime, function() {
 			dark.append(div);
 			div.fadeIn(phpbb.alertTime);
 		});
@@ -326,7 +330,7 @@ phpbb.ajaxify = function(options) {
 				// If confirmation is required, display a dialog to the user.
 				phpbb.confirm(res.MESSAGE_BODY, function(del) {
 					if (del) {
-						phpbb.loadingAlert();
+						phpbb.loadingIndicator();
 						data =  $('<form>' + res.S_HIDDEN_FIELDS + '</form>').serialize();
 						$.ajax({
 							url: res.S_CONFIRM_ACTION,
@@ -369,16 +373,19 @@ phpbb.ajaxify = function(options) {
 		}
 
 		if (overlay && (typeof $this.attr('data-overlay') === 'undefined' || $this.attr('data-overlay') === 'true')) {
-			phpbb.loadingAlert();
+			phpbb.loadingIndicator();
 		}
 
-		$.ajax({
+		var request = $.ajax({
 			url: action,
 			type: method,
 			data: data,
 			success: returnHandler,
 			error: errorHandler
 		});
+		request.always(function() {
+			loadingIndicator.fadeOut(phpbb.alertTime);
+		});
 
 		event.preventDefault();
 	});

phpBB/styles/prosilver/template/overall_footer.html

@@ -34,8 +34,8 @@
 
 	<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
 		<div id="darken">&nbsp;</div>
-		<div class="phpbb_alert" id="loadingalert"><h3>{L_LOADING}</h3><p>{L_PLEASE_WAIT}</p></div>
 	</div>
+	<div id="loading_indicator"></div>
 
 	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
 		<a href="#" class="alert_close"></a>

phpBB/styles/prosilver/theme/colours.css

@@ -1104,6 +1104,11 @@ input.disabled {
 	background-color: #000000;
 }
 
+#loading_indicator {
+	background-color: #000000;
+	background-image: url("./images/loading.gif");
+}
+
 #notification_list ul li {
 	border-bottom-color: #B9B9B9;
 }

phpBB/styles/prosilver/theme/common.css

@@ -821,6 +821,21 @@ li.pagination ul {
 	opacity: 0.5;
 }
 
+#loading_indicator {
+	background: center center no-repeat;
+	border-radius: 5px;
+	display: none;
+	opacity: 0.8;
+	margin-top: -50px;
+	margin-left: -50px;
+	height: 50px;
+	width: 50px;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	z-index: 51;
+}
+
 /* Miscellaneous styles
 ---------------------------------------- */
 #forum-permissions {