mediamanager resizable

2 files changed, 44 insertions, 8 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 36c06a3aa..af5346cbe 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -354,14 +354,43 @@ var dw_mediamanager = {
             DOKU_BASE + 'lib/exe/ajax.php',
             params,
             function (data) {
+                jQuery('.ui-resizable').each(function(){
+                    jQuery(this).resizable('destroy');
+                });
+
                 $content.html(data);
                 dw_mediamanager.prepare_content($content);
                 dw_mediamanager.updatehide();
+                dw_mediamanager.update_resizable(0);
             },
             'html'
         );
     },
 
+    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);
+        });
+
+        var w = 0;
+        jQuery(".layout").each(function() {
+            if (count_width) jQuery(this).width(jQuery(this).width());
+            w += jQuery(this).width();
+        });
+        jQuery('#id-mediamanager-layout').width(w+30);
+
+        var windowHeight = jQuery(window).height();
+        var height = windowHeight - 300;
+        jQuery('.scroll-container').each(function (i) {
+            jQuery(this).height(height);
+        });
+    },
+
     prepare_content: function ($content) {
         // hide syntax example
         $content.find('div.example:visible').hide();
@@ -642,4 +671,8 @@ function hasFlash(version){
     return ver >= version;
 }
 
+jQuery(document).ready(function() {
+    dw_mediamanager.update_resizable(1);
+});
+
 jQuery(dw_mediamanager.init);
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index eea62ea46..55ac39fd2 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -1,20 +1,19 @@
 .mediamanager {
     width: 100%;
-    overflow-y: auto;
+    overflow-x: auto;
 }
 
 .mediamanager .mediamanager-slider {
-    width: auto;
+
 }
 
 .mediamanager .mediamanager-slider .layout {
-    float: left;
     margin-left: 5px;
     margin-right: 5px;
+    float: left;
 }
 
 .mediamanager .scroll-container {
-    /*height: 0px;*/
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0;
@@ -32,17 +31,17 @@
 .mediamanager-link-thumbnails {
     background: url('../../images/icon-thumb.png') 0 -4px no-repeat;
     padding-left: 30px;
-    display: block;
-    float: left;
+    display: inline-block;
     width: 0;
     overflow: hidden;
+
+    margin-left: 10px;
 }
 
 .mediamanager-link-list {
     background: url('../../images/icon-list.png') 0 -4px no-repeat;
     padding-left: 30px;
-    display: block;
-    float: left;
+    display: inline-block;
     width: 0;
     overflow: hidden;
 }
@@ -242,6 +241,10 @@ form.meta textarea.edit {
     margin-bottom: 5px;
 }
 
+.ui-resizable-e:hover {
+    background-color: #dadada;
+}
+
 .idx .selected {
     color: red !important;
 }
\ No newline at end of file