From 23846a98488bec2aaade6d983b4c0b0db13af80c Mon Sep 17 00:00:00 2001
From: Kate Arzamastseva <pshns@ukr.net>
Date: Sun, 3 Jul 2011 19:00:54 +0300
Subject: ajax mediamanager

---
 inc/media.php                    | 64 ++++++++++++----------------
 inc/template.php                 | 55 +++++++++++++++++-------
 lib/exe/ajax.php                 | 25 ++++++++++-
 lib/scripts/media.js             | 90 +++++++++++++++++++++++++++++++++++++++-
 lib/tpl/default/mediamanager.css | 23 +---------
 5 files changed, 181 insertions(+), 76 deletions(-)

diff --git a/inc/media.php b/inc/media.php
index 34bdec42b..fd917a5a0 100644
--- a/inc/media.php
+++ b/inc/media.php
@@ -379,7 +379,7 @@ function media_upload_finish($fn_tmp, $fn, $id, $imime, $overwrite, $move = 'mov
     io_createNamespace($id, 'media');
 
     if($move($fn_tmp, $fn)) {
-        clearstatcache(true,$fn);
+        @clearstatcache(true,$fn);
         $new = @filemtime($fn);
         // Set the correct permission here.
         // Always chmod media because they may be saved with different permissions than expected from the php umask.
@@ -529,7 +529,7 @@ function media_filelist($ns,$auth=null,$jump='',$fullscreenview=false){
             echo '<div class="nothing">'.$lang['nothingfound'].'</div>'.NL;
         }else foreach($data as $item){
             if (!$fullscreenview) media_printfile($item,$auth,$jump);
-            else if ($fullscreenview == 'thumbs') media_printfile_thumbs($item,$auth,$jump);
+            else media_printfile_thumbs($item,$auth,$jump);
         }
     }
     if (!$fullscreenview) media_searchform($ns);
@@ -544,9 +544,8 @@ function media_filelist($ns,$auth=null,$jump='',$fullscreenview=false){
 function media_tabs_files($selected=false){
     global $lang;
 
-    echo '<div class="mediamanager-tabs" id="id-mediamanager-tabs">';
-    $tab = '<a href="'.media_managerURL(array('tab_files' => 'files')).
-        '" rel=".mediamanager-tab-files"';
+    echo '<div class="mediamanager-tabs" id="mediamanager__tabs_files">';
+    $tab = '<a href="'.media_managerURL(array('tab_files' => 'files')).'"';
     if (!empty($selected) && $selected == 'files') $class = 'files selected';
     else $class = 'files';
     $tab .= ' class="'.$class.'" >'.$lang['mediaselect'].'</a>';
@@ -579,7 +578,7 @@ function media_tabs_files($selected=false){
 function media_tabs_details($image, $selected=false){
     global $lang;
 
-    echo '<div class="mediamanager-tabs" id="id-mediamanager-tabs-detail">';
+    echo '<div class="mediamanager-tabs" id="mediamanager__tabs_details">';
     $tab = '<a href="'.media_managerURL(array('tab_details' => 'view', 'image' => $image)).
         '" rel=".mediamanager-tab-view"';
     if (!empty($selected) && $selected == 'view') $class = 'view selected';
@@ -614,7 +613,7 @@ function media_tab_files_options(){
     global $lang;
 
     echo '<div class="background-container">';
-    echo '<div id="id-mediamanager-tabs-files" style="display: inline;">';
+    echo '<div id="mediamanager__tabs_list" style="display: inline;">';
     echo '<a href="'.media_managerURL(array('view' => 'thumbs')).'"
         rel=".mediamanager-files-thumbnails-tab" class="mediamanager-link-thumbnails">'.
         $lang['media_thumbsview'].'</a>';
@@ -639,24 +638,22 @@ function media_tab_files($ns,$auth=null,$jump='') {
     global $lang;
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
-    echo '<div class="mediamanager-tab-files">';
     media_tab_files_options();
-    echo '<div class="scroll-container">';
 
+    echo '<div class="scroll-container" >';
     $view = $_REQUEST['view'];
     if($auth < AUTH_READ){
         echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'.NL;
     }else{
         if ($view == 'list') {
-            echo '<ul class="mediamanager-file-list mediamanager-list" id="id-mediamanager-file-list">';
+            echo '<ul class="mediamanager-file-list mediamanager-list" id="mediamanager__file_list">';
         } else {
-            echo '<ul class="mediamanager-file-list mediamanager-thumbs" id="id-mediamanager-file-list">';
+            echo '<ul class="mediamanager-file-list mediamanager-thumbs" id="mediamanager__file_list">';
         }
-        media_filelist($ns,$auth,$jump,'thumbs');
+        media_filelist($ns,$auth,$jump,true);
         echo '</ul>';
     }
     echo '</div>';
-    echo '</div>';
 }
 
 /**
@@ -668,7 +665,6 @@ function media_tab_upload($ns,$auth=null,$jump='') {
     global $lang;
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
-    echo '<div class="mediamanager-tab-upload"">';
     echo '<div class="background-container">';
     echo $lang['mediaupload'];
     echo '</div>';
@@ -676,7 +672,6 @@ function media_tab_upload($ns,$auth=null,$jump='') {
     echo '<div class="scroll-container">';
     media_uploadform($ns, $auth, true);
     echo '</div>';
-    echo '</div>';
 }
 
 /**
@@ -691,7 +686,6 @@ function media_tab_search($ns,$auth=null) {
     $query = $_REQUEST['q'];
     if (!$query) $query = '';
 
-    echo '<div class="mediamanager-tab-search">';
     echo '<div class="background-container">';
     echo $lang['media_search'];
     echo'</div>';
@@ -700,10 +694,16 @@ function media_tab_search($ns,$auth=null) {
     media_searchform($ns, $query, true);
 
     if($do == 'searchlist'){
+        $view = $_REQUEST['view'];
+        if ($view == 'list') {
+            echo '<ul class="mediamanager-file-list mediamanager-list" id="mediamanager__file_list">';
+        } else {
+            echo '<ul class="mediamanager-file-list mediamanager-thumbs" id="mediamanager__file_list">';
+        }
         media_searchlist($query,$ns,$auth,true);
+        echo '</ul>';
     }
     echo '</div>';
-    echo '</div>';
 }
 
 /**
@@ -715,7 +715,6 @@ function media_tab_view($image, $ns, $auth=null, $rev=false) {
     global $lang, $conf;
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
-    echo '<div class="mediamanager-tab-detail-view">';
     echo '<div class="background-container">';
     echo $image;
     echo '</div>';
@@ -724,7 +723,6 @@ function media_tab_view($image, $ns, $auth=null, $rev=false) {
     media_preview($image, $auth, $rev);
     media_details($image, $auth, $rev);
     echo '</div>';
-    echo '</div>';
 }
 
 /**
@@ -736,7 +734,6 @@ function media_tab_edit($image, $ns, $auth=null) {
     global $lang;
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
-    echo '<div class="mediamanager-tab-detail-edit">';
     echo '<div class="background-container">';
     echo $lang['media_edit'];
     echo '</div>';
@@ -747,7 +744,6 @@ function media_tab_edit($image, $ns, $auth=null) {
         if ($mime == 'image/jpeg') media_metaform($image,$auth,true);
     }
     echo '</div>';
-    echo '</div>';
 }
 
 /**
@@ -760,7 +756,6 @@ function media_tab_history($image, $ns, $auth=null) {
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
     $do = $_REQUEST['mediado'];
 
-    echo '<div class="mediamanager-tab-detail-history">';
     echo '<div class="background-container">';
     echo $lang['media_history'];
     echo '</div>';
@@ -777,7 +772,6 @@ function media_tab_history($image, $ns, $auth=null) {
         echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'.NL;
     }
     echo '</div>';
-    echo '</div>';
 }
 
 /**
@@ -1006,7 +1000,7 @@ function media_searchlist($query,$ns,$auth=null,$fullscreen=false){
         echo '<div class="nothing">'.$lang['nothingfound'].'</div>'.NL;
     }else foreach($evdata['data'] as $item){
         if (!$fullscreen) media_printfile($item,$item['perm'],'',true);
-        else media_printfile_thumbs($item,$item['perm'],'',true);
+        else media_printfile_thumbs($item,$item['perm']);
     }
 }
 
@@ -1106,7 +1100,7 @@ function media_printfile($item,$auth,$jump,$display_namespace=false){
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
  */
-function media_printfile_thumbs($item,$auth,$jump){
+function media_printfile_thumbs($item,$auth,$jump=false){
     global $lang;
     global $conf;
 
@@ -1217,18 +1211,11 @@ function media_managerURL($params=false, $amp='&') {
     global $conf;
     global $ID;
 
-    $url = $_SERVER['REQUEST_URI'];
-
-    $urlArray = explode('?', $url, 2);
-    $gets = @$urlArray[1];
-    parse_str($gets, $gets);
-
-    if ($gets['edit']) $gets['image'] = $gets['edit'];
-    unset($gets['edit']);
-    unset($gets['sectok']);
-    unset($gets['delete']);
-    unset($gets['rev']);
-    unset($gets['mediado']);
+    $gets = array('do' => 'media');
+    $media_manager_params = array('tab_files', 'tab_details', 'image', 'ns', 'view');
+    foreach ($media_manager_params as $x) {
+        if (isset($_REQUEST[$x])) $gets[$x] = $_REQUEST[$x];
+    }
 
     if ($params) {
         foreach ($params as $k => $v) {
@@ -1407,7 +1394,8 @@ function media_nstree_item($item){
     $ret  = '';
     if (!($_REQUEST['do'] == 'media'))
     $ret .= '<a href="'.DOKU_BASE.'lib/exe/mediamanager.php?ns='.idfilter($item['id']).'" class="idx_dir">';
-    else $ret .= '<a href="'.media_managerURL(array('ns' => idfilter($item['id']))).'" class="idx_dir">';
+    else $ret .= '<a href="'.media_managerURL(array('ns' => idfilter($item['id']), 'tab_files' => 'files'))
+        .'" class="idx_dir">';
     $ret .= $item['label'];
     $ret .= '</a>';
     return $ret;
diff --git a/inc/template.php b/inc/template.php
index cb5004891..c3b705421 100644
--- a/inc/template.php
+++ b/inc/template.php
@@ -1135,7 +1135,7 @@ function tpl_mediaContent($fromajax=false){
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
  */
-function tpl_fileList(){
+function tpl_fileList($fromajax=false){
     global $AUTH;
     global $NS;
     global $JUMPTO;
@@ -1144,10 +1144,23 @@ function tpl_fileList(){
     if (!$opened_tab) $opened_tab = 'files';
     if ($_REQUEST['mediado'] == 'update') $opened_tab = 'upload';
 
-    media_tabs_files($opened_tab);
-    if ($opened_tab == 'files') media_tab_files($NS,$AUTH,$JUMPTO);
-    if ($opened_tab == 'upload') media_tab_upload($NS,$AUTH,$JUMPTO);
-    if ($opened_tab == 'search') media_tab_search($NS,$AUTH);
+    if(!$fromajax) media_tabs_files($opened_tab);
+
+    if ($opened_tab == 'files') {
+        if (!$fromajax) echo '<div class="mediamanager-tab-files" id="mediamanager__files">';
+        media_tab_files($NS,$AUTH,$JUMPTO);
+        if (!$fromajax) echo '</div>';
+
+    } elseif ($opened_tab == 'upload') {
+        if (!$fromajax) echo '<div class="mediamanager-tab-upload" id="mediamanager__files">';
+        media_tab_upload($NS,$AUTH,$JUMPTO);
+        if (!$fromajax) echo '</div>';
+
+    } elseif ($opened_tab == 'search') {
+        if (!$fromajax) echo '<div class="mediamanager-tab-search" id="mediamanager__files">';
+        media_tab_search($NS,$AUTH);
+        if (!$fromajax) echo '</div>';
+    }
 
 }
 
@@ -1159,22 +1172,37 @@ function tpl_fileList(){
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
  */
-function tpl_fileDetails($image, $rev){
+function tpl_fileDetails($image, $rev, $fromajax=false){
     global $AUTH;
     global $NS;
 
     if (!$image || !file_exists(mediaFN($image))) return '';
     if ($rev && !file_exists(mediaFN($image, $rev))) return '';
     if (isset($NS) && getNS($image) != $NS) return '';
+    $do = $_REQUEST['mediado'];
 
     $opened_tab = $_REQUEST['tab_details'];
     if (!$opened_tab) $opened_tab = 'view';
     if ($_REQUEST['edit']) $opened_tab = 'edit';
-    media_tabs_details($image, $opened_tab);
+    if ($do == 'restore') $opened_tab = 'view';
 
-    if ($opened_tab == 'view') media_tab_view($image, $NS, $AUTH, $rev);
-    if ($opened_tab == 'edit') media_tab_edit($image, $NS, $AUTH);
-    if ($opened_tab == 'history') media_tab_history($image,$NS,$AUTH);
+    if(!$fromajax) media_tabs_details($image, $opened_tab);
+
+    if ($opened_tab == 'view') {
+        if (!$fromajax) echo '<div class="mediamanager-tab-detail-view" id="mediamanager__details">';
+        media_tab_view($image, $NS, $AUTH, $rev);
+        if (!$fromajax) echo '</div>';
+
+    } elseif ($opened_tab == 'edit') {
+        if (!$fromajax) echo '<div class="mediamanager-tab-detail-edit" id="mediamanager__details">';
+        media_tab_edit($image, $NS, $AUTH);
+        if (!$fromajax) echo '</div>';
+
+    } elseif ($opened_tab == 'history') {
+        if (!$fromajax) echo '<div class="mediamanager-tab-detail-history" id="mediamanager__details">';
+        media_tab_history($image,$NS,$AUTH);
+        if (!$fromajax) echo '</div>';
+    }
 }
 
 /**
@@ -1186,8 +1214,7 @@ function tpl_fileDetails($image, $rev){
  */
 function tpl_mediaTree($fullscreen = false){
     global $NS;
-    if ($fullscreen) ptln('<div id="media-menu">');
-    else ptln('<div id="media__tree">');
+    ptln('<div id="media__tree">');
     media_nstree($NS);
     ptln('</div>');
 }
@@ -1444,10 +1471,10 @@ function tpl_media() {
     tpl_mediaTree(true);
     echo '</div>';
     echo '</div>';
-    echo '<div id="id-mediamanager-layout-list" class="layout" style="width: 40%;">';
+    echo '<div id="mediamanager__layout_list" class="layout" style="width: 40%;">';
     tpl_fileList();
     echo '</div>';
-    echo '<div id="id-mediamanager-layout-detail" class="layout" style="width: 30%;">';
+    echo '<div id="mediamanager__layout_detail" class="layout" style="width: 30%;">';
     tpl_fileDetails($image, $rev);
     echo '</div>';
     echo '<div class="clearer"></div>';
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;
-- 
cgit v1.2.3