Added folder creation form, other improvements/cleanups

plugins/kolab_files/kolab_files.js

@@ -93,6 +93,12 @@ window.rcmail && rcmail.addEventListener('init', function() {
   }
 });
 
+
+/**********************************************************/
+/*********          Shared functionality         **********/
+/**********************************************************/
+
+// Initializes API object
 function kolab_files_init()
 {
   if (window.file_api)
@@ -111,6 +117,7 @@ function kolab_files_init()
   file_api.translations = rcmail.labels;
 };
 
+// returns API authorization token
 function kolab_files_token()
 {
   // consider the token from parent window more reliable (fresher) than in framed window
@@ -118,11 +125,7 @@ function kolab_files_token()
   return (window.parent && parent.rcmail && parent.rcmail.env.files_token) || rcmail.env.files_token;
 };
 
-
+// folder selection dialog
-/**********************************************************/
-/*********  Plugin functionality in other tasks  **********/
-/**********************************************************/
-
 function kolab_directory_selector_dialog(id)
 {
   var dialog = $('#files-dialog'), buttons = {},
@@ -157,10 +160,10 @@ function kolab_directory_selector_dialog(id)
     }
 
     rcmail.http_post('plugin.kolab_files', request, lock);
-    $('#files-dialog').dialog('destroy').hide();
+    dialog.dialog('destroy').hide();
   };
   buttons[rcmail.gettext('kolab_files.cancel')] = function () {
-    $('#files-dialog').dialog('destroy').hide();
+    dialog.dialog('destroy').hide();
   };
 
   // show dialog window
@@ -183,6 +186,7 @@ function kolab_directory_selector_dialog(id)
   }
 };
 
+// file selection dialog
 function kolab_files_selector_dialog()
 {
   var dialog = $('#files-compose-dialog'), buttons = {};
@@ -193,7 +197,7 @@ function kolab_files_selector_dialog()
       list.push($(this).data('file'));
     });
 
-    $('#files-compose-dialog').dialog('destroy').hide();
+    dialog.dialog('destroy').hide();
 
     if (list.length) {
       // display upload indicator and cancel button
@@ -212,7 +216,7 @@ function kolab_files_selector_dialog()
     }
   };
   buttons[rcmail.gettext('kolab_files.cancel')] = function () {
-    $('#files-compose-dialog').dialog('destroy').hide();
+    dialog.dialog('destroy').hide();
   };
 
   // show dialog window
@@ -249,6 +253,94 @@ function kolab_files_attach_menu_open(p)
   });
 };
 
+// folder creation dialog
+function kolab_files_folder_create_dialog()
+{
+  var dialog = $('#files-folder-create-dialog'),
+    buttons = {},
+    select = $('select[name="parent"]', dialog).html(''),
+    input = $('input[name="name"]', dialog).val('');
+
+  buttons[rcmail.gettext('kolab_files.create')] = function () {
+    var folder = '', name = input.val(), parent = select.val();
+
+    if (!name)
+      return;
+
+    if (parent)
+      folder = parent + file_api.env.directory_separator;
+
+    folder += name;
+
+    file_api.folder_create(folder);
+    dialog.dialog('destroy').hide();
+  };
+  buttons[rcmail.gettext('kolab_files.cancel')] = function () {
+    dialog.dialog('destroy').hide();
+  };
+
+  // show dialog window
+  dialog.dialog({
+    modal: true,
+    resizable: !bw.ie6,
+    closeOnEscape: (!bw.ie6 && !bw.ie7),  // disable for performance reasons
+    title: rcmail.gettext('kolab_files.foldercreate'),
+//    close: function() { rcmail.dialog_close(); },
+    buttons: buttons,
+    minWidth: 400,
+    minHeight: 300,
+    width: 500,
+    height: 400
+    }).show();
+
+  // build parent selector
+  select.append($('<option>').val('').text('---'));
+  $.each(file_api.env.folders, function(i, f) {
+    var n, option = $('<option>'), name = escapeHTML(f.name);
+
+    for (n=0; n<f.depth; n++)
+      name = '&nbsp;&nbsp;&nbsp;' + name;
+
+    option.val(i).html(name).appendTo(select);
+
+    if (i == file_api.env.folder)
+      option.attr('selected', true);
+  });
+};
+
+// smart upload button
+function kolab_files_upload_input(button)
+{
+  var link = $(button),
+    file = $('<input>'),
+    offset = link.offset();
+
+  file.attr({name: 'file[]', type: 'file', multiple: 'multiple', size: 5})
+    .change(function() { rcmail.files_upload('#filesuploadform'); })
+    // opacity:0 does the trick, display/visibility doesn't work
+    .css({opacity: 0, cursor: 'pointer', outline: 'none', position: 'absolute', top: '10000px', left: '10000px'});
+
+  // In FF and IE we need to move the browser file-input's button under the cursor
+  // Thanks to the size attribute above we know the length of the input field
+  if (bw.mz || bw.ie)
+    file.css({marginLeft: '-80px'});
+
+  // Note: now, I observe problem with cursor style on FF < 4 only
+  link.css({overflow: 'hidden', cursor: 'pointer'})
+    // place button under the cursor
+    .mousemove(function(e) {
+      if (rcmail.commands['files-upload'])
+        file.css({top: (e.pageY - offset.top - 10) + 'px', left: (e.pageX - offset.left - 10) + 'px'});
+      // move the input away if button is disabled
+      else
+        $(this).mouseleave();
+    })
+    .mouseleave(function() { file.css({top: '10000px', left: '10000px'}); })
+    .attr('onclick', '') // remove default button action
+    .append(file);
+};
+
+
 /***********************************************************/
 /**********          Main functionality           **********/
 /***********************************************************/
