fix widths of panels in fullscreen mediamanager to be 100% when resizing...

fix widths of panels in fullscreen mediamanager to be 100% when resizing (FS#2351) -- please test in different screen sizes, etc

lib/scripts/media.js

@@ -457,44 +457,6 @@ var dw_mediamanager = {
     },
 
     window_resize: function () {
-        if (jQuery('#mediamanager__page').width() == dw_mediamanager.layout_width) {
-            return;
-        }
-
-        dw_mediamanager.layout_width = jQuery('#mediamanager__page').width();
-        $r = jQuery("#mediamanager__page div.panel");
-
-        var w = 0, wSum = 0, mCount = 0, mArray = [];
-        $r.each(function() {
-            w = jQuery(this).width();
-            if (w == parseFloat(jQuery(this).css("min-width"))) {
-                wSum += w;
-            } else {
-                mArray[mCount] = jQuery(this);
-                mCount++;
-            }
-        });
-
-        if (mCount > 0) {
-            var width = (0.95 * jQuery('#mediamanager__page').width() - wSum - 30);
-            wSum = 0;
-            for(var i = 0; i < mArray.length; i++) {
-                wSum += mArray[i].width();
-            }
-            for(var i = 0; i < mArray.length; i++) {
-                w = mArray[i].width();
-                w = 100*w / wSum;
-                mArray[i].width(width*w/100);
-            }
-        }
-
-        $r.each(function() {
-            w = jQuery(this).width();
-            w = (100 * w / jQuery('#mediamanager__page').width());
-            w += "%";
-            jQuery(this).width(w);
-        });
-
         dw_mediamanager.resize();
 
         dw_mediamanager.opacity_slider();
@@ -513,29 +475,31 @@ var dw_mediamanager = {
     update_resizable: function () {
         $resizables = dw_mediamanager.$resizables();
 
-        $resizables.resizable({ handles: 'e' ,
+        $resizables.resizable({
+            handles: 'e',
             resize: function(event, ui){
-                var w = 0;
+                var widthFull = jQuery('#mediamanager__page').width();
+                var widthResizables = 0;
                 $resizables.each(function() {
-                    w += jQuery(this).width();
+                    widthResizables += jQuery(this).width();
                 });
-                wSum = w + parseFloat(jQuery('#mediamanager__page div.file').css("min-width"));
+                var $filePanel = jQuery('#mediamanager__page div.panel.file');
 
-                // max width of resizable column
-                var maxWidth = 0.95 * jQuery('#mediamanager__page').width() - wSum + jQuery(this).width() - 30;
+                // set max width of resizable column
+                var widthOtherResizable = widthResizables - jQuery(this).width();
+                var minWidthNonResizable = parseFloat($filePanel.css("min-width"));
+                var maxWidth = widthFull - (widthOtherResizable + minWidthNonResizable);
                 $resizables.resizable( "option", "maxWidth", maxWidth );
 
-                // percentage width of the first two columns
-                var wLeft = ( 100*(w+30) / jQuery('#mediamanager__page').width() );
-
-                // width of the third column
-                var wRight = 95-wLeft;
-                wRight += "%";
-                jQuery('#mediamanager__page div.file').width(wRight);
+                // width of file panel in % = 100% - width of resizables in % 
+                // this calculates with 99.99 and not 100 to overcome rounding errors
+                var relWidthNonResizable = 99.99 - (100 * widthResizables / widthFull);
+                // set width of file panel
+                $filePanel.width(relWidthNonResizable+'%');
 
                 $resizables.each(function() {
                     w = jQuery(this).width();
-                    w = (100 * w / jQuery('#mediamanager__page').width());
+                    w = (99.99 * w / widthFull);
                     w += "%";
                     jQuery(this).width(w);
                 });