| 1 |
var PacketeryMultiplier = function( wrapperSelector ) { |
| 2 |
var $wrapper = jQuery( wrapperSelector ), |
| 3 |
multiplier = this; |
| 4 |
|
| 5 |
this.registerListeners = function() { |
| 6 |
$wrapper |
| 7 |
.on( 'click', '[data-replication-add]', function() { |
| 8 |
multiplier.addItem( this ); |
| 9 |
} ) |
| 10 |
.on( 'click', '[data-replication-delete]', function() { |
| 11 |
multiplier.deleteItem( this ); |
| 12 |
} ) |
| 13 |
.each( function() { |
| 14 |
multiplier.toggleDeleteButton( jQuery( this ).find( '[data-replication-item-container]' ) ); |
| 15 |
} ); |
| 16 |
}; |
| 17 |
|
| 18 |
this.addItem = function( button ) { |
| 19 |
var $container = jQuery( button ).closest( wrapperSelector ).find( '[data-replication-item-container]' ), |
| 20 |
$template = getTemplateClone( $container ); |
| 21 |
|
| 22 |
updateIds( $template, newId++ ); |
| 23 |
$container.append( $template ); |
| 24 |
$template.find( '[data-nette-rules]' ).each( function() { |
| 25 |
this.removeAttribute( 'data-lfv-initialized' ); |
| 26 |
LiveForm.setupHandlers( this ); |
| 27 |
} ); |
| 28 |
|
| 29 |
this.toggleDeleteButton( $container ); |
| 30 |
}; |
| 31 |
|
| 32 |
this.deleteItem = function( button ) { |
| 33 |
var $row = jQuery( button ).closest( '[data-replication-item]' ), |
| 34 |
$container = $row.closest( '[data-replication-item-container]' ); |
| 35 |
|
| 36 |
$row.remove(); |
| 37 |
this.toggleDeleteButton( $container ); |
| 38 |
}; |
| 39 |
|
| 40 |
this.toggleDeleteButton = function( $container ) { |
| 41 |
var optionsCount = $container.find( '[data-replication-item]' ).length, |
| 42 |
$buttons = $container.find( '[data-replication-delete]' ), |
| 43 |
minItems = parseInt( $container.data( 'replication-min-items' ) ); |
| 44 |
|
| 45 |
(optionsCount > minItems ? $buttons.show() : $buttons.hide()); |
| 46 |
}; |
| 47 |
|
| 48 |
/** |
| 49 |
* Find the highest counter in the rendered form (invalid form gets re-rendered with its submitted new_* form items) |
| 50 |
*/ |
| 51 |
function findMaxNewId() { |
| 52 |
var $newInputs = jQuery( wrapperSelector + ' [name*=' + prefix + ']' ), |
| 53 |
maxNewId = 1; |
| 54 |
|
| 55 |
$newInputs.each( function() { |
| 56 |
var newIdMatch = jQuery( this ).attr( 'name' ).match( '\\[' + prefix + '(\\d+)\\]' ); |
| 57 |
var counter = parseInt( newIdMatch[ 1 ] ); |
| 58 |
maxNewId = Math.max( maxNewId, counter + 1 ); |
| 59 |
} ); |
| 60 |
|
| 61 |
return maxNewId; |
| 62 |
} |
| 63 |
|
| 64 |
var prefix = 'new_', |
| 65 |
newId = findMaxNewId(); |
| 66 |
|
| 67 |
function getTemplateClone( container ) { |
| 68 |
var formId = container.closest( '[data-replication-form-id]' ).data( 'replication-form-id' ); |
| 69 |
if ( !formId ) { |
| 70 |
formId = container.closest( 'form' ).attr( 'id' ); |
| 71 |
} |
| 72 |
|
| 73 |
var formTemplateId = formId + '_template'; |
| 74 |
return jQuery( '#' + formTemplateId ).find( wrapperSelector ).find( '[data-replication-item]' ).first().clone(); // table tr is currently the replication item |
| 75 |
} |
| 76 |
|
| 77 |
/** |
| 78 |
* Update references to element names to make them unique; the value itself doesn't matter: [0] -> [new_234] |
| 79 |
*/ |
| 80 |
function updateIds( $html, id ) { |
| 81 |
jQuery( 'input, select, label, .packetery-input-validation-message', $html ).each( function( i, element ) { |
| 82 |
var $element = jQuery( element ); |
| 83 |
|
| 84 |
updateId( $element, 'name', id, ['[', ']'], '' ); |
| 85 |
updateId( $element, 'data-lfv-message-id', id, ['-', '-'], '' ); |
| 86 |
updateId( $element, 'data-nette-rules', id, ['[', ']'], 'g' ); |
| 87 |
updateId( $element, 'for', id, ['-', '-'], '' ); |
| 88 |
updateId( $element, 'id', id, ['-', '-'], '' ); |
| 89 |
} ); |
| 90 |
} |
| 91 |
|
| 92 |
function updateId( $element, attrName, id, delimiters, flags ) { |
| 93 |
var value = $element.attr( attrName ); |
| 94 |
if ( !value ) { |
| 95 |
return; |
| 96 |
} |
| 97 |
|
| 98 |
// don't use data() because we want the raw values, not parsed json arrays/objects |
| 99 |
var regExp = new RegExp( '\\' + delimiters[ 0 ] + '0\\' + delimiters[ 1 ], flags ); |
| 100 |
$element.attr( attrName, value.replace( regExp, delimiters[ 0 ] + prefix + id + delimiters[ 1 ] ) ); |
| 101 |
} |
| 102 |
|
| 103 |
this.registerListeners(); |
| 104 |
}; |
| 105 |
|
