[isidorus-cvs] r49 - in trunk: docs src/ajax src/ajax/css src/ajax/javascripts
Lukas Giessmann
lgiessmann at common-lisp.net
Thu Jun 18 17:30:48 UTC 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);
}
More information about the Isidorus-cvs
mailing list