jQuerify acl plugin JavaScript

lib/plugins/acl/admin.php

@@ -540,7 +540,8 @@ class admin_plugin_acl extends DokuWiki_Admin_Plugin {
 
 
     function _html_li_acl($item){
-            return '<li class="level'.$item['level'].'">';
+        return '<li class="level' . $item['level'] . ' ' .
+               ($item['open'] ? 'open' : 'closed') . '">';
     }
 
 

lib/plugins/acl/script.js

@@ -3,16 +3,44 @@
  *
  * @author Andreas Gohr <andi@splitbrain.org>
  */
-acl = {
+var dw_acl = {
     /**
      * Initialize the object and attach the event handlers
      */
-    init: function(){
-        if(!jQuery('#acl_manager').length) return; //FIXME only one underscore!!
+    init: function () {
+        var $tree;
 
-        jQuery('#acl__user select').change(acl.userselhandler);
-        jQuery('#acl__tree').click(acl.treehandler);
-        jQuery('#acl__user input[type=submit]').click(acl.loadinfo);
+        //FIXME only one underscore!!
+        if (jQuery('#acl_manager').length === 0) {
+            return;
+        }
+
+        jQuery('#acl__user select').change(dw_acl.userselhandler);
+        jQuery('#acl__user input[type=submit]').click(dw_acl.loadinfo);
+
+        $tree = jQuery('#acl__tree');
+        $tree.dw_tree({toggle_selector: 'img',
+                       load_data: function (show_sublist, $clicky) {
+                           // get the enclosed link and the edit form
+                           var $frm = jQuery('#acl__detail form');
+
+                           jQuery.post(
+                               DOKU_BASE + 'lib/plugins/acl/ajax.php',
+                               jQuery.extend(dw_acl.parseatt($clicky.parent().find('a')[0].search),
+                                             {ajax: 'tree',
+                                              current_ns: $frm.find('input[name=ns]').val(),
+                                              current_id: $frm.find('input[name=id]').val()}),
+                               show_sublist,
+                               'html'
+                           );
+                       },
+
+                       toggle_display: function ($clicky, opening) {
+                           $clicky.attr('src',
+                                        DOKU_BASE + 'lib/images/' +
+                                        (opening ? 'minus' : 'plus') + '.gif');
+                       }});
+        $tree.delegate('a', 'click', dw_acl.treehandler);
     },
 
     /**
@@ -21,32 +49,20 @@ acl = {
      * Hides or shows the user/group entry box depending on what was selected in the
      * dropdown element
      */
-    userselhandler: function(e){
+    userselhandler: function () {
         // make entry field visible/invisible
-        if(this.value == '__g__' || this.value == '__u__'){
-            jQuery('#acl__user input').show();
-        }else{
-            jQuery('#acl__user input').hide();
-        }
-        acl.loadinfo();
+        jQuery('#acl__user input').toggle(this.value === '__g__' ||
+                                          this.value === '__u__');
+        dw_acl.loadinfo();
     },
 
     /**
      * Load the current permission info and edit form
      */
-    loadinfo: function(){
-        var frm = jQuery('#acl__detail form')[0];
-
+    loadinfo: function () {
         jQuery('#acl__info').load(
             DOKU_BASE + 'lib/plugins/acl/ajax.php',
-            {
-                'ns':       frm.elements['ns'].value,
-                'id':       frm.elements['id'].value,
-                'acl_t':    frm.elements['acl_t'].value,
-                'acl_w':    frm.elements['acl_w'].value,
-                'sectok':   frm.elements['sectok'].value,
-                'ajax':     'info',
-            }
+            jQuery('#acl__detail form').serialize() + '&ajax=info'
         );
         return false;
     },
@@ -56,11 +72,13 @@ acl = {
      *
      * @todo put into global script lib?
      */
-    parseatt: function(str){
-        if(str[0] == '?') str = str.substr(1);
+    parseatt: function (str) {
+        if (str[0] === '?') {
+            str = str.substr(1);
+        }
         var attributes = {};
         var all = str.split('&');
-        for(var i=0; i<all.length; i++){
+        for (var i = 0; i < all.length; i++) {
             var att = all[i].split('=');
             attributes[att[0]] = decodeURIComponent(att[1]);
         }
@@ -68,79 +86,40 @@ acl = {
     },
 
     /**
-     * Open or close a subtree using AJAX
-     *
-     * @author Andreas Gohr <andi@splitbrain.org>
-     * @param  DOMElement clicky - the plus/minus icon in front of a namespace
+     * Handles clicks to the tree nodes
      */
-    treetoggle: function(clicky){
-        var listitem = jQuery(clicky).parent().parent();
-
-        // if already open, close by removing the sublist
-        var sublists = listitem.find('ul');
-        if(sublists.length){
-            listitem.remove('ul');
-            clicky.src = DOKU_BASE+'lib/images/plus.gif';
-            clicky.alt = '+';
-            return false;
-        }
+    treehandler: function () {
+        var $link, $frm;
 
-        // prepare new ul to load into it via ajax
-        var ul = document.createElement('ul');
-        listitem[0].appendChild(ul);
+        $link = jQuery(this);
 
-        // get the enclosed link and the edit form
-        var link = listitem.find('a')[0];
-        var frm  = jQuery('#acl__detail form')[0];
+        // remove highlighting
+        jQuery('#acl__tree a.cur').removeClass('cur');
 
-        // prepare ajax data
-        var data           = acl.parseatt(link.search);
-        data['ajax']       = 'tree';
-        data['current_ns'] = frm.elements['ns'].value;
-        data['current_id'] = frm.elements['id'].value;
+        // add new highlighting
+        $link.addClass('cur');
 
-        // run ajax
-        jQuery(ul).load(DOKU_BASE + 'lib/plugins/acl/ajax.php', data);
-
-        clicky.src = DOKU_BASE+'lib/images/minus.gif';
-        return false;
-    },
-
-    /**
-     * Handles all clicks in the tree, dispatching the right action based on the
-     * clicked element
-     *
-     * @param Event e The event object that caused the execution
-     */
-    treehandler: function(e){
-        if(e.target.src){ // is it an image?
-            acl.treetoggle(e.target);
-        } else if(e.target.href){ // is it a link?
-            // remove highlighting
-            jQuery('#acl__tree a.cur').removeClass('cur');
-
-            var link = jQuery(e.target);
-
-            // add new highlighting
-            link.addClass('cur');
-
-            // set new page to detail form
-            var frm = jQuery('#acl__detail form')[0];
-            if(link.hasClass('wikilink1')){
-                jQuery('#acl__detail form input[name=ns]').val('');
-                jQuery('#acl__detail form input[name=id]').val(acl.parseatt(link[0].search)['id']);
-            }else if(link.hasClass('idx_dir')){
-                jQuery('#acl__detail form input[name=ns]').val(acl.parseatt(link[0].search)['ns']);
-                jQuery('#acl__detail form input[name=id]').val('');
-            }
-            acl.loadinfo();
+        // set new page to detail form
+        $frm = jQuery('#acl__detail form');
+        if ($link.hasClass('wikilink1')) {
+            $frm.find('input[name=ns]').val('');
+            $frm.find('input[name=id]').val(dw_acl.parseatt($link[0].search).id);
+        } else if ($link.hasClass('idx_dir')) {
+            $frm.find('input[name=ns]').val(dw_acl.parseatt($link[0].search).ns);
+            $frm.find('input[name=id]').val('');
         }
+        dw_acl.loadinfo();
 
-        e.stopPropagation();
-        e.preventDefault();
         return false;
     }
-
 };
 
-jQuery(acl.init);
+jQuery(dw_acl.init);
+
+var acl = {
+    init: DEPRECATED_WRAP(dw_acl.init, dw_acl),
+    userselhandler: DEPRECATED_WRAP(dw_acl.userselhandler, dw_acl),
+    loadinfo: DEPRECATED_WRAP(dw_acl.loadinfo, dw_acl),
+    parseatt: DEPRECATED_WRAP(dw_acl.parseatt, dw_acl),
+    treehandler: DEPRECATED_WRAP(dw_acl.treehandler, dw_acl)
+};

lib/plugins/acl/style.css

@@ -22,6 +22,7 @@ div#acl_manager div#acl__tree ul {
 
 div#acl_manager div#acl__tree li {
     padding-left: 1em;
+    list-style-image: none;
 }
 
 div#acl_manager div#acl__tree ul img {