lib/kolab_form.php public_html/js public_html/skins
Aleksander Machniak
machniak at kolabsys.com
Wed Mar 21 15:54:48 CET 2012
lib/kolab_form.php | 2
public_html/js/kolab_admin.js | 232 +++++++++++++++++++++++++++++++++++++++-
public_html/skins/default/ui.js | 214 ------------------------------------
3 files changed, 228 insertions(+), 220 deletions(-)
New commits:
commit 8feaede27eeb8a8e33d681c49a93944f3485f231
Author: Aleksander Machniak <alec at alec.pl>
Date: Wed Mar 21 15:53:58 2012 +0100
Move form widgets into main application script
diff --git a/lib/kolab_form.php b/lib/kolab_form.php
index 850ca8f..7656e75 100644
--- a/lib/kolab_form.php
+++ b/lib/kolab_form.php
@@ -202,7 +202,7 @@ class kolab_form
}
// Add event trigger, so UI can rebuild the form e.g. adding tabs
- $content .= kolab_html::script('kadm.trigger_event(\'form-load\', \'' . $this->attribs['id'] . '\')');
+ $content .= kolab_html::script('kadm.form_init(\'' . $this->attribs['id'] . '\')');
return $content;
}
diff --git a/public_html/js/kolab_admin.js b/public_html/js/kolab_admin.js
index 63189a7..ad2f6bc 100644
--- a/public_html/js/kolab_admin.js
+++ b/public_html/js/kolab_admin.js
@@ -668,6 +668,226 @@ function kolab_admin()
/*********************************************************/
+ /********* Forms widgets *********/
+ /*********************************************************/
+
+ // Form initialization
+ this.form_init = function(id)
+ {
+ var form = $('#'+id);
+
+ this.trigger_event('form-load', id);
+
+ // replace some textarea fields with pretty/smart input lists
+ $('textarea[data-type="list"]', form)
+ .each(function() { kadm.form_element_wrapper(this); });
+ };
+
+ // Form serialization
+ this.form_serialize = function(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, v, value = [],
+ re = RegExp('^' + RegExp.escape(this.name) + '\[[0-9-]+\]$');
+
+ for (i in data.json) {
+ if (i.match(re)) {
+ if (v = $('input[name="'+i+'"]', form).val())
+ value.push(v);
+ delete data.json[i];
+ }
+ }
+
+ // autocompletion lists data is stored in env variable
+ if (kadm.env.assoc_fields[this.name]) {
+ value = [];
+ for (i in kadm.env.assoc_fields[this.name])
+ value.push(i);
+ }
+
+ data.json[this.name] = value;
+ });
+
+ return data;
+ };
+
+ // Form element update handler
+ this.form_element_update = function(data)
+ {
+ var elem = $('[name="'+data.name+'"]');
+
+ if (!elem.length)
+ return;
+
+ if (elem.attr('data-type') == 'list') {
+ // remove old wrapper
+ $('span[class="listarea"]', elem.parent()).remove();
+ // insert new list element
+ this.form_element_wrapper(elem.get(0));
+ }
+ };
+
+ // Replaces form element with smart element
+ this.form_element_wrapper = function(form_element)
+ {
+ var i, j = 0, len, elem, e = $(form_element),
+ list = this.env.assoc_fields[form_element.name],
+ disabled = e.attr('disabled') || e.attr('readonly'),
+ autocomplete = e.attr('data-autocomplete'),
+ maxlength = e.attr('data-maxlength'),
+ area = $('<span class="listarea"></span>');
+
+ e.hide();
+
+ // add autocompletion input
+ if (!disabled && autocomplete) {
+ elem = this.form_list_element(form_element.form, {
+ maxlength: maxlength,
+ autocomplete: autocomplete,
+ element: e
+ }, -1);
+
+ elem.appendTo(area);
+ this.ac_init(elem, {attribute: form_element.name, oninsert: this.form_element_oninsert});
+ }
+
+ if (!list) {
+ if (form_element.value)
+ list = $.extend({}, form_element.value.split("\n"));
+ else if (!autocomplete)
+ list = {0: ''};
+ }
+
+ // add input rows
+ for (i in list) {
+ elem = this.form_list_element(form_element.form, {
+ value: list[i],
+ key: i,
+ disabled: disabled,
+ maxlength: maxlength,
+ autocomplete: autocomplete,
+ element: e
+ }, j++);
+
+ elem.appendTo(area);
+ }
+
+ if (disabled)
+ area.addClass('readonly');
+ if (autocomplete)
+ area.addClass('autocomplete');
+
+ area.appendTo(form_element.parentNode);
+ };
+
+ // Creates smart list element
+ this.form_list_element = function(form, data, idx)
+ {
+ var content, elem, input,
+ key = data.key,
+ orig = data.element
+ ac = data.autocomplete;
+
+ data.name = data.name || orig.attr('name') + '[' + idx + ']';
+ data.disabled = data.disabled || (ac && idx >= 0);
+ data.readonly = data.readonly || (ac && idx >= 0);
+
+ // remove internal attributes
+ delete data['element'];
+ delete data['autocomplete'];
+ delete data['key'];
+
+ // build element content
+ content = '<span class="listelement"><span class="actions">'
+ + (!ac ? '<span title="" class="add"></span>' : ac && idx == -1 ? '<span title="" class="search"></span>' : '')
+ + (!ac || idx >= 0 ? '<span title="" class="reset"></span>' : '')
+ + '</span><input></span>';
+
+ elem = $(content);
+ input = $('input', elem);
+
+ // Set INPUT attributes
+ input.attr(data);
+
+ if (data.readonly)
+ input.addClass('readonly');
+
+ if (ac && idx == -1)
+ input.addClass('autocomplete');
+
+ if (data.disabled && !ac)
+ return elem;
+
+ // attach element creation event
+ if (!ac)
+ $('span[class="add"]', elem).click(function() {
+ var dt = (new Date()).getTime(),
+ span = $(this.parentNode.parentNode),
+ name = data.name.replace(/\[[0-9]+\]$/, ''),
+ elem = kadm.form_list_element(form, {name: name}, dt);
+
+ span.after(elem);
+ $('input', elem).focus();
+ kadm.ac_stop();
+ });
+
+ // attach element deletion event
+ if (!ac || idx >= 0)
+ $('span[class="reset"]', elem).click(function() {
+ var span = $(this.parentNode.parentNode),
+ name = data.name.replace(/\[[0-9]+\]$/, ''),
+ l = $('input[name^="' + name + '"]', form),
+ key = $(this).data('key');
+
+ if (ac || l.length > 1)
+ span.remove();
+ else
+ $('input', span).val('').focus();
+
+ // delete key from internal field representation
+ if (key !== undefined && kadm.env.assoc_fields[name])
+ delete kadm.env.assoc_fields[name][key];
+
+ kadm.ac_stop();
+ }).data('key', key);
+
+ return elem;
+ };
+
+ this.form_element_oninsert = function(key, val)
+ {
+ var elem, input = $(this.ac_input).get(0),
+ dt = (new Date()).getTime(),
+ span = $(input.parentNode),
+ name = input.name.replace(/\[-1\]$/, ''),
+ af = kadm.env.assoc_fields;
+
+ // reset autocomplete input
+ input.value = '';
+
+ // check if element doesn't exist on the list already
+ if (!af[name])
+ af[name] = {};
+ if (af[name][key])
+ return;
+
+ // add element
+ elem = kadm.form_list_element(input.form, {
+ name: name,
+ autocomplete: true,
+ value: val
+ }, dt);
+ span.after(elem);
+
+ // update field variable
+ af[name][key] = val;
+ };
+
+
+ /*********************************************************/
/********* Forms *********/
/*********************************************************/
@@ -676,7 +896,7 @@ function kolab_admin()
var i, v, json = {},
form = $(id),
query = form.serializeArray(),
- extra = this.env.extra_fields ? this.env.extra_fields : [];
+ extra = this.env.extra_fields || [];
for (i in query)
json[query[i].name] = query[i].value;
@@ -686,8 +906,8 @@ function kolab_admin()
if (v = $('[name="'+extra[i]+'"]', form).val())
json[extra[i]] = v;
- this.trigger_event('form-serialize', {id: id, json: json});
-
+ this.form_serialize({id: id, json: json});
+/*
// convert values of list elements to array type
$('textarea[data-type="list"]', form).each(function() {
var name = this.name;
@@ -695,7 +915,7 @@ function kolab_admin()
if (!json[name] || !$.isArray(json[name]))
json[name] = $(this).val().split("\n");
});
-
+*/
return json;
};
@@ -735,11 +955,12 @@ function kolab_admin()
for (i in response.result) {
val = response.result[i];
+ // @TODO: indexed list support
if ($.isArray(val))
val = val.join("\n");
$('[name="'+i+'"]').val(val);
- this.trigger_event('form-element-update', {name: i});
+ this.form_element_update({name: i});
}
};
@@ -904,6 +1125,7 @@ RegExp.escape = function(str)
return String(str).replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
};
+// Initialize application object (don't change var name!)
var kadm = new kolab_admin();
// general click handler
diff --git a/public_html/skins/default/ui.js b/public_html/skins/default/ui.js
index 32f5dfc..80be561 100644
--- a/public_html/skins/default/ui.js
+++ b/public_html/skins/default/ui.js
@@ -122,228 +122,14 @@ function show_tab(id, index)
});
}
-/**
- * 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, v, value = [],
- re = RegExp('^' + RegExp.escape(this.name) + '\[[0-9-]+\]$');
-
- for (i in data.json) {
- if (i.match(re)) {
- if (v = $('input[name="'+i+'"]', form).val())
- value.push(v);
- delete data.json[i];
- }
- }
-
- // autocompletion lists data is stored in env variable
- if (kadm.env.assoc_fields[this.name]) {
- value = [];
- for (i in kadm.env.assoc_fields[this.name])
- value.push(i);
- }
-
- data.json[this.name] = value;
- });
-
- return data;
-}
-
-// Form element update handler
-function form_element_update(data)
-{
- var elem = $('[name="'+data.name+'"]');
-
- if (!elem.length)
- return;
-
- if (elem.attr('data-type') == 'list') {
- // remove old wrapper
- $('span[class="listarea"]', elem.parent()).remove();
- // insert new list element
- form_element_wrapper(elem.get(0));
- }
-}
-
-// Form initialization
-function form_init(id)
-{
- var form = $('#'+id);
-
- // replace some textarea fields with pretty/smart input lists
- $('textarea[data-type="list"]', form)
- .each(function() { form_element_wrapper(this); });
-}
-
-// Replaces form element with smart element
-function form_element_wrapper(form_element)
-{
- var i, j = 0, len, elem, e = $(form_element),
- list = kadm.env.assoc_fields[form_element.name],
- disabled = e.attr('disabled') || e.attr('readonly'),
- autocomplete = e.attr('data-autocomplete'),
- maxlength = e.attr('data-maxlength'),
- area = $('<span class="listarea"></span>');
-
- e.hide();
-
- // add autocompletion input
- if (!disabled && autocomplete) {
- elem = form_list_element(form_element.form, {
- maxlength: maxlength,
- autocomplete: autocomplete,
- element: e
- }, -1);
-
- elem.appendTo(area);
- kadm.ac_init(elem, {attribute: form_element.name, oninsert: form_element_insert_func});
- }
-
- if (!list && form_element.value)
- list = $.extend({}, form_element.value.split("\n"));
-
- // add input rows
- for (i in list) {
- elem = form_list_element(form_element.form, {
- value: list[i],
- key: i,
- disabled: disabled,
- maxlength: maxlength,
- autocomplete: autocomplete,
- element: e
- }, j++);
-
- elem.appendTo(area);
- }
-
- if (disabled)
- area.addClass('readonly');
- if (autocomplete)
- area.addClass('autocomplete');
-
- area.appendTo(form_element.parentNode);
-}
-
-// Creates smart list element
-function form_list_element(form, data, idx)
-{
- var content, elem, input,
- key = data.key,
- orig = data.element
- ac = data.autocomplete;
-
- data.name = data.name || orig.attr('name') + '[' + idx + ']';
- data.disabled = data.disabled || (ac && idx >= 0);
- data.readonly = data.readonly || (ac && idx >= 0);
-
- // remove internal attributes
- delete data['element'];
- delete data['autocomplete'];
- delete data['key'];
-
- // build element content
- content = '<span class="listelement"><span class="actions">'
- + (!ac ? '<span title="" class="add"></span>' : ac && idx == -1 ? '<span title="" class="search"></span>' : '')
- + (!ac || idx >= 0 ? '<span title="" class="reset"></span>' : '')
- + '</span><input></span>';
-
- elem = $(content);
- input = $('input', elem);
-
- // Set INPUT attributes
- input.attr(data);
-
- if (data.readonly)
- input.addClass('readonly');
-
- if (ac && idx == -1)
- input.addClass('autocomplete');
-
- if (data.disabled && !ac)
- return elem;
-
- // attach element creation event
- if (!ac)
- $('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();
- kadm.ac_stop();
- });
-
- // attach element deletion event
- if (!ac || idx >= 0)
- $('span[class="reset"]', elem).click(function() {
- var span = $(this.parentNode.parentNode),
- name = data.name.replace(/\[[0-9]+\]$/, ''),
- l = $('input[name^="' + name + '"]', form),
- key = $(this).data('key');
-
- if (ac || l.length > 1)
- span.remove();
- else
- $('input', span).val('').focus();
-
- // delete key from internal field representation
- if (key !== undefined && kadm.env.assoc_fields[name])
- delete kadm.env.assoc_fields[name][key];
-
- kadm.ac_stop();
- }).data('key', key);
-
- return elem;
-}
-
-function form_element_insert_func(key, val)
-{
- var elem, input = $(this.ac_input).get(0),
- dt = (new Date()).getTime(),
- span = $(input.parentNode),
- name = input.name.replace(/\[-1\]$/, '');
-
- // reset autocomplete input
- input.value = '';
-
- // check if element doesn't exist on the list already
- if (kadm.env.assoc_fields[name][key])
- return;
-
- // add element
- elem = form_list_element(input.form, {
- name: name,
- autocomplete: true,
- value: val
- }, dt);
- span.after(elem);
-
- // update field variable
- kadm.env.assoc_fields[name][key] = val;
}
/**
* UI Initialization
*/
kadm.add_event_listener('form-load', form_load);
-kadm.add_event_listener('form-serialize', form_serialize);
-kadm.add_event_listener('form-element-update', form_element_update);
More information about the commits
mailing list