ajax mediamanager

3 files changed, 114 insertions, 24 deletions

diff --git a/lib/exe/ajax.php b/lib/exe/ajax.php
index 1056a05f8..16efd9ac7 100644
--- a/lib/exe/ajax.php
+++ b/lib/exe/ajax.php
@@ -210,7 +210,30 @@ function ajax_medialist(){
     global $NS;
 
     $NS = $_POST['ns'];
-    tpl_mediaContent(true);
+    if ($_POST['do'] == 'media') {
+        tpl_fileList(true);
+    } else {
+        tpl_mediaContent(true);
+    }
+}
+
+/**
+ * Return the content of the right column
+ * (image details) for the Mediamanager
+ *
+ * @author Kate Arzamastseva <pshns@ukr.net>
+ */
+function ajax_mediadetails(){
+    global $conf;
+    global $NS;
+
+    $NS = $_POST['ns'];
+    $image = $_POST['image'];
+    if (isset($_POST['full'])) {
+        tpl_fileDetails($image, false);
+    } else {
+        tpl_fileDetails($image, false, true);
+    }
 }
 
 /**
diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index ebbee5a78..e03d1cf7b 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -328,7 +328,17 @@
 
         jQuery('div.success, div.info, div.error, div.notify').remove();
 
-        content = $('#media__content');
+        if (document.getElementById('media__content')) {
+            content = $('#media__content');
+        } else {
+            content = $('#mediamanager__files');
+            if (link.hasClass('idx_dir')) {
+                change_tab($('.files'), '#mediamanager__tabs_files');
+                $('#mediamanager__layout_detail').empty();
+            } else {
+                change_tab(link, '#mediamanager__tabs_files');
+            }
+        }
         content.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
 
         // fetch the subtree
@@ -345,6 +355,77 @@
 
     };
 
+     /**
+     * Changes selected tab
+     *
+     * @author Kate Arzamastseva <pshns@ukr.net>
+     */
+    change_tab = function (tab, tab_menu_id) {
+        $(tab_menu_id + ' a').each(function (i) {
+            $(this).removeClass('selected');
+        });
+        tab.addClass('selected');
+    };
+
+     /**
+     * Changes view of media files list
+     *
+     * @author Kate Arzamastseva <pshns@ukr.net>
+     */
+    list_view  = function (event) {
+        var link, content;
+        link = $(this);
+
+        event.preventDefault();
+
+        content = $('#mediamanager__file_list');
+        if (link.hasClass('mediamanager-link-thumbnails')) {
+            content.removeClass('mediamanager-list');
+            content.addClass('mediamanager-thumbs');
+        } else if (link.hasClass('mediamanager-link-list')) {
+            content.removeClass('mediamanager-thumbs');
+            content.addClass('mediamanager-list');
+        }
+    };
+
+     /**
+     * Lists the content of the right column (image details) using AJAX
+     *
+     * @author Kate Arzamastseva <pshns@ukr.net>
+     */
+    details = function (event) {
+        var link, content, call, full;
+        link = $(this);
+
+        event.preventDefault();
+
+        jQuery('div.success, div.info, div.error, div.notify').remove();
+
+        full='';
+        if (document.getElementById('mediamanager__details')) {
+            content = $('#mediamanager__details');
+        } else {
+            content = $('#mediamanager__layout_detail');
+            full = '&full=true';
+        }
+
+        if (link.hasClass('name')) {
+            change_tab($('.view'), '#mediamanager__tabs_details');
+        } else {
+            change_tab(link, '#mediamanager__tabs_details');
+        }
+        content.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
+
+        $.post(
+            DOKU_BASE + 'lib/exe/ajax.php',
+            link[0].search.substr(1)+'&call=mediadetails'+full,
+            function (data) {
+                content.html(data);
+            },
+            'html'
+        );
+    };
+
     prepare_content = function (content) {
         // hide syntax example
         content.find('div.example:visible').hide();
@@ -748,5 +829,12 @@
 
         $('#media__tree').delegate('img', 'click', toggle)
             .delegate('a', 'click', list);
+
+        $('#mediamanager__tabs_files').delegate('a', 'click', list);
+
+        $('#mediamanager__files').delegate('#mediamanager__tabs_list a', 'click', list_view)
+            .delegate('#mediamanager__file_list a', 'click', details);
+
+        $('#mediamanager__layout_detail').delegate('#mediamanager__tabs_details a', 'click', details);
     });
 }(jQuery));
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index cceecf7fe..88e00d8fc 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -1,24 +1,3 @@
-/* --- Tree formatting --- */
-
-#media-menu img {
-    float: left;
-    padding: 0.5em 0.3em 0 0;
-}
-
-#media-menu ul {
-    list-style-type: none;
-    list-style-image: none;
-    margin-left: 1.5em;
-}
-
-#media-menu li {
-    clear: left;
-    list-style-type: none;
-    list-style-image: none;
-}
-
-/* -------------- */
-
 .mediamanager {
     width: 100%;
     overflow-y: auto;
@@ -212,7 +191,7 @@ form.meta textarea.edit {
 
 .mediamanager-list li .name,
 .mediamanager-list li .size,
-.mediamanager-list li .filesize
+.mediamanager-list li .filesize,
 .mediamanager-list li .date {
     overflow: hidden;
     float: left;