├── MIT-LICENSE.txt
├── README.md
├── example.html
└── jquery.form-repeater.js


/MIT-LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright 2011 Corey Ballou and other contributors
 2 | http://www.coreyballou.com
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining
 5 | a copy of this software and associated documentation files (the
 6 | "Software"), to deal in the Software without restriction, including
 7 | without limitation the rights to use, copy, modify, merge, publish,
 8 | distribute, sublicense, and/or sell copies of the Software, and to
 9 | permit persons to whom the Software is furnished to do so, subject to
10 | the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | jQuery Form Element Repeater Plugin
  2 | ===================================
  3 | 
  4 | A jQuery plugin for creating repeatable form elements, i.e. an array of input elements with add/remove capabilities. In other words, handling an array of objects (better known as a collection).
  5 | 
  6 | [Official Documentation Website](https://www.coreyballou.com/projects/jquery-form-element-repeater-plugin/)
  7 | 
  8 | ## Example Usage ##
  9 | 
 10 | To use the plugin, we have a few conventions in place. One of the main conventions is the usage of jQuery data elements which dictate how element names and IDs get generated as well as how label names get generated.
 11 | 
 12 | #### Label Naming ####
 13 | Labels for form elements generally have clear naming conventions.
 14 | 
 15 | To dynamically add and remove repeatable elements and groups, we need a method for incrementing the `for` attribute name. We accomplish this via the `data-pattern-text` attribute.
 16 | 
 17 | The `data-pattern-text` attribute accepts a string as well as template keyword indicating the increment method:
 18 | 
 19 | * **+=** This operator will increment by the numeric number following **+=**, i.e. `+=2`.
 20 | * **++** This operator will increment by 1.
 21 | 
 22 | #### Form Element Naming/Tagging ####
 23 | 
 24 | The `data-pattern-id` attribute is used to dynamically determine the id of each form element.
 25 | The `data-pattern-name` attribute is used to dynamically determine the name of each form element.
 26 | 
 27 | These two data attributes accept the same template keywords as `data-pattern-text`.
 28 | 
 29 | #### Example Code ####
 30 | 
 31 | ```html
 32 | <div class="container">
 33 |   <div class="r-group">
 34 |     <p>
 35 |       <label for="vehicle_0_name" data-pattern-text="Vehicle Name ++:">Vehicle Name 1:</label>
 36 |       <input type="text" name="vehicle[0][name]" id="vehicle_0_name" data-pattern-name="vehicle[++][name]" data-pattern-id="vehicle_++_name" />
 37 |     </p>
 38 | 
 39 |     <p>
 40 |       <label for="vehicle_0_type" data-pattern-text="Vehicle Type ++:">Vehicle Type 1:</label>
 41 |       <input type="text" name="vehicle[0][type]" id="vehicle_0_type" data-pattern-name="vehicle[++][type]" data-pattern-id="vehicle_++_type" />
 42 |     </p>
 43 | 
 44 |     <p>
 45 |       <!-- Manually a remove button for the item. -->
 46 |       <!-- If one didn't exist, it would be added to overall group -->
 47 |       <button type="button" class="r-btnRemove">Remove -</button>
 48 |     </p>
 49 |   </div>
 50 | 
 51 |   <!-- The add button -->
 52 |   <button type="button" class="r-btnAdd">Add +</button>
 53 | </div>
 54 | 
 55 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 56 | <script src="jquery.form-repeater.js"></script>
 57 | <script>
 58 | $('.container').repeater({
 59 |   btnAddClass: 'r-btnAdd',
 60 |   btnRemoveClass: 'r-btnRemove',
 61 |   groupClass: 'r-group',
 62 |   minItems: 1,
 63 |   maxItems: 0,
 64 |   startingIndex: 0,
 65 |   showMinItemsOnLoad: false,
 66 |   reindexOnDelete: true,
 67 |   repeatMode: 'append',
 68 |   animation: null,
 69 |   animationSpeed: 400,
 70 |   animationEasing: 'swing',
 71 |   clearValues: true
 72 | });
 73 | </script>
 74 | ```
 75 | 
 76 | ## Config Options/Params ##
 77 | 
 78 | *  **btnAddClass:** The class name of the add button for creating new repeatable groups/items. _(string)_
 79 | *  **btnRemoveClass:** The class name of the remove button for deleting a repeatable group/item. _(string)_
 80 | *  **groupClass:** The class name of a newly created group/item DIV wrapper. _(string)_
 81 | *  **minItems:** The minimum number of items to display on load. _(integer, default 1)_
 82 | *  **maxItems:** The maximum number of allowable items/groups. 0 means unlimited. _(integer, default 0)_
 83 | *  **startingIndex:** The starting index for group items. _(integer, default 0)_
 84 | *  **showMinItemsOnLoad** Repeat container *{minItems}* times on first-load  _(boolean, default false)_
 85 | *  **reindexOnDelete:** Force re-index all group items on delete. _(boolean, default true)_
 86 | *  **repeatMode:** The type of insertion mode for new group items. _(string, default append)_
 87 | *  **animation:** Uh, I forgot. _(default null)_
 88 | *  **animationSpeed:** The default animation speed in milliseconds. _(integer, default 400)_
 89 | *  **animationEasing:** The easing animation effect. _(string, default 'swing')_
 90 | *  **clearValues:** Whether values should be cleared out when cloning. _(boolean, default true)_
 91 | 
 92 | ## Passing in a data object ##
 93 | 
 94 | The plugin supports automatically cloning the repeatable object *n* times based on the content of a data object.
 95 | 
 96 | The data object should contain an array for each item which should be filled into the repeatable container, each inputs name should be provided in full.
 97 | 
 98 | ```javascript
 99 | ...
100 |     $('.container').repeater({
101 |         ...
102 |     }, [
103 |         {
104 |             "vehicle[0][name]": "name1",
105 |             "vehicle[0][type]": "type1"
106 |         },
107 |         {
108 |             "vehicle[1][name]": "name2",
109 |             "vehicle[1][type]": "type2"
110 |         }
111 |     ]);
112 | ...
113 | ```
114 | 
115 | Using the configuration in the first example, this would add an extra clone to the repeatable form and fill both entries with the supplied data, the first entry would follow the "minItems" option and have no removal button, whereas the second item would be removable.
116 | 
117 | 
118 | [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/cballou/jquery-form-element-repeater-plugin/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
119 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head><title>Test</title></head>
 3 |   <body>
 4 |     <h1>jQuery Form Repeater Example</h1>
 5 |     <h3>Example 1: Create a Group of Inputs</h3>
 6 |     <div id="example1">
 7 |         <div class="r-group">
 8 |             <p>
 9 |                 <label for="vehicle_0_0" data-pattern-text="Vehicle Name +=1:">Vehicle Name 1:</label>
10 |                 <input type="text" name="vehicle[0][name]" id="vehicle_0_name" data-pattern-name="vehicle[++][name]" data-pattern-id="vehicle_++_name" />
11 |             </p>
12 |             <p>
13 |                 <label for="vehicle_0_0" data-pattern-text="Vehicle Type +=1:">Vehicle Type 1:</label>
14 |                 <input type="text" name="vehicle[0][type]" id="vehicle_0_type" data-pattern-name="vehicle[++][type]" data-pattern-id="vehicle_++_type" />
15 |             </p>
16 |             <p>
17 |                 <!-- Add a remove button for the item. If one didn't exist, it would be added to overall group -->
18 |                 <button type="button" class="r-btnRemove">Remove -</button>
19 |             </p>
20 |         </div>
21 |         <button type="button" class="r-btnAdd">Add +</button>
22 |     </div>
23 | 
24 |     <h4>Code:</h4>
25 | <pre>
26 | $('#example1').repeater({
27 | 	btnAddClass: 'r-btnAdd',
28 | 	btnRemoveClass: 'r-btnRemove',
29 | 	groupClass: 'r-group',
30 | 	minItems: 1,
31 | 	maxItems: 0,
32 | 	startingIndex: 0,
33 |     showMinItemsOnLoad: true,
34 | 	reindexOnDelete: true,
35 | 	repeatMode: 'append',
36 | 	animation: null,
37 | 	animationSpeed: 400,
38 | 	animationEasing: 'swing',
39 | 	clearValues: true
40 | }, [
41 |     {
42 |         "vehicle[0][name]":"test",
43 |         "vehicle[0][type]":"test"
44 |     },
45 |     {
46 |         "vehicle[1][name]":"test2",
47 |         "vehicle[1][type]":"test2"
48 |     }
49 | ]);
50 | </pre>
51 | 
52 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
53 |   <script src="jquery.form-repeater.js" type="text/javascript"></script>
54 |   <script type="text/javascript">
55 |   $('#example1').repeater({
56 |       btnAddClass: 'r-btnAdd',
57 |       btnRemoveClass: 'r-btnRemove',
58 |       groupClass: 'r-group',
59 |       minItems: 1,
60 |       maxItems: 0,
61 |       startingIndex: 0,
62 |       showMinItemsOnLoad: true,
63 |       reindexOnDelete: true,
64 |       repeatMode: 'append',
65 |       animation: null,
66 |       animationSpeed: 400,
67 |       animationEasing: 'swing',
68 |       clearValues: true
69 |   }, [
70 |       {
71 |           "vehicle[0][name]":"test",
72 |           "vehicle[0][type]":"test"
73 |       },
74 |       {
75 |           "vehicle[1][name]":"test2",
76 |           "vehicle[1][type]":"test2"
77 |       }
78 |   ]);
79 |   </script>
80 |   </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/jquery.form-repeater.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * jQuery Form Repeater Plugin 0.1.0
  3 |  *
  4 |  * Copyright (c) 2011 Corey Ballou
  5 |  *
  6 |  * Permission is hereby granted, free of charge, to any person obtaining
  7 |  * a copy of this software and associated documentation files (the
  8 |  * "Software"), to deal in the Software without restriction, including
  9 |  * without limitation the rights to use, copy, modify, merge, publish,
 10 |  * distribute, sublicense, and/or sell copies of the Software, and to
 11 |  * permit persons to whom the Software is furnished to do so, subject to
 12 |  * the following conditions:
 13 |  *
 14 |  * The above copyright notice and this permission notice shall be
 15 |  * included in all copies or substantial portions of the Software.
 16 |  *
 17 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 18 |  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 19 |  * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 20 |  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 21 |  * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 22 |  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 23 |  * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 24 |  *
 25 |  * Example Usage:
 26 |  *
 27 |  <div class="container">
 28 |  <div class="r-group">
 29 |  <p>
 30 |  <label for="vehicle_0_0" data-pattern-text="Vehicle Name +=:">Vehicle Name 1:</label>
 31 |  <input type="text" name="vehicle[0][name]" id="vehicle_0_name" data-pattern-name="vehicle[++][name]" data-pattern-id="vehicle_++_name" />
 32 |  </p>
 33 |  <p>
 34 |  <label for="vehicle_0_0" data-pattern-text="Vehicle Type +=:">Vehicle Type 1:</label>
 35 |  <input type="text" name="vehicle[0][type]" id="vehicle_0_type" data-pattern-name="vehicle[++][type]" data-pattern-id="vehicle_++_type" />
 36 |  </p>
 37 |  <p>
 38 |  <-- Add a remove button for the item. If one didn't exist, it would be added to overall group -->
 39 |  <button type="button" class="r-btnRemove">Remove -</button>
 40 |  </p>
 41 |  </div>
 42 |  <button type="button" class="r-btnAdd">Add +</button>
 43 |  </div>
 44 |  <script type="text/javascript">
 45 |  $('.container').repeater({
 46 | 	btnAddClass: 'r-btnAdd',
 47 | 	btnRemoveClass: 'r-btnRemove',
 48 | 	groupClass: 'r-group',
 49 | 	minItems: 1,
 50 | 	maxItems: 0,
 51 | 	startingIndex: 0,
 52 | 	reindexOnDelete: true,
 53 | 	repeatMode: 'append',
 54 | 	animation: null,
 55 | 	animationSpeed: 400,
 56 | 	animationEasing: 'swing',
 57 | 	clearValues: true
 58 | });
 59 |  </script>
 60 |  */
 61 | (function($) {
 62 | 
 63 |     $.fn.repeater = function(options, data) {
 64 |         var $container = $(this),
 65 |             $btnAdd, $btnRemove, patternName, patternId, patternText,
 66 |             idVal, nameVal, labelText, labelFor, $elem, elemName,
 67 |             $label, row, $newClone, $formElems;
 68 | 
 69 |         $container.opts = $.extend({}, $.fn.repeater.defaults, options);
 70 |         $container.repeatCount = 0;
 71 | 
 72 |         $btnAdd = $container.find('.' + $container.opts.btnAddClass);
 73 |         if (!$btnAdd.length) {
 74 |             alert('You must specify a valid jQuery selector for the add button option in Form Repeater.');
 75 |             return false;
 76 |         }
 77 | 
 78 |         // parse out group details
 79 |         $container.group = $('.' + $container.opts.groupClass);
 80 |         if (!$container.group.length) {
 81 |             alert('You must specify a valid jQuery selector for the form element grouping option in Form Repeater.');
 82 |             return false;
 83 |         }
 84 | 
 85 |         // ensure the remove button exists
 86 |         $btnRemove = $container.group.find('.' + $container.opts.btnRemoveClass);
 87 |         if (!$btnRemove.length) {
 88 |             $btnRemove = $('<button type="button" name="rBtnRemove" class="' + $container.opts.btnRemoveClass + '" style="display:none" />')
 89 |             $btnRemove.appendTo($container);
 90 |         } else {
 91 |             // default hidden
 92 |             $btnRemove.hide();
 93 |         }
 94 | 
 95 |         // narrow the group down to the first copy
 96 |         $container.group = $container.group.eq(0);
 97 |         // retrieve form elements
 98 |         $container.groupClone = $container.group.clone();
 99 |         // remove the initial item when minItems === 0
100 |         if ($container.opts.minItems === 0) {
101 |             // remove the group that describes the repeat
102 |             $container.group.remove();
103 |             // adjust the count to remove first item
104 |             $container.repeatCount--;
105 |         }
106 | 
107 |         // watch for remove
108 | 	$container.on('click', '.' + $container.opts.btnRemoveClass, $container, removeRepeater);
109 |         // watch for add
110 | 	$container.on('click', '.' + $container.opts.btnAddClass, $container, addRepeater);
111 | 
112 |         // allows for initial population of form data
113 |         if (data && data.length) {
114 |             // create grouping for every row of data
115 |             data.forEach(function(condition, row) {
116 |                 // keep cloning
117 |                 $newClone = $container.groupClone.clone();
118 |                 $newClone = _reindex($newClone, row, $container);
119 | 
120 |                 if ($.isFunction($container.opts.beforeAdd)) {
121 |                     $newClone = $container.opts.beforeAdd.call(this, $newClone);
122 |                 }
123 | 
124 |                 $formElems = $newClone.find(':input');
125 | 
126 |                 if ($formElems.length) {
127 |                     // populate each input field
128 |                     $formElems.each(function() {
129 |                         $elem = $(this),
130 |                             elemName = $elem.attr('name');
131 | 
132 |                         // check for matching value
133 |                         if (typeof data[row][elemName] != 'undefined') {
134 |                             if ($elem.is('input[type="checkbox"]')) {
135 |                                 if (data[row][elemName] === '' || data[row][elemName] === '1') {
136 |                                     $elem.attr('checked', true);
137 |                                 }
138 |                             } else {
139 |                                 $elem.val(data[row][elemName]);
140 |                             }
141 |                         } else {
142 |                             if ($elem.is('input[type="checkbox"]')) {
143 |                                 $elem.attr('checked', false);
144 |                             } else {
145 |                                 $elem.val('');
146 |                             }
147 |                         }
148 | 
149 |                         patternName = $elem.data('pattern-name');
150 |                         if (patternName) {
151 |                             nameVal = $elem.attr('name');
152 |                             nameVal = parsePattern(patternName, nameVal, row, $container);
153 |                             $elem.attr('name', nameVal);
154 |                         }
155 | 
156 |                         patternId = $elem.data('pattern-id');
157 |                         if (patternId) {
158 |                             idVal = $elem.attr('id');
159 |                             idVal = parsePattern(patternId, idVal, row, $container);
160 |                             $elem.attr('id', idVal);
161 |                         }
162 | 
163 |                         $label = $newClone.find('label[for=' + $elem.attr('id') + ']');
164 |                         if (!$label.length) $label = $elem.parent('label');
165 |                         if (!$label.length) $label = $elem.siblings('label');
166 |                         if ($label.length) {
167 |                             // ensure we have one copy
168 |                             $label = $label.eq(0);
169 |                             // update label text
170 |                             patternText = $label.data('pattern-text');
171 |                             labelText = $label.html();
172 |                             if (labelText) {
173 |                                 labelText = parsePattern(patternText, labelText, row, $container);
174 |                                 $label.html(labelText);
175 |                             }
176 |                             // update label attribute
177 |                             labelFor = $label.attr('for');
178 |                             if (labelFor && idVal) {
179 |                                 $label.attr('for', idVal);
180 |                             }
181 |                         }
182 |                     });
183 | 
184 |                 }
185 | 
186 |                 // append repeater to container
187 |                 if ($container.opts.repeatMode == 'append') {
188 |                     $newClone.appendTo($container);
189 |                 } else if ($container.opts.repeatMode == 'prepend') {
190 |                     $newClone.prependTo($container);
191 |                 } else if ($container.opts.repeatMode == 'insertAfterLast') {
192 |                     $newClone.insertAfter($container.find('.' + $container.opts.groupClass).last());
193 |                 }
194 | 
195 |                 // remove the initial dom container
196 |                 if ($container.group) {
197 |                     $container.group.remove();
198 |                     $container.group = null;
199 |                 }
200 | 
201 |                 // calculate the repeatCount based on whats in the dom
202 |                 $container.repeatCount = $container.find('.' + $container.opts.groupClass).length - 1;
203 | 
204 |                 // shows removal buttons only inside the new clone when were above the minItems count
205 |                 if ($container.repeatCount > $container.opts.minItems - 1) {
206 |                     $newClone.find('.' + $container.opts.btnRemoveClass).show();
207 |                 }
208 | 
209 |                 if ($.isFunction($container.opts.afterAdd)) {
210 |                     $container.opts.afterAdd.call(this, $newClone);
211 |                 }
212 |             });
213 |         }
214 | 
215 |         // ensure the $container is repeated for atleast the min-items amount
216 |         if ($container.opts.showMinItemsOnLoad === true && $container.repeatCount < $container.opts.minItems - 1) {
217 |             while ($container.repeatCount < $container.opts.minItems - 1) {
218 |                 $('.' + $container.opts.btnAddClass, $container).trigger('click');
219 |             }
220 |         }
221 | 
222 | 
223 |         // daisy chain
224 |         return this;
225 |     }
226 | 
227 |     /**
228 |      * Add a new repeater.
229 |      */
230 |     function addRepeater(data) {
231 |         var container = data.data,
232 |             tmpCount = container.repeatCount + 1,
233 |             $doppleganger = container.groupClone.clone();
234 | 
235 |         if ($.isFunction(container.opts.beforeAdd)) {
236 |             $doppleganger = container.opts.beforeAdd.call(this, $doppleganger);
237 |         }
238 | 
239 |         // don't exceed the max allowable items
240 |         if (container.opts.maxItems > 0 && container.repeatCount == container.opts.maxItems) {
241 |             alert('You have hit the maximum allowable items.');
242 |             return false;
243 |         }
244 | 
245 |         _reindex($doppleganger, tmpCount, container);
246 | 
247 |         // shows removal buttons only inside the new clone when were above the minItems count
248 |         if (container.repeatCount >= container.opts.minItems - 1) {
249 |             $doppleganger.find('.' + container.opts.btnRemoveClass).show();
250 |         }
251 | 
252 |         // append repeater to container
253 |         if (container.opts.repeatMode == 'append') {
254 |             $doppleganger.appendTo(container);
255 |         } else if (container.opts.repeatMode == 'prepend') {
256 |             $doppleganger.prependTo(container);
257 |         } else if (container.opts.repeatMode == 'insertAfterLast') {
258 |             $doppleganger.insertAfter(container.find('.' + container.opts.groupClass).last());
259 |         }
260 | 
261 |         container.repeatCount++;
262 | 
263 |         if ($.isFunction(container.opts.afterAdd)) {
264 |             container.opts.afterAdd.call(this, $doppleganger);
265 |         }
266 | 
267 |         return false;
268 |     }
269 | 
270 |     /**
271 |      * Remove a repeater.
272 |      */
273 |     function removeRepeater(data) {
274 |         var $btn = $(this),
275 |             container = data.data,
276 |             $repeaters = container.find('.' + container.opts.groupClass),
277 |             numRepeaters = $repeaters.length,
278 |             $match;
279 | 
280 |         if (numRepeaters <= container.opts.minItems) {
281 |             return false;
282 |         }
283 | 
284 |         // check if removing a specific repeater instance
285 |         $match = $btn.closest('.' + container.opts.groupClass);
286 |         if (!$match.length) {
287 |             // determine if removing first or last repeater
288 |             if (container.opts.repeatMode == 'append') {
289 |                 var $match = $repeaters.filter(':last');
290 |             } else if (container.opts.repeatMode == 'prepend') {
291 |                 var $match = $repeaters.filter(':first');
292 |             } else if (container.opts.repeatMode == 'insertAfterLast') {
293 |                 var $match = $repeaters.filter(':last');
294 |             }
295 |         }
296 | 
297 |         // ensure we have a match
298 |         if ($match.length) {
299 |             // remove the repeater
300 |             if (container.opts.animation) {
301 |                 if (container.opts.animation == 'slide') {
302 |                     $match.slideUp(container.opts.animationSpeed, container.opts.animationEasing, function() {
303 |                         _remove($match, container);
304 |                     });
305 |                 } else if (container.opts.animation == 'fade') {
306 |                     $match.fadeOut(container.opts.animationSpeed, container.opts.animationEasing, function() {
307 |                         _remove($match, container);
308 |                     });
309 |                 } else if (typeof container.opts.animation == 'object') {
310 |                     $match.animate(container.opts.animation, container.opts.animationSpeed, container.opts.animationEasing, function() {
311 |                         _remove($match, container);
312 |                     });
313 |                 }
314 |             } else {
315 |                 _remove($match, container);
316 |             }
317 |         }
318 | 
319 |         return false;
320 |     }
321 | 
322 |     /**
323 |      * Parse the pattern.
324 |      */
325 |     function parsePattern(pattern, replaceText, count, container) {
326 |         var returnVal = replaceText;
327 | 
328 |         count = parseInt(count);
329 |         if (pattern) {
330 |             // check pattern type
331 |             if (pattern.indexOf('+=') > -1) {
332 |                 var matches = pattern.match(/\+=(\d+)/i);
333 |                 if (matches && matches.length && matches[1]) {
334 |                     var incr = parseInt(matches[1]);
335 |                     returnVal = pattern.replace(/\+=(\d)+/i, container.opts.startingIndex + count + incr);
336 |                 }
337 |             }
338 | 
339 |             if (pattern.indexOf('++') > -1) {
340 |                 returnVal = pattern.replace(/\+\+/gi, container.opts.startingIndex + count);
341 |             }
342 |         }
343 |         return returnVal;
344 |     }
345 | 
346 |     /**
347 |      * Wrapper to handle re-indexing form elements in a group.
348 |      */
349 |     function reindex(container) {
350 |         var $repeaters = container.find('.' + container.opts.groupClass),
351 |             startIndex = container.opts.startingIndex,
352 |             $curGroup;
353 | 
354 |         $repeaters.each(function() {
355 |             $curGroup = $(this);
356 |             _reindex($curGroup, startIndex, container);
357 |             startIndex++;
358 |         });
359 |     }
360 | 
361 |     /**
362 |      * Remove a match and reindex.
363 |      */
364 |     function _remove($match, container) {
365 |         if ($.isFunction(container.opts.beforeDelete)) {
366 |             container.opts.beforeDelete.call(this, $match);
367 |         }
368 | 
369 |         $match.remove();
370 | 
371 |         if (typeof container.repeatCount === "number") {
372 |             container.repeatCount--;
373 |         }
374 | 
375 |         if (container.opts.reindexOnDelete) {
376 |             reindex(container);
377 |         }
378 | 
379 |         if ($.isFunction(container.opts.afterDelete)) {
380 |             container.opts.afterDelete.call(this, $match);
381 |         }
382 |     }
383 | 
384 |     /**
385 |      * Handle reindexing each form element in a group.
386 |      */
387 |     function _reindex($curGroup, index, container) {
388 |         var $formElems = $curGroup.find(':input'),
389 |             patternName, patternId, patternText,
390 |             idVal, nameVal, $label, labelText, labelFor,
391 |             $elem;
392 | 
393 |         if ($formElems.length) {
394 |             $formElems.each(function() {
395 |                 $elem = $(this);
396 | 
397 |                 patternName = $elem.data('pattern-name');
398 |                 if (patternName) {
399 |                     nameVal = $elem.attr('name');
400 |                     nameVal = parsePattern(patternName, nameVal, index, container);
401 |                     $elem.attr('name', nameVal);
402 | 
403 |                     if ($elem.is('input[type="checkbox"]') || $elem.is('input[type="radio"]')) {
404 |                         if ($elem.prop('checked')) {
405 |                             $elem.attr('checked', true);
406 |                         } else {
407 |                             $elem.attr('checked', false);
408 |                         }
409 |                     }
410 |                 }
411 | 
412 |                 patternId = $elem.data('pattern-id');
413 |                 if (patternId) {
414 |                     idVal = $elem.attr('id');
415 |                     idVal = parsePattern(patternId, idVal, index, container);
416 |                     $elem.attr('id', idVal);
417 |                 }
418 | 
419 |                 $label = $curGroup.find('label[for=' + $elem.attr('id') + ']');
420 |                 if (!$label.length) $label = $elem.parent('label');
421 |                 if (!$label.length) $label = $elem.siblings('label');
422 |                 if ($label.length) {
423 |                     // ensure we have one copy
424 |                     $label = $label.eq(0);
425 |                     // update label text
426 |                     patternText = $label.data('pattern-text');
427 |                     labelText = $label.html();
428 |                     if (labelText) {
429 |                         labelText = parsePattern(patternText, labelText, index, container);
430 |                         $label.html(labelText);
431 |                     }
432 |                     // update label attribute
433 |                     labelFor = $label.attr('for');
434 |                     if (labelFor && idVal) {
435 |                         $label.attr('for', idVal);
436 |                     }
437 |                 }
438 |             });
439 |         }
440 | 
441 |         return $curGroup;
442 |     }
443 | 
444 | })(jQuery);
445 | 
446 | // default values
447 | $.fn.repeater.defaults = {
448 |     groupClass: 'r-group',
449 |     btnAddClass: 'r-btnAdd',
450 |     btnRemoveClass: 'r-btnRemove',
451 |     minItems: 1,
452 |     maxItems: 0,
453 |     startingIndex: 0,
454 |     reindexOnDelete: true,
455 |     showMinItemsOnLoad: false,
456 |     repeatMode: 'insertAfterLast', // append, prepend, insertAfterLast
457 |     animation: null,
458 |     animationSpeed: 400,
459 |     animationEasing: 'swing',
460 |     clearValues: true,
461 |     beforeAdd: function($doppleganger) {
462 |         return $doppleganger;
463 |     },
464 |     afterAdd: function($doppleganger) {},
465 |     beforeDelete: function($elem) {},
466 |     afterDelete: function() {}
467 | };
468 | 


--------------------------------------------------------------------------------