|
157 | 157 |
|
158 | 158 | $wrapper.on('click.multipleInput', '.js-input-clone', function (e) { |
159 | 159 | e.stopPropagation(); |
160 | | - addInput($(this), getRowValues($(this))); |
| 160 | + cloneInput($(this)); |
161 | 161 | }); |
162 | 162 |
|
163 | 163 | var i = 0, |
|
196 | 196 | $wrapper.data('multipleInput').settings = settings; |
197 | 197 |
|
198 | 198 | $wrapper.find('.multiple-input-list').find('input, select, textarea').each(function () { |
199 | | - addAttribute($(this)); |
| 199 | + addActiveFormAttribute($(this)); |
200 | 200 | }); |
201 | 201 |
|
202 | | - $wrapper.data('multipleInput').currentIndex = getCurrentIndex($wrapper); |
| 202 | + $wrapper.data('multipleInput').currentIndex = getCurrentRowsCount($wrapper); |
203 | 203 | isActiveFormEnabled = true; |
204 | 204 |
|
205 | 205 | clearInterval(intervalID); |
|
212 | 212 | // If after a second system could not detect ActiveForm it means |
213 | 213 | // that widget is used without ActiveForm and we should just complete initialization of the widget |
214 | 214 | if (form.length === 0 || i > 10) { |
215 | | - $wrapper.data('multipleInput').currentIndex = getCurrentIndex($wrapper); |
| 215 | + $wrapper.data('multipleInput').currentIndex = getCurrentRowsCount($wrapper); |
216 | 216 | isActiveFormEnabled = false; |
217 | 217 |
|
218 | 218 | clearInterval(intervalID); |
|
260 | 260 | } |
261 | 261 | }; |
262 | 262 |
|
263 | | - var addInput = function (btn, values) { |
264 | | - var $wrapper = $(btn).closest('.multiple-input').first(), |
265 | | - data = $wrapper.data('multipleInput'), |
266 | | - settings = data.settings, |
267 | | - template = settings.template, |
268 | | - inputList = $wrapper.children('.multiple-input-list').first(); |
| 263 | + var cloneInput = function (btn) { |
| 264 | + let $wrapper = $(btn).closest('.multiple-input').first(); |
| 265 | + let data = $wrapper.data('multipleInput'); |
| 266 | + let settings = data.settings; |
| 267 | + |
| 268 | + let values = {}; |
| 269 | + |
| 270 | + btn.closest('.multiple-input-list__item').find('input, select, textarea').each(function (k, v) { |
| 271 | + let $element = $(v); |
| 272 | + |
| 273 | + let id = getInputId($element); |
| 274 | + if (id) { |
| 275 | + let columnName = id.replace(settings.inputId, '').replace(/-\d+-/, ''); |
| 276 | + |
| 277 | + if ($element.is(':checkbox')) { |
| 278 | + if (!values.hasOwnProperty(columnName)) { |
| 279 | + values[columnName] = []; |
| 280 | + } |
| 281 | + |
| 282 | + if ($element.is(':checked')) { |
| 283 | + values[columnName].push($element.val()); |
| 284 | + } |
| 285 | + } else { |
| 286 | + values[columnName] = $element.val(); |
| 287 | + } |
| 288 | + } |
| 289 | + }); |
269 | 290 |
|
270 | | - if (settings.max !== null && getCurrentIndex($wrapper) >= settings.max) { |
| 291 | + addInput(btn, values); |
| 292 | + } |
| 293 | + |
| 294 | + var addInput = function (btn, rowValues) { |
| 295 | + rowValues = rowValues || {}; |
| 296 | + |
| 297 | + let $wrapper = $(btn).closest('.multiple-input').first(); |
| 298 | + let data = $wrapper.data('multipleInput'); |
| 299 | + let settings = data.settings; |
| 300 | + let inputList = $wrapper.children('.multiple-input-list').first(); |
| 301 | + |
| 302 | + if (settings.max !== null && getCurrentRowsCount($wrapper) >= settings.max) { |
271 | 303 | return; |
272 | 304 | } |
273 | 305 |
|
274 | | - template = replaceAll('{' + settings.indexPlaceholder + '}', data.currentIndex, template); |
275 | | - var $addedInput = $(template); |
276 | | - var currentIndex = data.currentIndex; |
| 306 | + let currentIndex = data.currentIndex; |
| 307 | + |
| 308 | + let template = replaceAll('{' + settings.indexPlaceholder + '}', data.currentIndex, settings.template); |
| 309 | + let $newRow = $(template); |
277 | 310 |
|
278 | 311 | var beforeAddEvent = $.Event(events.beforeAddRow); |
279 | | - $wrapper.trigger(beforeAddEvent, [$addedInput, currentIndex]); |
280 | 312 |
|
| 313 | + $wrapper.trigger(beforeAddEvent, [$newRow, currentIndex]); |
281 | 314 | if (beforeAddEvent.result === false) { |
282 | 315 | return; |
283 | 316 | } |
284 | 317 |
|
| 318 | + $newRow.find('input, select, textarea').each(function (index, element) { |
| 319 | + let $element = $(element); |
285 | 320 |
|
286 | | - if (settings.prepend) { |
287 | | - $addedInput.hide().prependTo(inputList).fadeIn(300); |
288 | | - } else { |
289 | | - $addedInput.hide().appendTo(inputList).fadeIn(300); |
290 | | - } |
| 321 | + let id = getInputId($element); |
| 322 | + if (id) { |
| 323 | + let columnName = id.replace(settings.inputId, '').replace(/-\d+-/, ''); |
291 | 324 |
|
292 | | - if (values instanceof Object) { |
293 | | - var tmp = []; |
294 | | - for (var key in values) { |
295 | | - if (values.hasOwnProperty(key)) { |
296 | | - tmp.push(values[key]); |
297 | | - } |
298 | | - } |
| 325 | + if (rowValues.hasOwnProperty(columnName)) { |
| 326 | + let tag = $element.get(0).tagName; |
299 | 327 |
|
300 | | - values = tmp; |
301 | | - } |
| 328 | + let inputValue = rowValues[columnName]; |
302 | 329 |
|
303 | | - var jsTemplate; |
| 330 | + switch (tag) { |
| 331 | + case 'INPUT': |
| 332 | + if ($element.is(':checkbox')) { |
| 333 | + if (inputValue.indexOf($element.val()) !== -1) { |
| 334 | + $element.prop('checked', true); |
| 335 | + } |
| 336 | + } else { |
| 337 | + $element.val(inputValue); |
| 338 | + } |
304 | 339 |
|
305 | | - for (var i in settings.jsTemplates) { |
306 | | - jsTemplate = settings.jsTemplates[i]; |
307 | | - jsTemplate = replaceAll('{' + settings.indexPlaceholder + '}', data.currentIndex, jsTemplate); |
308 | | - jsTemplate = replaceAll('%7B' + settings.indexPlaceholder + '%7D', data.currentIndex, jsTemplate); |
| 340 | + break; |
309 | 341 |
|
310 | | - window.eval(jsTemplate); |
311 | | - } |
| 342 | + case 'TEXTAREA': |
| 343 | + $element.val(inputValue); |
| 344 | + break; |
312 | 345 |
|
313 | | - var index = 0; |
314 | | - |
315 | | - $(template).find('input, select, textarea').each(function (k, v) { |
316 | | - var ele = $(v), |
317 | | - tag = v.tagName, |
318 | | - id = getInputId(ele), |
319 | | - obj = $('#' + id); |
320 | | - |
321 | | - if (values) { |
322 | | - var val = values[index]; |
323 | | - |
324 | | - if (tag === 'INPUT' || tag === 'TEXTAREA') { |
325 | | - obj.val(val); |
326 | | - } else if (tag === 'SELECT') { |
327 | | - if (val && val.indexOf('option') !== -1) { |
328 | | - obj.append(val); |
329 | | - } else { |
330 | | - var option = obj.find('option[value="' + val + '"]'); |
331 | | - if (option.length) { |
332 | | - obj.val(val); |
333 | | - } |
| 346 | + case 'SELECT': |
| 347 | + if (inputValue && inputValue.indexOf('option') !== -1) { |
| 348 | + $element.append(inputValue); |
| 349 | + } else { |
| 350 | + var option = $element.find('option[value="' + inputValue + '"]'); |
| 351 | + if (option.length) { |
| 352 | + $element.val(inputValue); |
| 353 | + } |
| 354 | + } |
| 355 | + |
| 356 | + break; |
| 357 | + |
| 358 | + default: |
| 359 | + break; |
334 | 360 | } |
335 | 361 | } |
336 | 362 | } |
337 | 363 |
|
| 364 | + |
338 | 365 | if (isActiveFormEnabled) { |
339 | | - addAttribute(ele); |
| 366 | + addActiveFormAttribute($element); |
340 | 367 | } |
341 | | - |
342 | | - index++; |
343 | 368 | }); |
344 | 369 |
|
| 370 | + // display the new row |
| 371 | + if (settings.prepend) { |
| 372 | + $newRow.hide().prependTo(inputList).fadeIn(300); |
| 373 | + } else { |
| 374 | + $newRow.hide().appendTo(inputList).fadeIn(300); |
| 375 | + } |
| 376 | + |
| 377 | + // apply js templates |
| 378 | + let jsTemplate = null; |
| 379 | + for (var i in settings.jsTemplates) { |
| 380 | + jsTemplate = settings.jsTemplates[i]; |
| 381 | + jsTemplate = replaceAll('{' + settings.indexPlaceholder + '}', currentIndex, jsTemplate); |
| 382 | + jsTemplate = replaceAll('%7B' + settings.indexPlaceholder + '%7D', currentIndex, jsTemplate); |
| 383 | + |
| 384 | + window.eval(jsTemplate); |
| 385 | + } |
| 386 | + |
345 | 387 | $wrapper.data('multipleInput').currentIndex++; |
346 | 388 |
|
347 | 389 | var afterAddEvent = $.Event(events.afterAddRow); |
348 | | - $wrapper.trigger(afterAddEvent, [$addedInput, currentIndex]); |
| 390 | + $wrapper.trigger(afterAddEvent, [$newRow, currentIndex]); |
349 | 391 | }; |
350 | 392 |
|
351 | 393 | var removeInput = function ($btn) { |
|
354 | 396 | data = $wrapper.data('multipleInput'), |
355 | 397 | settings = data.settings; |
356 | 398 |
|
357 | | - var currentIndex = getCurrentIndex($wrapper); |
| 399 | + var currentIndex = getCurrentRowsCount($wrapper); |
358 | 400 | if (currentIndex > settings.min) { |
359 | 401 | var event = $.Event(events.beforeDeleteRow); |
360 | 402 | $wrapper.trigger(event, [$toDelete, currentIndex]); |
|
365 | 407 |
|
366 | 408 | if (isActiveFormEnabled) { |
367 | 409 | $toDelete.find('input, select, textarea').each(function (index, ele) { |
368 | | - removeAttribute($(ele)); |
| 410 | + removeActiveFormAttribute($(ele)); |
369 | 411 | }); |
370 | 412 | } |
371 | 413 |
|
|
383 | 425 | * |
384 | 426 | * @param input |
385 | 427 | */ |
386 | | - var addAttribute = function (input) { |
| 428 | + var addActiveFormAttribute = function (input) { |
387 | 429 | var id = getInputId(input); |
388 | 430 |
|
389 | 431 | // skip if we could not get an ID of input |
|
435 | 477 | /** |
436 | 478 | * Removes an attribute from ActiveForm. |
437 | 479 | */ |
438 | | - var removeAttribute = function (ele) { |
| 480 | + var removeActiveFormAttribute = function (ele) { |
439 | 481 | var id = getInputId(ele); |
440 | 482 |
|
441 | 483 | if (id === null) { |
|
463 | 505 | return id; |
464 | 506 | }; |
465 | 507 |
|
466 | | - var getCurrentIndex = function($wrapper) { |
| 508 | + var getCurrentRowsCount = function($wrapper) { |
467 | 509 | return $wrapper |
468 | 510 | .find('.multiple-input-list .multiple-input-list__item') |
469 | 511 | .filter(function(){ |
470 | 512 | return $(this).parents('.multiple-input').first().attr('id') === $wrapper.attr('id'); |
471 | 513 | }).length; |
472 | 514 | }; |
473 | 515 |
|
474 | | - var getRowValues = function (element) { |
475 | | - var values = {}; |
476 | | - element.closest('tr').find('td').each(function (index, value) { |
477 | | - $(value).find('input, select, textarea').each(function (k, v) { |
478 | | - var ele = $(v), |
479 | | - id = getInputId(ele), |
480 | | - obj = $('#' + id); |
481 | | - values[id] = obj.val(); |
482 | | - }); |
483 | | - }); |
484 | | - return values; |
485 | | - }; |
486 | | - |
487 | 516 | var replaceAll = function (search, replace, subject) { |
488 | 517 | if (!(subject instanceof String) && typeof subject !== 'string') { |
489 | 518 | console.warn('Call replaceAll for non-string value: ' + subject); |
|
0 commit comments