media manager enhancements

Separate scrolling for right and left side of the manager (like frames)
Show syntax example for simple copy'n'paste if no JavaScript available.

darcs-hash:20060519202900-7ad00-9b20bd7993d3687f83b807a81cd23051b16785db.gz

2 files changed, 35 insertions, 6 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index f7c709907..95ab11d0b 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -46,6 +46,13 @@ media = {
             addEvent(elem,'click',function(event){ return media.select(event,this); });
         }
 
+        // hide syntax example
+        items = getElementsByClass('example',obj,'div');
+        for(var i=0; i<items.length; i++){
+            elem = items[i];
+            elem.style.display = 'none';
+        }
+
         var file = $('upload__file');
         if(!file) return;
         addEvent(file,'change',media.suggest);
@@ -99,7 +106,13 @@ media = {
         var id = link.name.substr(2);
 
         if(!opener){
-            alert(LANG['idtouse']+"\n:"+id);
+            // if we don't run in popup display example
+            var ex = $('ex_'+id);
+            if(ex.style.display == ''){
+                ex.style.display = 'none';
+            }else{
+                ex.style.display = '';
+            }
             return false;
         }
         opener.insertTags('wiki__text','{{'+id+'|','}}','');
diff --git a/lib/tpl/default/media.css b/lib/tpl/default/media.css
index 96aac41ce..805abc467 100644
--- a/lib/tpl/default/media.css
+++ b/lib/tpl/default/media.css
@@ -2,17 +2,28 @@
  * The CSS in here cotrols the appearance of the media manager
  */
 
+#media__manager {
+    height: 100%;
+    overflow: hide;
+}
+
 #media__left {
     width: 30%;
-    float: left;
     border-right: solid 1px __dark__;
+
+    height: 100%;
+    overflow: auto;
+    position: absolute;
+    left: 0;
 }
 
 #media__right {
-    width: 68%;
-    float: left;
-    border-left: solid 1px __dark__;
-    margin-left: -1px;
+    width: 69.9%;
+
+    height: 100%;
+    overflow: auto;
+    position: absolute;
+    right: 0;
 }
 
 #media__tree img {
@@ -71,6 +82,11 @@
     vertical-align: text-bottom;
 }
 
+#media__content div.example {
+    color: __darkgray__;
+    margin-left: 1em;
+}
+
 /* --- upload form --- */
 
 #media__content form.upload {