From 3df72098bbc205fa4bd4735d52d2626baad93548 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Fri, 19 May 2006 18:50:23 +0200
Subject: new mediamanager

This patch adds a completely rewritten media popup. The following noteworthy
changes were made:

- media manager uses a collapsible namespace tree
- media manager uses AJAX if available
- media manager popup can be kept open when selecting a media file
- only one template is used for the media manager :!: Template
- Editable image metadata is configured in conf/mediameta.php now
- The JS cookie mechanism was enhanced to store key/value pairs
- Language strings can be exported to JS in js.php

darcs-hash:20060519165023-7ad00-4932b4553fc919aa4a8b8187958b823acf4f8cee.gz
---
 lib/exe/ajax.php                 |  36 ++++++++
 lib/exe/js.php                   |  23 +++--
 lib/exe/media.php                | 183 -------------------------------------
 lib/exe/mediamanager.php         |  53 +++++++++++
 lib/images/fileicons/gif.png     | Bin 0 -> 881 bytes
 lib/images/fileicons/jpeg.png    | Bin 0 -> 881 bytes
 lib/images/fileicons/jpg.png     | Bin 0 -> 881 bytes
 lib/images/fileicons/png.png     | Bin 0 -> 881 bytes
 lib/images/fileicons/swf.png     | Bin 0 -> 818 bytes
 lib/images/fileicons/tar.png     | Bin 0 -> 734 bytes
 lib/images/fileicons/txt.png     | Bin 462 -> 489 bytes
 lib/scripts/cookie.js            | 111 +++++++++++++++++++++++
 lib/scripts/edit.js              |   5 +-
 lib/scripts/media.js             | 191 +++++++++++++++++++++++++++++++++++++++
 lib/scripts/script.js            | 130 +++++++++-----------------
 lib/scripts/tw-sack.js           |  28 +++---
 lib/tpl/default/media.css        | 115 +++++++++++++++++++++++
 lib/tpl/default/media.php        |  54 -----------
 lib/tpl/default/mediaedit.php    |  87 ------------------
 lib/tpl/default/mediamanager.php |  41 +++++++++
 lib/tpl/default/mediaref.php     |  50 ----------
 lib/tpl/default/style.ini        |   3 +
 22 files changed, 630 insertions(+), 480 deletions(-)
 delete mode 100644 lib/exe/media.php
 create mode 100644 lib/exe/mediamanager.php
 create mode 100644 lib/images/fileicons/gif.png
 create mode 100644 lib/images/fileicons/jpeg.png
 create mode 100644 lib/images/fileicons/jpg.png
 create mode 100644 lib/images/fileicons/png.png
 create mode 100644 lib/images/fileicons/swf.png
 create mode 100644 lib/images/fileicons/tar.png
 create mode 100644 lib/scripts/cookie.js
 create mode 100644 lib/scripts/media.js
 create mode 100644 lib/tpl/default/media.css
 delete mode 100644 lib/tpl/default/media.php
 delete mode 100644 lib/tpl/default/mediaedit.php
 create mode 100644 lib/tpl/default/mediamanager.php
 delete mode 100644 lib/tpl/default/mediaref.php

(limited to 'lib')

