Show loading icon while loading new widget through AJAX. Note: loading icon needs improvement.

6 files changed, 72 insertions, 46 deletions

diff --git a/usr/local/www/index.php b/usr/local/www/index.php
index cf8cafe..9dff35c 100755
--- a/usr/local/www/index.php
+++ b/usr/local/www/index.php
@@ -196,29 +196,35 @@ $jscriptstr = <<<EOD
 
 
 function widgetAjax(widget) {	
-			uri = "widgets/widgets/" + widget + ".widget.php";
-			var opt = {
-			    // Use GET
-			    method: 'get',
-				evalScripts: 'true',
-			    asynchronous: true,
-			    // Handle 404
-			    on404: function(t) {
-			        alert('Error 404: location "' + t.statusText + '" was not found.');
-			    },
-			    // Handle other errors
-			    onFailure: function(t) {
-			        alert('Error ' + t.status + ' -- ' + t.statusText);
-			    }
-			}
-			new Ajax.Updater(widget, uri, opt);
-		}
+	uri = "widgets/widgets/" + widget + ".widget.php";
+	var opt = {
+	    // Use GET
+	    method: 'get',
+		evalScripts: 'true',
+	    asynchronous: true,
+	    // Handle 404
+	    on404: function(t) {
+	        alert('Error 404: location "' + t.statusText + '" was not found.');
+	    },
+	    // Handle other errors
+	    onFailure: function(t) {
+	        alert('Error ' + t.status + ' -- ' + t.statusText);
+	    },
+		onSuccess: function(t) {
+			widget2 = widget + "-loader";
+			Effect.Fade(widget2, {queue:'front'});
+			Effect.Appear(widget, {queue:'end'});			
+	    }	
+	}
+	new Ajax.Updater(widget, uri, opt);
+}
 
 
 function addDiv(selectedDiv){	
 	selectedDiv2 = selectedDiv + "-container";
 	d = document;
 	textlink = d.getElementById(selectedDiv2);
+	Effect.Appear(selectedDiv2, {duration:1});
 	if (textlink.style.display != "none")
 	{
 		Effect.Shake(selectedDiv2);	
@@ -226,7 +232,6 @@ function addDiv(selectedDiv){
 	else
 	{
 		widgetAjax(selectedDiv);
-		Effect.Appear(selectedDiv2, {duration:1});
 		selectIntLink = selectedDiv2 + "-input";
 		textlink = d.getElementById(selectIntLink);
 		textlink.value = "show";	
@@ -485,7 +490,7 @@ echo $jscriptstr;
 	$printed = false;
 	$firstprint = false;
 	?> 
-	<div id="col1" style="float:left;width:49%;padding: 2px;padding-bottom:40px">		
+	<div id="col1" style="float:left;width:50%;padding-bottom:40px">		
 	<?php
 	
 	if ($config['widgets']){
@@ -574,7 +579,7 @@ echo $jscriptstr;
 				$printed = true;
 				?>
 				</div>
-				<div id="col2" style="float:right;width:49%;padding: 2px;padding-bottom:40px">		
+				<div id="col2" style="float:right;width:50%;padding-bottom:40px">		
 				<?php
 			}
 		}
@@ -582,7 +587,7 @@ echo $jscriptstr;
 			$printed = true;
 			?>
 			</div>
-			<div id="col2" style="float:right;width:49%;padding: 2px;padding-bottom:40px">		
+			<div id="col2" style="float:right;width:50%;padding-bottom:40px">		
 			<?php
 		}
 		
@@ -627,12 +632,24 @@ echo $jscriptstr;
 				</div>
 				<div style="clear:both;"></div>
 			</div>
-			<div id="<?php echo $widgetname;?>" style="display:<?php echo $display; ?>;">
+			<?php if ($displayarray[$widgetcounter] != "show") { ?>
+			<div id="<?php echo $widgetname;?>-loader" style="display:<?php echo $display; ?>;"><br>
+					<div id="<?php echo $widgetname;?>-loader" style="display:<?php echo $display; ?>;">	
+						<center>
+							<img src="./themes/<?= $g['theme']; ?>/images/misc/widget_loader.gif" width=25 height=25 alt="Loading selected widget...">
+						</center>			
+					</div><br>
+			</div> <?php }
+			if ($displayarray[$widgetcounter] != "show") $display = none; ?>
+			<div id="<?php echo $widgetname;?>" style="display:<?php echo $display; ?>;">				
 				<?php 
 					if ($displayarray[$widgetcounter] != "close")
 					{
 						include($directory . $widget);
-					}				
+					}	
+					else
+					{ ?>
+					<?php } 
 				 ?>
 			</div>
 			<div style="clear:both;"></div>
@@ -647,7 +664,7 @@ echo $jscriptstr;
 			$printed = true;
 			?>
 			</div>
-			<div id="col2" style="float:right;width:49%;padding: 2px;padding-bottom:40px"></div>
+			<div id="col2" style="float:right;width:50%;padding-bottom:40px"></div>
 		
 			<?php } ?>
 	<div style="clear:both;"></div>
