index.js has been jQueryfied

1 files changed, 50 insertions, 70 deletions

diff --git a/lib/scripts/index.js b/lib/scripts/index.js
index ff0cd7692..da9ce96a4 100644
--- a/lib/scripts/index.js
+++ b/lib/scripts/index.js
@@ -1,43 +1,22 @@
+/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: false, strict: true, newcap: true, immed: true */
+/*global jQuery, window, DOKU_BASE*/
+"use strict";
+
 /**
  * Javascript for index view
  *
  * @author Andreas Gohr <andi@splitbrain.org>
+ * @author Pierre Spring <pierre.spring@caillou.ch>
  */
 
-var index = {
+(function ($) {
+    var throbber_delay, toggle;
 
      /**
      * 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
-     *
-     * @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(e){ return index.toggle(e,this); });
-
-            // get the listitem the elem belongs to
-            var listitem = elem.parentNode;
-            while (listitem.tagName != 'LI') {
-              listitem = listitem.parentNode;
-            }
-            //when there are uls under this listitem mark this listitem as opened
-            if (listitem.getElementsByTagName('ul').length) {
-              listitem.open = true;
-            }
-        }
-    },
+    throbber_delay = 500;
 
     /**
      * Open or close a subtree using AJAX
@@ -46,70 +25,71 @@ var index = {
      *
      * @author Andreas Gohr <andi@splitbrain.org>
      * @author Ben Coburn <btcoburn@silicodon.net>
+     * @author Pierre Spring <pierre.spring@caillou.ch>
      */
-    toggle: function(e,clicky){
-        var listitem = clicky.parentNode.parentNode;
+    toggle = function (e) {
+
+        var listitem, sublist, timeout, ul, clicky;
 
-        listitem.open = !listitem.open;
-        // listitem.open represents now the action to be done
+        clicky = $(this);
+        listitem = clicky.parentsUntil('li').last().parent();
+        sublist = listitem.find('ul').first();
 
         // if already open, close by removing the sublist
-        var sublists = listitem.getElementsByTagName('ul');
-        if(!listitem.open){
-            if (sublists.length) {
-              sublists[0].style.display='none';
-            }
-            listitem.className='closed';
+        if (listitem.hasClass('open')) {
+            sublist.slideUp(
+                function () {
+                    listitem.addClass('closed').removeClass('open');
+                }
+            );
             e.preventDefault();
-            return false;
+            return;
         }
 
         // just show if already loaded
-        if(sublists.length && listitem.open){
-            sublists[0].style.display='';
-            listitem.className='open';
+        if (sublist.size() > 0 && !listitem.hasClass('open')) {
+            listitem.addClass('open').removeClass('closed');
+            sublist.slideDown();
             e.preventDefault();
-            return false;
+            return;
         }
 
         //prepare the new ul
-        var ul = jQuery('<ul class="idx"/>');
+        ul = $('<ul class="idx"/>');
 
-        var timeout = window.setTimeout(function(){
+        timeout = window.setTimeout(function () {
             // show the throbber as needed
-            if (listitem.open) {
-              ul.html('<li><img src="'+DOKU_BASE+'lib/images/throbber.gif" alt="loading..." title="loading..." /></li>')
-                .appendTo(listitem);
-              listitem.className='open';
+            if (!listitem.hasClass('open')) {
+                ul.html('<li><img src="' + DOKU_BASE + 'lib/images/throbber.gif" alt="loading..." title="loading..." /></li>');
+                listitem
+                    .append(ul)
+                    .addClass('open')
+                    .removeClass('closed');
             }
-        }, this.throbber_delay);
+        }, throbber_delay);
 
-        jQuery.post(
+        $.post(
             DOKU_BASE + 'lib/exe/ajax.php',
-            clicky.search.substr(1)+'&call=index',
+            clicky.attr('search').substr(1) + '&call=index',
             function (data) {
                 window.clearTimeout(timeout);
                 ul.html(data);
-                index.treeattach(ul[0]);
-                if (listitem.className!='open') {
-                  if (!listitem.open) {
-                    this.style.display='none';
-                  }
-                  listitem.appendChild(ul[0]);
-                  if (listitem.open) {
-                    listitem.className='open';
-                  }
+                if (listitem.className !== 'open') {
+                    if (ul.parent().size() === 0) {
+                        // if the UL has not been attached when showing the
+                        // throbber, then let's do it now.
+                        listitem.append(ul);
+                    }
+                    listitem.addClass('open').removeClass('closed');
                 }
             },
             'html'
         );
         e.preventDefault();
-        return;
-
-    }
-};
-
+    };
 
-addInitEvent(function(){
-    index.treeattach($('index__tree'));
-});
+    $(function () {
+        // Initialze tree when the DOM is ready.
+        $('#index__tree').delegate('a.idx_dir', 'click', toggle);
+    });
+}(jQuery));
\ No newline at end of file