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

4 files changed, 41 insertions, 7 deletions

diff --git a/inc/lang/en/lang.php b/inc/lang/en/lang.php
index 7d067ee25..84fde9c28 100644
--- a/inc/lang/en/lang.php
+++ b/inc/lang/en/lang.php
@@ -104,7 +104,7 @@ $lang['namespaces']  = 'Namespaces';
 $lang['mediafiles']  = 'Available files in';
 
 $lang['js']['keepopen'] = 'Keep window open on selection';
-$lang['js']['idtouse']  = 'Please use the following ID to reference this file:';
+$lang['mediausage']  = 'Use the following syntax to reference this file:';
 
 $lang['reference']   = 'References for';
 $lang['ref_inuse']   = 'The file can\'t be deleted, because it\'s still used by the following pages:';
diff --git a/inc/media.php b/inc/media.php
index 39f76e311..f09aff2eb 100644
--- a/inc/media.php
+++ b/inc/media.php
@@ -295,6 +295,8 @@ function media_fileactions($item,$auth){
  * Formats and prints one file in the list
  */
 function media_printfile($item,$auth,$jump){
+    global $lang;
+
     // Prepare zebra coloring
     // I always wanted to use this variable name :-D
     static $twibble = 1;
@@ -331,6 +333,9 @@ function media_printfile($item,$auth,$jump){
     echo '<a name="h_'.$item['id'].'" class="'.$class.'">'.$file.'</a> ';
     echo '<span class="info">('.$info.')</span>'.NL;
     media_fileactions($item,$auth);
+    echo '<div class="example" id="ex_'.$item['id'].'">';
+    echo $lang['mediausage'].' <code>{{:'.$item['id'].'}}<code>';
+    echo '</div>';
     if($item['isimg']) media_printimgdetail($item);
     echo '<div class="clearer"></div>'.NL;
     echo '</div>'.NL;
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 {