diff --git a/usr/local/www/javascript/index/sajax.js b/usr/local/www/javascript/index/sajax.js
index fd9b00a..b7dd82a 100644
--- a/usr/local/www/javascript/index/sajax.js
+++ b/usr/local/www/javascript/index/sajax.js
@@ -74,8 +74,7 @@ function updateState(x)
 }
 
 function updateInterfaceStats(x){
-	var widget = document.getElementById("interface_statistics-container");
-	if (widget.style.display != "none"){
+	if (widgetActive("interface_statistics")){
 		statistics_split = x.split(",");
 		var counter = 1;
 		for (var y=0; y<statistics_split.length-1; y++){
@@ -86,30 +85,40 @@ function updateInterfaceStats(x){
 }
 
 function updateInterfaces(x){
-	interfaces = x.split("~");
-	for (var z=0; z<interfaces.length-1; z++){
-		details = interfaces[z].split(",");	
-		if (details[1] == "up"){
-			document.getElementById(details[0] + '-up').style.display = "inline";	 
-			document.getElementById(details[0] + '-down').style.display = "none";
-			document.getElementById(details[0] + '-block').style.display = "none";
-			document.getElementById(details[0] + '-ip').innerHTML = details[2]; 
-			document.getElementById(details[0] + '-media').innerHTML = details[3];
-		} else if (details[1] == "down"){
-			document.getElementById(details[0] + '-down').style.display = "inline";	 
-			document.getElementById(details[0] + '-up').style.display = "none";
-			document.getElementById(details[0] + '-block').style.display = "none";
-			document.getElementById(details[0] + '-ip').innerHTML = details[2]; 
-			document.getElementById(details[0] + '-media').innerHTML = details[3];			
-		} else if (details[1] == "block"){
-			document.getElementById(details[0] + '-block').style.display = "inline";	 
-			document.getElementById(details[0] + '-down').style.display = "none";
-			document.getElementById(details[0] + '-up').style.display = "none";			
+	if (widgetActive("interfaces")){
+		interfaces = x.split("~");
+		for (var z=0; z<interfaces.length-1; z++){
+			details = interfaces[z].split(",");	
+			if (details[1] == "up"){
+				document.getElementById(details[0] + '-up').style.display = "inline";	 
+				document.getElementById(details[0] + '-down').style.display = "none";
+				document.getElementById(details[0] + '-block').style.display = "none";
+				document.getElementById(details[0] + '-ip').innerHTML = details[2]; 
+				document.getElementById(details[0] + '-media').innerHTML = details[3];
+			} else if (details[1] == "down"){
+				document.getElementById(details[0] + '-down').style.display = "inline";	 
+				document.getElementById(details[0] + '-up').style.display = "none";
+				document.getElementById(details[0] + '-block').style.display = "none";
+				document.getElementById(details[0] + '-ip').innerHTML = details[2]; 
+				document.getElementById(details[0] + '-media').innerHTML = details[3];			
+			} else if (details[1] == "block"){
+				document.getElementById(details[0] + '-block').style.display = "inline";	 
+				document.getElementById(details[0] + '-down').style.display = "none";
+				document.getElementById(details[0] + '-up').style.display = "none";			
+			}
+			
 		}
-		
 	}
 }
 
+function widgetActive(x){
+	var widget = document.getElementById(x + '-container');
+	if (widget.style.display != "none")
+		return TRUE;
+	else
+		return FALSE;
+}
+
 /* start ajax helper "thread" if not started */
 if(!ajaxStarted) {
 	window.setTimeout('updateMeters()', update_interval);
diff --git a/usr/local/www/themes/metallic/images/misc/widget_loader.gif b/usr/local/www/themes/metallic/images/misc/widget_loader.gif
new file mode 100644
index 0000000..47127fd
--- /dev/null
+++ b/usr/local/www/themes/metallic/images/misc/widget_loader.gif
diff --git a/usr/local/www/themes/nervecenter/images/misc/widget_loader.gif b/usr/local/www/themes/nervecenter/images/misc/widget_loader.gif
new file mode 100644
index 0000000..47127fd
--- /dev/null
+++ b/usr/local/www/themes/nervecenter/images/misc/widget_loader.gif
diff --git a/usr/local/www/themes/pfsense-dropdown/images/misc/widget_loader.gif b/usr/local/www/themes/pfsense-dropdown/images/misc/widget_loader.gif
new file mode 100644
index 0000000..47127fd
--- /dev/null
+++ b/usr/local/www/themes/pfsense-dropdown/images/misc/widget_loader.gif
diff --git a/usr/local/www/themes/pfsense/images/misc/widget_loader.gif b/usr/local/www/themes/pfsense/images/misc/widget_loader.gif
new file mode 100644
index 0000000..47127fd
--- /dev/null
+++ b/usr/local/www/themes/pfsense/images/misc/widget_loader.gif