AJAX for the index view

This makes the index view much more responsive by loading sub namespaces through AJAX
if JavaScript is available.

The used throbber image probably looks bad on dark backgrounds. If someone could provide
a better one it would be greatly appreciated.

darcs-hash:20070716184605-7ad00-adf298ee3303d50f2b4b6b66e5ea3ff8d8c2bf9a.gz

4 files changed, 102 insertions, 2 deletions

diff --git a/lib/exe/ajax.php b/lib/exe/ajax.php
index 3f64dc7ac..8bcf184b5 100644
--- a/lib/exe/ajax.php
+++ b/lib/exe/ajax.php
@@ -28,7 +28,7 @@ if(isset($_POST['call']))
 else if(isset($_GET['call']))
   $call = 'ajax_'.$_GET['call'];
 else
-  return;
+  exit;
 if(function_exists($call)){
   $call();
 }else{
@@ -167,6 +167,8 @@ function ajax_draftdel(){
 
 /**
  * Return subnamespaces for the Mediamanager
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
  */
 function ajax_medians(){
   global $conf;
@@ -190,7 +192,9 @@ function ajax_medians(){
 }
 
 /**
- * Return subnamespaces for the Mediamanager
+ * Return list of files for the Mediamanager
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
  */
 function ajax_medialist(){
   global $conf;
@@ -199,5 +203,33 @@ function ajax_medialist(){
   media_filelist($_POST['ns']);
 }
 
+/**
+ * Return sub index for index view
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function ajax_index(){
+  global $conf;
+  require_once(DOKU_INC.'inc/search.php');
+  require_once(DOKU_INC.'inc/html.php');
+
+  // wanted namespace
+  $ns  = cleanID($_POST['idx']);
+  $dir  = utf8_encodeFN(str_replace(':','/',$ns));
+
+  $lvl = count(explode(':',$ns));
+
+  $data = array();
+  search($data,$conf['datadir'],'search_index',array('ns' => $ns),$dir);
+  foreach($data as $item){
+    $item['level'] = $lvl+1;
+    echo html_li_index($item);
+    echo '<div class="li">';
+    echo html_list_index($item);
+    echo '</div>';
+    echo '</li>';
+  }
+}
+
 //Setup VIM: ex: et ts=2 enc=utf-8 :
 ?>
diff --git a/lib/exe/js.php b/lib/exe/js.php
index 98b276d53..802ed4490 100644
--- a/lib/exe/js.php
+++ b/lib/exe/js.php
@@ -45,6 +45,7 @@ function js_out(){
                 DOKU_INC.'lib/scripts/script.js',
                 DOKU_INC.'lib/scripts/tw-sack.js',
                 DOKU_INC.'lib/scripts/ajax.js',
+                DOKU_INC.'lib/scripts/index.js',
              );
     if($edit){
         if($write){
diff --git a/lib/images/throbber.gif b/lib/images/throbber.gif
new file mode 100644
index 000000000..d04bd3949
--- /dev/null
+++ b/lib/images/throbber.gif
diff --git a/lib/scripts/index.js b/lib/scripts/index.js
new file mode 100644
index 000000000..7d85fd1b6
--- /dev/null
+++ b/lib/scripts/index.js
@@ -0,0 +1,67 @@
+/**
+ * Java Script for index view
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+
+index = {
+
+    /**
+     * Attach event handlers to all "folders" below the given element
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    treeattach: function(obj){
+        if(!obj) return;
+
+        var items = getElementsByClass('idx_dir',obj,'a')
+        for(var i=0; i<items.length; i++){
+            var elem = items[i];
+
+            // attach action to make the link clickable by AJAX
+            addEvent(elem,'click',function(event){ return index.toggle(event,this); });
+        }
+    },
+
+    /**
+     * Open or close a subtree using AJAX
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    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]);
+            listitem.className='closed';
+            return false;
+        }
+
+        // prepare an AJAX call to fetch the subtree
+        var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
+        ajax.AjaxFailedAlert = '';
+        ajax.encodeURIString = false;
+        if(ajax.failed) return true;
+
+        //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);
+        ajax.elementObj = ul;
+        ajax.afterCompletion = function(){ index.treeattach(ul); };
+        ajax.runAJAX(clicky.search.substr(1)+'&call=index');
+        listitem.className='open';
+        return false;
+
+    },
+
+
+}
+
+
+addInitEvent(function(){
+    index.treeattach($('index__tree'));
+});