Merge pull request #28 from Fedik/pull8514-fx

Installation spinner, easy
joomla · Nov 21, 2015 · d845980 · d845980
2 parents de31021 + 39fc8b6
commit d845980
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 26 deletions.
diff --git a/installation/template/css/template.css b/installation/template/css/template.css
@@ -128,6 +128,8 @@ textarea.noResize {
 }
 
 #loading {
+	position: absolute;
+	display: none;
  	left: 0;
  	top: 0;
  	width: 100%;
@@ -137,4 +139,4 @@ textarea.noResize {
 	 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 95);
  	filter: alpha(opacity = 95);
  	background: url('../../../media/jui/images/ajax-loader.gif') rgba(255,255,255,0.7) 50% 10px no-repeat;
- }
+ }
diff --git a/installation/template/index.php b/installation/template/index.php
@@ -74,7 +74,6 @@
 				</noscript>
 			</div>
 			<div id="container-installation">
-				<div id="loading"></div>
 				<jdoc:include type="component" />
 			</div>
 			<hr />

diff --git a/installation/template/js/installation.js b/installation/template/js/installation.js
@@ -6,7 +6,7 @@
  */
 
 var Installation = function(_container, _base) {
-    var $, container, busy, baseUrl, view;
+    var $, container, busy, $spinner, baseUrl, view;
 
     /**
      * Initializes JavaScript events on each request, required for AJAX
@@ -16,22 +16,11 @@ var Installation = function(_container, _base) {
         $('form.form-validate').each(function(index, form) {
             document.formvalidator.attachToForm(form);
         });
-    }
 
-    var spinnerShow = function() {
-        jQuery('#loading')
-            .css("position", "absolute")
-            .css("left", "0")
-            .css("top", "0")
-            .css("width", "100%")
-            .css("height", "100%");
-    };
-
-    var spinnerHide = function() {
-        jQuery('#loading')
-            .css("width", "0")
-            .css("height", "0");
-    };
+        // Create and append the spinner
+        $spinner = $('<div/>', {id: 'loading'});
+        $('#' + container).prepend($spinner);
+    }
 
     /**
      * Method to submit a form from the installer via AJAX
@@ -46,7 +35,7 @@ var Installation = function(_container, _base) {
             return false;
         }
 
-        spinnerShow();
+        $spinner.show();
         busy = true;
         Joomla.removeMessages();
         var data = 'format: json&' + $form.serialize();
@@ -68,7 +57,7 @@ var Installation = function(_container, _base) {
                 window.location = baseUrl + '?view=' + r.data.view;
             }
         }).fail(function(xhr) {
-            spinnerHide();
+            $spinner.hide();
             busy = false;
             try {
                 var r = $.parseJSON(xhr.responseText);
@@ -94,7 +83,7 @@ var Installation = function(_container, _base) {
             return false;
         }
 
-        spinnerShow();
+        $spinner.show();
         busy = true;
         Joomla.removeMessages();
         var data = 'format: json&' + $form.serialize();
@@ -116,7 +105,7 @@ var Installation = function(_container, _base) {
                 window.location = baseUrl + '?view=' + r.data.view;
             }
         }).fail(function(xhr) {
-            spinnerHide();
+            $spinner.hide();
             busy = false;
             try {
                 var r = $.parseJSON(xhr.responseText);
@@ -140,7 +129,7 @@ var Installation = function(_container, _base) {
     var goToPage = function(page, fromSubmit) {
         if (!fromSubmit) {
             Joomla.removeMessages();
-            spinnerShow();
+            $spinner.show();
         }
 
         $.ajax({
@@ -154,7 +143,7 @@ var Installation = function(_container, _base) {
             // Attach JS behaviors to the newly loaded HTML
             pageInit();
 
-            spinnerHide();
+            $spinner.hide();
             busy = false;
 
             initElements();
@@ -189,7 +178,7 @@ var Installation = function(_container, _base) {
 
         $progress.css('width', parseFloat($progress.get(0).style.width) + step_width + '%');
         $tr.addClass('active');
-        spinnerShow();
+        $spinner.show();
 
         $.ajax({
             type : "POST",
@@ -205,7 +194,7 @@ var Installation = function(_container, _base) {
             } else {
                 $progress.css('width', parseFloat($progress.get(0).style.width) + (step_width * 10) + '%');
                 $tr.removeClass('active');
-                spinnerHide();
+                $spinner.hide();
 
                 install(tasks, step_width);
             }