plugins/kolab_files
Aleksander Machniak
machniak at kolabsys.com
Wed Apr 3 15:37:40 CEST 2013
plugins/kolab_files/kolab_files.js | 120 ++++++++--
plugins/kolab_files/lib/kolab_files_engine.php | 40 +--
plugins/kolab_files/localization/en_US.inc | 3
plugins/kolab_files/skins/larry/style.css | 16 -
plugins/kolab_files/skins/larry/templates/files.html | 11
plugins/kolab_files/skins/larry/templates/message_plugin.html | 10
plugins/kolab_files/skins/larry/ui.js | 70 -----
7 files changed, 140 insertions(+), 130 deletions(-)
New commits:
commit 00df84f76bb9ac52d12a1d90370591c66990266b
Author: Aleksander Machniak <machniak at kolabsys.com>
Date: Wed Apr 3 15:37:13 2013 +0200
Added folder creation form, other improvements/cleanups
diff --git a/plugins/kolab_files/kolab_files.js b/plugins/kolab_files/kolab_files.js
index e7bd066..2263992 100644
--- a/plugins/kolab_files/kolab_files.js
+++ b/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;
};
-
-/**********************************************************/
-/********* Plugin functionality in other tasks **********/
-/**********************************************************/
-
+// folder selection dialog
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 = ' ' + 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,12 +626,12 @@ function kolab_files_ui()
row.addClass('virtual');
else
row.mouseenter(function() {
- if (rcmail.file_list.drag_active)
- $(this).addClass('droptarget');
+ if (rcmail.file_list && rcmail.file_list.drag_active)
+ $(this).addClass('droptarget');
})
.mouseleave(function() {
- if (rcmail.file_list.drag_active)
- $(this).removeClass('droptarget');
+ if (rcmail.file_list && rcmail.file_list.drag_active)
+ $(this).removeClass('droptarget');
});
list.append(row);
@@ -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')
diff --git a/plugins/kolab_files/lib/kolab_files_engine.php b/plugins/kolab_files/lib/kolab_files_engine.php
index 4a87080..6b3993e 100644
--- a/plugins/kolab_files/lib/kolab_files_engine.php
+++ b/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
- $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'),
- ));
+ // register template objects for dialogs (and main interface)
+ $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'));
- $out = $input_name->show();
+ $input_name = new html_inputfield(array('id' => 'folder-name', 'name' => 'name', 'size' => 30));
+ $select_parent = new html_select(array('id' => 'folder-parent', 'name' => 'parent'));
+ $table = new html_table(array('cols' => 2, 'class' => 'propform'));
+
+ $table->add('title', html::label('folder-name', Q($this->plugin->gettext('foldername'))));
+ $table->add(null, $input_name->show());
+ $table->add('title', html::label('folder-parent', Q($this->plugin->gettext('folderinside'))));
+ $table->add(null, $select_parent->show());
-// $input_parent = new html_checkbox(array('name' => 'folder_parent', 'checked' => true, 'value' => 1));
-// $out .= html::label(null, $input_parent->show() . $this->plugin->gettext('assubfolder'));
+ $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',
diff --git a/plugins/kolab_files/localization/en_US.inc b/plugins/kolab_files/localization/en_US.inc
index f657cb5..c0b2528 100644
--- a/plugins/kolab_files/localization/en_US.inc
+++ b/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';
diff --git a/plugins/kolab_files/skins/larry/style.css b/plugins/kolab_files/skins/larry/style.css
index 6a72335..2602eba 100644
--- a/plugins/kolab_files/skins/larry/style.css
+++ b/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;
}
diff --git a/plugins/kolab_files/skins/larry/templates/files.html b/plugins/kolab_files/skins/larry/templates/files.html
index 1f23e65..d6e094c 100644
--- a/plugins/kolab_files/skins/larry/templates/files.html
+++ b/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="⚙" />
+ <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="⚙" />
</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">
diff --git a/plugins/kolab_files/skins/larry/templates/message_plugin.html b/plugins/kolab_files/skins/larry/templates/message_plugin.html
index 08cb71a..a3e5ad1 100644
--- a/plugins/kolab_files/skins/larry/templates/message_plugin.html
+++ b/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">
- <roundcube:object name="folder-create-form" />
- <input id="folder-create-save-button" onclick="kolab_directory_create()" type="button" class="button mainaction" value="<roundcube:label name="create" />">
- <input id="folder-create-cancel-button" onclick="kolab_directory_cancel()" type="button" class="button" value="<roundcube:label name="cancel" />">
- </div>
+</div>
+<div id="files-folder-create-dialog">
+ <roundcube:object name="folder-create-form" />
</div>
<script src="plugins/kolab_files/skins/larry/ui.js" type="text/javascript"></script>
diff --git a/plugins/kolab_files/skins/larry/ui.js b/plugins/kolab_files/skins/larry/ui.js
index a5e359b..cd267e0 100644
--- a/plugins/kolab_files/skins/larry/ui.js
+++ b/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);
-};
More information about the commits
mailing list