Page MenuHomePhorge
Files F256618

No OneTemporary
Actions

View Options

diff --git a/lib/file_ui_output.php b/lib/file_ui_output.php
index 2d3af65..a5cf3c6 100644
--- a/lib/file_ui_output.php
+++ b/lib/file_ui_output.php
@@ -1,290 +1,290 @@
<?php
/*
+--------------------------------------------------------------------------+
| This file is part of the Kolab File API |
| |
| Copyright (C) 2011-2012, Kolab Systems AG |
| |
| This program is free software: you can redistribute it and/or modify |
| it under the terms of the GNU Affero General Public License as published |
| by the Free Software Foundation, either version 3 of the License, or |
| (at your option) any later version. |
| |
| This program is distributed in the hope that it will be useful, |
| but WITHOUT ANY WARRANTY; without even the implied warranty of |
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| GNU Affero General Public License for more details. |
| |
| You should have received a copy of the GNU Affero General Public License |
| along with this program. If not, see <http://www.gnu.org/licenses/> |
+--------------------------------------------------------------------------+
| Author: Aleksander Machniak <machniak@kolabsys.com> |
| Author: Jeroen van Meeuwen <vanmeeuwen@kolabsys.com> |
+--------------------------------------------------------------------------+
*/
/**
* Output functionality for Kolab File API UI
*/
class file_ui_output
{
private $tpl_vars = array();
private $env = array();
private $objects = array();
private $commands = array();
private $labels = array();
private $skin;
/**
* Class constructor.
*
* @param string $skin Interface skin name
*/
public function __construct($skin = null)
{
$this->skin = $skin ? $skin : 'default';
$this->init();
}
/**
* Initialization.
*/
private function init()
{
$conf = rcube::get_instance()->config;
$smarty_path = array('Smarty', 'smarty3', 'smarty');
if ($path = $conf->get('smarty_path')) {
array_unshift($smarty_path, $path);
}
foreach ($smarty_path as $path) {
@include_once "$path/Smarty.class.php";
if (class_exists('Smarty', false)) {
break;
}
}
$SMARTY = new Smarty;
$SMARTY->template_dir = 'skins/' . $this->skin . '/templates';
$SMARTY->compile_dir = INSTALL_PATH . '/cache';
$SMARTY->plugins_dir = INSTALL_PATH . '/lib/ext/Smarty/plugins/';
$SMARTY->debugging = false;
$this->tpl = $SMARTY;
}
/**
* Sends output to the browser.
*
* @param string $template HTML template name
*/
public function send($template = null)
{
if ($this->is_ajax()) {
echo $this->send_json();
}
else {
$this->send_tpl($template);
}
}
/**
* JSON output.
*/
private function send_json()
{
header('Content-Type: application/json');
$response = array(
'objects' => $this->objects,
'env' => array(),
);
foreach ($this->env as $name => $value) {
$response['env'][$name] = $value;
}
foreach ($this->commands as $command) {
$cname = array_shift($command);
$args = array();
foreach ($command as $arg) {
$args[] = json_encode($arg);
}
$commands[] = sprintf('ui.%s(%s);', $cname, implode(',', $args));
}
if (!empty($commands)) {
$response['exec'] = implode("\n", $commands);
}
$this->labels = array_unique($this->labels);
foreach ($this->labels as $label) {
$response['labels'][$label] = file_ui::translate($label);
}
return json_encode($response);
}
/**
* HTML output.
*
* @param string $template HTML template name
*/
private function send_tpl($template)
{
if (!$template) {
return;
}
foreach ($this->tpl_vars as $name => $value) {
$this->tpl->assign($name, $value);
}
$script = '';
if (!empty($this->env)) {
- $script[] = 'ui.env = ' . json_encode($this->env) . ';';
+ $script[] = 'ui.set_env(' . json_encode($this->env) . ');';
}
$this->labels = array_unique($this->labels);
if (!empty($this->labels)) {
foreach ($this->labels as $label) {
$labels[$label] = file_ui::translate($label);
}
$script[] = 'ui.tdef(' . json_encode($labels) . ');';
}
foreach ($this->commands as $command) {
$cname = array_shift($command);
$args = array();
foreach ($command as $arg) {
$args[] = json_encode($arg);
}
$script[] = sprintf('ui.%s(%s);', $cname, implode(',', $args));
}
$this->tpl->assign('skin_path', 'skins/' . $this->skin . '/');
if ($script) {
$script = "<script type=\"text/javascript\">\n" . implode("\n", $script) . "\n</script>";
$this->tpl->assign('script', $script);
}
$this->tpl->display($template . '.html');
}
/**
* Request type checker.
*
* @return bool True on AJAX request, False otherwise
*/
public function is_ajax()
{
return !empty($_REQUEST['remote']);
}
/**
* Assigns value to a template variable.
*
* @param string $name Variable name
* @param mixed $value Variable value
*/
public function assign($name, $value)
{
$this->tpl_vars[$name] = $value;
}
/**
* Get the value from the environment to be sent to the browser.
*
* @param string $name Variable name
*
*/
public function get_env($name)
{
if (empty($this->env[$name])) {
return null;
} else {
return $this->env[$name];
}
}
/**
* Assigns value to browser environment.
*
* @param string $name Variable name
* @param mixed $value Variable value
*/
public function set_env($name, $value)
{
$this->env[$name] = $value;
}
/**
* Sets content of a HTML object.
*
* @param string $name Object's identifier (HTML ID attribute)
* @param string $content Object's content
* @param bool $is_template Set to true if $content is a template name
*/
public function set_object($name, $content, $is_template = false)
{
if ($is_template) {
$content = $this->get_template($content);
}
$this->objects[$name] = $content;
}
/**
* Returns content of a HTML object (set with set_object())
*
* @param string $name Object's identifier (HTML ID attribute)
*
* @return string Object content
*/
public function get_object($name)
{
return $this->objects[$name];
}
/**
* Returns HTML template output.
*
* @param string $name Template name
*
* @return string Template output
*/
public function get_template($name)
{
ob_start();
$this->send_tpl($name);
$content = ob_get_contents();
ob_end_clean();
return $content;
}
/**
* Sets javascript command (to be added to the request).
*/
public function command()
{
$this->commands[] = func_get_args();
}
/**
* Adds one or more translation labels to the browser env.
*/
public function add_translation()
{
$this->labels = array_merge($this->labels, func_get_args());
}
}
diff --git a/lib/locale/en_US.php b/lib/locale/en_US.php
index 692a8e6..9280e22 100644
--- a/lib/locale/en_US.php
+++ b/lib/locale/en_US.php
@@ -1,29 +1,31 @@
<?php
$LANG['about.community'] = 'This is the Community Edition of the <b>Kolab Server</b>.';
$LANG['about.warranty'] = 'Professional support is available from <a href="http://kolabsys.com">Kolab Systems</a>.';
$LANG['about.support'] = 'It comes with absolutely <b>no warranties</b> and is typically run entirely self supported. You can find help &amp; information on the community <a href="http://kolab.org">web site</a> &amp; <a href="http://wiki.kolab.org">wiki</a>.';
$LANG['file.create'] = 'Create File';
$LANG['file.upload'] = 'Upload File';
$LANG['file.name'] = 'Name';
$LANG['file.mtime'] = 'Modified';
$LANG['file.size'] = 'Size';
$LANG['file.open'] = 'Open';
$LANG['file.delete'] = 'Delete';
$LANG['file.rename'] = 'Rename';
$LANG['folder.create'] = 'Create Folder';
$LANG['login.username'] = 'Username';
$LANG['login.password'] = 'Password';
$LANG['login.login'] = 'Log in';
$LANG['reqtime'] = 'Request time: $1 sec.';
$LANG['internalerror'] = 'Internal system error!';
$LANG['loginerror'] = 'Incorrect username or password!';
$LANG['loading'] = 'Loading...';
+$LANG['saving'] = 'Saving...';
+$LANG['deleting'] = 'Deleting...';
$LANG['logout'] = 'Logout';
$LANG['search'] = 'Search';
$LANG['servererror'] = 'Server Error!';
$LANG['session.expired'] = 'Session has expired. Login again, please';
diff --git a/public_html/js/app.js b/public_html/js/app.js
index 0c209cf..406fa40 100644
--- a/public_html/js/app.js
+++ b/public_html/js/app.js
@@ -1,757 +1,853 @@
/*
+--------------------------------------------------------------------------+
| This file is part of the Kolab File API |
| |
| Copyright (C) 2011-2012, Kolab Systems AG |
| |
| This program is free software: you can redistribute it and/or modify |
| it under the terms of the GNU Affero General Public License as published |
| by the Free Software Foundation, either version 3 of the License, or |
| (at your option) any later version. |
| |
| This program is distributed in the hope that it will be useful, |
| but WITHOUT ANY WARRANTY; without even the implied warranty of |
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| GNU Affero General Public License for more details. |
| |
| You should have received a copy of the GNU Affero General Public License |
| along with this program. If not, see <http://www.gnu.org/licenses/> |
+--------------------------------------------------------------------------+
| Author: Aleksander Machniak <machniak@kolabsys.com> |
+--------------------------------------------------------------------------+
*/
function file_ui()
{
var ref = this;
- this.env = {};
this.translations = {};
this.request_timeout = 300;
this.message_time = 3000;
this.events = {};
+ this.env = {
+ directory_separator: '/'
+ };
// set jQuery ajax options
$.ajaxSetup({
cache: false,
error: function(request, status, err) { ref.http_error(request, status, err); },
beforeSend: function(xmlhttp) { xmlhttp.setRequestHeader('X-Session-Token', ref.env.token); }
});
/*********************************************************/
/********* basic utilities *********/
/*********************************************************/
// set environment variable(s)
this.set_env = function(p, value)
{
if (p != null && typeof p === 'object' && !value)
for (var n in p)
this.env[n] = p[n];
else
this.env[p] = value;
};
// add a localized label(s) to the client environment
this.tdef = function(p, value)
{
if (typeof p == 'string')
this.translations[p] = value;
else if (typeof p == 'object')
$.extend(this.translations, p);
};
// return a localized string
this.t = function(label)
{
if (this.translations[label])
return this.translations[label];
else
return label;
};
// print a message into browser console
this.log = function(msg)
{
if (window.console && console.log)
console.log(msg);
};
// execute a specific command on the web client
this.command = function(command, props, obj)
{
if (obj && obj.blur)
obj.blur();
if (this.busy)
return false;
this.set_busy(true, 'loading');
var ret = undefined,
func = command.replace(/[^a-z]/g, '_'),
task = command.replace(/\.[a-z-_]+$/g, '');
if (this[func] && typeof this[func] === 'function') {
ret = this[func](props);
}
else {
this.http_post(command, props);
}
// update menu state
// $('li', $('#navigation')).removeClass('active');
// $('li.'+task, ('#navigation')).addClass('active');
return ret === false ? false : obj ? false : true;
};
this.set_busy = function(a, message)
{
+ if (a && this.busy)
+ return;
+
if (a && message) {
var msg = this.t(message);
if (msg == message)
msg = 'Loading...';
this.display_message(msg, 'loading');
}
else if (!a) {
this.hide_message('loading');
}
this.busy = a;
// if (this.gui_objects.editform)
// this.lock_form(this.gui_objects.editform, a);
// clear pending timer
if (this.request_timer)
clearTimeout(this.request_timer);
// set timer for requests
- if (a && this.env.request_timeout)
+ if (a && this.request_timeout)
this.request_timer = window.setTimeout(function() { ref.request_timed_out(); }, this.request_timeout * 1000);
};
// called when a request timed out
this.request_timed_out = function()
{
this.set_busy(false);
this.display_message('Request timed out!', 'error');
};
// Add variable to GET string, replace old value if exists
this.add_url = function(url, name, value)
{
value = urlencode(value);
if (/(\?.*)$/.test(url)) {
var urldata = RegExp.$1,
datax = RegExp('((\\?|&)'+RegExp.escape(name)+'=[^&]*)');
if (datax.test(urldata))
urldata = urldata.replace(datax, RegExp.$2 + name + '=' + value);
else
urldata += '&' + name + '=' + value
return url.replace(/(\?.*)$/, urldata);
}
else
return url + '?' + name + '=' + value;
};
this.trigger_event = function(event, data)
{
if (this.events[event])
for (var i in this.events[event])
this.events[event][i](data);
};
this.add_event_listener = function(event, func)
{
if (!this.events[event])
this.events[event] = [];
this.events[event].push(func);
};
/*********************************************************/
/********* GUI functionality *********/
/*********************************************************/
// write to the document/window title
this.set_pagetitle = function(title)
{
if (title && document.title)
document.title = title;
};
// display a system message (types: loading, notice, error)
this.display_message = function(msg, type, timeout)
{
var obj, ref = this;
if (!type)
type = 'notice';
if (msg)
msg = this.t(msg);
if (type == 'loading') {
timeout = this.request_timeout * 1000;
if (!msg)
msg = this.t('loading');
}
else if (!timeout)
timeout = this.message_time * (type == 'error' || type == 'warning' ? 2 : 1);
obj = $('<div>');
if (type != 'loading') {
msg = '<div><span>' + msg + '</span></div>';
obj.addClass(type).click(function() { return ref.hide_message(); });
}
if (timeout > 0)
window.setTimeout(function() { ref.hide_message(type, type != 'loading'); }, timeout);
obj.attr('id', type == 'loading' ? 'loading' : 'message')
.appendTo('body').html(msg).show();
};
// make a message to disapear
this.hide_message = function(type, fade)
{
if (type == 'loading')
$('#loading').remove();
else
$('#message').fadeOut('normal', function() { $(this).remove(); });
};
this.set_watermark = function(id)
{
if (this.env.watermark)
$('#'+id).html(this.env.watermark);
};
/********************************************************/
/********* Remote request methods *********/
/********************************************************/
// compose a valid url with the given parameters
this.url = function(action, query)
{
var k, param = {},
querystring = typeof query === 'string' ? '&' + query : '';
if (typeof action !== 'string')
query = action;
else if (!query || typeof query !== 'object')
query = {};
// overwrite task name
if (action)
query.method = action;
// remove undefined values
for (k in query) {
if (query[k] !== undefined && query[k] !== null)
param[k] = query[k];
}
return '?' + $.param(param) + querystring;
};
// send a http POST request to the server
this.http_post = function(action, postdata)
{
var url = this.url(action);
if (postdata && typeof postdata === 'object')
postdata.remote = 1;
else {
if (!postdata)
postdata = '';
postdata += '&remote=1';
}
this.set_request_time();
return $.ajax({
type: 'POST', url: url, data: postdata, dataType: 'json',
success: function(response) { ui.http_response(response); },
error: function(o, status, err) { ui.http_error(o, status, err); }
});
};
// send a http POST request to the API service
this.api_post = function(action, postdata, func)
{
var url = 'api/' + action;
if (!func) func = 'api_response';
this.set_request_time();
return $.ajax({
type: 'POST', url: url, data: postdata, dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function(response) { ui[func](response); },
error: function(o, status, err) { ui.http_error(o, status, err); }
});
};
// send a http GET request to the API service
this.api_get = function(action, data, func)
{
var url = 'api/';
if (!func) func = 'api_response';
this.set_request_time();
data.method = action;
return $.ajax({
type: 'GET', url: url, data: data,
success: function(response) { ui[func](response); },
error: function(o, status, err) { ui.http_error(o, status, err); }
});
};
// handle HTTP response
this.http_response = function(response)
{
var i;
if (!response)
return;
// set env vars
if (response.env)
this.set_env(response.env);
// we have translation labels to add
if (typeof response.labels === 'object')
this.tdef(response.labels);
// HTML page elements
if (response.objects)
for (i in response.objects)
$('#'+i).html(response.objects[i]);
this.update_request_time();
this.set_busy(false);
// if we get javascript code from server -> execute it
if (response.exec)
eval(response.exec);
this.trigger_event('http-response', response);
};
// handle HTTP request errors
this.http_error = function(request, status, err)
{
var errmsg = request.statusText;
this.set_busy(false);
request.abort();
if (request.status && errmsg)
this.display_message(this.t('servererror') + ' (' + errmsg + ')', 'error');
};
this.api_response = function(response)
{
this.update_request_time();
this.set_busy(false);
return this.api_response_parse(response);
};
this.api_response_parse = function(response)
{
if (!response || response.status != 'OK') {
// Logout on invalid-session error
if (response && response.code == 403)
this.main_logout();
else
this.display_message(response && response.reason ? response.reason : this.t('servererror'), 'error');
return false;
}
return true;
};
/********************************************************/
/********* Helper methods *********/
/********************************************************/
// disable/enable all fields of a form
this.lock_form = function(form, lock)
{
if (!form || !form.elements)
return;
var n, len, elm;
if (lock)
this.disabled_form_elements = [];
for (n=0, len=form.elements.length; n<len; n++) {
elm = form.elements[n];
if (elm.type == 'hidden')
continue;
// remember which elem was disabled before lock
if (lock && elm.disabled)
this.disabled_form_elements.push(elm);
// check this.disabled_form_elements before inArray() as a workaround for FF5 bug
// http://bugs.jquery.com/ticket/9873
else if (lock || (this.disabled_form_elements && $.inArray(elm, this.disabled_form_elements)<0))
elm.disabled = lock;
}
};
this.set_request_time = function()
{
this.env.request_time = (new Date()).getTime();
};
// Update request time element
this.update_request_time = function()
{
if (this.env.request_time) {
var t = ((new Date()).getTime() - this.env.request_time)/1000,
el = $('#reqtime');
el.text(el.text().replace(/[0-9.,]+/, t));
}
};
// position and display popup
this.popup_show = function(e, popup)
{
var popup = $(popup),
pos = this.mouse_pos(e),
win = $(window),
w = popup.width(),
h = popup.height(),
left = pos.left - w,
top = pos.top;
if (top + h > win.height())
top -= h;
if (left + w > win.width())
left -= w;
popup.css({left: left + 'px', top: top + 'px'})
.click(function(e) { e.stopPropagation(); $(this).hide(); }).show();
e.stopPropagation();
};
// Return absolute mouse position of an event
this.mouse_pos = function(e)
{
if (!e) e = window.event;
var mX = (e.pageX) ? e.pageX : e.clientX,
mY = (e.pageY) ? e.pageY : e.clientY;
if (document.body && document.all) {
mX += document.body.scrollLeft;
mY += document.body.scrollTop;
}
if (e._offset) {
mX += e._offset.left;
mY += e._offset.top;
}
return { left:mX, top:mY };
};
/*********************************************************/
/********* Commands *********/
/*********************************************************/
this.main_logout = function(params)
{
location.href = '?task=main&action=logout' + (params ? '&' + $.param(params) : '');
return false;
};
// folder list request
this.folder_list = function()
{
- this.set_busy(true);
+ this.set_busy(true, 'loading');
this.api_get('folder_list', {}, 'folder_list_response');
};
// folder list response handler
this.folder_list_response = function(response)
{
if (!this.api_response(response))
return;
var elem = $('#folderlist'), table = $('table', elem);
+ this.env.folders = this.folder_list_parse(response.result);
+
table.empty();
- // @TODO: folder tree structure
+ $.each(this.env.folders, function(i, f) {
+ var row = $('<tr><td><span class="branch"></span><span class="name"></span></td></tr>'),
+ span = $('span.name', row);
- $.each(response.result, function() {
- var row = $('<tr><td><span class="name"></span></td></tr>'),
- folder = this;
+ span.text(f.name);
+ row.attr('id', f.id);
+
+ if (f.depth)
+ $('span.branch', row).width(15 * f.depth);
+
+ if (f.virtual)
+ row.addClass('virtual');
+ else
+ span.click(function() {
+ ui.command('file.list', i);
+ });
- $('span.name', row).text(folder).click(function() {
- ui.command('file.list', folder);
- });
- row.attr('data-folder', urlencode(folder));
table.append(row);
});
+
+ // add tree icons
+ this.folder_list_tree();
+ };
+
+ this.folder_list_parse = function(list)
+ {
+ var i, n, items, items_len, f, tmp, folder, num = 1,
+ len = list.length, folders = {};
+
+ for (i=0; i<len; i++) {
+ folder = list[i];
+ items = folder.split(this.env.directory_separator);
+ items_len = items.length;
+
+ for (n=0; n<items_len-1; n++) {
+ tmp = items.slice(0,n+1);
+ f = tmp.join(this.env.directory_separator);
+ if (!folders[f])
+ folders[f] = {name: tmp.pop(), depth: n, id: 'f'+num++, virtual: 1};
+ }
+
+ folders[folder] = {name: items.pop(), depth: items_len-1, id: 'f'+num++};
+ }
+
+ return folders;
+ };
+
+ this.folder_list_tree = function()
+ {
+ var i, n, diff, tree = [], folder, folders = this.env.folders;
+
+ for (i in folders) {
+ items = i.split(this.env.directory_separator);
+ items_len = items.length;
+
+ // skip root
+ if (items_len < 2) {
+ tree = [];
+ continue;
+ }
+
+ folders[i].tree = [1];
+
+ for (n=0; n<tree.length; n++) {
+ folder = tree[n];
+ diff = folders[folder].depth - (items_len - 1);
+ if (diff >= 0)
+ folders[folder].tree[diff] = folders[folder].tree[diff] ? folders[folder].tree[diff] + 2 : 2;
+ }
+
+ tree.push(i);
+ }
+
+ for (i in folders) {
+ if (tree = folders[i].tree) {
+ var html = '', divs = [];
+ for (n=0; n<folders[i].depth; n++) {
+ if (tree[n] > 2)
+ divs.push({'class': 'l3', width: 15});
+ else if (tree[n] > 1)
+ divs.push({'class': 'l2', width: 15});
+ else if (tree[n] > 0)
+ divs.push({'class': 'l1', width: 15});
+ // separator
+ else if (divs.length && !divs[divs.length-1]['class'])
+ divs[divs.length-1].width += 15;
+ else
+ divs.push({'class': null, width: 15});
+ }
+
+ for (n=divs.length-1; n>=0; n--) {
+ if (divs[n]['class'])
+ html += '<span class="tree '+divs[n]['class']+'" />';
+ else
+ html += '<span style="width:'+divs[n].width+'px" />';
+ }
+
+ if (html)
+ $('#' + folders[i].id + ' span.branch').html(html);
+ }
+ }
};
// file list request
this.file_list = function(folder)
{
- this.set_busy(true);
+ this.set_busy(true, 'loading');
this.env.folder = folder;
this.api_get('file_list', {folder: folder}, 'file_list_response');
var list = $('#folderlist');
$('tr.selected', list).removeClass('selected');
- $('tr[data-folder="' + urlencode(folder) + '"]', list).addClass('selected');
+ $('#' + this.env.folders[folder].id, list).addClass('selected');
};
// file list response handler
this.file_list_response = function(response)
{
if (!this.api_response(response))
return;
var table = $('#filelist');
$('tbody', table).empty();
$.each(response.result, function(key, data) {
var row = $('<tr><td class="filename"></td>'
+' <td class="filemtime"></td><td class="filesize"></td></tr>'),
link = $('<span></span>').text(key).click(function(e) { ui.file_menu(e, key); });
$('td.filename', row).addClass(ui.file_type_class(data.type)).append(link);
$('td.filemtime', row).text(data.mtime);
$('td.filesize', row).text(ui.file_size(data.size));
row.attr('data-file', urlencode(key));
table.append(row);
});
};
this.file_menu = function(e, file)
{
var menu = $('#file-menu');
$('li.file-open > a', menu)
.attr({target: '_blank', href: 'api/' + ui.url('file_get', {folder: this.env.folder, token: this.env.token, file: file})});
$('li.file-delete > a', menu).off('click').click(function() { ui.file_delete(file); });
$('li.file-rename > a', menu).off('click').click(function() { ui.file_rename_start(file); });
this.popup_show(e, menu);
};
// file delete request
this.file_delete = function(file)
{
- this.set_busy(true);
+ this.set_busy(true, 'deleting');
this.api_get('file_delete', {folder: this.env.folder, file: file}, 'file_delete_response');
};
// file delete response handler
this.file_delete_response = function(response)
{
if (!this.api_response(response))
return;
this.file_list(this.env.folder);
};
// file rename request
this.file_rename = function(file, newname)
{
if (file === newname)
return;
- this.set_busy(true);
+ this.set_busy(true, 'saving');
this.api_get('file_rename', {folder: this.env.folder, file: file, 'new': newname}, 'file_rename_response');
};
// file delete response handler
this.file_rename_response = function(response)
{
if (!this.api_response(response))
return;
this.file_list(this.env.folder);
};
this.file_rename_start = function(file)
{
var list = $('#filelist'),
tr = $('tr[data-file="' + urlencode(file) + '"]', list),
td = $('td.filename', tr),
input = $('<input>').attr({type: 'text', name: 'filename', 'class': 'filerename'})
.val(file).data('filename', file)
.click(function(e) { e.stopPropagation(); })
.keydown(function(e) {
switch (e.which) {
case 27: // ESC
ui.file_rename_stop();
break;
case 13: // Enter
var elem = $(this), newname = elem.val();
ui.file_rename(elem.data('filename'), newname);
elem.parent().text(newname);
break;
}
});
$('span', td).text('').append(input);
input.focus();
};
this.file_rename_stop = function()
{
$('input.filerename').each(function() {
var elem = $(this);
elem.parent().text(elem.data('filename'));
});
};
// file upload request
this.file_upload = function()
{
var form = $('#uploadform'),
field = $('input[type=file]', form).get(0),
files = field.files ? field.files.length : field.value ? 1 : 0;
if (files) {
// submit form and read server response
this.async_upload_form(form, 'file_create', function() {
var doc, response;
try {
doc = this.contentDocument ? this.contentDocument : this.contentWindow.document;
response = doc.body.innerHTML;
// response may be wrapped in <pre> tag
if (response.slice(0, 5).toLowerCase() == '<pre>' && response.slice(-6).toLowerCase() == '</pre>') {
response = doc.body.firstChild.firstChild.nodeValue;
}
response = eval('(' + response + ')');
} catch (err) {
response = {status: 'ERROR'};
}
if (ui.api_response_parse(response))
ui.file_list(ui.env.folder);
});
}
};
// post the given form to a hidden iframe
this.async_upload_form = function(form, action, onload)
{
var ts = new Date().getTime(),
frame_name = 'fileupload'+ts;
/*
// upload progress support
if (this.env.upload_progress_name) {
var fname = this.env.upload_progress_name,
field = $('input[name='+fname+']', form);
if (!field.length) {
field = $('<input>').attr({type: 'hidden', name: fname});
field.prependTo(form);
}
field.val(ts);
}
*/
// have to do it this way for IE
// otherwise the form will be posted to a new window
if (document.all) {
var html = '<iframe id="'+frame_name+'" name="'+frame_name+'"'
+ ' src="program/resources/blank.gif" style="width:0;height:0;visibility:hidden;"></iframe>';
document.body.insertAdjacentHTML('BeforeEnd', html);
}
// for standards-compliant browsers
else
$('<iframe>')
.attr({name: frame_name, id: frame_name})
.css({border: 'none', width: 0, height: 0, visibility: 'hidden'})
.appendTo(document.body);
// handle upload errors, parsing iframe content in onload
$('#'+frame_name).bind('load', {ts:ts}, onload);
$(form).attr({
target: frame_name,
action: 'api/' + this.url(action, {folder: this.env.folder, token: this.env.token, uploadid:ts}),
method: 'POST'
}).attr(form.encoding ? 'encoding' : 'enctype', 'multipart/form-data')
.submit();
};
this.file_type_class = function(type)
{
if (!type)
return '';
type = type.replace(/[^a-z0-9]/g, '_');
return type;
};
this.file_size = function(size)
{
if (size >= 1073741824)
return parseFloat(size/1073741824).toFixed(2) + ' GB';
if (size >= 1048576)
return parseFloat(size/1048576).toFixed(2) + ' MB';
if (size >= 1024)
return parseInt(size/1024) + ' kB';
return parseInt(size || 0)+ ' B';
};
};
// Add escape() method to RegExp object
// http://dev.rubyonrails.org/changeset/7271
RegExp.escape = function(str)
{
return String(str).replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
};
// make a string URL safe (and compatible with PHP's rawurlencode())
function urlencode(str)
{
if (window.encodeURIComponent)
return encodeURIComponent(str).replace('*', '%2A');
return escape(str)
.replace('+', '%2B')
.replace('*', '%2A')
.replace('/', '%2F')
.replace('@', '%40');
};
// Initialize application object (don't change var name!)
var ui = new file_ui();
// general click handler
$(document).click(function() {
$('.popup').hide();
ui.file_rename_stop();
});
diff --git a/public_html/skins/default/style.css b/public_html/skins/default/style.css
index 3a9c12a..b6718c9 100644
--- a/public_html/skins/default/style.css
+++ b/public_html/skins/default/style.css
@@ -1,1024 +1,1061 @@
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
margin: 0;
color: #514949;
background: url(images/body.png) top repeat-x #f0f0f0;
}
a {
color: #1E90FF;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 5px;
color: #ff9900;
}
input[type="text"],
input[type="password"],
select[multiple="multiple"],
textarea {
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding-left: 2px;
color: black;
}
select[multiple="multiple"] {
padding-left: 0;
}
table.list {
border-spacing: 0;
border-radius: 3px;
width: 100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
table.list td {
padding: 2px 4px;
border: 1px solid white;
border-left: none;
border-top: none;
}
table.list thead tr {
background-color: #e0e0e0;
font-weight: bold;
}
table.list tbody tr {
background-color: #f0f0f0;
}
table.list tfoot tr {
background-color: #e0e0e0;
}
table.list tfoot tr td {
padding: 3px 3px;
font-size: 10px;
text-shadow: white 1px 1px;
}
table.list tfoot tr td {
border-top: solid 1px white;
border-bottom: none;
}
table.list td:last-child {
border-right: none;
}
table.list tbody tr.selectable td {
cursor: default;
}
table.list tbody tr.selectable:hover {
background-color: #d6efff;
}
table.list tbody tr td.empty-body {
height: 150px;
color: #ff9900;
text-align: center;
}
fieldset {
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-top: 10px;
}
legend {
padding-left: 0;
color: #909090;
}
table.form {
width: 100%;
}
table.form td {
padding: 1px 5px;
}
table.form tr.required input,
table.form tr.required select,
table.form tr.required textarea {
background-color: #f0f9ff;
}
table.form tr input.error,
table.form tr select.error,
table.form tr textarea.error {
background-color: #f5e3e3;
}
td.label {
width: 1%;
min-width: 120px;
text-align: right;
font-weight: bold;
white-space: nowrap;
}
/**** Common UI elements ****/
#topmenu {
text-align: right;
height: 20px;
padding: 0 10px;
margin: 0;
white-space: nowrap;
background: url(images/linen_header.jpg) 0 0 repeat-x;
}
#topmenu > span {
color: #aaa;
font-size: 11px;
padding-top: 2px;
display: inline-block;
height: 18px;
}
#navigation {
margin: 0 15px;
text-align: right;
height: 36px;
z-index: 2;
white-space: nowrap;
}
#task_navigation {
margin: 0 15px;
text-align: right;
height: 21px;
z-index: 2;
white-space: nowrap;
}
#message {
position: absolute;
top: 80px;
left: 20px;
width: 350px;
height: 60px;
z-index: 20;
}
#message div {
opacity: 0.97;
padding-left: 70px;
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 1px 1px 3px #999;
-webkit-box-shadow: #999 1px 1px 3px;
width: 100%;
height: 100%;
display: table;
}
#message.notice div {
border-color: #aec1db;
color: #3465a4;
background: url(images/info.png) 10px center no-repeat #c0e0ff;
}
#message.error div {
border-color: #db9999;
color: #a40000;
background: url(images/error.png) 10px center no-repeat #edcccc;
}
#message div span {
vertical-align: middle;
display: table-cell;
line-height: 20px;
}
#logo {
position: absolute;
top: 0px;
left: 10px;
width: 198px;
height: 74px;
cursor: pointer;
background: url(images/logo.png) 0 0 no-repeat;
}
#content {
position: absolute;
left: 0;
right: 0;
top: 74px;
bottom: 55px;
margin: 0 15px;
padding: 10px;
background-color: #f5f5f5;
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
margin: 2px 15px;
color: #b0b0b0;
font-size: 9px;
}
#loading {
position: absolute;
display: none;
top: 2px;
left: 15px;
width: 150px;
height: 18px;
padding-left: 86px;
color: #aaa;
font-size: 11px;
z-index: 1;
background: url(images/loading.gif) 0 3px no-repeat;
white-space: nowrap;
}
#topmenu .logout {
background: url(images/buttons.png) -100px -1px no-repeat;
padding-left: 20px;
margin-right: 10px;
color: white;
}
#topmenu .login {
padding-left: 20px;
margin-right: 20px;
background: url(images/user_ico.png) 0 2px no-repeat;
}
#topmenu .domain {
padding-left: 20px;
margin-right: 10px;
background: url(images/domain_ico.png) 0 3px no-repeat;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 8px 0;
}
#navigation ul li {
display: inline;
font-size: 13px;
font-weight: bold;
padding: 8px 0;
}
#navigation ul li a {
padding: 8px 10px;
text-decoration: none;
color: #514949;
}
#navigation ul li.active {
background: url(images/navbg.png) 0 0 repeat-x;
}
#navigation ul li.active a {
text-shadow: white 1px 1px;
color: #ff9900;
}
#task_navigation ul {
list-style-type: none;
margin: 0;
padding: 2px 0;
}
#task_navigation ul li {
padding: 1px 0;
display: inline;
font-size: 12px;
font-weight: bold;
text-shadow: white 1px 1px;
}
#task_navigation ul li a {
padding: 1px 10px;
text-decoration: none;
color: #808080;
}
#navigation ul li a:active,
#task_navigation ul li a:active {
outline: none;
}
#search {
padding: 7px;
margin-bottom: 10px;
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #e0e0e0;
}
#searchinput {
border: none;
background-color: white;
margin-top: 2px;
}
#searchinput:focus {
outline: none;
}
.searchinput {
height: 20px;
margin: 0;
padding: 0;
background-color: white;
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
overflow: hidden;
}
.searchactions {
float: left;
padding: 1px;
margin-left: -1px;
height: 18px;
width: 37px;
background-color: #f0f0f0;
cursor: pointer;
border-right: 1px solid #e0e0e0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-left-right-radius: 3px;
}
#search-reset,
#search-details {
display: block;
float: left;
width: 18px;
height: 18px;
background: url(images/buttons.png) 0 0 no-repeat;
}
#search-reset:hover,
#search-details:hover {
background-color: white;
}
#search-reset {
border-left: 1px solid #e0e0e0;
}
#search-details {
background-position: -21px 0;
}
.searchdetails {
display: none;
}
.searchfilter {
color: #909090;
font-weight: bold;
margin-top: 5px;
}
#search fieldset {
margin: 0;
color: #909090;
margin-top: 5px;
}
#search td.label {
min-width: 0;
}
div.vsplitter {
float: left;
width: 10px;
min-height: 400px;
}
/**** Common classes ****/
.nowrap {
white-space: nowrap;
}
.clear {
clear: both;
}
.watermark {
padding-top: 40px;
text-align: center;
width: 100%;
}
.link {
cursor: pointer;
}
.icon {
width: 16px;
height: 16px;
}
input.inactive {
color: #d0d0d0;
}
.formtitle {
color: #ff9900;
font-size: 18px;
font-weight: bold;
margin-left: 5px;
}
.formbuttons {
text-align: center;
white-space: nowrap;
}
.formbuttons input {
margin: 5px;
}
.listnav {
width: 100%;
text-align: right;
}
.listnav a {
float: left;
display: block;
width: 16px;
height: 16px;
background: url(images/arrow_left.png) center no-repeat;
}
.listnav a.next {
background: url(images/arrow_right.png) center no-repeat;
}
.listnav a.disabled {
opacity: .3;
cursor: default;
}
.listnav span span {
float: left;
display: block;
height: 14px;
padding: 1px 5px;
}
.disabled,
.readonly,
.select.readonly option {
color: #a0a0a0;
}
input.disabled,
input.readonly,
select.disabled,
select.readonly,
textarea.disabled,
textarea.readonly {
background-color: #f5f5f5;
color: #a0a0a0;
}
input.maxsize {
width: 368px; /* span.listarea width - 2px */
}
pre.debug {
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: white;
padding: 2px;
width: 500px;
height: 200px;
margin: 0;
overflow: auto;
}
.popup {
display: none;
position: absolute;
border: 1px solid #d0d0d0;
border-radius: 3px;
box-shadow: 0 2px 6px 0 #d0d0d0;
-moz-box-shadow: 0 2px 6px 0 #d0d0d0;
-webkit-box-shadow: 0 2px 6px 0 #d0d0d0;
-o-box-shadow: 0 2px 6px 0 #d0d0d0;
background-color: #f0f0f0;
}
a.button {
display: inline-block;
width: 18px;
height: 18px;
background: url(images/buttons.png) 0 0 no-repeat;
}
a.button.edit {
background-position: -81px 0;
}
a.button.add {
background-position: -41px 0;
}
a.button.delete {
background-position: -1px 0;
}
.popup ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.popup ul li {
padding: 2px 4px;
min-width: 100px;
cursor: default;
}
.popup ul li a {
width: 100%;
cursor: default;
display: block;
}
.popup ul li:hover {
background-color: #d6efff;
}
/********* Form smart inputs *********/
span.listarea {
display: block;
width: 370px;
max-height: 209px;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
padding: 0;
background-color: white;
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-align: left;
text-shadow: none;
color: black;
}
span.listelement {
display: block;
padding: 0;
margin: 0;
height: 18px;
overflow: hidden;
border-top: 1px solid #d0d0d0;
white-space: nowrap;
}
span.listelement:first-child {
border: none;
}
span.listelement input {
border: none;
background-color: transparent;
padding-left: 2px;
width: 328px;
height: 16px;
}
span.listarea.disabled span.listelement input,
span.listarea.readonly span.listelement input {
width: 370px;
}
span.listelement input:focus {
outline: none;
}
span.listelement span.actions {
float: left;
padding: 1px 0;
margin-left: -1px;
margin-top: -1px;
height: 18px;
width: 37px;
border: 1px solid #d0d0d0;
background-color: #f0f0f0;
cursor: pointer;
}
span.listelement span.actions span {
display: block;
float: left;
width: 18px;
height: 18px;
background: url(images/buttons.png) 0 0 no-repeat;
}
span.listelement span.actions span:hover {
background-color: white;
}
span.listelement span.actions span.reset {
background-position: -1px -1px;
border-left: 1px solid #e0e0e0;
}
span.listelement span.actions span.add {
background-position: -41px -2px;
}
span.listelement span.actions span.search {
background-position: -61px -1px;
cursor: default;
}
span.listarea.disabled,
span.listarea.readonly {
background-color: #f5f5f5;
}
input.disabled,
input.readonly,
span.listarea.disabled span.listelement input,
span.listarea.readonly span.listelement input {
color: #a0a0a0;
cursor: default;
}
span.listarea.autocomplete span.listelement input {
color: #514949;
}
span.listarea.autocomplete span.listelement input.autocomplete {
color: black;
}
.autocomplete > span.listelement input {
width: 346px;
}
.autocomplete > span.listelement span.actions {
width: 18px;
}
.autocomplete > span.listelement span.actions span.reset {
border-left: none;
}
.autocomplete > span.listelement span.actions span.search:hover {
background-color: #f0f0f0;
}
span.listarea.select {
width: 200px;
}
span.listarea.select > span.listelement input {
width: 180px;
}
span.listcontent {
display: block;
padding: 0;
margin: 0;
overflow: hidden;
max-height: 94px;
overflow-x: hidden;
overflow-y: auto;
border-top: 1px solid #d0d0d0;
background-color: #f5f5f5;
cursor: default;
}
span.listcontent span.listelement {
padding-left: 3px;
}
span.listcontent span.listelement:hover {
background-color: #d6efff;
}
span.listcontent span.listelement.selected {
background-color: #d6efff;
}
span.form_error {
color: #FF0000;
font-weight: bold;
font-size: 90%;
padding-left: 5px;
}
/***** autocomplete list *****/
#autocompletepane
{
background-color: white;
border: 1px solid #d0d0d0;
min-width: 351px;
}
#autocompletepane ul
{
margin: 0px;
padding: 2px;
list-style-image: none;
list-style-type: none;
}
#autocompletepane ul li
{
display: block;
height: 16px;
font-size: 11px;
padding-left: 6px;
padding-top: 2px;
padding-right: 6px;
white-space: nowrap;
cursor: pointer;
}
#autocompletepane ul li.selected
{
background-color: #d6efff;
}
/***** tabbed interface elements *****/
div.tabsbar
{
height: 22px;
border-bottom: 1px solid #d0d0d0;
white-space: nowrap;
margin: 10px 5px 0 5px;
}
span.tablink,
span.tablink-selected
{
float: left;
height: 23px !important;
height: 22px;
overflow: hidden;
background: url(images/tabs-left.gif) top left no-repeat;
font-weight: bold;
}
span.tablink
{
cursor: pointer;
text-shadow: white 1px 1px;
}
span.tablink-selected
{
cursor: default;
background-position: 0px -23px;
}
span.tablink a,
span.tablink-selected a
{
display: inline-block;
padding: 4px 10px 0 5px;
margin-left: 5px;
height: 23px;
color: #808080;
max-width: 185px;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
background: url(images/tabs-right.gif) top right no-repeat;
outline: none;
}
span.tablink-selected a
{
cursor: inherit;
color: #514949;
background-position: right -23px;
}
fieldset.tabbed
{
margin-top: 0;
padding-top: 12px;
border-top: none;
}
/**** Login form elements ****/
#login_form {
margin: auto;
margin-top: 75px;
padding: 20px;
width: 330px;
background-color: #e0e0e0;
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-align: center;
}
#login_form span {
display: block;
line-height: 24px;
width: 330px;
text-align: left;
}
#login_form label {
display: block;
width: 80px;
text-align: right;
float: left;
margin-right: 10px;
}
#login_form select,
#login_form input[type="text"],
#login_form input[type="password"] {
width: 210px;
}
#login_submit {
margin-top: 5px;
}
/**** Main screen elements ****/
#main {
padding: 5px 30px;
}
#reqtime {
white-space: nowrap;
vertical-align: top;
}
+/***** tree indicators *****/
+
+td span.branch span
+{
+ float: left;
+ height: 16px;
+}
+
+td span.branch span.tree
+{
+ height: 17px;
+ width: 15px;
+ background: url(images/tree.gif) 0 0 no-repeat;
+}
+
+td span.branch span.l1
+{
+ background-position: 0px 0px; /* L */
+}
+
+td span.branch span.l2
+{
+ background-position: -30px 0px; /* | */
+}
+
+td span.branch span.l3
+{
+ background-position: -15px 0px; /* |- */
+}
+
/**** File manager elements ****/
#taskcontent {
position: absolute;
left: 310px;
right: 10px;
bottom: 10px;
top: 10px;
background-color: #f0f0f0;
border: 1px solid #d0d0d0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
overflow-y: auto;
}
#actionbar {
position: absolute;
width: 82px;
top: 10px;
bottom: 10px;
overflow: hidden;
}
#actionbar a {
display: block;
width: 80px;
height: 55px;
border: 1px solid #d0d0d0;
border-spacing: 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #f0f0f0;
margin-bottom: 6px;
cursor: pointer;
color: #333;
}
#actionbar a span {
display: block;
position: absolute;
width: 100%;
text-align: center;
padding-top: 40px;
font-size: 9px;
}
#folder-create-button {
background: url(images/folder_new.png) center 6px no-repeat;
}
#file-create-button {
background: url(images/file_new.png) center 6px no-repeat;
}
#file-upload-button {
background: url(images/file_new.png) center 6px no-repeat;
}
#search-button {
background: url(images/search.png) center 6px no-repeat;
}
#folderlist {
position: absolute;
width: 200px;
top: 10px;
bottom: 10px;
left: 98px;
border: 1px solid #d0d0d0;
- border-spacing: 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #f0f0f0;
padding: 2px;
}
#folderlist table,
#filelist table {
width: 100%;
+ border-spacing: 0;
}
#filelist td {
white-space: nowrap;
cursor: default;
}
#filelist td.filename {
width: 98%;
height: 20px;
- padding: 1px 4px;
+ padding: 0 4px;
}
#filelist td.filesize {
text-align: right;
}
#filelist tbody td.filename span {
background: url(images/mimetypes/unknown.png) 0 0 no-repeat;
padding: 0 0 0 20px;
height: 16px;
cursor: pointer;
}
#filelist tbody td.filename span input {
padding: 0 2px;
+ height: 18px;
}
#folderlist td span.name {
background: url(images/folder.png) 0 0 no-repeat;
- height: 20px;
+ height: 18px;
padding-left: 20px;
+ margin-left: 3px;
cursor: pointer;
}
#folderlist tr.selected td span.name {
font-weight: bold;
}
+
+#folderlist tr.virtual td span.name {
+ color: #bbb;
+ cursor: default;
+}

File Metadata

Mime Type
text/x-diff
Expires
Sun, Jun 8, 2:21 PM (19 h, 14 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
196698
Default Alt Text
(52 KB)

Event Timeline