cerebrate/templates/element/genericElements/Form/multiFieldButton.php

80 lines
3.0 KiB
PHP

<?php
$seed = 'mfb-' . mt_rand();
?>
<div class="d-flex align-items-center">
<?php
$content = sprintf('<a class="btn btn-primary btn-xs">%s</a><a class="btn btn-link btn-xs">%s</a>', $this->Bootstrap->icon('plus'), __('Add another {0}', h($metaTemplateFieldName)));
$content = sprintf(
'%s%s',
$this->Bootstrap->button([
'nodeType' => 'a',
'icon' => 'plus',
'variant' => 'secondary',
'size' => 'xs',
]),
$this->Bootstrap->button([
'nodeType' => 'a',
'text' => __('Add another {0}', h($metaTemplateFieldName)),
'variant' => 'link',
'class' => ['link-secondary'],
'size' => 'xs',
])
);
?>
<?=
$this->Bootstrap->button([
'id' => $seed,
'html' => $content,
'variant' => 'link',
'size' => 'xs',
]);
?>
</div>
<script>
(function() {
$('#<?= $seed ?>').click(addNewField)
function addNewField() {
const $clicked = $(this);
let $lastInputContainer = $clicked.closest('.multi-metafields-container').children().not('.template-container').find('input').last().closest('.multi-metafield-container')
if ($lastInputContainer.length == 0) {
$lastInputContainer = $clicked.closest('.multi-metafields-container').find('input').last().closest('.multi-metafield-container')
}
const $clonedContainer = $lastInputContainer.clone()
$clonedContainer
.removeClass('has-error')
.find('.error-message ').remove()
$clonedContainer
.find('label.form-label').text('')
const $clonedInput = $clonedContainer.find('input, select')
if ($clonedInput.length > 0) {
const injectedTemplateId = $clicked.closest('.multi-metafields-container').find('.new-metafield').length
$clonedInput.addClass('new-metafield')
adjustClonedInputAttr($clonedInput, injectedTemplateId)
$clonedContainer.insertAfter($lastInputContainer)
}
}
function adjustClonedInputAttr($inputs, injectedTemplateId) {
$inputs.each(function() {
const $input = $(this)
let explodedPath = $input.attr('field').split('.').splice(0, 5)
explodedPath.push('new', injectedTemplateId)
dottedPathStr = explodedPath.join('.')
brackettedPathStr = explodedPath.map((elem, i) => {
return i == 0 ? elem : `[${elem}]`
}).join('')
const attrs = ['id', 'field', 'name']
attrs.forEach((attr) => {
if ($input.attr(attr) !== undefined) {
$input.attr(attr, attr === 'name' ? brackettedPathStr : dottedPathStr)
}
})
$input
.val('')
.removeClass('is-invalid')
})
}
})()
</script>