Permalink
Browse files

Per discussion: removed 'Add...' link from default template for Repea…

…t, added link and button to example instead.

Possibility to remove() item by index
Updated package.xml

git-svn-id: http://svn.php.net/repository/pear/packages/HTML_QuickForm2/trunk@325202 c90b9560-bf6c-de11-be94-00142212c4b1
  • Loading branch information...
1 parent a841e5c commit 1becb5ed071b8954cf7a77d123f0dfa669026305 @sad-spirit sad-spirit committed Apr 15, 2012
@@ -113,7 +113,7 @@ class HTML_QuickForm2_Renderer_Default extends HTML_QuickForm2_Renderer
),
'html_quickform2_element' => '<div class="row"><p class="label"><qf:required><span class="required">*</span></qf:required><qf:label><label for="{id}">{label}</label></qf:label></p><div class="element<qf:error> error</qf:error>"><qf:error><span class="error">{error}<br /></span></qf:error>{element}</div></div>',
'html_quickform2_container_group' => '<div class="row {class}"><p class="label"><qf:required><span class="required">*</span></qf:required><qf:label><label>{label}</label></qf:label></p><div class="element group<qf:error> error</qf:error>" id="{id}"><qf:error><span class="error">{error}<br /></span></qf:error>{content}</div></div>',
- 'html_quickform2_container_repeat' => '<div class="row repeat" id="{id}"><qf:label><p>{label}</p></qf:label>{content}<br /><a href="#" class="repeatAdd">Add...</a></div>'
+ 'html_quickform2_container_repeat' => '<div class="row repeat" id="{id}"><qf:label><p>{label}</p></qf:label>{content}</div>'
);
/**

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -114,7 +114,7 @@ qf.Repeat.removeHandler = function(event)
}
parent = parent.parentNode;
}
- if (parent && parent.repeat && parent.repeat.onBeforeRemove(item)) {
+ if (parent && item && parent.repeat && parent.repeat.onBeforeRemove(item)) {
parent.repeat.remove(item);
}
event.preventDefault();
@@ -152,12 +152,12 @@ qf.Repeat.prototype = {
}
})(),
/**
- * Finds a numeric index for a given repeat item
+ * Finds an index for a given repeat item
*
* @param {Node} item
- * @returns {Number}
+ * @returns {String}
*/
- findIndex: function(item)
+ findIndexByItem: function(item)
{
var itemRegexp = new RegExp('^' + this.itemId.replace(':idx:', '([a-zA-Z0-9_]+?)') + '$'),
m;
@@ -174,6 +174,24 @@ qf.Repeat.prototype = {
}
}
}
+ return null;
+ },
+ /**
+ * Finds a repeat item for a given index
+ *
+ * @param {String} index
+ * @returns {Node}
+ */
+ findItemByIndex: function(index)
+ {
+ var id = this.itemId.replace(':idx:', index),
+ el = document.getElementById(id);
+ if (el && !qf.classes.has(el, 'repeatItem')) {
+ do {
+ el = el.parentNode;
+ } while (el && !qf.classes.has(el, 'repeatItem'));
+ }
+ return el;
},
/**
* Finds a form containing repeat element
@@ -270,19 +288,28 @@ qf.Repeat.prototype = {
/**
* Removes an item from repeat element
*
- * @param {Node} item
+ * @param {Node|String} item
*/
remove: function(item)
{
+ var index;
+ if (typeof item == 'string') {
+ index = item;
+ if (!(item = this.findItemByIndex(index))) {
+ return;
+ }
+ }
if (this.rulesTpl) {
if (!this.form) {
this.form = this.findForm();
}
if (this.form.validator) {
var check = new qf.Map(),
- index = this.findIndex(item),
rules = this.form.validator.rules,
trigger, rule, i;
+ if (!index) {
+ index = this.findIndexByItem(item);
+ }
for (i = 0; trigger = this.triggers[i]; i++) {
check.set(trigger.replace(':idx:', index), true);
}
View
@@ -49,7 +49,7 @@
$repeatFs->addText('region', array('style' => 'width: 20em;'))->setLabel('Region:');
$street = $repeatFs->addText('street', array('style' => 'width: 20em;'))->setLabel('Street address:');
$repeatFs->addCheckbox('default')->setContent('default shipping address');
-// button to remove a repeated item from a repeat
+// button to remove a repeated item from a repeat, enabled automatically
$repeatFs->addButton('remove', array('type' => 'button'))
->setContent('remove this address')
->addClass('repeatRemove');
@@ -78,10 +78,30 @@
$repeatGroup->addButton('remove', array('type' => 'button'))
->setContent('X')
->addClass('repeatRemove');
+// a button for adding repeated elements, with an explicit onclick
+$fsTwo->addButton('add', array(
+ 'type' => 'button',
+ 'onclick' => "document.getElementById('repeat-group').repeat.add(); return false;"
+))->setContent('Add another link');
+
$form->addSubmit('submit', array('value' => 'Send this form'));
+/* @var $renderer HTML_QuickForm2_Renderer_Default */
$renderer = HTML_QuickForm2_Renderer::factory('default');
+// a custom template for first repeat element, a link for adding repeated
+// elements there will be automatically made active due to repeatAdd class
+$renderer->setTemplateForId(
+ 'repeat-fieldset',
+ <<<HTML
+<div class="row repeat" id="{id}">
+ <qf:label><p>{label}</p></qf:label>
+ {content}<br />
+ <a class="repeatAdd" href="#">Add another address...</a>
+</div>
+HTML
+);
+
$form->render($renderer);
?>
View
@@ -114,7 +114,7 @@ qf.Repeat.removeHandler = function(event)
}
parent = parent.parentNode;
}
- if (parent && parent.repeat && parent.repeat.onBeforeRemove(item)) {
+ if (parent && item && parent.repeat && parent.repeat.onBeforeRemove(item)) {
parent.repeat.remove(item);
}
event.preventDefault();
@@ -152,12 +152,12 @@ qf.Repeat.prototype = {
}
})(),
/**
- * Finds a numeric index for a given repeat item
+ * Finds an index for a given repeat item
*
* @param {Node} item
- * @returns {Number}
+ * @returns {String}
*/
- findIndex: function(item)
+ findIndexByItem: function(item)
{
var itemRegexp = new RegExp('^' + this.itemId.replace(':idx:', '([a-zA-Z0-9_]+?)') + '$'),
m;
@@ -174,6 +174,24 @@ qf.Repeat.prototype = {
}
}
}
+ return null;
+ },
+ /**
+ * Finds a repeat item for a given index
+ *
+ * @param {String} index
+ * @returns {Node}
+ */
+ findItemByIndex: function(index)
+ {
+ var id = this.itemId.replace(':idx:', index),
+ el = document.getElementById(id);
+ if (el && !qf.classes.has(el, 'repeatItem')) {
+ do {
+ el = el.parentNode;
+ } while (el && !qf.classes.has(el, 'repeatItem'));
+ }
+ return el;
},
/**
* Finds a form containing repeat element
@@ -270,19 +288,28 @@ qf.Repeat.prototype = {
/**
* Removes an item from repeat element
*
- * @param {Node} item
+ * @param {Node|String} item
*/
remove: function(item)
{
+ var index;
+ if (typeof item == 'string') {
+ index = item;
+ if (!(item = this.findItemByIndex(index))) {
+ return;
+ }
+ }
if (this.rulesTpl) {
if (!this.form) {
this.form = this.findForm();
}
if (this.form.validator) {
var check = new qf.Map(),
- index = this.findIndex(item),
rules = this.form.validator.rules,
trigger, rule, i;
+ if (!index) {
+ index = this.findIndexByItem(item);
+ }
for (i = 0; trigger = this.triggers[i]; i++) {
check.set(trigger.replace(':idx:', index), true);
}
View
@@ -53,7 +53,11 @@
<license uri="http://www.opensource.org/licenses/bsd-license.php">BSD</license>
<notes>
Feature additions
- * Repeat element
+ * Repeat element: given 'prototype' Container (either fieldset or group)
+ is repeated multiple times, with possibility to add / remove repeated items
+ via Javascript. Full support for validation of repeated items.
+ * JavascriptBuilder now has separate getSetupCode() and getValidator()
+ methods in addition to combined getFormJavascript()
Bug fixes
* Autogenerated 'id' attributes no longer start with numbers

0 comments on commit 1becb5e

Please sign in to comment.