diff --git a/lib/exe/ajax.php b/lib/exe/ajax.php
index 886e9829d..c9b93a4b8 100644
--- a/lib/exe/ajax.php
+++ b/lib/exe/ajax.php
@@ -97,6 +97,8 @@ function ajax_lock(){
 
 /**
  * Delete a draft
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
  */
 function ajax_draftdel(){
   $id = cleanID($_POST['id']);
@@ -109,5 +111,39 @@ function ajax_draftdel(){
   @unlink($cname);
 }
 
+/**
+ * Return subnamespaces for the Mediamanager
+ */
+function ajax_medians(){
+  global $conf;
+  require_once(DOKU_INC.'inc/search.php');
+  require_once(DOKU_INC.'inc/media.php');
+
+  // wanted namespace
+  $ns  = cleanID($_POST['ns']);
+  $dir  = utf8_encodeFN(str_replace(':','/',$ns));
+
+  $lvl = count(explode(':',$ns));
+
+  $data = array();
+  search($data,$conf['mediadir'],'search_index',array(),$dir);
+  foreach($data as $item){
+    $item['level'] = $lvl+1;
+    echo media_nstree_li($item);
+    echo media_nstree_item($item);
+    echo '</div></li>';
+  }
+}
+
+/**
+ * Return subnamespaces for the Mediamanager
+ */
+function ajax_medialist(){
+  global $conf;
+  require_once(DOKU_INC.'inc/media.php');
+
+  media_filelist($_POST['ns']);
+}
+
 //Setup VIM: ex: et ts=2 enc=utf-8 :
 ?>
diff --git a/lib/exe/js.php b/lib/exe/js.php
index 05effd31a..583faa5ad 100644
--- a/lib/exe/js.php
+++ b/lib/exe/js.php
@@ -12,6 +12,7 @@ if(!defined('NL')) define('NL',"\n");
 require_once(DOKU_INC.'inc/init.php');
 require_once(DOKU_INC.'inc/pageutils.php');
 require_once(DOKU_INC.'inc/io.php');
+require_once(DOKU_INC.'inc/JSON.php');
 
 // Main (don't run when UNIT test)
 if(!defined('SIMPLE_TEST')){
@@ -39,17 +40,21 @@ function js_out(){
     // Array of needed files
     $files = array(
                 DOKU_INC.'lib/scripts/events.js',
+                DOKU_INC.'lib/scripts/cookie.js',
                 DOKU_INC.'lib/scripts/script.js',
                 DOKU_INC.'lib/scripts/tw-sack.js',
                 DOKU_INC.'lib/scripts/ajax.js',
                 DOKU_INC.'lib/scripts/domLib.js',
                 DOKU_INC.'lib/scripts/domTT.js',
              );
-    if($edit && $write){
-        $files[] = DOKU_INC.'lib/scripts/edit.js';
-        if($conf['spellchecker']){
-            $files[] = DOKU_INC.'lib/scripts/spellcheck.js';
+    if($edit){
+        if($write){
+            $files[] = DOKU_INC.'lib/scripts/edit.js';
+            if($conf['spellchecker']){
+                $files[] = DOKU_INC.'lib/scripts/spellcheck.js';
+            }
         }
+        $files[] = DOKU_INC.'lib/scripts/media.js';
     }
     $files[] = DOKU_TPLINC.'script.js';
 
@@ -70,11 +75,17 @@ function js_out(){
     // start output buffering and build the script
     ob_start();
 
-    // add some translation strings and global variables
+    // add some global variables
+    print "var DOKU_BASE   = '".DOKU_BASE."';";
+
+    //FIXME: move thes into LANG
     print "var alertText   = '".js_escape($lang['qb_alert'])."';";
     print "var notSavedYet = '".js_escape($lang['notsavedyet'])."';";
     print "var reallyDel   = '".js_escape($lang['del_confirm'])."';";
-    print "var DOKU_BASE   = '".DOKU_BASE."';";
+
+    // load JS specific translations
+    $json = new JSON();
+    echo 'LANG = '.$json->encode($lang['js']).";\n";
 
     // load files
     foreach($files as $file){
diff --git a/lib/exe/media.php b/lib/exe/media.php
deleted file mode 100644
index cc78d6b72..000000000
--- a/lib/exe/media.php
+++ /dev/null
@@ -1,183 +0,0 @@
-<?php
-  if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
-  require_once(DOKU_INC.'inc/init.php');
-  require_once(DOKU_INC.'inc/common.php');
-  require_once(DOKU_INC.'inc/lang/en/lang.php');
-  require_once(DOKU_INC.'inc/lang/'.$conf['lang'].'/lang.php');
-  require_once(DOKU_INC.'inc/html.php');
-  require_once(DOKU_INC.'inc/JpegMeta.php');
-  require_once(DOKU_INC.'inc/search.php');
-  require_once(DOKU_INC.'inc/template.php');
-  require_once(DOKU_INC.'inc/auth.php');
-  //close sesseion
-  session_write_close();
-
-  //get namespace to display (either direct or from deletion order)
-  if($_REQUEST['delete']){
-    $DEL = cleanID($_REQUEST['delete']);
-    $NS  = getNS($DEL);
-  }elseif($_REQUEST['edit']){
-    $IMG = cleanID($_REQUEST['edit']);
-    $SRC = mediaFN($IMG);
-    $NS  = getNS($IMG);
-  }else{
-    $NS = $_REQUEST['ns'];
-    $NS = cleanID($NS);
-  }
-
-  //check upload permissions
-  $AUTH = auth_quickaclcheck("$NS:*");
-  if($AUTH >= AUTH_UPLOAD){
-    $UPLOADOK = true;
-    //create the given namespace (just for beautification)
-    $mdir = $conf['mediadir'].'/'.utf8_encodeFN(str_replace(':','/',$NS));
-    io_makeFileDir("$mdir/xxx");
-  }else{
-    $UPLOADOK = false;
-  }
-
-  //handle deletion
-  $mediareferences = array();
-  if($DEL && $AUTH >= AUTH_DELETE){
-    if($conf['refcheck']){
-      search($mediareferences,$conf['datadir'],'search_reference',array('query' => $DEL));
-    }
-    if(!count($mediareferences)){
-      media_delete($DEL);
-    }elseif(!$conf['refshow']){
-      msg(str_replace('%s',noNS($DEL),$lang['mediainuse']),0);
-    }
-  }
-
-  //handle metadatasaving
-  if($UPLOADOK && $SRC && $_REQUEST['save']){
-    media_metasave($SRC,$_REQUEST['meta']);
-  }
-
-  //handle upload
-  if($_FILES['upload']['tmp_name'] && $UPLOADOK){
-    media_upload($NS,$AUTH);
-  }
-
-  //start output and load template
-  header('Content-Type: text/html; charset=utf-8');
-  if($conf['refshow'] && count($mediareferences)){
-    include(template('mediaref.php'));
-  }elseif($IMG){
-    include(template('mediaedit.php'));
-  }else{
-    include(template('media.php'));
-  }
-
-/**********************************************/
-
-/**
- * Deletes mediafiles - Auth is not handled here!
- *
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-function media_delete($delid){
-  global $lang;
-
-  $file = mediaFN($delid);
-  if(@unlink($file)){
-    msg(str_replace('%s',noNS($delid),$lang['deletesucc']),1);
-    io_sweepNS($delid,'mediadir');
-    return true;
-  }
-  //something went wrong
-  msg(str_replace('%s',$file,$lang['deletefail']),-1);
-  return false;
-}
-
-/**
- * Handles Mediafile uploads
- *
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-function media_upload($NS,$AUTH){
-  require_once(DOKU_INC.'inc/confutils.php');
-  global $lang;
-  global $conf;
-
-  // get file
-  $id   = $_POST['id'];
-  $file = $_FILES['upload'];
-  // get id
-  if(empty($id)) $id = $file['name'];
-  $id   = cleanID($NS.':'.$id);
-  // get filename
-  $fn   = mediaFN($id);
-
-  // get filetype regexp
-  $types = array_keys(getMimeTypes());
-  $types = array_map(create_function('$q','return preg_quote($q,"/");'),$types);
-  $regex = join('|',$types);
-
-  // because a temp file was created already
-  if(preg_match('/\.('.$regex.')$/i',$fn)){
-    //check for overwrite
-    if(@file_exists($fn) && (!$_POST['ow'] || $AUTH < AUTH_DELETE)){
-      msg($lang['uploadexist'],0);
-      return false;
-    }
-    // prepare directory
-    io_makeFileDir($fn);
-    if(move_uploaded_file($file['tmp_name'], $fn)) {
-      // set the correct permission here
-      if($conf['fperm']) chmod($fn, $conf['fperm']);
-      msg($lang['uploadsucc'],1);
-      return true;
-    }else{
-      msg($lang['uploadfail'],-1);
-    }
-  }else{
-    msg($lang['uploadwrong'],-1);
-  }
-  return false;
-}
-
-/**
- * Userfunction for html_buildlist
- *
- * Prints available media namespaces
- *
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-function media_html_list_namespaces($item){
-  $ret  = '';
-  $ret .= '<a href="'.DOKU_BASE.'lib/exe/media.php?ns='.idfilter($item['id']).'" class="idx_dir">';
-  $pos = strrpos($item['id'], ':');
-  $ret .= substr($item['id'], $pos > 0 ? $pos + 1 : 0);
-  $ret .= '</a>';
-  return $ret;
-}
-
-/**
- * Saves image meta data
- *
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-function media_metasave($src,$data){
-	global $lang;
-
-  $meta = new JpegMeta($src);
-  $meta->_parseAll();
-
-	foreach($data as $key => $val){
-		$val=trim($val);
-		if(empty($val)){
-			$meta->deleteField($key);
-		}else{
-			$meta->setField($key,$val);
-		}
-	}
-
-	if($meta->save()){
-		msg($lang['metasaveok'],1);
-	}else{
-		msg($lang['metasaveerr'],-1);
-	}
-}
-
-?>
diff --git a/lib/exe/mediamanager.php b/lib/exe/mediamanager.php
new file mode 100644
index 000000000..8b645e434
--- /dev/null
+++ b/lib/exe/mediamanager.php
@@ -0,0 +1,53 @@
+<?
+    if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
+    define('DOKU_MEDIAMANAGER',1);
+    require_once(DOKU_INC.'inc/init.php');
+    require_once(DOKU_INC.'inc/lang/en/lang.php');
+    require_once(DOKU_INC.'inc/lang/'.$conf['lang'].'/lang.php');
+    require_once(DOKU_INC.'inc/media.php');
+    require_once(DOKU_INC.'inc/common.php');
+    require_once(DOKU_INC.'inc/search.php');
+    require_once(DOKU_INC.'inc/template.php');
+    require_once(DOKU_INC.'inc/auth.php');
+    session_write_close();  //close session
+
+
+    // get namespace to display (either direct or from deletion order)
+    if($_REQUEST['delete']){
+        $DEL = cleanID($_REQUEST['delete']);
+        $NS  = getNS($DEL);
+    }elseif($_REQUEST['edit']){
+        $IMG = cleanID($_REQUEST['edit']);
+        $NS  = getNS($IMG);
+    }elseif($_REQUEST['img']){
+        $IMG = cleanID($_REQUEST['img']);
+        $NS  = getNS($IMG);
+    }else{
+        $NS = $_REQUEST['ns'];
+        $NS = cleanID($NS);
+    }
+
+    // check auth
+    $AUTH = auth_quickaclcheck("$NS:*");
+
+    // create the given namespace (just for beautification)
+    if($AUTH >= AUTH_UPLOAD) io_makeFileDir(mediaFN("$NS:xxx"));
+
+    // handle upload
+    if($_FILES['upload']['tmp_name']){
+        $JUMPTO = media_upload($NS,$AUTH);
+    }
+
+    // handle meta saving
+    if($IMG && $_REQUEST['do']['save']){
+        $JUMPTO = media_metasave($IMG,$AUTH,$_REQUEST['meta']);
+    }
+
+    // handle deletion
+    if($DEL) {
+        $INUSE = media_delete($DEL,$AUTH);
+    }
+
+    // finished - start output
+    header('Content-Type: text/html; charset=utf-8');
+    include(template('mediamanager.php'));
diff --git a/lib/images/fileicons/gif.png b/lib/images/fileicons/gif.png
new file mode 100644
index 000000000..3c32f3016
Binary files /dev/null and b/lib/images/fileicons/gif.png differ
diff --git a/lib/images/fileicons/jpeg.png b/lib/images/fileicons/jpeg.png
new file mode 100644
index 000000000..3c32f3016
Binary files /dev/null and b/lib/images/fileicons/jpeg.png differ
diff --git a/lib/images/fileicons/jpg.png b/lib/images/fileicons/jpg.png
new file mode 100644
index 000000000..3c32f3016
Binary files /dev/null and b/lib/images/fileicons/jpg.png differ
diff --git a/lib/images/fileicons/png.png b/lib/images/fileicons/png.png
new file mode 100644
index 000000000..3c32f3016
Binary files /dev/null and b/lib/images/fileicons/png.png differ
diff --git a/lib/images/fileicons/swf.png b/lib/images/fileicons/swf.png
new file mode 100644
index 000000000..03bc8ab48
Binary files /dev/null and b/lib/images/fileicons/swf.png differ
diff --git a/lib/images/fileicons/tar.png b/lib/images/fileicons/tar.png
new file mode 100644
index 000000000..dfa8b586e
Binary files /dev/null and b/lib/images/fileicons/tar.png differ
diff --git a/lib/images/fileicons/txt.png b/lib/images/fileicons/txt.png
index 2bd690434..758950fd2 100644
Binary files a/lib/images/fileicons/txt.png and b/lib/images/fileicons/txt.png differ
diff --git a/lib/scripts/cookie.js b/lib/scripts/cookie.js
new file mode 100644
index 000000000..c236eeb79
--- /dev/null
+++ b/lib/scripts/cookie.js
@@ -0,0 +1,111 @@
+/**
+ * Handles the cookie used by several JavaScript functions
+ *
+ * Only a single cookie is written and read. You may only save
+ * sime name-value pairs - no complex types!
+ *
+ * You should only use the getValue and setValue methods
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+DokuCookie = {
+    data: Array(),
+    name: 'DOKU_PREFS',
+
+    /**
+     * Save a value to the cookie
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    setValue: function(key,val){
+        DokuCookie.init();
+        DokuCookie.data[key] = val;
+
+        // prepare expire date
+        var now = new Date();
+        DokuCookie.fixDate(now);
+        now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000); //expire in a year
+
+        //save the whole data array
+        var text = '';
+        for(var key in DokuCookie.data){
+            text += '#'+escape(key)+'#'+DokuCookie.data[key];
+        }
+        DokuCookie.setCookie(DokuCookie.name,text.substr(1),now,DOKU_BASE);
+    },
+
+    /**
+     * Get a Value from the Cookie
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    getValue: function(key){
+        DokuCookie.init();
+        return DokuCookie.data[key];
+    },
+
+    /**
+     * Loads the current set cookie
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    init: function(){
+        if(DokuCookie.data.length) return;
+        var text  = DokuCookie.getCookie(DokuCookie.name);
+        if(text){
+            var parts = text.split('#');
+            for(var i=0; i<parts.length; i+=2){
+                DokuCookie.data[unescape(parts[i])] = unescape(parts[i+1]);
+            }
+        }
+    },
+
+    /**
+     * This sets a cookie by JavaScript
+     *
+     * @link http://www.webreference.com/js/column8/functions.html
+     */
+    setCookie: function(name, value, expires, path, domain, secure) {
+        var curCookie = name + "=" + escape(value) +
+            ((expires) ? "; expires=" + expires.toGMTString() : "") +
+            ((path) ? "; path=" + path : "") +
+            ((domain) ? "; domain=" + domain : "") +
+            ((secure) ? "; secure" : "");
+        document.cookie = curCookie;
+    },
+
+    /**
+     * This reads a cookie by JavaScript
+     *
+     * @link http://www.webreference.com/js/column8/functions.html
+     */
+    getCookie: function(name) {
+        var dc = document.cookie;
+        var prefix = name + "=";
+        var begin = dc.indexOf("; " + prefix);
+        if (begin == -1) {
+            begin = dc.indexOf(prefix);
+            if (begin !== 0){ return null; }
+        } else {
+            begin += 2;
+        }
+        var end = document.cookie.indexOf(";", begin);
+        if (end == -1){
+            end = dc.length;
+        }
+        return unescape(dc.substring(begin + prefix.length, end));
+    },
+
+    /**
+     * This is needed for the cookie functions
+     *
+     * @link http://www.webreference.com/js/column8/functions.html
+     */
+    fixDate: function(date) {
+        var base = new Date(0);
+        var skew = base.getTime();
+        if (skew > 0){
+            date.setTime(date.getTime() - skew);
+        }
+    }
+};
diff --git a/lib/scripts/edit.js b/lib/scripts/edit.js
index a8cf33594..48464017e 100644
--- a/lib/scripts/edit.js
+++ b/lib/scripts/edit.js
@@ -125,8 +125,9 @@ function showPicker(pickerid,btn){
  * @author Andreas Gohr <andi@splitbrain.org>
  */
 function initToolbar(tbid,edid,tb){
-    if(!document.getElementById){ return; }
-    var toolbar = document.getElementById(tbid);
+    var toolbar = $(tbid);
+    if(!toolbar) return;
+
     var cnt = tb.length;
     for(var i=0; i<cnt; i++){
         // create new button
diff --git a/lib/scripts/media.js b/lib/scripts/media.js
new file mode 100644
index 000000000..f7c709907
--- /dev/null
+++ b/lib/scripts/media.js
@@ -0,0 +1,191 @@
+/**
+ * JavaScript functionalitiy for the media management popup
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+media = {
+    keepopen: false,
+
+    /**
+     * Attach event handlers to all "folders" below the given element
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    treeattach: function(obj){
+        if(!obj) return;
+
+        var items = obj.getElementsByTagName('li');
+        for(var i=0; i<items.length; i++){
+            var elem = items[i];
+
+            // attach action to make the +/- clickable
+            var clicky = elem.getElementsByTagName('img')[0];
+            clicky.style.cursor = 'pointer';
+            addEvent(clicky,'click',function(event){ return media.toggle(event,this); });
+
+            // attach action load folder list via AJAX
+            var link = elem.getElementsByTagName('a')[0];
+            link.style.cursor = 'pointer';
+            addEvent(link,'click',function(event){ return media.list(event,this); });
+        }
+    },
+
+    /**
+     * 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.select(event,this); });
+        }
+
+        var file = $('upload__file');
+        if(!file) return;
+        addEvent(file,'change',media.suggest);
+    },
+
+    /**
+     * Creates a checkbox for keeping the popup on selection
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    attachkeepopen: function(obj){
+        if(!obj) return;
+
+        var cbox  = document.createElement('input');
+        cbox.type = 'checkbox';
+        cbox.id   = 'media__keepopen';
+        if(DokuCookie.getValue('keepopen')){
+            cbox.checked = true;
+        }
+        addEvent(cbox,'change',function(event){ return media.togglekeepopen(event,this); });
+
+        var clbl  = document.createElement('label');
+        clbl.htmlFor   = 'media__keepopen';
+        clbl.innerHTML = LANG['keepopen'];
+
+        obj.appendChild(cbox);
+        obj.appendChild(clbl);
+    },
+
+    /**
+     * Toggles the keep open state
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    togglekeepopen: function(event,cb){
+        if(cb.checked){
+            DokuCookie.setValue('keepopen',1);
+            media.keepopen = true;
+        }else{
+            DokuCookie.setValue('keepopen','');
+            media.keepopen = false;
+        }
+    },
+
+    /**
+     * Insert the clicked image into the opener's textarea
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    select: function(event,link){
+        var id = link.name.substr(2);
+
+        if(!opener){
+            alert(LANG['idtouse']+"\n:"+id);
+            return false;
+        }
+        opener.insertTags('wiki__text','{{'+id+'|','}}','');
+
+        if(!media.keepopen) window.close();
+        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.selectorattach(content); };
+        ajax.runAJAX(link.search.substr(1)+'&call=medialist');
+        return false;
+    },
+
+
+    /**
+     * Open or close a subtree using AJAX
+     *
+     * @author Andreas Gohr <andi@splitbrain.org>
+     */
+    toggle: function(event,clicky){
+        var listitem = clicky.parentNode;
+
+        // if already open, close by removing the sublist
+        var sublists = listitem.getElementsByTagName('ul');
+        if(sublists.length){
+            listitem.removeChild(sublists[0]);
+            clicky.src = DOKU_BASE+'lib/images/plus.gif';
+            return false;
+        }
+
+        // get the enclosed link (is always the first one)
+        var link = listitem.getElementsByTagName('a')[0];
+
+        // 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;
+
+        //prepare the new ul
+        var ul = document.createElement('ul');
+        //fixme add classname here
+        listitem.appendChild(ul);
+        ajax.elementObj = ul;
+        ajax.afterCompletion = function(){ media.treeattach(ul); };
+        ajax.runAJAX(link.search.substr(1)+'&call=medians');
+        clicky.src = DOKU_BASE+'lib/images/minus.gif';
+        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;
+    }
+
+}
+
+addInitEvent(function(){media.treeattach($('media__tree'));});
+addInitEvent(function(){media.selectorattach($('media__content'));});
+addInitEvent(function(){media.attachkeepopen($('media__opts'));});
diff --git a/lib/scripts/script.js b/lib/scripts/script.js
index bd7af48da..df12a29fb 100644
--- a/lib/scripts/script.js
+++ b/lib/scripts/script.js
@@ -77,6 +77,30 @@ function isset(varname){
   return(typeof(window[varname])!='undefined');
 }
 
+/**
+ * Select elements by their class name
+ *
+ * @author Dustin Diaz <dustin [at] dustindiaz [dot] com>
+ * @link   http://www.dustindiaz.com/getelementsbyclass/
+ */
+function getElementsByClass(searchClass,node,tag) {
+    var classElements = new Array();
+    if ( node == null )
+        node = document;
+    if ( tag == null )
+        tag = '*';
+    var els = node.getElementsByTagName(tag);
+    var elsLen = els.length;
+    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
+    for (i = 0, j = 0; i < elsLen; i++) {
+        if ( pattern.test(els[i].className) ) {
+            classElements[j] = els[i];
+            j++;
+        }
+    }
+    return classElements;
+}
+
 /**
  * Get the X offset of the top left corner of the given object
  *
@@ -186,31 +210,6 @@ function hideLoadBar(id){
   if(obj) obj.style.display="none";
 }
 
-/*
- * Insert the selected filename and close the window
- *
- * @see http://www.alexking.org/index.php?content=software/javascript/content.php
- */
-function mediaSelect(file){
-  opener.insertTags('wiki__text','{{'+file+'|','}}','');
-  window.close();
-}
-
-/**
- * For the upload Dialog. Prefills the wikiname.
- */
-function suggestWikiname(){
-  var form = $('dw__upload');
-  if(!form) return;
-
-  var file = form.elements.upload.value;
-
-  file = file.substr(file.lastIndexOf('/')+1);
-  file = file.substr(file.lastIndexOf('\\')+1);
-
-  form.elements.id.value = file;
-}
-
 /**
  * Adds the toggle switch to the TOC
  */
@@ -254,55 +253,6 @@ function toggleToc() {
   }
 }
 
-/*
- * This sets a cookie by JavaScript
- *
- * @see http://www.webreference.com/js/column8/functions.html
- */
-function setCookie(name, value, expires, path, domain, secure) {
-  var curCookie = name + "=" + escape(value) +
-      ((expires) ? "; expires=" + expires.toGMTString() : "") +
-      ((path) ? "; path=" + path : "") +
-      ((domain) ? "; domain=" + domain : "") +
-      ((secure) ? "; secure" : "");
-  document.cookie = curCookie;
-}
-
-/*
- * This reads a cookie by JavaScript
- *
- * @see http://www.webreference.com/js/column8/functions.html
- */
-function getCookie(name) {
-  var dc = document.cookie;
-  var prefix = name + "=";
-  var begin = dc.indexOf("; " + prefix);
-  if (begin == -1) {
-    begin = dc.indexOf(prefix);
-    if (begin !== 0){ return null; }
-  } else {
-    begin += 2;
-  }
-  var end = document.cookie.indexOf(";", begin);
-  if (end == -1){
-    end = dc.length;
-  }
-  return unescape(dc.substring(begin + prefix.length, end));
-}
-
-/*
- * This is needed for the cookie functions
- *
- * @see http://www.webreference.com/js/column8/functions.html
- */
-function fixDate(date) {
-  var base = new Date(0);
-  var skew = base.getTime();
-  if (skew > 0){
-    date.setTime(date.getTime() - skew);
-  }
-}
-
 /*
  * This enables/disables checkboxes for acl-administration
  *
@@ -374,24 +324,25 @@ function fnt(id, e, evt) {
  * Add the edit window size controls
  */
 function initSizeCtl(ctlid,edid){
-        if(!document.getElementById){ return; }
+    if(!document.getElementById){ return; }
 
     var ctl      = $(ctlid);
     var textarea = $(edid);
+    if(!ctl || !textarea) return;
 
-    var hgt = getCookie('DokuWikisizeCtl');
-    if(hgt === null || hgt === ''){
-      textarea.style.height = '300px';
-    }else{
+    var hgt = DokuCookie.getValue('sizeCtl');
+    if(hgt){
       textarea.style.height = hgt;
+    }else{
+      textarea.style.height = '300px';
     }
 
     var l = document.createElement('img');
     var s = document.createElement('img');
     l.src = DOKU_BASE+'lib/images/larger.gif';
     s.src = DOKU_BASE+'lib/images/smaller.gif';
-        addEvent(l,'click',function(){sizeCtl(edid,100);});
-        addEvent(s,'click',function(){sizeCtl(edid,-100);});
+    addEvent(l,'click',function(){sizeCtl(edid,100);});
+    addEvent(s,'click',function(){sizeCtl(edid,-100);});
     ctl.appendChild(l);
     ctl.appendChild(s);
 }
@@ -405,10 +356,7 @@ function sizeCtl(edid,val){
   height += val;
   textarea.style.height = height+'px';
 
-  var now = new Date();
-  fixDate(now);
-  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000); //expire in a year
-  setCookie('DokuWikisizeCtl',textarea.style.height,now);
+  DokuCookie.setValue('sizeCtl',textarea.style.height);
 }
 
 /**
@@ -432,3 +380,15 @@ function scrollToMarker(){
     var obj = $('scroll__here');
     if(obj) obj.scrollIntoView();
 }
+
+/**
+ * Remove messages
+ */
+function cleanMsgArea(){
+    var elems = getElementsByClass('(success|info|error)',document,'div');
+    if(elems){
+        for(var i=0; i<elems.length; i++){
+            elems[i].style.display = 'none';
+        }
+    }
+}
diff --git a/lib/scripts/tw-sack.js b/lib/scripts/tw-sack.js
index 0c7e81bf1..cfcbe0ea9 100644
--- a/lib/scripts/tw-sack.js
+++ b/lib/scripts/tw-sack.js
@@ -15,6 +15,7 @@ function sack(file){
   this.onLoaded = function() { };
   this.onInteractive = function() { };
   this.onCompletion = function() { };
+  this.afterCompletion = function() { };
 
   this.createAJAX = function() {
     try {
@@ -30,10 +31,10 @@ function sack(file){
       this.xmlhttp = new XMLHttpRequest();
     }
     if (!this.xmlhttp){
-      this.failed = true; 
+      this.failed = true;
     }
   };
-  
+
   this.setVar = function(name, value){
     if (this.URLString.length < 3){
       this.URLString = name + "=" + value;
@@ -41,12 +42,12 @@ function sack(file){
       this.URLString += "&" + name + "=" + value;
     }
   };
-  
+
   this.encVar = function(name, value){
     var varString = encodeURIComponent(name) + "=" + encodeURIComponent(value);
   return varString;
   };
-  
+
   this.encodeURLString = function(string){
     varArray = string.split('&');
     for (i = 0; i < varArray.length; i++){
@@ -58,25 +59,25 @@ function sack(file){
     }
   return varArray.join('&');
   };
-  
+
   this.runResponse = function(){
     eval(this.response);
   };
-  
+
   this.runAJAX = function(urlstring){
     this.responseStatus = new Array(2);
-    if(this.failed && this.AjaxFailedAlert){ 
-      alert(this.AjaxFailedAlert); 
+    if(this.failed && this.AjaxFailedAlert){
+      alert(this.AjaxFailedAlert);
     } else {
-      if (urlstring){ 
+      if (urlstring){
         if (this.URLString.length){
-          this.URLString = this.URLString + "&" + urlstring; 
+          this.URLString = this.URLString + "&" + urlstring;
         } else {
-          this.URLString = urlstring; 
+          this.URLString = urlstring;
         }
       }
       if (this.encodeURIString){
-        var timeval = new Date().getTime(); 
+        var timeval = new Date().getTime();
         this.URLString = this.encodeURLString(this.URLString);
         this.setVar("rndval", timeval);
       }
@@ -93,7 +94,7 @@ function sack(file){
           try {
              this.xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
           } catch (e) {}
-        } 
+        }
 
         this.xmlhttp.onreadystatechange = function() {
           switch (self.xmlhttp.readyState){
@@ -122,6 +123,7 @@ function sack(file){
                   self.elementObj.innerHTML = self.response;
                 }
               }
+              self.afterCompletion();
               self.URLString = "";
             break;
           }
diff --git a/lib/tpl/default/media.css b/lib/tpl/default/media.css
new file mode 100644
index 000000000..96aac41ce
--- /dev/null
+++ b/lib/tpl/default/media.css
@@ -0,0 +1,115 @@
+/**
+ * The CSS in here cotrols the appearance of the media manager
+ */
+
+#media__left {
+    width: 30%;
+    float: left;
+    border-right: solid 1px __dark__;
+}
+
+#media__right {
+    width: 68%;
+    float: left;
+    border-left: solid 1px __dark__;
+    margin-left: -1px;
+}
+
+#media__tree img {
+    float:left;
+    padding: 0.5em 0.3em 0 0;
+}
+
+#media__tree ul {
+    list-style-type: none;
+    list-style-image: none;
+}
+
+#media__tree li {
+    clear: left;
+    list-style-type: none;
+    list-style-image: none;
+}
+
+/* --- file list --- */
+
+#media__content img.load {
+    margin: 1em auto;
+}
+
+#media__content #scroll__here {
+    border: 1px dashed __dark__;
+}
+
+#media__content .odd {
+    background-color: __lighter__;
+    padding: 0.4em;
+}
+
+#media__content .even {
+    padding: 0.4em;
+}
+
+#media__content a.mediafile {
+    margin-right: 1.5em;
+    font-weight: bold;
+}
+
+#media__content div.detail {
+    padding: 0.3em 0 0.3em 2em;
+}
+
+#media__content div.detail div.thumb {
+    float: left;
+    width: 130px;
+    text-align: center;
+    margin-right: 0.4em;
+}
+
+
+#media__content img.btn {
+    vertical-align: text-bottom;
+}
+
+/* --- upload form --- */
+
+#media__content form.upload {
+    display: block;
+    border-bottom: solid 1px __dark__;
+    padding: 0 0 1em 2em;
+}
+
+/* --- meta edit form --- */
+
+#media__content form.meta {
+    display: block;
+    padding: 0 0 1em 0;
+}
+
+#media__content form.meta label {
+    display: block;
+    width: 20%;
+    float: left;
+    text-align: right;
+    font-weight: bold;
+    padding-right: 1em;
+}
+
+#media__content form.meta .edit {
+    float: left;
+    width: 75%;
+}
+
+#media__content form.meta textarea.edit {
+    height: 6em;
+}
+
+#media__content form.meta div.metafield {
+    clear: left;
+}
+
+#media__content form.meta div.buttons {
+    clear: left;
+    margin-left: 20%;
+    padding-left: 1em;
+}
diff --git a/lib/tpl/default/media.php b/lib/tpl/default/media.php
deleted file mode 100644
index c2c632e46..000000000
--- a/lib/tpl/default/media.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<?php
-/**
- * DokuWiki Default Template
- *
- * This is the template for the media selection popup.
- *
- * You should leave the doctype at the very top - It should
- * always be the very first line of a document.
- *
- * @link   http://wiki.splitbrain.org/wiki:tpl:templates
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-?>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>" lang="<?php echo $conf['lang']?>" dir="ltr">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title><?php echo hsc($lang['mediaselect'])?> [<?php echo hsc($conf['title'])?>]</title>
-
-  <?php tpl_metaheaders()?>
-
-  <link rel="shortcut icon" href="<?php echo DOKU_TPL?>images/favicon.ico" />
-
-</head>
-
-<body>
-<div class="dokuwiki">
-  <?php html_msgarea()?>
-
-  <h1><?php echo hsc($lang['mediaselect'])?> <code><?php echo hsc($NS)?></code></h1>
-
-  <div class="mediaselect">
-
-    <div class="mediaselect-left">
-      <strong><a href="<?php echo DOKU_BASE?>lib/exe/media.php?ns="><?php echo hsc($lang['namespaces'])?></a></strong>
-
-      <?php tpl_medianamespaces()?>
-    </div>
-
-    <div class="mediaselect-right">
-      <?php tpl_mediafilelist()?>
-
-      <div class="uploadform">
-      <?php tpl_mediauploadform()?>
-      </div>
-    </div>
-
-  </div>
-
-</div>
-</body>
-</html>
-
diff --git a/lib/tpl/default/mediaedit.php b/lib/tpl/default/mediaedit.php
deleted file mode 100644
index 79175e009..000000000
--- a/lib/tpl/default/mediaedit.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<?php
-/**
- * DokuWiki Default Template
- *
- * This is the template for editing image meta data.
- * It is displayed in the media popup.
- *
- * You should leave the doctype at the very top - It should
- * always be the very first line of a document.
- *
- * @link   http://wiki.splitbrain.org/wiki:tpl:templates
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-?>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>" lang="<?php echo $conf['lang']?>" dir="ltr">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title><?php echo hsc($lang['mediaselect'])?> [<?php echo hsc($conf['title'])?>]</title>
-
-  <?php tpl_metaheaders()?>
-
-  <link rel="shortcut icon" href="<?php echo DOKU_TPL?>images/favicon.ico" />
-</head>
-
-<body>
-<div class="dokuwiki">
-  <?php html_msgarea()?>
-
-  <h1><?php echo hsc($lang['metaedit'])?> <code><?php echo hsc(noNS($IMG))?></code></h1>
-
-  <div class="mediaedit">
-    <?php/* everything in meta array is tried to save and read */?>
-
-    <div class="data">
-      <form action="<?php echo DOKU_BASE?>lib/exe/media.php" accept-charset="utf-8" method="post">
-        <input type="hidden" name="edit" value="<?php echo hsc($IMG)?>" />
-        <input type="hidden" name="save" value="1" />
-
-        <label class="block" for="img__title"><?php echo $lang['img_title']?></label>
-        <input type="text" name="meta[Iptc.Headline]" id="img__title" class="edit"
-         value="<?php echo hsc(tpl_img_getTag('IPTC.Headline'))?>" /><br />
-
-        <label class="block" for="img__caption"><?php echo $lang['img_caption']?></label>
-        <textarea name="meta[Iptc.Caption]" id="img__caption" class="edit" rows="5"><?php
-          echo hsc(tpl_img_getTag(array('IPTC.Caption',
-                                        'EXIF.UserComment',
-                                        'EXIF.TIFFImageDescription',
-                                        'EXIF.TIFFUserComment')));
-        ?></textarea><br />
-
-        <label class="block" for="img__artist"><?php echo $lang['img_artist']?></label>
-        <input type="text" name="meta[Iptc.Byline]" id="img__artist" class="edit"
-         value="<?php echo hsc(tpl_img_getTag(array('Iptc.Byline',
-                                                    'Exif.TIFFArtist',
-                                                    'Exif.Artist',
-                                                    'Iptc.Credit')))?>" /><br />
-
-        <label class="block" for="img__copy"><?php echo $lang['img_copyr']?></label>
-        <input type="text" name="meta[Iptc.CopyrightNotice]" id="img__copy" class="edit"
-         value="<?php echo hsc(tpl_img_getTag(array('Iptc.CopyrightNotice','Exif.TIFFCopyright','Exif.Copyright')))?>" /><br />
-
-
-        <label class="block" for="img__keywords"><?php echo $lang['img_keywords']?></label>
-        <textarea name="meta[Iptc.Keywords]" id="img__keywords" class="edit"><?php
-          echo hsc(tpl_img_getTag(array('IPTC.Keywords',
-                                        'EXIF.Category')));
-        ?></textarea><br />
-
-
-        <input type="submit" value="<?php echo $lang['btn_save']?>" title="ALT+S"
-         accesskey="s" class="button" />
-
-      </form>
-    </div>
-
-
-    <div class="footer">
-      <hr />
-        <?php tpl_button('backtomedia')?>
-    </div>
-  </div>
-
-</div>
-</body>
-</html>
diff --git a/lib/tpl/default/mediamanager.php b/lib/tpl/default/mediamanager.php
new file mode 100644
index 000000000..10b31ba63
--- /dev/null
+++ b/lib/tpl/default/mediamanager.php
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<?php
+/**
+ * DokuWiki Default Template
+ *
+ * This is the template for the media manager popup
+ *
+ * You should leave the doctype at the very top - It should
+ * always be the very first line of a document.
+ *
+ * @link   http://wiki.splitbrain.org/wiki:tpl:templates
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+?>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>" lang="<?php echo $conf['lang']?>" dir="ltr">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title><?php echo hsc($lang['mediaselect'])?> [<?php echo hsc($conf['title'])?>]</title>
+  <?php tpl_metaheaders()?>
+  <link rel="shortcut icon" href="<?php echo DOKU_TPL?>images/favicon.ico" />
+</head>
+
+<body>
+<div id="media__manager" class="dokuwiki">
+    <?html_msgarea()?>
+    <div id="media__left">
+        <h1><?php echo hsc($lang['mediaselect'])?></h1>
+
+        <?php tpl_mediaTree() ?>
+
+        <?php /* keep the id! additional elements are inserted via JS here */?>
+        <div id="media__opts"></div>
+    </div>
+
+    <div id="media__right">
+        <?php tpl_mediaContent() ?>
+    </div>
+</div>
+</body>
+</html>
diff --git a/lib/tpl/default/mediaref.php b/lib/tpl/default/mediaref.php
deleted file mode 100644
index 06af5764c..000000000
--- a/lib/tpl/default/mediaref.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<?php
-/**
- * DokuWiki Default Template
- *
- * This is the template for displaying references to a media file.
- * It is displayed in the media popup.
- *
- * You should leave the doctype at the very top - It should
- * always be the very first line of a document.
- *
- * @link   http://wiki.splitbrain.org/wiki:tpl:templates
- * @author Andreas Gohr <andi@splitbrain.org>
- */
-?>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>" lang="<?php echo $conf['lang']?>" dir="ltr">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title><?php echo hsc($lang['mediaselect'])?> [<?php echo hsc($conf['title'])?>]</title>
-
-  <?php tpl_metaheaders()?>
-
-  <link rel="shortcut icon" href="<?php echo DOKU_TPL?>images/favicon.ico" />
-
-</head>
-
-<body>
-<div class="dokuwiki">
-  <?php html_msgarea()?>
-
-  <h1><?php echo hsc($lang['reference'])?> <code><?php echo hsc(noNS($DEL))?></code></h1>
-
-  <div class="mediaref">
-    <div class="mediaref_head">
-      <p><?php echo hsc($lang['ref_inuse'])?></p>
-    </div>
-
-    <?php tpl_showreferences($mediareferences)?>
-
-  <div class="mediaref_footer">
-    <hr />
-      <?php tpl_button('backtomedia')?>
-    </div>
-  </div>
-
-</div>
-</body>
-</html>
-
diff --git a/lib/tpl/default/style.ini b/lib/tpl/default/style.ini
index e6452ad90..bb4cd2305 100644
--- a/lib/tpl/default/style.ini
+++ b/lib/tpl/default/style.ini
@@ -9,6 +9,9 @@
 layout.css     = screen
 design.css     = screen
 style.css      = screen
+
+media.css      = screen
+
 rtl.css        = rtl
 print.css      = print
 
-- 
cgit v1.2.3