MDL-36900 repository: File Manager new folder UI improvements

files/renderer.php

@@ -114,7 +114,7 @@ public function render_form_filemanager($fm) {
                 array('invalidjson', 'repository'), array('popupblockeddownload', 'repository'),
                 array('unknownoriginal', 'repository'), array('confirmdeletefolder', 'repository'),
                 array('confirmdeletefilewithhref', 'repository'), array('confirmrenamefolder', 'repository'),
-                array('confirmrenamefile', 'repository')
+                array('confirmrenamefile', 'repository'), array('newfolder', 'repository')
             )
         );
         if (empty($filemanagertemplateloaded)) {

lang/en/repository.php

@@ -152,6 +152,7 @@
 $string['manageurl'] = 'Manage';
 $string['manageuserrepository'] = 'Manage individual repository';
 $string['moving'] = 'Moving';
+$string['newfolder'] = 'New folder';
 $string['newfoldername'] = 'New folder name:';
 $string['noenter'] = 'Nothing entered';
 $string['nofilesattached'] = 'No files attached';

lib/form/filemanager.js

@@ -302,7 +302,19 @@ M.form_filemanager.init = function(Y, options) {
                                 }
                             }
                         });
-                    }
+                    };
+                    var validate_folder_name = function() {
+                        var valid = false;
+                        var foldername = Y.one('#fm-newname-'+scope.client_id).get('value');
+                        if (foldername.length > 0) {
+                            valid = true;
+                        }
+                        var btn = Y.one('#fm-mkdir-butcreate-'+scope.client_id);
+                        if (btn) {
+                            btn.set('disabled', !valid);
+                        }
+                        return valid;
+                    };
                     if (!this.mkdir_dialog) {
                         var node = Y.Node.createWithFilesSkin(M.form_filemanager.templates.mkdir);
                         this.mkdir_dialog = new Y.Panel({
@@ -314,18 +326,33 @@ M.form_filemanager.init = function(Y, options) {
                             render       : true
                         });
                         this.mkdir_dialog.plug(Y.Plugin.Drag,{handles:['.yui3-widget-hd']});
-                        node.one('.fp-dlg-butcreate').on('click', perform_action, this);
-                        node.one('input').set('id', 'fm-newname-'+this.client_id).
-                            on('keydown', function(e){
-                                if (e.keyCode == 13) {Y.bind(perform_action, this)(e);}
-                            }, this);
+                        node.one('.fp-dlg-butcreate').set('id', 'fm-mkdir-butcreate-'+this.client_id).on('click',
+                                perform_action, this);
+                        node.one('input').set('id', 'fm-newname-'+this.client_id).on('keydown', function(e) {
+                            var valid = Y.bind(validate_folder_name, this)();
+                            if (valid && e.keyCode === 13) {
+                                Y.bind(perform_action, this)(e);
+                            }
+                        }, this);
+                        node.one('#fm-newname-'+this.client_id).on(['keyup', 'change'], function(e) {
+                            Y.bind(validate_folder_name, this)();
+                        }, this);
+
                         node.one('label').set('for', 'fm-newname-' + this.client_id);
                         node.all('.fp-dlg-butcancel').on('click', function(e){e.preventDefault();this.mkdir_dialog.hide();}, this);
                         node.all('.fp-dlg-curpath').set('id', 'fm-curpath-'+this.client_id);
                     }
                     this.mkdir_dialog.show();
-                    Y.one('#fm-newname-'+scope.client_id).focus();
-                    Y.all('#fm-curpath-'+scope.client_id).setContent(Y.Escape.html(this.currentpath))
+
+                    // Default folder name:
+                    var foldername = M.str.repository.newfolder;
+                    while (this.has_folder(foldername)) {
+                        foldername = increment_filename(foldername, true);
+                    }
+                    Y.one('#fm-newname-'+scope.client_id).set('value', foldername);
+                    Y.bind(validate_folder_name, this)();
+                    Y.one('#fm-newname-'+scope.client_id).focus().select();
+                    Y.all('#fm-curpath-'+scope.client_id).setContent(this.currentpath);
                 }, this);
             } else {
                 this.filemanager.addClass('fm-nomkdir');
@@ -990,6 +1017,16 @@ M.form_filemanager.init = function(Y, options) {
         render: function() {
             this.print_path();
             this.view_files();
+        },
+        has_folder: function(foldername) {
+            var element;
+            for (var i in this.options.list) {
+                element = this.options.list[i];
+                if (element.type == 'folder' && element.fullname == foldername) {
+                    return true;
+                }
+            }
+            return false;
         }
     });
 

lib/javascript-static.js

@@ -1236,6 +1236,41 @@ function getElementsByClassName(oElm, strTagName, name) {
     return (arrReturnElements)
 }
 
+/**
+ * Increment a file name.
+ *
+ * @param string file name.
+ * @param boolean ignoreextension do not extract the extension prior to appending the
+ *                                suffix. Useful when incrementing folder names.
+ * @return string the incremented file name.
+ */
+function increment_filename(filename, ignoreextension) {
+    var extension = '';
+    var basename = filename;
+
+    // Split the file name into the basename + extension.
+    if (!ignoreextension) {
+        var dotpos = filename.lastIndexOf('.');
+        if (dotpos !== -1) {
+            basename = filename.substr(0, dotpos);
+            extension = filename.substr(dotpos, filename.length);
+        }
+    }
+
+    // Look to see if the name already has (NN) at the end of it.
+    var number = 0;
+    var hasnumber = basename.match(/^(.*) \((\d+)\)$/);
+    if (hasnumber !== null) {
+        // Note the current number & remove it from the basename.
+        number = parseInt(hasnumber[2], 10);
+        basename = hasnumber[1];
+    }
+
+    number++;
+    var newname = basename + ' (' + number + ')' + extension;
+    return newname;
+}
+
 /**
  * Return whether we are in right to left mode or not.
  *