summaryrefslogtreecommitdiff
path: root/public_html
diff options
context:
space:
mode:
authorAleksander Machniak <alec@alec.pl>2012-02-16 14:39:32 (GMT)
committerAleksander Machniak <alec@alec.pl>2012-02-16 14:39:32 (GMT)
commit4a13324b0700b726d45e0fe7c5ebb422b7ba260e (patch)
treeb133dc86dafceb8ee4c4f7f8151d4687c9c76652 /public_html
parent35c5e66a31e20081becd9c949d3d9ed9b5b325a5 (diff)
downloadkolab-wap-4a13324b0700b726d45e0fe7c5ebb422b7ba260e.tar.gz
Added smart form elements
Diffstat (limited to 'public_html')
-rw-r--r--public_html/api/index.php2
-rw-r--r--public_html/js/kolab_admin.js7
-rw-r--r--public_html/skins/default/images/buttons.pngbin713 -> 831 bytes
-rw-r--r--public_html/skins/default/style.css72
-rw-r--r--public_html/skins/default/ui.js96
5 files changed, 170 insertions, 7 deletions
diff --git a/public_html/api/index.php b/public_html/api/index.php
index 0760e9e..af7e474 100644
--- a/public_html/api/index.php
+++ b/public_html/api/index.php
@@ -9,7 +9,7 @@ try {
$postdata = $_SERVER['REQUEST_METHOD'] == 'POST' ? file_get_contents('php://input') : null;
$controller->dispatch($postdata);
} catch(Exception $e) {
- error_log($e->getMessage());
+ error_log('API Error: ' . $e->getMessage());
$controller->output->error($e->getMessage(), $e->getCode());
}
diff --git a/public_html/js/kolab_admin.js b/public_html/js/kolab_admin.js
index 46d3dc9..a024047 100644
--- a/public_html/js/kolab_admin.js
+++ b/public_html/js/kolab_admin.js
@@ -396,7 +396,9 @@ function kolab_admin()
for (i in query)
json[query[i].name] = query[i].value;
- return json;
+ this.trigger_event('form-serialize', {id: id, json: json});
+
+ return i.json;
};
/*********************************************************/
@@ -432,7 +434,8 @@ function kolab_admin()
this.user_save = function(props)
{
- this.api_post('user.add', {}, 'user_save_response');
+ var data = this.serialize_form('#'+props);
+ this.api_post('user.add', data, 'user_save_response');
};
this.user_save_response = function(response)
diff --git a/public_html/skins/default/images/buttons.png b/public_html/skins/default/images/buttons.png
index 5cf64e5..0492d09 100644
--- a/public_html/skins/default/images/buttons.png
+++ b/public_html/skins/default/images/buttons.png
Binary files differ
diff --git a/public_html/skins/default/style.css b/public_html/skins/default/style.css
index 83a2343..74c64a4 100644
--- a/public_html/skins/default/style.css
+++ b/public_html/skins/default/style.css
@@ -483,6 +483,78 @@ textarea.readonly {
}
+/********* Form smart inputs *********/
+
+span.listarea {
+ display: block;
+ width: 370px;
+ margin: 0 0 1px;
+ padding: 0;
+ background-color: white;
+ border: 1px solid #d0d0d0;
+ border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
+span.listelement {
+ display: block;
+ padding: 0;
+ margin: 0;
+ height: 20px;
+ overflow: hidden;
+ border-top: 1px solid #d0d0d0;
+}
+
+span.listelement:first-child {
+ border: none;
+}
+
+span.listelement input {
+ border: none;
+ background-color: white;
+ margin-left: 2px;
+ width: 325px;
+}
+
+span.listelement input:focus {
+ outline: none;
+}
+
+span.listelement span.actions {
+ float: left;
+ padding: 1px;
+ 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 0;
+ border-left: 1px solid #e0e0e0;
+}
+
+span.listelement span.actions span.add {
+ background-position: -43px 0;
+}
+
+
/***** tabbed interface elements *****/
div.tabsbar
diff --git a/public_html/skins/default/ui.js b/public_html/skins/default/ui.js
index cfe0562..ff16952 100644
--- a/public_html/skins/default/ui.js
+++ b/public_html/skins/default/ui.js
@@ -92,13 +92,101 @@ function show_tab(id, index)
});
}
-function form_loaded(data)
+/**
+ * HTML form events handlers
+ */
+
+// Form "onload" handler
+function form_load(id)
+{
+ if (id != 'search-form')
+ init_tabs(id);
+
+ form_init(id);
+}
+
+// Form "onserialize" handler
+function form_serialize(data)
+{
+ var form = $(data.id);
+
+ // replace some textarea fields with pretty/smart input lists
+ $('textarea[data-type="list"]', form).not(':disabled')
+ .each(function() {
+ var i, value = [], re = RegExp('^' + this.name + '\[[0-9]+\]$');
+
+ for (i in data.json) {
+ if (i.match(re)) {
+ if (i.value)
+ value.push(i.value);
+ delete data.json[i];
+ }
+ }
+
+ data.json[this.name] = value.join("\n");
+ });
+
+ return data;
+}
+
+// Form initialization
+function form_init(id)
{
- if (data != 'search-form')
- init_tabs(data);
+ var form = $('#'+id), separator = /[,\s\r\n]+/;
+
+ // replace some textarea fields with pretty/smart input lists
+ $('textarea[data-type="list"]', form).not(':disabled')
+ .each(function() {
+ var i, len, elem, e = $(this),
+ list = this.value.split(separator),
+ area = $('<span class="listarea">');
+
+ e.hide();
+ for (i=0, len=list.length; i<len; i++) {
+ elem = form_list_element(form, {name: this.name+'['+i+']', value: list[i]});
+ elem.appendTo(area);
+ }
+ area.appendTo(this.parentNode);
+ });
+}
+
+// Creates smart list element
+function form_list_element(form, data)
+{
+ var elem = $('<span class="listelement"><span class="actions">'
+ + '<span title="" class="add"></span><span title="" class="reset"></span>'
+ + '</span><input></span>');
+
+ $('input', elem).attr({name: data.name, value: data.value});
+
+ // attach element creation event
+ $('span[class="add"]', elem).click(function() {
+ var dt = (new Date()).getTime(),
+ span = $(this.parentNode.parentNode),
+ name = data.name.replace(/\[[0-9]+\]$/, ''),
+ elem = form_list_element(form, {name: name+'['+dt+']'});
+
+ span.after(elem);
+ $('input', elem).focus();
+ });
+
+ // attach element deletion event
+ $('span[class="reset"]', elem).click(function() {
+ var l, span = $(this.parentNode.parentNode),
+ name = data.name.replace(/\[[0-9]+\]$/, ''),
+ l = $('input[name^="' + name + '"]', form);
+
+ if (l.length > 1)
+ span.remove();
+ else
+ $('input', span).val('').focus();
+ });
+
+ return elem;
}
/**
* UI Initialization
*/
-kadm.add_event_listener('form-loaded', form_loaded);
+kadm.add_event_listener('form-load', form_load);
+kadm.add_event_listener('form-serialize', form_serialize);