You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2013/07/24 23:27:39 UTC
[1/2] git commit: updated refs/heads/master to 7c5b484
Updated Branches:
refs/heads/4.2 42346cdf4 -> 7ce17fa3b
refs/heads/master e14f5d0ae -> 7c5b48425
CLOUDSTACK-3560: UI createForm: Support multiple dependsOn targets
Support passing list of dependsOn targets for form fields. This will
trigger a change if any items specified in list are changed.
Example:
fieldA: {...},
fieldB: {...},
fieldC: { dependsOn: ['fieldA', 'fieldB'] }
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/7c5b4842
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/7c5b4842
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/7c5b4842
Branch: refs/heads/master
Commit: 7c5b48425f2d01439331c0426731815dbaebb047
Parents: e14f5d0
Author: Brian Federle <br...@citrix.com>
Authored: Mon Jul 22 11:53:16 2013 -0700
Committer: Brian Federle <br...@citrix.com>
Committed: Wed Jul 24 14:25:31 2013 -0700
----------------------------------------------------------------------
ui/scripts/ui/dialog.js | 148 +++++++++++++++++++++++++------------------
1 file changed, 85 insertions(+), 63 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/7c5b4842/ui/scripts/ui/dialog.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index eb7e7b2..1ff5401 100644
--- a/ui/scripts/ui/dialog.js
+++ b/ui/scripts/ui/dialog.js
@@ -37,18 +37,21 @@
*/
createForm: function(args) {
var $formContainer = $('<div>').addClass('form-container');
- var $message = $('<span>').addClass('message').appendTo($formContainer).html(
- _l(args.form.desc)
- );
var $form = $('<form>').appendTo($formContainer)
- .submit(function() {
- $(this).closest('.ui-dialog').find('button.ok').click();
-
- return false;
- });
+ .submit(function() {
+ $(this).closest('.ui-dialog').find('button.ok').click();
+ return false;
+ });
var createLabel = _l(args.form.createLabel);
- var $submit = $('<input>')
+
+ // Description text
+ $('<span>').addClass('message').prependTo($formContainer).html(
+ _l(args.form.desc)
+ );
+
+ // Submit button
+ $('<input>')
.attr({
type: 'submit'
})
@@ -58,7 +61,7 @@
// Render fields and events
var fields = $.map(args.form.fields, function(value, key) {
return key;
- })
+ });
var ret = function() {
$('.overlay').remove();
@@ -127,10 +130,10 @@
var field = args.form.fields[key];
var $formItem = $('<div>')
- .addClass('form-item')
- .attr({
- rel: key
- });
+ .addClass('form-item')
+ .attr({
+ rel: key
+ });
if (field.isHidden != null) {
if (typeof(field.isHidden) == 'boolean' && field.isHidden == true)
@@ -143,31 +146,31 @@
//Handling Escape KeyPress events
/* $('.ui-dialog').keypress(function(event) {
- if ( event.which == 27 ) {
- event.stopPropagation();
- }
- });
-
- $(document).ready(function(){
- $('.ui-dialog').keydown(function(event) {
- if(event.keyCode == 27)
- {
- alert("you pressed the Escape key");
- event.preventdefault();
- }
- })
- });
-
- $(':ui-dialog').dialog({
- closeOnEscape: false
- }); */
+ if ( event.which == 27 ) {
+ event.stopPropagation();
+ }
+ });
+
+ $(document).ready(function(){
+ $('.ui-dialog').keydown(function(event) {
+ if(event.keyCode == 27)
+ {
+ alert("you pressed the Escape key");
+ event.preventdefault();
+ }
+ })
+ });
+
+ $(':ui-dialog').dialog({
+ closeOnEscape: false
+ }); */
// Label field
var $name = $('<div>').addClass('name')
- .appendTo($formItem)
- .append(
- $('<label>').html(_l(field.label) + ':')
- );
+ .appendTo($formItem)
+ .append(
+ $('<label>').html(_l(field.label) + ':')
+ );
// red asterisk
var $astersikSpan = $('<span>').addClass('field-required').html('*');
@@ -186,7 +189,7 @@
// Input area
var $value = $('<div>').addClass('value')
- .appendTo($formItem);
+ .appendTo($formItem);
var $input, $dependsOn, selectFn, selectArgs;
var dependsOn = field.dependsOn;
@@ -194,7 +197,9 @@
if (field.dependsOn) {
$formItem.attr('depends-on', dependsOn);
$dependsOn = $form.find('input, select').filter(function() {
- return $(this).attr('name') === dependsOn;
+ return $.isArray(dependsOn) ?
+ $.inArray($(this).attr('name'), dependsOn) > -1 :
+ $(this).attr('name') === dependsOn;
});
if ($dependsOn.is('[type=checkbox]')) {
@@ -214,7 +219,7 @@
}
});
} else if (($target.is(':unchecked') && !isReverse) ||
- ($target.is(':checked') && isReverse)) {
+ ($target.is(':checked') && isReverse)) {
$dependent.hide();
}
@@ -253,9 +258,9 @@
description = this.description;
var $option = $('<option>')
- .appendTo($input)
- .val(_s(id))
- .html(_s(description));
+ .appendTo($input)
+ .val(_s(id))
+ .html(_s(description));
});
if (field.defaultValue) {
@@ -290,25 +295,42 @@
if (dependsOn) {
$dependsOn = $input.closest('form').find('input, select').filter(function() {
- return $(this).attr('name') === dependsOn;
+ return $.isArray(dependsOn) ?
+ $.inArray($(this).attr('name'), dependsOn) > -1 :
+ $(this).attr('name') === dependsOn;
});
- $dependsOn.bind('change', function(event) {
- var $target = $(this);
+ // Reload selects linked to in dependsOn
+ $dependsOn.each(function() {
+ var $targetDependsOn = $(this);
- if (!$dependsOn.is('select')) return true;
+ $targetDependsOn.bind('change', function(event) {
+ var formData = cloudStack.serializeForm($form);
+ var dependsOnLoaded;
- var dependsOnArgs = {};
+ // Make sure all data is loaded to pass to select fn
+ dependsOnLoaded = $.inArray(
+ true, $dependsOn.map(function(index, item) { return $(item).find('option').size() ? true : false; })
+ ) > -1;
- $input.find('option').remove();
+ if (!dependsOnLoaded) {
+ return false;
+ }
- if (!$target.children().size()) return true;
+ var $target = $(this);
- dependsOnArgs[dependsOn] = $target.val();
+ if (!$target.is('select')) {
+ return true;
+ }
- selectFn($.extend(selectArgs, dependsOnArgs));
+ $input.find('option').remove();
- return true;
+ // Re-execute select
+ selectFn($.extend(selectArgs, formData, {
+ data: formData
+ }));
+ return true;
+ });
});
if (!$dependsOn.is('select')) {
@@ -325,17 +347,17 @@
$.each(field.multiArray, function(itemKey, itemValue) {
$input.append(
$('<div>').addClass('item')
- .append(
- $.merge(
- $('<div>').addClass('name').html(_l(itemValue.label)),
- $('<div>').addClass('value').append(
- $('<input>').attr({
- name: itemKey,
- type: 'checkbox'
- }).appendTo($value)
+ .append(
+ $.merge(
+ $('<div>').addClass('name').html(_l(itemValue.label)),
+ $('<div>').addClass('value').append(
+ $('<input>').attr({
+ name: itemKey,
+ type: 'checkbox'
+ }).appendTo($value)
+ )
)
)
- )
);
});
@@ -479,8 +501,8 @@
/* $input.blur(function() {
- console.log('tooltip remove->' + $input.attr('name'));
- });*/
+ console.log('tooltip remove->' + $input.attr('name'));
+ });*/
});
[2/2] git commit: updated refs/heads/4.2 to 7ce17fa
Posted by bf...@apache.org.
CLOUDSTACK-3560: UI createForm: Support multiple dependsOn targets
Support passing list of dependsOn targets for form fields. This will
trigger a change if any items specified in list are changed.
Example:
fieldA: {...},
fieldB: {...},
fieldC: { dependsOn: ['fieldA', 'fieldB'] }
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/7ce17fa3
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/7ce17fa3
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/7ce17fa3
Branch: refs/heads/4.2
Commit: 7ce17fa3b8cd8fb4e424e001d159a66dc31d9491
Parents: 42346cd
Author: Brian Federle <br...@citrix.com>
Authored: Mon Jul 22 11:53:16 2013 -0700
Committer: Brian Federle <br...@citrix.com>
Committed: Wed Jul 24 14:25:40 2013 -0700
----------------------------------------------------------------------
ui/scripts/ui/dialog.js | 148 +++++++++++++++++++++++++------------------
1 file changed, 85 insertions(+), 63 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/7ce17fa3/ui/scripts/ui/dialog.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index eb7e7b2..1ff5401 100644
--- a/ui/scripts/ui/dialog.js
+++ b/ui/scripts/ui/dialog.js
@@ -37,18 +37,21 @@
*/
createForm: function(args) {
var $formContainer = $('<div>').addClass('form-container');
- var $message = $('<span>').addClass('message').appendTo($formContainer).html(
- _l(args.form.desc)
- );
var $form = $('<form>').appendTo($formContainer)
- .submit(function() {
- $(this).closest('.ui-dialog').find('button.ok').click();
-
- return false;
- });
+ .submit(function() {
+ $(this).closest('.ui-dialog').find('button.ok').click();
+ return false;
+ });
var createLabel = _l(args.form.createLabel);
- var $submit = $('<input>')
+
+ // Description text
+ $('<span>').addClass('message').prependTo($formContainer).html(
+ _l(args.form.desc)
+ );
+
+ // Submit button
+ $('<input>')
.attr({
type: 'submit'
})
@@ -58,7 +61,7 @@
// Render fields and events
var fields = $.map(args.form.fields, function(value, key) {
return key;
- })
+ });
var ret = function() {
$('.overlay').remove();
@@ -127,10 +130,10 @@
var field = args.form.fields[key];
var $formItem = $('<div>')
- .addClass('form-item')
- .attr({
- rel: key
- });
+ .addClass('form-item')
+ .attr({
+ rel: key
+ });
if (field.isHidden != null) {
if (typeof(field.isHidden) == 'boolean' && field.isHidden == true)
@@ -143,31 +146,31 @@
//Handling Escape KeyPress events
/* $('.ui-dialog').keypress(function(event) {
- if ( event.which == 27 ) {
- event.stopPropagation();
- }
- });
-
- $(document).ready(function(){
- $('.ui-dialog').keydown(function(event) {
- if(event.keyCode == 27)
- {
- alert("you pressed the Escape key");
- event.preventdefault();
- }
- })
- });
-
- $(':ui-dialog').dialog({
- closeOnEscape: false
- }); */
+ if ( event.which == 27 ) {
+ event.stopPropagation();
+ }
+ });
+
+ $(document).ready(function(){
+ $('.ui-dialog').keydown(function(event) {
+ if(event.keyCode == 27)
+ {
+ alert("you pressed the Escape key");
+ event.preventdefault();
+ }
+ })
+ });
+
+ $(':ui-dialog').dialog({
+ closeOnEscape: false
+ }); */
// Label field
var $name = $('<div>').addClass('name')
- .appendTo($formItem)
- .append(
- $('<label>').html(_l(field.label) + ':')
- );
+ .appendTo($formItem)
+ .append(
+ $('<label>').html(_l(field.label) + ':')
+ );
// red asterisk
var $astersikSpan = $('<span>').addClass('field-required').html('*');
@@ -186,7 +189,7 @@
// Input area
var $value = $('<div>').addClass('value')
- .appendTo($formItem);
+ .appendTo($formItem);
var $input, $dependsOn, selectFn, selectArgs;
var dependsOn = field.dependsOn;
@@ -194,7 +197,9 @@
if (field.dependsOn) {
$formItem.attr('depends-on', dependsOn);
$dependsOn = $form.find('input, select').filter(function() {
- return $(this).attr('name') === dependsOn;
+ return $.isArray(dependsOn) ?
+ $.inArray($(this).attr('name'), dependsOn) > -1 :
+ $(this).attr('name') === dependsOn;
});
if ($dependsOn.is('[type=checkbox]')) {
@@ -214,7 +219,7 @@
}
});
} else if (($target.is(':unchecked') && !isReverse) ||
- ($target.is(':checked') && isReverse)) {
+ ($target.is(':checked') && isReverse)) {
$dependent.hide();
}
@@ -253,9 +258,9 @@
description = this.description;
var $option = $('<option>')
- .appendTo($input)
- .val(_s(id))
- .html(_s(description));
+ .appendTo($input)
+ .val(_s(id))
+ .html(_s(description));
});
if (field.defaultValue) {
@@ -290,25 +295,42 @@
if (dependsOn) {
$dependsOn = $input.closest('form').find('input, select').filter(function() {
- return $(this).attr('name') === dependsOn;
+ return $.isArray(dependsOn) ?
+ $.inArray($(this).attr('name'), dependsOn) > -1 :
+ $(this).attr('name') === dependsOn;
});
- $dependsOn.bind('change', function(event) {
- var $target = $(this);
+ // Reload selects linked to in dependsOn
+ $dependsOn.each(function() {
+ var $targetDependsOn = $(this);
- if (!$dependsOn.is('select')) return true;
+ $targetDependsOn.bind('change', function(event) {
+ var formData = cloudStack.serializeForm($form);
+ var dependsOnLoaded;
- var dependsOnArgs = {};
+ // Make sure all data is loaded to pass to select fn
+ dependsOnLoaded = $.inArray(
+ true, $dependsOn.map(function(index, item) { return $(item).find('option').size() ? true : false; })
+ ) > -1;
- $input.find('option').remove();
+ if (!dependsOnLoaded) {
+ return false;
+ }
- if (!$target.children().size()) return true;
+ var $target = $(this);
- dependsOnArgs[dependsOn] = $target.val();
+ if (!$target.is('select')) {
+ return true;
+ }
- selectFn($.extend(selectArgs, dependsOnArgs));
+ $input.find('option').remove();
- return true;
+ // Re-execute select
+ selectFn($.extend(selectArgs, formData, {
+ data: formData
+ }));
+ return true;
+ });
});
if (!$dependsOn.is('select')) {
@@ -325,17 +347,17 @@
$.each(field.multiArray, function(itemKey, itemValue) {
$input.append(
$('<div>').addClass('item')
- .append(
- $.merge(
- $('<div>').addClass('name').html(_l(itemValue.label)),
- $('<div>').addClass('value').append(
- $('<input>').attr({
- name: itemKey,
- type: 'checkbox'
- }).appendTo($value)
+ .append(
+ $.merge(
+ $('<div>').addClass('name').html(_l(itemValue.label)),
+ $('<div>').addClass('value').append(
+ $('<input>').attr({
+ name: itemKey,
+ type: 'checkbox'
+ }).appendTo($value)
+ )
)
)
- )
);
});
@@ -479,8 +501,8 @@
/* $input.blur(function() {
- console.log('tooltip remove->' + $input.attr('name'));
- });*/
+ console.log('tooltip remove->' + $input.attr('name'));
+ });*/
});