Optimize loading the index with AJAX

Improves the perceptual latency of the AJAX based index view.

- Only show the throbber for AJAX calls that are slow.
  Currently this applies to calls that take more than 500 ms.

- Reuse the results of AJAX calls.
  This makes a namespace open, close, open, cycle much faster.
  Also reduces the number of AJAX calls to the server.
  (To reload the index, just reload the page as usual.)

darcs-hash:20070810040430-05dcb-1a4bcdb19c599ea74d1a3d2cc758753d19ef6eee.gz

1 files changed, 33 insertions, 7 deletions

diff --git a/lib/scripts/index.js b/lib/scripts/index.js
index 62ae92060..871993c11 100644
--- a/lib/scripts/index.js
+++ b/lib/scripts/index.js
@@ -1,11 +1,17 @@
 /**
- * Java Script for index view
+ * Javascript for index view
  *
  * @author Andreas Gohr <andi@splitbrain.org>
  */
 
 index = {
 
+     /**
+     * Delay in ms before showing the throbber.
+     * Used to skip the throbber for fast AJAX calls.
+     */
+    throbber_delay: 500,
+
     /**
      * Attach event handlers to all "folders" below the given element
      *
@@ -25,20 +31,30 @@ index = {
 
     /**
      * Open or close a subtree using AJAX
+     * The contents of subtrees are "cached" untill the page is reloaded.
+     * A "loading" indicator is shown only when the AJAX call is slow.
      *
      * @author Andreas Gohr <andi@splitbrain.org>
+     * @author Ben Coburn <btcoburn@silicodon.net>
      */
     toggle: function(event,clicky){
         var listitem = clicky.parentNode.parentNode;
 
         // if already open, close by removing the sublist
         var sublists = listitem.getElementsByTagName('ul');
-        if(sublists.length){
-            listitem.removeChild(sublists[0]);
+        if(sublists.length && listitem.className=='open'){
+            sublists[0].style.display='none';
             listitem.className='closed';
             return false;
         }
 
+        // just show if already loaded
+        if(sublists.length && listitem.className=='closed'){
+            sublists[0].style.display='';
+            listitem.className='open';
+            return false;
+        }
+
         // prepare an AJAX call to fetch the subtree
         var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
         ajax.AjaxFailedAlert = '';
@@ -48,12 +64,22 @@ index = {
         //prepare the new ul
         var ul = document.createElement('ul');
         ul.className = 'idx';
-        ul.innerHTML = '<li><img src="'+DOKU_BASE+'lib/images/throbber.gif" alt="loading..." title="loading..." /></li>';
-        listitem.appendChild(ul);
+        timeout = window.setTimeout(function(){
+            // show the throbber as needed
+            ul.innerHTML = '<li><img src="'+DOKU_BASE+'lib/images/throbber.gif" alt="loading..." title="loading..." /></li>';
+            listitem.appendChild(ul);
+            listitem.className='open';
+        }, this.throbber_delay);
         ajax.elementObj = ul;
-        ajax.afterCompletion = function(){ index.treeattach(ul); };
+        ajax.afterCompletion = function(){
+            window.clearTimeout(timeout);
+            index.treeattach(ul);
+            if (listitem.className!='open') {
+                listitem.appendChild(ul);
+                listitem.className='open';
+            }
+        };
         ajax.runAJAX(clicky.search.substr(1)+'&call=index');
-        listitem.className='open';
         return false;
 
     }