From e5c2bbd0f7f013982ed1a38bd55dccf5b5388f20 Mon Sep 17 00:00:00 2001
From: Frederic Massart <fred@moodle.com>
Date: Fri, 8 Jun 2012 09:59:59 +0800
Subject: [PATCH] MDL-33303 Filepicker: resized to match HTML editor and made
 resizable

---
 files/renderer.php               | 17 +++++++++--
 lib/form/filemanager.js          | 51 ++++++++++++++++++++++++++++++--
 theme/base/style/filemanager.css |  6 ++--
 3 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/files/renderer.php b/files/renderer.php
index 33a70f6e0f0..edcb5850d11 100644
--- a/files/renderer.php
+++ b/files/renderer.php
@@ -107,7 +107,7 @@ class core_files_renderer extends plugin_renderer_base {
         $module = array(
             'name'=>'form_filemanager',
             'fullpath'=>'/lib/form/filemanager.js',
-            'requires' => array('core_filepicker', 'base', 'io-base', 'node', 'json', 'core_dndupload', 'panel', 'resize-plugin', 'dd-plugin'),
+            'requires' => array('core_filepicker', 'base', 'io-base', 'node', 'json', 'core_dndupload', 'panel', 'resize-plugin', 'dd-plugin', 'resize'),
             'strings' => array(
                 array('error', 'moodle'), array('info', 'moodle'), array('confirmdeletefile', 'repository'),
                 array('draftareanofiles', 'repository'), array('entername', 'repository'), array('enternewname', 'repository'),
@@ -123,6 +123,7 @@ class core_files_renderer extends plugin_renderer_base {
                     array($this->filemanager_js_templates()), true, $module);
         }
         $this->page->requires->js_init_call('M.form_filemanager.init', array($fm->options), true, $module);
+        user_preference_allow_ajax_update('filemanagerresizedto', PARAM_SEQUENCE);
 
         // non javascript file manager
         $html .= '<noscript>';
@@ -192,8 +193,17 @@ class core_files_renderer extends plugin_renderer_base {
         $strdndenabledinbox = get_string('dndenabled_inbox', 'moodle');
         $loading = get_string('loading', 'repository');
 
+        $resizedto = get_user_preferences('filemanagerresizedto', null);
+        $filemanagerstyle = '';
+        $containerstyletag = '';
+        if (!is_null($resizedto) && preg_match('#^\d+,\d+$#', $resizedto)) {
+            list($width, $height) = explode(',', $resizedto, 2);
+            $filemanagerstyle = " style='width:{$width}px;'";
+            $containerstyletag = " style='height:{$height}px;'";
+        }
+
         $html = '
-<div id="filemanager-'.$client_id.'" class="filemanager fm-loading">
+<div id="filemanager-'.$client_id.'" class="filemanager fm-loading"'.$filemanagerstyle.'>
     <div class="fp-restrictions">
         '.$restrictions.'
         <span class="dndupload-message"> - '.$strdndenabled.' </span>
@@ -216,7 +226,7 @@ class core_files_renderer extends plugin_renderer_base {
         </div>
     </div>
     <div class="filemanager-loading mdl-align">'.$icon_progress.'</div>
-    <div class="filemanager-container" >
+    <div class="filemanager-container"'.$containerstyletag.'>
         <div class="fm-content-wrapper">
             <div class="fp-content"></div>
             <div class="fm-empty-container <!--mdl-align-->">
@@ -227,6 +237,7 @@ class core_files_renderer extends plugin_renderer_base {
         </div>
         <div class="filemanager-updating">'.$icon_progress.'</div>
     </div>
+    <div class="fp-statusbar"></div>
 </div>';
         return preg_replace('/\{\!\}/', '', $html);
     }
diff --git a/lib/form/filemanager.js b/lib/form/filemanager.js
index f1f88b2d258..ae9f04886dc 100644
--- a/lib/form/filemanager.js
+++ b/lib/form/filemanager.js
@@ -83,6 +83,14 @@ M.form_filemanager.init = function(Y, options) {
             } else {
                 this.filecount = 0;
             }
+
+            this.publish('filemanager:content-changed', {
+                context : this,
+                prefix : 'filemanager',
+                preventable : false,
+                type : 'content-changed'
+            });
+
             // prepare filemanager for drag-and-drop upload
             this.filemanager = Y.one('#filemanager-'+options.client_id);
             if (this.filemanager.hasClass('filemanager-container') || !this.filemanager.one('.filemanager-container')) {
@@ -122,6 +130,44 @@ M.form_filemanager.init = function(Y, options) {
             this.filemanager.all('.fp-vb-icons,.fp-vb-tree,.fp-vb-details').removeClass('checked')
             this.filemanager.all('.fp-vb-icons').addClass('checked')
             this.refresh(this.currentpath); // MDL-31113 get latest list from server
+
+            // Make sure that the filemanager is at least shown within the constraints of the page
+            if ((this.filemanager.get('offsetWidth') + this.filemanager.getX()) > this.filemanager.get('docWidth')) {
+                this.filemanager.setStyle('width', Math.round(this.filemanager.get('docWidth') - this.filemanager.getX()));
+            }
+
+            if (Y.Resize) {
+                // We only do this is the YUI resize component is loaded
+                var resize = new Y.Resize({
+                    node: this.dndcontainer,
+                    wrap : true,
+                    handles : ['br']
+                }).plug(Y.Plugin.ResizeConstrained, {
+                    minWidth : 410,
+                    maxWidth : this.dndcontainer.ancestor('.ffilemanager').get('offsetWidth') || 1600,
+                    minHeight : 160,
+                    maxHeight : 1024
+                });
+                // When it resizes we need to correct the width and height of other elements.
+                resize.on('resize:resize', function(e) {
+                    this.filemanager.setStyle('width', e.info.offsetWidth);
+                    var fmcw = this.filemanager.one('.fp-content');
+                    if (fmcw) {
+                        fmcw.setStyle('height', this.dndcontainer.get('offsetHeight'));
+                    }
+                }, this);
+                // After resizing we update the user preference so that we always show them the file manager at the same size.
+                resize.on('resize:end', function(e){
+                    M.util.set_user_preference('filemanagerresizedto', Math.round(e.info.offsetWidth).toString()+','+Math.round(e.info.offsetHeight).toString());
+                });
+                // When content gets updated by the filemanager we need to auto-update the height of the resizeable area to include it.
+                this.on('filemanager:content-changed', function(){
+                    var fmcw = this.filemanager.one('.fp-content');
+                    if (fmcw) {
+                        fmcw.setStyle('height', this.dndcontainer.get('offsetHeight'));
+                    }
+                }, this);
+            }
         },
 
         wait: function() {
@@ -511,7 +557,7 @@ M.form_filemanager.init = function(Y, options) {
                 filenode : element_template,
                 callbackcontext : this,
                 callback : function(e, node) {
-                    if (e.preventDefault) { e.preventDefault(); }
+                    if (e.preventDefault) {e.preventDefault();}
                     if (node.type == 'folder') {
                         this.refresh(node.filepath);
                     } else {
@@ -519,7 +565,7 @@ M.form_filemanager.init = function(Y, options) {
                     }
                 },
                 rightclickcallback : function(e, node) {
-                    if (e.preventDefault) { e.preventDefault(); }
+                    if (e.preventDefault) {e.preventDefault();}
                     this.select_file(node);
                 },
                 classnamecallback : function(node) {
@@ -606,6 +652,7 @@ M.form_filemanager.init = function(Y, options) {
                 node.appendChild(Y.Node.create('<option/>').
                     set('value', list[i]).setContent(list[i]))
             }
+            this.fire('filemanager:content-changed');
         },
         update_file: function(confirmed) {
             var selectnode = this.selectnode;
diff --git a/theme/base/style/filemanager.css b/theme/base/style/filemanager.css
index 86d0446a2e8..45eb57208a3 100644
--- a/theme/base/style/filemanager.css
+++ b/theme/base/style/filemanager.css
@@ -1,7 +1,7 @@
 /**
  * File Picker and File Manager
  */
-
+.filemanager {width: 680px; min-width: 410px;}
 .filemanager, .file-picker {font-size:11px;color: #555555;letter-spacing: .2px;}
 .filemanager a, .file-picker a {color:#555555;}
 .filemanager a:hover, .file-picker a:hover {color:#555555;text-decoration: none;}
@@ -288,8 +288,10 @@ a.ygtvspacer:hover {color: transparent;text-decoration: none;}
 /*.filemanager-container ul{margin:0;padding:0;}
 .filemanager-container ul li{white-space:nowrap;list-style-type:none;}
 .filemanager-container ul li a{padding:0}*/
-.filemanager .fp-content{overflow: auto;max-height: 472px;}
+.filemanager .fp-content{overflow: auto;}
 .filemanager-container, .filepicker-filelist {overflow:hidden;}
+.filemanager.fm-loaded .fp-statusbar {background: #F2F2F2;border: 1px solid #BBB;border-top:0;min-height:2em;margin-bottom:5px;padding-right:2em;}
+.filemanager .yui3-resize-handle-inner-br {bottom:-2em;}
 
 /*
  * Icon view (File Manager only)
-- 
2.43.0