started jQueryfying media manager

lib/scripts/media.js

@@ -2,6 +2,10 @@
 /*global jQuery, window, DOKU_BASE*/
 "use strict";
 
+// TODO
+// * fix the css to have pointers on the +/- images in the tree when JS is enabled
+// * fix the css to have pointers on a.select when JS is enabled
+
 /**
  * JavaScript functionality for the media management popup
  *
@@ -9,34 +13,56 @@
  * @author Pierre Spring <pierre.spring@caillou.ch>
  */
 (function ($) {
+    var toggle, list, cleanup_content;
+
+    /**
+     * Prefills the wikiname.
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    suggest = function(){
+        var file, name, text;
+
+        file = $(this);
+        name = $('#upload__name');
+        if(!file.size() || !name.size()) return;
+
+        text = file.val();
+        text = text.substr(text.lastIndexOf('/')+1);
+        text = text.substr(text.lastIndexOf('\\')+1);
+        name.val(text);
+    };
+
     /**
      * Open or close a subtree using AJAX
      *
      * @author Andreas Gohr <andi@splitbrain.org>
+     * @author Pierre Spring <pierre.spring@caillou.ch>
      */
     toggle = function (event) {
         var clicky, listitem, sublist, link, ul;
-        
+
+        event.preventDefault(); // TODO: really here?
+
         var clicky = $(this);
         var listitem = clicky.parent();
 
         // if already open, close by removing the sublist
-        var sublist = listitem.find('ul').first();
+        sublist = listitem.find('ul').first();
         if(sublist.size()){
             sublist.remove(); // TODO: really? we could just hide it, right?
             clicky.attr('src', DOKU_BASE + 'lib/images/plus.gif');
-            event.preventDefault(); // TODO: really here?
             return;
         }
 
         // get the enclosed link (is always the first one)
         link = listitem.find('a').first();
-        
+
         //prepare the new ul
         ul = $('<ul/>');
 
         //fixme add classname here
-        
+
         $.post(
             DOKU_BASE + 'lib/exe/ajax.php',
             link.attr('search').substr(1) + '&call=medians',
@@ -46,77 +72,230 @@
             },
             'html'
         );
-        
+
         clicky.attr('src', DOKU_BASE + 'lib/images/minus.gif');
     };
-    
-    $(function () {
-        $('#media__tree').delegate('img', 'click', toggle);
-    });
-}(jQuery));
- 
-var media_manager = {
-    keepopen: false,
-    hide: false,
-    align: false,
-    popup: false,
-    id: false,
-    display: false,
-    link: false,
-    size: false,
-    ext: false,
 
     /**
-     * Attach event handlers to all "folders" below the given element
+     * list the content of a namespace using AJAX
      *
      * @author Andreas Gohr <andi@splitbrain.org>
+     * @author Pierre Spring <pierre.spring@caillou.ch>
      */
-    treeattach: function(obj){
-        if(!obj) return;
+    list = function (event) {
+        var link, content;
+        link = $(this);
 
-        var items = obj.getElementsByTagName('li');
-        for(var i=0; i<items.length; i++){
-            var elem = items[i];
+        event.preventDefault();
 
-            // attach action to make the +/- clickable
-            var clicky = elem.getElementsByTagName('img')[0];
-            clicky.style.cursor = 'pointer';
-            //addEvent(clicky,'click',function(event){ return media_manager.toggle(event,this); });
+        cleanMsgArea();
+        content = $('#media__content');
+        content.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
 
-            // attach action load folder list via AJAX
-            var link = elem.getElementsByTagName('a')[0];
-            link.style.cursor = 'pointer';
-            addEvent(link,'click',function(event){ return media_manager.list(event,this); });
-        }
-    },
+        // fetch the subtree
+        $.post(
+            DOKU_BASE + 'lib/exe/ajax.php',
+            link.attr('search').substr(1)+'&call=medialist',
+            function (data) {
+                content.html(data);
+                cleanup_content(content);
 
-    /**
-     * Attach the image selector action to all links below the given element
-     * also add the action to autofill the "upload as" field
-     *
-     * @author Andreas Gohr <andi@splitbrain.org>
-     */
-    selectorattach: function(obj){
-        if(!obj) return;
 
-        var items = getElementsByClass('select',obj,'a');
-        for(var i=0; i<items.length; i++){
-            var elem = items[i];
-            elem.style.cursor = 'pointer';
-            addEvent(elem,'click',function(event){ return media_manager.select(event,this); });
-        }
+                content = content[0];
+                media_manager.confirmattach(content);
+                media_manager.updatehide();
+                media_manager.initFlashUpload();
+            },
+            'html'
+        );
+
+    };
 
+    cleanup_content = function (content) {
         // hide syntax example
-        items = getElementsByClass('example',obj,'div');
-        for(var i=0; i<items.length; i++){
-            elem = items[i];
-            elem.style.display = 'none';
-        }
+        content.find('div.example:visible').hide();
+    };
 
-        var file = $('upload__file');
-        if(!file) return;
-        addEvent(file,'change',media_manager.suggest);
-    },
+    /**
+         * shows the popup for a image link
+         */
+        select = function(event){
+            var link, id;
+
+            event.preventDefault();
+
+            link = $(this);
+            id = link.attr('name').substr(2);
+
+            media_manager.id = id; /////////////////////////////////////////////
+
+            if(!opener){
+                // if we don't run in popup display example
+                // the id's are a bit wired and $('#ex_wiki_dokuwiki-128.png') will not be found
+                // by Sizzle (the CSS Selector Engine used by jQuery),
+                // hence the document.getElementById() call
+                $(document.getElementById('ex_'+id.replace(/:/g,'_').replace(/^_/,''))).toggle();
+                return;
+            }
+
+            // pierre: continue here
+            link = link[0];
+
+            media_manager.ext = false;
+            var dot = id.lastIndexOf(".");
+            if (dot != -1) {
+                var ext = id.substr(dot,id.length);
+
+                if (ext != '.jpg' && ext != '.jpeg' && ext != '.png' && ext != '.gif' && ext != '.swf') {
+                    media_manager.insert(null);
+                    return false;
+                }
+            } else {
+                media_manager.insert(null);
+                return false;
+            }
+
+            media_manager.popup.style.display = 'inline';
+            media_manager.popup.style.left = event.pageX + 'px';
+            media_manager.popup.style.top = event.pageY + 'px';
+
+            // set all buttons to outset
+            media_manager.outSet('media__linkbtn1');
+            media_manager.outSet('media__linkbtn2');
+            media_manager.outSet('media__linkbtn3');
+            media_manager.outSet('media__linkbtn4');
+
+            media_manager.outSet('media__alignbtn0');
+            media_manager.outSet('media__alignbtn1');
+            media_manager.outSet('media__alignbtn2');
+            media_manager.outSet('media__alignbtn3');
+
+            media_manager.outSet('media__sizebtn1');
+            media_manager.outSet('media__sizebtn2');
+            media_manager.outSet('media__sizebtn3');
+            media_manager.outSet('media__sizebtn4');
+
+
+            if (ext == '.swf') {
+                media_manager.ext = 'swf';
+
+                // disable display buttons for detail and linked image
+                $('media__linkbtn1').style.display = 'none';
+                $('media__linkbtn2').style.display = 'none';
+
+                // set the link button to default
+                if (media_manager.link != false) {
+                    if ( media_manager.link == '2' || media_manager.link == '1')  {
+                        media_manager.inSet('media__linkbtn3');
+                        media_manager.link = '3';
+                        DokuCookie.setValue('link','3');
+                    } else {
+                        media_manager.inSet('media__linkbtn'+media_manager.link);
+                    }
+                } else if (DokuCookie.getValue('link')) {
+                    if ( DokuCookie.getValue('link') == '2' ||  DokuCookie.getValue('link') == '1')  {
+                        // this options are not availible
+                        media_manager.inSet('media__linkbtn3');
+                        media_manager.link = '3';
+                        DokuCookie.setValue('link','3');
+                    } else {
+                        media_manager.inSet('media__linkbtn'+DokuCookie.getValue('link'));
+                        media_manager.link = DokuCookie.getValue('link');
+                    }
+                } else {
+                    // default case
+                    media_manager.link = '3';
+                    media_manager.inSet('media__linkbtn3');
+                    DokuCookie.setValue('link','3');
+                }
+
+                // disable button for original size
+                $('media__sizebtn4').style.display = 'none';
+
+            } else {
+                media_manager.ext = 'img';
+
+                // ensure that the display buttons are there
+                $('media__linkbtn1').style.display = 'inline';
+                $('media__linkbtn2').style.display = 'inline';
+                $('media__sizebtn4').style.display = 'inline';
+
+                // set the link button to default
+                if (DokuCookie.getValue('link')) {
+                    media_manager.link = DokuCookie.getValue('link');
+                }
+                if (media_manager.link == false) {
+                    // default case
+                    media_manager.link = '1';
+                    DokuCookie.setValue('link','1');
+                }
+                media_manager.inSet('media__linkbtn'+media_manager.link);
+            }
+
+            if (media_manager.link == '4') {
+                media_manager.align = false;
+                media_manager.size = false;
+                $('media__align').style.display = 'none';
+                $('media__size').style.display = 'none';
+            } else {
+                $('media__align').style.display = 'block';
+                $('media__size').style.display = 'block';
+
+                // set the align button to default
+                if (media_manager.align != false) {
+                    media_manager.inSet('media__alignbtn'+media_manager.align);
+                } else if (DokuCookie.getValue('align')) {
+                    media_manager.inSet('media__alignbtn'+DokuCookie.getValue('align'));
+                    media_manager.align = DokuCookie.getValue('align');
+                } else {
+                    // default case
+                    media_manager.align = '0';
+                    media_manager.inSet('media__alignbtn0');
+                    DokuCookie.setValue('align','0');
+                }
+
+                // set the size button to default
+                if (DokuCookie.getValue('size')) {
+                    media_manager.size = DokuCookie.getValue('size');
+                }
+                if (media_manager.size == false || (media_manager.size === '4' && ext === '.swf')) {
+                    // default case
+                    media_manager.size = '2';
+                    DokuCookie.setValue('size','2');
+                }
+                media_manager.inSet('media__sizebtn'+media_manager.size);
+
+                $('media__sendbtn').focus();
+            }
+
+           return false;
+        };
+
+
+    $(function () {
+        var content = $('#media__content');
+        cleanup_content(content);
+
+        // add the action to autofill the "upload as" field
+        content.delegate('#upload__file', 'change', suggest)
+            // Attach the image selector action to all links
+            .delegate('a.select', 'click', select)
+
+        $('#media__tree').delegate('img', 'click', toggle)
+            .delegate('a', 'click', list);
+    });
+}(jQuery));
+
+var media_manager = {
+    keepopen: false,
+    hide: false,
+    align: false,
+    popup: false,
+    id: false,
+    display: false,
+    link: false,
+    size: false,
+    ext: false,
 
     /**
      * Attach deletion confirmation dialog to the delete buttons.
@@ -249,154 +428,6 @@ var media_manager = {
         }
     },
 
-    /**
-     * shows the popup for a image link
-     */
-    select: function(event,link){
-        var id = link.name.substr(2);
-
-        media_manager.id = id;
-        if(!opener){
-            // if we don't run in popup display example
-            var ex = $('ex_'+id.replace(/:/g,'_'));
-            if(ex.style.display == ''){
-                ex.style.display = 'none';
-            } else {
-                ex.style.display = '';
-            }
-            return false;
-        }
-
-        media_manager.ext = false;
-        var dot = id.lastIndexOf(".");
-        if (dot != -1) {
-            var ext = id.substr(dot,id.length);
-
-            if (ext != '.jpg' && ext != '.jpeg' && ext != '.png' && ext != '.gif' && ext != '.swf') {
-                media_manager.insert(null);
-                return false;
-            }
-        } else {
-            media_manager.insert(null);
-            return false;
-        }
-
-        media_manager.popup.style.display = 'inline';
-        media_manager.popup.style.left = event.pageX + 'px';
-        media_manager.popup.style.top = event.pageY + 'px';
-
-        // set all buttons to outset
-        media_manager.outSet('media__linkbtn1');
-        media_manager.outSet('media__linkbtn2');
-        media_manager.outSet('media__linkbtn3');
-        media_manager.outSet('media__linkbtn4');
-
-        media_manager.outSet('media__alignbtn0');
-        media_manager.outSet('media__alignbtn1');
-        media_manager.outSet('media__alignbtn2');
-        media_manager.outSet('media__alignbtn3');
-
-        media_manager.outSet('media__sizebtn1');
-        media_manager.outSet('media__sizebtn2');
-        media_manager.outSet('media__sizebtn3');
-        media_manager.outSet('media__sizebtn4');
-
-
-        if (ext == '.swf') {
-            media_manager.ext = 'swf';
-
-            // disable display buttons for detail and linked image
-            $('media__linkbtn1').style.display = 'none';
-            $('media__linkbtn2').style.display = 'none';
-
-            // set the link button to default
-            if (media_manager.link != false) {
-                if ( media_manager.link == '2' || media_manager.link == '1')  {
-                    media_manager.inSet('media__linkbtn3');
-                    media_manager.link = '3';
-                    DokuCookie.setValue('link','3');
-                } else {
-                    media_manager.inSet('media__linkbtn'+media_manager.link);
-                }
-            } else if (DokuCookie.getValue('link')) {
-                if ( DokuCookie.getValue('link') == '2' ||  DokuCookie.getValue('link') == '1')  {
-                    // this options are not availible
-                    media_manager.inSet('media__linkbtn3');
-                    media_manager.link = '3';
-                    DokuCookie.setValue('link','3');
-                } else {
-                    media_manager.inSet('media__linkbtn'+DokuCookie.getValue('link'));
-                    media_manager.link = DokuCookie.getValue('link');
-                }
-            } else {
-                // default case
-                media_manager.link = '3';
-                media_manager.inSet('media__linkbtn3');
-                DokuCookie.setValue('link','3');
-            }
-
-            // disable button for original size
-            $('media__sizebtn4').style.display = 'none';
-
-        } else {
-            media_manager.ext = 'img';
-
-            // ensure that the display buttons are there
-            $('media__linkbtn1').style.display = 'inline';
-            $('media__linkbtn2').style.display = 'inline';
-            $('media__sizebtn4').style.display = 'inline';
-
-            // set the link button to default
-            if (DokuCookie.getValue('link')) {
-                media_manager.link = DokuCookie.getValue('link');
-            }
-            if (media_manager.link == false) {
-                // default case
-                media_manager.link = '1';
-                DokuCookie.setValue('link','1');
-            }
-            media_manager.inSet('media__linkbtn'+media_manager.link);
-        }
-
-        if (media_manager.link == '4') {
-            media_manager.align = false;
-            media_manager.size = false;
-            $('media__align').style.display = 'none';
-            $('media__size').style.display = 'none';
-        } else {
-            $('media__align').style.display = 'block';
-            $('media__size').style.display = 'block';
-
-            // set the align button to default
-            if (media_manager.align != false) {
-                media_manager.inSet('media__alignbtn'+media_manager.align);
-            } else if (DokuCookie.getValue('align')) {
-                media_manager.inSet('media__alignbtn'+DokuCookie.getValue('align'));
-                media_manager.align = DokuCookie.getValue('align');
-            } else {
-                // default case
-                media_manager.align = '0';
-                media_manager.inSet('media__alignbtn0');
-                DokuCookie.setValue('align','0');
-            }
-
-            // set the size button to default
-            if (DokuCookie.getValue('size')) {
-                media_manager.size = DokuCookie.getValue('size');
-            }
-            if (media_manager.size == false || (media_manager.size === '4' && ext === '.swf')) {
-                // default case
-                media_manager.size = '2';
-                DokuCookie.setValue('size','2');
-            }
-            media_manager.inSet('media__sizebtn'+media_manager.size);
-
-            $('media__sendbtn').focus();
-        }
-
-       return false;
-    },
-
     /**
      * build the popup window
      *
@@ -602,51 +633,6 @@ var media_manager = {
         return false;
     },
 
-    /**
-     * list the content of a namespace using AJAX
-     *
-     * @author Andreas Gohr <andi@splitbrain.org>
-     */
-    list: function(event,link){
-        // 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;
-
-        cleanMsgArea();
-
-        var content = $('media__content');
-        content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />';
-
-        ajax.elementObj = content;
-        ajax.afterCompletion = function(){
-            media_manager.selectorattach(content);
-            media_manager.confirmattach(content);
-            media_manager.updatehide();
-            media_manager.initFlashUpload();
-        };
-        ajax.runAJAX(link.search.substr(1)+'&call=medialist');
-        return false;
-    },
-
-    /**
-     * Prefills the wikiname.
-     *
-     * @author Andreas Gohr <andi@splitbrain.org>
-     */
-    suggest: function(){
-        var file = $('upload__file');
-        var name = $('upload__name');
-        if(!file || !name) return;
-
-        var text = file.value;
-        text = text.substr(text.lastIndexOf('/')+1);
-        text = text.substr(text.lastIndexOf('\\')+1);
-        name.value = text;
-    },
-
-
     initFlashUpload: function(){
         if(!hasFlash(8)) return;
         var oform  = $('dw__upload');
@@ -778,7 +764,6 @@ var media_manager = {
 
 addInitEvent(function(){
     //media_manager.treeattach($('media__tree'));
-    media_manager.selectorattach($('media__content'));
     media_manager.confirmattach($('media__content'));
     media_manager.attachoptions($('media__opts'));
     media_manager.initpopup();