@@ -534,11 +626,11 @@ function kolab_files_ui()
         row.addClass('virtual');
       else
         row.mouseenter(function() {
-          if (rcmail.file_list.drag_active)
+            if (rcmail.file_list && rcmail.file_list.drag_active)
               $(this).addClass('droptarget');
           })
           .mouseleave(function() {
-          if (rcmail.file_list.drag_active)
+            if (rcmail.file_list && rcmail.file_list.drag_active)
               $(this).removeClass('droptarget');
           });
 
@@ -658,7 +750,7 @@ function kolab_files_ui()
         c = rcmail.env.coltypes[c];
         if (c == 'name')
             col = '<td class="name filename ' + file_api.file_type_class(data.type) + '">'
-              + '<span>' + data.name + '</span></td>';
+              + '<span>' + escapeHTML(data.name) + '</span></td>';
         else if (c == 'mtime')
           col = '<td class="mtime">' + data.mtime + '</td>';
         else if (c == 'size')

plugins/kolab_files/lib/kolab_files_engine.php

@@ -91,14 +91,14 @@ class kolab_files_engine
             $this->rc->output->set_env('files_url', $this->url . '/api/');
             $this->rc->output->set_env('files_token', $this->get_api_token());
 
-            if ($this->rc->task != 'files') {
+            // register template objects for dialogs (and main interface)
-                // register template objects for dialogs
             $this->rc->output->add_handlers(array(
                 'folder-create-form' => array($this, 'folder_create_form'),
                 'file-search-form'   => array($this, 'file_search_form'),
                 'filelist'           => array($this, 'file_list'),
             ));
 
+            if ($this->rc->task != 'files') {
                 // add dialog content at the end of page body
                 $this->rc->output->add_footer(
                     $this->rc->output->parse('kolab_files.' . $template, false, false));
@@ -130,7 +130,7 @@ class kolab_files_engine
     }
 
     /**
-     * Template object for folder creation form in "Save as" dialog
+     * Template object for folder creation form
      */
     public function folder_create_form($attrib)
     {
@@ -139,19 +139,23 @@ class kolab_files_engine
             $attrib['id'] = 'folder-create-form';
         }
 
-        $input_name = new html_inputfield(array('name' => 'folder_name'));
+        $input_name    = new html_inputfield(array('id' => 'folder-name', 'name' => 'name', 'size' => 30));
-        $out = $input_name->show();
+        $select_parent = new html_select(array('id' => 'folder-parent', 'name' => 'parent'));
+        $table         = new html_table(array('cols' => 2, 'class' => 'propform'));
 
-//        $input_parent = new html_checkbox(array('name' => 'folder_parent', 'checked' => true, 'value' => 1));
+        $table->add('title', html::label('folder-name', Q($this->plugin->gettext('foldername'))));
-//        $out .= html::label(null, $input_parent->show() . $this->plugin->gettext('assubfolder'));
+        $table->add(null, $input_name->show());
+        $table->add('title', html::label('folder-parent', Q($this->plugin->gettext('folderinside'))));
+        $table->add(null, $select_parent->show());
+
+        $out = $table->show();
 
         // add form tag around text field
         if (empty($attrib['form'])) {
             $out = $this->rc->output->form_tag($attrib, $out);
         }
 
-        $this->rc->output->add_label('kolab_files.foldercreating');
+        $this->rc->output->add_label('kolab_files.foldercreating', 'kolab_files.create');
-
         $this->rc->output->add_gui_object('folder-create-form', $attrib['id']);
 
         return $out;
@@ -452,14 +456,6 @@ class kolab_files_engine
 
     protected function action_index()
     {
-        // register template objects
-        $this->rc->output->add_handlers(array(
-//            'folderlist' => array($this, 'folder_list'),
-            'filelist' => array($this, 'file_list'),
-            'file-search-form' => array($this, 'file_search_form'),
-        ));
-
-
         $this->rc->output->add_label('deletefolderconfirm', 'kolab_files.folderdeleting',
           'kolab_files.foldercreating', 'kolab_files.uploading', 'kolab_files.filedeleteconfirm',
           'kolab_files.folderdeleteconfirm', 'kolab_files.filedeleting', 'kolab_files.filedeletenotice',

plugins/kolab_files/localization/en_US.inc

@@ -4,6 +4,7 @@ $labels['files'] = 'Files';
 $labels['saveall'] = 'Save all to cloud...';
 $labels['saveto'] = 'Save to cloud...';
 $labels['saveas'] = 'Save as:';
+$labels['create'] = 'Create';
 $labels['save'] = 'Save';
 $labels['cancel'] = 'Cancel';
 $labels['fromcloud'] = 'From cloud...';
@@ -13,6 +14,8 @@ $labels['foldercreate'] = 'Create folder';
 $labels['folderrename'] = 'Rename folder';
 $labels['folderdelete'] = 'Delete folder';
 
+$labels['folderinside'] = 'Insert inside';
+$labels['foldername'] = 'Folder name';
 $labels['name'] = 'Name';
 $labels['mtime'] = 'Modified';
 

plugins/kolab_files/skins/larry/style.css

@@ -188,7 +188,8 @@
 /* plugin dialogs */
 
 #files-dialog,
-#files-compose-dialog {
+#files-compose-dialog,
+#files-folder-create-dialog {
   display: none;
 }
 
@@ -222,19 +223,6 @@
   box-shadow: none;
 }
 
-#files-folder-create {
-  background-color: white;
-  padding: 10px;
-  bottom: 10px;
-  left: 5px;
-  top: auto;
-  z-index: 1001; /* for use in modal dialog window */
-}
-
-#folder-create-form {
-  margin-bottom: 10px;
-}
-
 #files-compose-dialog #searchmenulink {
   width: 15px;
 }

