Added AJAX loading box, appears after 1.5 seconds if the page has not loaded yet.

git-svn-id: http://svn.resourcespace.org/svn/resourcespace@3800 c08608d7-6e46-0410-86ca-f2a6f1370df5

Author: danh

Diff for: css/global.css

@@ -468,6 +468,30 @@ div.autocomplete ul li {
     box-shadow: 4px 5px 5px rgba(0, 0, 0, .5);
 	}
 
+#LoadingBox
+	{
+	position: absolute;
+	top:300px;
+	left: 30%;
+	background-color:white;
+	width:200px;padding:15px;
+	border: 1px solid;
+	border-radius:5px;
+	font-size:150%;
 
+	-moz-border-radius: 5px; 
+	-webkit-border-radius: 5px;
+    -webkit-box-shadow: 4px 5px 5px rgba(0, 0, 0, .2);
+    -moz-box-shadow: 4px 5px 5px rgba(0, 0, 0, .2);
+    box-shadow: 4px 5px 5px rgba(0, 0, 0, .2);
+    z-index:99999;
+    line-height:200%;
+    color:black;
+    display:none;
+	}
 
-
+#LoadingBox img
+	{
+	float:right;
+	vertical-align: middle;
+	}

Diff for: gfx/interface/loading.gif

@@ -301,6 +301,10 @@
 ?>
 <!--Main Part of the page-->
 <?php if (($pagename!="login") && ($pagename!="user_password") && ($pagename!="user_request")) { ?><div id="CentralSpaceContainer"><?php } ?>
+
+<!-- Loading graphic -->
+<div id="LoadingBox"><?php echo $lang["pleasewait"] ?><img src="<?php echo $baseurl_short ?>/gfx/interface/loading.gif"></div>
+
 <div id="<?php echo $div?>">
 
 

Diff for: include/header.php

@@ -14,6 +14,15 @@ function SetCookie (cookieName,cookieValue,nDays)
 /* Keep a global array of timers */
 var timers = new Array();
 
+function ClearTimers()
+	{
+	// Remove all existing page timers.
+	for (var i = 0; i < timers.length; i++)
+    	{
+	    clearTimeout(timers[i]);
+	    }
+	}
+
 /* AJAX loading of central space contents given a link */
 function CentralSpaceLoad (anchor,scrolltop)
 	{
@@ -58,9 +67,12 @@ function CentralSpaceLoad (anchor,scrolltop)
 		url += '?ajax=true';
 		}
 
+	CentralSpaceShowLoading();
 	jQuery('#CentralSpace').load(url, function ()
 		{
 		// Load completed
+		CentralSpaceHideLoading();
+		
 		if (rewriteUrls){
 			relToAbs("#CentralSpace",url);
 		}
@@ -102,8 +114,11 @@ function CentralSpacePost (form,scrolltop)
 		{
 		url += '?ajax=true';			
 		}
+
+	CentralSpaceShowLoading();		
 	jQuery.post(url,jQuery(form).serialize(),function(data)
 		{
+		CentralSpaceHideLoading();
 		jQuery('#CentralSpace').html(data);
 		if (rewriteUrls){relToAbs("#CentralSpace",url);}
 
@@ -122,7 +137,18 @@ function CentralSpacePost (form,scrolltop)
 	}
 
 
+function CentralSpaceShowLoading()
+	{
+	ClearTimers();
+	timers.push(window.setTimeout("jQuery('#CentralSpace').fadeTo('fast',0.7);jQuery('#LoadingBox').fadeIn('fast');",1500));
+	}
 
+function CentralSpaceHideLoading()
+	{
+	ClearTimers();
+	jQuery('#LoadingBox').fadeOut('fast');	
+	jQuery('#CentralSpace').css({opacity:1});
+	}
 
 
 

Diff for: lib/js/global.js

@@ -101,10 +101,7 @@ function nextPhoto()
 jQuery(document).ready( function ()
 	{ 
     /* Clear all old timers */
-    for (var i = 0; i < timers.length; i++)
-    	{
-	    clearTimeout(timers[i]);
-	    }
+    ClearTimers();
 	timers.push(window.setTimeout("nextPhoto()", 1000 * photo_delay));
 	}
 	);