mediamanager resize

dokuwiki · Jul 18, 2011 · 80291f9 · 80291f9
1 parent 68ef894
commit 80291f9
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 24 deletions.
diff --git a/inc/template.php b/inc/template.php
@@ -1455,10 +1455,10 @@ function tpl_media() {
     if (isset($JUMPTO)) $image = $JUMPTO;
     if (isset($REV) && !$JUMPTO) $rev = $REV;
 
-    echo '<div class="mediamanager" id="id-mediamanager">';
+    echo '<div id="mediamanager__page">';
     echo '<div id="mediamanager__layout">';
 
-    echo '<div id="mediamanager__layout_namespaces" class="layout resizable" >';
+    echo '<div id="mediamanager__layout_namespaces" class="layout-resizable" >';
     html_msgarea();
     echo '<div class="mediamanager-tabs">';
     echo '<a href="#" class="selected">'.hsc($lang['namespaces']).'</a>';
@@ -1472,7 +1472,7 @@ function tpl_media() {
     echo '</div>';
     echo '</div>';
 
-    echo '<div id="mediamanager__layout_list" class="layout resizable" >';
+    echo '<div id="mediamanager__layout_list" class="layout-resizable" >';
     tpl_fileList();
     echo '</div>';
 

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
@@ -380,27 +380,38 @@ var dw_mediamanager = {
     },
 
     update_resizable: function (count_width) {
-        jQuery(".layout").resizable({ handles: 'e' });
-        jQuery(".layout").bind("resize", function(event, ui) {
-            var w = 0;
-            jQuery(".layout").each(function() {
-                w += jQuery(this).width();
-            });
-            jQuery('#id-mediamanager-layout').width(w+30);
-        });
+        $resizable = jQuery("#mediamanager__layout .layout-resizable");
+
+        $resizable.resizable({ handles: 'e' ,
+            resize: function(event, ui){
+                var w = 0;
+                $resizable.each(function() {
+                    w += jQuery(this).width();
+                });
+                wSum = w + parseFloat(jQuery('#mediamanager__layout_detail').css("min-width"));
 
-        var w = 0;
-        jQuery(".layout").each(function() {
-            if (count_width) jQuery(this).width(jQuery(this).width());
-            w += jQuery(this).width();
+                // max width of resizable column
+                var maxWidth = 0.95 * jQuery('#mediamanager__layout').width() - wSum + jQuery(this).width() - 30;
+                $resizable.resizable( "option", "maxWidth", maxWidth );
+
+                // percentage width of the first two columns
+                var wLeft = ( 100*(w+30) / jQuery('#mediamanager__layout').width() );
+
+                // width of the third column
+                var wRight = 95-wLeft;
+                wRight += "%";
+                jQuery('#mediamanager__layout_detail').width(wRight);
+            }
         });
-        jQuery('#id-mediamanager-layout').width(w+30);
 
         var windowHeight = jQuery(window).height();
         var height = windowHeight - 300;
-        jQuery('.scroll-container').each(function (i) {
+        jQuery('#mediamanager__layout .scroll-container').each(function (i) {
             jQuery(this).height(height);
         });
+        $resizable.each(function() {
+            jQuery(this).height(height+100);
+        });
     },
 
     opacity_slider: function () {
@@ -711,6 +722,7 @@ jQuery(document).ready(function() {
     dw_mediamanager.update_resizable(1);
     dw_mediamanager.opacity_slider();
     dw_mediamanager.portions_slider();
+    jQuery(window).resize(dw_mediamanager.update_resizable);
 });
 
 jQuery(dw_mediamanager.init);
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
@@ -1,11 +1,11 @@
 /* Layout */
 
-.mediamanager {
+#mediamanager__page {
     width: 100%;
-    overflow-x: auto;
 }
 
-#mediamanager__layout .layout {
+#mediamanager__layout .layout,
+#mediamanager__layout .layout-resizable {
     margin-left: 5px;
     margin-right: 5px;
     float: left;
@@ -31,18 +31,18 @@
 }
 
 #mediamanager__layout_namespaces {
-    width: 25%;
+    width: 15%;
     min-width: 125px;
 }
 
 #mediamanager__layout_list {
-    width: 40%;
+    width: 47%;
     min-width: 375px;
 }
 
 #mediamanager__layout_detail {
-    width: 30%;
-    min-width: 200px;
+    width: 33%;
+    min-width: 265px;
 }
 
 .ui-resizable-e:hover {