[isidorus-cvs] r49 - in trunk: docs src/ajax src/ajax/css src/ajax/javascripts - isidorus-cvs@common-lisp.net - mailman3.common-lisp.net

18 Jun 2009

Author: lgiessmann
Date: Thu Jun 18 13:30:48 2009
New Revision: 49
Log:
ajax-client: during AJAX-requests the client hides all current sub-content and shows a GIF representing a loader with a message what the client is currently doing
Modified:
   trunk/docs/JSON_model.pdf
   trunk/src/ajax/css/main.css
   trunk/src/ajax/isidorus.html
   trunk/src/ajax/javascripts/constants.js
   trunk/src/ajax/javascripts/requests.js
Modified: trunk/docs/JSON_model.pdf
==============================================================================
Binary files. No diff available.
Modified: trunk/src/ajax/css/main.css
==============================================================================

--- trunk/src/ajax/css/main.css	(original)
+++ trunk/src/ajax/css/main.css	Thu Jun 18 13:30:48 2009
@@ -55,4 +55,10 @@
 div.loadFrame {
     padding: 2em;
     color: #ff7f00;
+    text-align: center;
+}
+
+img.ajaxLoader {
+    display: none;
+    margin-left: 412px; /* the image has a width of 100px */
 }
\ No newline at end of file
Modified: trunk/src/ajax/isidorus.html
==============================================================================
--- trunk/src/ajax/isidorus.html	(original)
+++ trunk/src/ajax/isidorus.html	Thu Jun 18 13:30:48 2009
@@ -57,6 +57,7 @@
<body>
     <div id="page">
+      <img class="ajaxLoader" src="javascripts/ajaxLoader_big.gif" width="100" height="100" border="0" alt="ajax loader">
       <div id="navi">
    <span id="home" class="isActive">Home</span>
    <span id="searchTopic" class="clickableButton">Search Topics</span>
Modified: trunk/src/ajax/javascripts/constants.js
==============================================================================
--- trunk/src/ajax/javascripts/constants.js	(original)
+++ trunk/src/ajax/javascripts/constants.js	Thu Jun 18 13:30:48 2009
@@ -81,6 +81,7 @@
           "__inputCommitButton__" : "commitButton",
           "__divTmIdFrame__" : "tmIdFrame",
           "__divLoad__" : "loadFrame",
+	       "__imgAjaxLoader__" : "ajaxLoader",
"page" : function(){ return this.__divPage__; },
           "subPage" : function(){ return this.__divSubPage__; },
@@ -122,5 +123,6 @@
           "fog" : function(){ return this.__divFog__; },
           "commitButton" : function(){ return this.__inputCommitButton__; },
           "tmIdFrame" : function(){ return this.__divTmIdFrame__; },
-	       "load" : function(){ return this.__divLoad__; }
+	       "load" : function(){ return this.__divLoad__; },
+	       "ajaxLoader" : function(){ return this.__imgAjaxLoader__; }
          };
\ No newline at end of file
Modified: trunk/src/ajax/javascripts/requests.js
==============================================================================
--- trunk/src/ajax/javascripts/requests.js	(original)
+++ trunk/src/ajax/javascripts/requests.js	Thu Jun 18 13:30:48 2009
@@ -11,7 +11,6 @@
-
 // --- Sets a timeout function which alerts a message.
 function setAjaxTimeout(time, url)
 {
@@ -24,16 +23,13 @@
 // --- Returns a function whihc can be used as an XHR-Handler.
 // --- The returned function is the passed handler wrapped in
 // --- a lambda-function which additionally clears the passed timeout
-// --- function.
+// --- function and call onLoad.
 function createXHRHandler(handler, timeFun)
 {
     function fun(xhr){
    try{
        clearTimeout(timeFun);
-	    var loading = $$("div." + CLASSES.load());
-	    if(loading.length === 1) loading[0].remove();
-	    var content = $$("div." + CLASSES.content());
-	    if(content.length === 1) content[0].show();
+	    removeLoad();
        handler(xhr);
    }
    catch(err) {alert("err: " + err); }
@@ -42,14 +38,40 @@
 }
+// --- Removes all divs with the class ajaxLoader. The inner image with the
+// --- class ajaxLoader will be moved to the top of div.content and the
+// --- display attribute will be set to none;
+function removeLoad()
+{
+    var img = $$("img." + CLASSES.ajaxLoader());
+    if(img.length === 1){
+	img[0].setStyle({"display" : "none"})
+	$("page").insert({"top" : img[0]});
+    }
+
+    var loading = $$("div." + CLASSES.load());
+    if(loading.length === 1) loading[0].remove();
+    var content = $$("div." + CLASSES.content());
+    if(content.length === 1) content[0].show();
+}
+
+
+// --- The hidden image with the class ajaxLoader will be moved to the new created
+// --- div with the given message. The div with the class content will be hidden and instaed
+// --- of the hidden div there will be shown the new created element.
 function onLoad(text)
 {
     var div = new Element("div", {"class" : CLASSES.load()}).update(content);
     var content = $$("div." + CLASSES.content());
     if(content.length === 1){
    content[0].hide();
-	var load = new Element("div", {"class" : CLASSES.load()}).update(text);
+	var load = new Element("div", {"class" : CLASSES.load()}).update("<br/><br/>" + text);
    content[0].insert({"before" : load});
+	var img = $$("img." + CLASSES.ajaxLoader());
+	if(img.length === 1){
+	    img[0].setStyle({"display" : "block"})
+	    load.insert({"top" : img[0]})
+	}
     }
 }
@@ -68,7 +90,7 @@
     try{
    var onFailure = onFailureHandler ? onFailureHandler : defaultFailureHandler;
    var timeFun = setAjaxTimeout(TIMEOUT, TYPE_PSIS_URL);
-	onLoad("Requesting all Type PSIs");
+	onLoad("Requesting all type PSIs");
new Ajax.Request(TYPE_PSIS_URL, {
        "method" : "get",
@@ -89,7 +111,7 @@
     try{
    var onFailure = onFailureHandler ? onFailureHandler : defaultFailureHandler;
    var timeFun = setAjaxTimeout(TIMEOUT, TMCL_TYPE_URL);
-	onLoad("Requesting all constraints for psis:<br/>" + psis.gsub("\[", "").gsub("\]", ""));
+	onLoad("Requesting all constraints for the psis:<br/>" + psis.gsub("\[", "").gsub("\]", ""));
new Ajax.Request(TMCL_TYPE_URL, {
        "method" : "post",
@@ -140,20 +162,13 @@
        neededTime += delta;
        if(delta > maxTimeout && psis && psis.length !== 0){
    	alert("From getTopicStubs(): Please check your network-connection - the request timed out!!!");
-		var loading = $$("div." + CLASSES.load());
-		if(loading.length === 1) loading[0].remove();
-		var content = $$("div." + CLASSES.content());
-		if(content.length === 1) content[0].show();
+		removeLoad();
    	onFailureHandler();
    	return;
        }
if(topicStubs.length === psis.length){
-		var loading = $$("div." + CLASSES.load());
-		if(loading.length === 1) loading[0].remove();
-		var content = $$("div." + CLASSES.content());
-		if(content.length === 1) content[0].show();
-		onSuccessHandler(topicStubs);
+		removeLoad();
        }
        else setTimeout(checkRequests, delta);
    }

    