Rewrite mediamanager JavaScript

Make it faster, prettier, less wrong, add UI effects, use jQuery UI Dialog,
Abstract tree view stuff away into jQuery.dw_tree

lib/exe/js.php

@@ -50,6 +50,7 @@ function js_out(){
                 DOKU_INC.'lib/scripts/script.js',
                 DOKU_INC.'lib/scripts/tw-sack.js',
                 DOKU_INC.'lib/scripts/qsearch.js',
+                DOKU_INC.'lib/scripts/tree.js',
                 DOKU_INC.'lib/scripts/index.js',
                 DOKU_INC.'lib/scripts/drag.js',
                 DOKU_INC.'lib/scripts/textselection.js',

lib/scripts/behaviour.js

@@ -124,4 +124,22 @@ var dw_behaviour = {
 
 };
 
+jQuery.fn.dw_hide = function(fn) {
+    return this.slideUp('fast', fn);
+};
+
+jQuery.fn.dw_show = function() {
+    return this.slideDown('fast');
+};
+
+jQuery.fn.dw_toggle = function(bool) {
+    return this.each(function() {
+        var $this = jQuery(this);
+        if (typeof bool === 'undefined') {
+            bool = $this.is(':hidden');
+        }
+        $this[bool ? "dw_show" : "dw_hide" ]();
+    });
+};
+
 jQuery(dw_behaviour.init);

lib/scripts/compatibility.js

@@ -29,6 +29,58 @@ var linkwiz = {
     toggle: DEPRECATED_WRAP(dw_linkwiz.toggle, dw_linkwiz)
 };
 
+var media_manager = {
+    // treeattach, selectorattach, confirmattach are munched together into
+    // dw_mediamanager.init
+    attachoptions: DEPRECATED_WRAP(dw_mediamanager.attachoptions, dw_mediamanager),
+    togglekeepopen: function (event, cb) {
+        DEPRECATED('Use dw_mediamanager.toggleOption instead');
+        return dw_mediamanager.toggleOption.call(cb, 'keepopen');
+    },
+    togglehide: function (event, cb) {
+        DEPRECATED('Use dw_mediamanager.toggleOption instead');
+        return dw_mediamanager.toggleOption.call(cb, 'hide');
+    },
+    updatehide: DEPRECATED_WRAP(dw_mediamanager.updatehide, dw_mediamanager),
+    select: function (event, link) {
+        DEPRECATED('Use dw_mediamanager.select instead');
+        return dw_mediamanager.select.call(link, event);
+    },
+    initpopup: DEPRECATED_WRAP(dw_mediamanager.initpopup, dw_mediamanager),
+    insert: DEPRECATED_WRAP(dw_mediamanager.insert, dw_mediamanager),
+    list: function (event, link) {
+        DEPRECATED('Use dw_mediamanager.list instead');
+        return dw_mediamanager.list.call(link, event);
+    },
+    // toggle is handled by dw_tree
+    suggest: DEPRECATED_WRAP(dw_mediamanager.suggest, dw_mediamanager),
+    initFlashUpload: DEPRECATED_WRAP(dw_mediamanager.initFlashUpload, dw_mediamanager),
+    closePopup: function () {
+        DEPRECATED();
+        dw_mediamanager.$popup.dialog('close');
+    },
+    setalign: function (event, cb) {
+        DEPRECATED('Use dw_mediamanager.setOpt instead');
+        return dw_mediamanager.setOpt.call(this, 'align', event);
+    },
+    setlink: function (event, cb) {
+        DEPRECATED('Use dw_mediamanager.setOpt instead');
+        return dw_mediamanager.setOpt.call(this, 'link', event);
+    },
+    setsize: function (event, cb) {
+        DEPRECATED('Use dw_mediamanager.setOpt instead');
+        return dw_mediamanager.setOpt.call(this, 'size', event);
+    },
+    outSet: function (id) {
+        DEPRECATED();
+        return jQuery(id).removeClass('selected');
+    },
+    inSet: function (id) {
+        DEPRECATED();
+        return jQuery(id).addClass('selected');
+    }
+};
+
 initSizeCtl = DEPRECATED_WRAP(dw_editor.initSizeCtl);
 sizeCtl = DEPRECATED_WRAP(dw_editor.sizeCtl);
 toggleWrap = DEPRECATED_WRAP(dw_editor.toggleWrap);

lib/scripts/events.js

@@ -32,9 +32,19 @@ function addInitEvent(func) {
  * @param   mixed - any arguments to be passed to the function
  * @returns functionref
  */
-function bind (fnc) {
-    var args = Array.prototype.slice.call(arguments, 1);
-    return function() {
-        return fnc.apply(this, args);
+function bind(fnc/*, ... */) {
+    var Aps = Array.prototype.slice;
+    // Store passed arguments in this scope.
+    // Since arguments is no Array nor has an own slice method,
+    // we have to apply the slice method from the Array.prototype
+    var static_args = Aps.call(arguments, 1);
+
+    // Return a function evaluating the passed function with the
+    // given args and optional arguments passed on invocation.
+    return function (/* ... */) {
+        // Same here, but we use Array.prototype.slice solely for
+        // converting arguments to an Array.
+        return fnc.apply(this,
+                         static_args.concat(Aps.call(arguments, 0)));
     };
 }

lib/scripts/index.js

 /*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: false, newcap: true, immed: true */
 /*global jQuery, window, DOKU_BASE, DEPRECATED, bind*/
 
-/**
- * Javascript for index view
- *
- * @author Andreas Gohr <andi@splitbrain.org>
- * @author Pierre Spring <pierre.spring@caillou.ch>
- */
-
-var dw_index = {
-
-    /**
-     * Delay in ms before showing the throbber.
-     * Used to skip the throbber for fast AJAX calls.
-     */
-    throbber_delay: 500,
-
-    /**
-     * Initialize tree when the DOM is ready.
-     */
-    init: function () {
-        dw_index.treeattach('#index__tree');
-    },
-
-    treeattach: function (obj) {
-        jQuery(obj).delegate('a.idx_dir', 'click', dw_index.toggle);
-    },
-
-    /**
-     * Open or close a subtree using AJAX
-     * The contents of subtrees are "cached" until 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>
-     * @author Pierre Spring <pierre.spring@caillou.ch>
-     */
-    toggle: function (e, _this) {
-        e.preventDefault();
-
-        var $listitem, $sublist, timeout, $clicky, show_sublist;
-
-        if (_this) {
-            DEPRECATED('Use dw_index.toggle(e) (or dw_index.toggle.call(clicky, e) if you need to override clicky), not dw_index.toggle(e, clicky)');
-        }
-
-        $clicky = jQuery(_this || this);
-        $listitem = $clicky.closest('li');
-        $sublist = $listitem.find('ul').first();
-
-        // if already open, close by removing the sublist
-        if ($listitem.hasClass('open')) {
-            $sublist.slideUp('fast',
-                function () {
-                    $listitem.addClass('closed').removeClass('open');
-                }
-            );
-            return;
-        }
-
-        show_sublist = function (data) {
-            if (!$listitem.hasClass('open') || $sublist.parent().length === 0) {
-                $listitem.append($sublist).addClass('open').removeClass('closed');
-            }
-            $sublist.hide();
-            if (data) {
-                $sublist.html(data);
-            }
-            $sublist.slideDown('fast');
-        };
-
-        // just show if already loaded
-        if ($sublist.length > 0) {
-            show_sublist();
-            return;
-        }
-
-        //prepare the new ul
-        $sublist = jQuery('<ul class="idx"/>');
-
-        timeout = window.setTimeout(
-            bind(show_sublist, '<li><img src="' + DOKU_BASE + 'lib/images/throbber.gif" alt="loading..." title="loading..." /></li>'), dw_index.throbber_delay);
-
+var dw_index = jQuery('#index__tree').dw_tree({deferInit: true,
+    load_data: function  (show_sublist, $clicky) {
         jQuery.post(
             DOKU_BASE + 'lib/exe/ajax.php',
             $clicky[0].search.substr(1) + '&call=index',
-            function (data) {
-                window.clearTimeout(timeout);
-                show_sublist(data);
-            },
-            'html'
+            show_sublist, 'html'
         );
     }
-};
+});
+jQuery(function () {
+    var $tree = jQuery('#index__tree');
+
+    dw_index.$obj = $tree;
 
-jQuery(dw_index.init);
+    dw_index.init();
+});

lib/scripts/subscriptions.js

@@ -21,18 +21,15 @@ jQuery(function () {
     $form.find("input[name='sub_target']")
         .click(
             function () {
-                var $input = jQuery(this);
-                if (!$input.prop('checked')) {
+                var $this = jQuery(this), show_list;
+                if (!$this.prop('checked')) {
                     return;
                 }
 
-                if ($input.val().match(/:$/)) {
-                    $list.parent().slideDown('fast');
-                } else {
-                    $list.parent().slideUp('fast');
-                    if ($list.prop('checked')) {
-                        $digest.prop('checked', 'checked');
-                    }
+                show_list = $this.val().match(/:$/);
+                $list.parent().dw_toggle(show_list);
+                if (!show_list && $list.prop('checked')) {
+                    $digest.prop('checked', 'checked');
                 }
             }
         )

lib/scripts/tree.js

+/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: false, newcap: true, immed: true, sloppy: true */
+/*global jQuery, window, DOKU_BASE, DEPRECATED, bind*/
+
+jQuery.fn.dw_tree = function(overrides) {
+    var dw_tree = {
+
+        /**
+         * Delay in ms before showing the throbber.
+         * Used to skip the throbber for fast AJAX calls.
+         */
+        throbber_delay: 500,
+
+        $obj: this,
+
+        toggle_selector: 'a.idx_dir',
+
+        init: function () {
+            this.$obj.delegate(this.toggle_selector, 'click', this,
+                               this.toggle);
+        },
+
+        /**
+         * Open or close a subtree using AJAX
+         * The contents of subtrees are "cached" until 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>
+         * @author Pierre Spring <pierre.spring@caillou.ch>
+         */
+        toggle: function (e) {
+            var $listitem, $sublist, timeout, $clicky, show_sublist, dw_tree;
+
+            e.preventDefault();
+
+            $clicky = jQuery(this);
+            $listitem = $clicky.closest('li');
+            $sublist = $listitem.find('ul').first();
+            dw_tree = e.data;
+
+            // if already open, close by hiding the sublist
+            if ($listitem.hasClass('open')) {
+                $sublist.dw_hide(function () {
+                    dw_tree.close($clicky);
+                    $listitem.addClass('closed').removeClass('open');
+                });
+                return;
+            }
+
+            show_sublist = function (data) {
+                if (!$listitem.hasClass('open') || $sublist.parent().length === 0) {
+                    $listitem.append($sublist).addClass('open').removeClass('closed');
+                }
+                $sublist.hide();
+                if (data) {
+                    $sublist.html(data);
+                }
+                $sublist.dw_show();
+            };
+
+            // just show if already loaded
+            if ($sublist.length > 0) {
+                show_sublist();
+                return;
+            }
+
+            //prepare the new ul
+            $sublist = jQuery('<ul class="idx"/>');
+
+            timeout = window.setTimeout(
+                bind(show_sublist, '<li><img src="' + DOKU_BASE + 'lib/images/throbber.gif" alt="loading..." title="loading..." /></li>'), dw_tree.throbber_delay);
+
+            dw_tree.load_data(function (data) {
+                                  window.clearTimeout(timeout);
+                                  show_sublist(data);
+                              }, $clicky);
+        },
+
+        close: function ($clicky) {
+        },
+
+        load_data: function (show_data, $clicky) {
+            show_data();
+        }
+    };
+
+    jQuery.extend(dw_tree, overrides);
+
+    if (!overrides.deferInit) {
+        dw_tree.init();
+    }
+
+    return dw_tree;
+};

lib/styles/print.css

@@ -18,7 +18,6 @@ div.notify {
 
 /* modal windows */
 .JSpopup,
-#link__wiz,
-#media__popup {
+#link__wiz {
     display: none;
 }

lib/styles/screen.css

@@ -44,8 +44,7 @@ div.notify {
 
 /* modal windows */
 .JSpopup,
-#link__wiz,
-#media__popup {
+#link__wiz {
     position: absolute;
     background-color: #fff;
     color: #000;
@@ -53,6 +52,16 @@ div.notify {
     overflow: hidden;
 }
 
+/* media manager popup toggle buttons */
+
+#media__popup_content button.button {
+    border-style: outset;
+}
+
+#media__popup_content button.selected {
+    border-style: inset;
+}
+
 
 /* syntax highlighting code */
 .code .br0  { color: #66cc66; }

lib/tpl/default/_mediaoptions.css

 /* --- popup --- */
 
-#media__popup {
-    background-color:__background__;
-    display:none;
-    border: 1px solid __border__;
-    position: absolute;
-    width:280px;
-}
-
-#media__popup h1 {
-    text-align:center;
-    font-weight:normal;
-    background-color: __background_alt__;
-    height: 16px;
-    margin-bottom: 5px;
-    font-size:12px;
-    border-bottom: 0;
-}
-
-#media__popup p {
+#media__popup_content p {
     display:block;
     line-height:14pt;
     margin:0.5em;
@@ -28,28 +10,24 @@
     padding:4px 0;
 }
 
-#media__popup label {
+#media__popup_content label {
     float:left;
     width:9em;
 }
 
-#media__popup .button {
+#media__popup_content .button {
     margin-left:auto;
     margin-right:auto;
 }
 
-#media__popup .btnlbl {
+#media__popup_content .btnlbl {
     text-align:center;
 }
 
-#media__popup .btnlbl input {
+#media__popup_content .btnlbl input {
     margin:0 1em;
 }
 
-#media__closeimg {
-    float:right;
-}
-
 /* --- display options --- */
 
 #media__linkopts label,