mediamanager resize

1 files changed, 26 insertions, 14 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index c5e6afc9b..00a4821d0 100644
--- 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);