plugins/kolab_files/skins/larry/templates/files.html

@@ -3,9 +3,6 @@
 <head>
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
-<!--
-<link rel="stylesheet" type="text/css" href="/settings.css" />
--->
 <script src="plugins/kolab_files/skins/larry/ui.js" type="text/javascript"></script>
 </head>
 <body class="files noscroll">
@@ -36,7 +33,7 @@
     <div id="files-folder-list" class="scroller withfooter">
     </div>
     <div id="folderlist-footer" class="boxfooter">
-        <roundcube:button name="folder-create" type="link" title="kolab_files.foldercreate" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" onclick="kolab_files_folder_create()" /><roundcube:button name="folderoptions" id="folderoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('folderoptions', undefined, {above: 1});return false" innerClass="inner" content="&#9881;" />
+        <roundcube:button name="folder-create" type="link" title="kolab_files.foldercreate" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" onclick="kolab_files_folder_create_dialog()" /><roundcube:button name="folderoptions" id="folderoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('folderoptions', undefined, {above: 1});return false" innerClass="inner" content="&#9881;" />
     </div>
 </div>
 
@@ -51,13 +48,19 @@
 
 <div id="folderoptions" class="popupmenu">
     <ul id="folderoptionsmenu" class="toolbarmenu">
+<!--
         <li><roundcube:button command="files-folder-edit" label="edit" classAct="active" /></li>
+-->
         <li><roundcube:button command="files-folder-delete" label="delete" classAct="active" /></li>
         <li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
         <roundcube:container name="filesfolderoptions" id="folderoptionsmenu" />
     </ul>
 </div>
 
+<div id="files-folder-create-dialog">
+    <roundcube:object name="folder-create-form" />
+</div>
+
 <div id="listoptions" class="propform popupdialog">
 <roundcube:if condition="!in_array('kolab_files_list_cols', (array)config:dont_override)" />
 	<fieldset class="floating">

plugins/kolab_files/skins/larry/templates/message_plugin.html

@@ -6,13 +6,11 @@
     <div id="folderlistbox" class="uibox listbox">
         <div id="files-folder-list" class="scroller withfooter"></div>
         <div id="folderlist-footer" class="boxfooter">
-            <roundcube:button name="foldercreatelink" id="foldercreatelink" type="link" onclick="kolab_files_folder_form()" title="createfolder" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" />
+            <roundcube:button name="foldercreatelink" id="foldercreatelink" type="link" onclick="kolab_files_folder_create_dialog()" title="createfolder" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" />
         </div>
     </div>
-    <div id="files-folder-create" class="popupmenu">
+</div>
-        <roundcube:object name="folder-create-form" />
+<div id="files-folder-create-dialog">
-        <input id="folder-create-save-button" onclick="kolab_directory_create()" type="button" class="button mainaction" value="<roundcube:label name="create" />">
+    <roundcube:object name="folder-create-form" />
-        <input id="folder-create-cancel-button" onclick="kolab_directory_cancel()" type="button" class="button" value="<roundcube:label name="cancel" />">
-    </div>
 </div>
 <script src="plugins/kolab_files/skins/larry/ui.js" type="text/javascript"></script>

plugins/kolab_files/skins/larry/ui.js

@@ -11,44 +11,6 @@ function kolab_files_ui_init()
   kolab_files_upload_input('#filestoolbar a.upload');
 };
 
-function kolab_files_folder_form(link)
-{
-  var form = $('#files-folder-create');
-
-  form.show();
-
-  $('form > input[name="folder_name"]', form).val('').focus();
-};
-
-function kolab_directory_create()
-{
-  var folder = '',
-    form = $('#folder-create-form'),
-    name = $('input[name="folder_name"]', form).val(),
-    parent = file_api.env.folder;
-//    parent = $('input[name="folder_parent"]', form).is(':checked');
-
-  if (!name)
-    return;
-
-  if (parent && file_api.env.folder)
-    folder = file_api.env.folder + file_api.env.directory_separator;
-
-  folder += name;
-
-  kolab_directory_cancel();
-  file_api.folder_create(folder);
-
-  // todo: select created folder
-};
-
-function kolab_directory_cancel()
-{
-  var form = $('#files-folder-create');
-
-  form.hide();
-};
-
 function kolab_files_show_listoptions()
 {
   var $dialog = $('#listoptions');
@@ -92,35 +54,3 @@ function kolab_files_save_listoptions()
 
   kolab_files_set_list_options(cols, sort, ord);
 };
-
-
-function kolab_files_upload_input(button)
-{
-  var link = $(button),
-    file = $('<input>'),
-    offset = link.offset();
-
-  file.attr({name: 'file[]', type: 'file', multiple: 'multiple', size: 5})
-    .change(function() { rcmail.files_upload('#filesuploadform'); })
-    // opacity:0 does the trick, display/visibility doesn't work
-    .css({opacity: 0, cursor: 'pointer', outline: 'none', position: 'absolute', top: '10000px', left: '10000px'});
-
-  // In FF and IE we need to move the browser file-input's button under the cursor
-  // Thanks to the size attribute above we know the length of the input field
-  if (bw.mz || bw.ie)
-    file.css({marginLeft: '-80px'});
-
-  // Note: now, I observe problem with cursor style on FF < 4 only
-  link.css({overflow: 'hidden', cursor: 'pointer'})
-    // place button under the cursor
-    .mousemove(function(e) {
-      if (rcmail.commands['files-upload'])
-        file.css({top: (e.pageY - offset.top - 10) + 'px', left: (e.pageX - offset.left - 10) + 'px'});
-      // move the input away if button is disabled
-      else
-        $(this).mouseleave();
-    })
-    .mouseleave(function() { file.css({top: '10000px', left: '10000px'}); })
-    .attr('onclick', '') // remove default button action
-    .append(file);
-};