diff --git a/src/Field/MultipleInputTextField.php b/src/Field/MultipleInputTextField.php new file mode 100644 index 0000000000000000000000000000000000000000..fab83989cda40645ab355f631dc7ec1665c61185 --- /dev/null +++ b/src/Field/MultipleInputTextField.php @@ -0,0 +1,13 @@ +<?php + +namespace WPDesk\Forms\Field; + +class MultipleInputTextField extends InputTextField { + + /** + * @return string + */ + public function get_template_name() { + return 'input-text-multiple'; + } +} diff --git a/templates/input-text-multiple.php b/templates/input-text-multiple.php new file mode 100644 index 0000000000000000000000000000000000000000..7d3fff829b5f52988afb67e097dac6aaed342495 --- /dev/null +++ b/templates/input-text-multiple.php @@ -0,0 +1,106 @@ +<?php +/** + * @var \WPDesk\Forms\Field $field + * @var \WPDesk\View\Renderer\Renderer $renderer + * @var string $name_prefix + * @var string $value + * + * @var string $template_name Real field template. + * + */ +?> +<?php +if( empty( $value ) || is_string( $value ) ) { + $input_values[] = ''; +} else { + $input_values = $value; +} +?> +<div class="clone-element-container"> +<?php foreach( $input_values as $text_value ): ?> +<?php if (!\in_array($field->get_type(), ['number', 'text', 'hidden'])): ?> + <input type="hidden" name="<?php echo $name_prefix.'['.$field->get_name().']'; ?>" value="no"/> +<?php endif; ?> + +<?php if ($field->get_type() === 'checkbox' && $field->has_sublabel()): ?><label><?php endif; ?> + <div class="clone-wrapper"> + <input + type="<?php echo \esc_attr($field->get_type()); ?>" + name="<?php echo \esc_attr($name_prefix).'['.\esc_attr($field->get_name()).'][]'; ?>" + id="<?php echo \esc_attr($field->get_id()); ?>" + + <?php if ($field->has_classes()): ?> + class="<?php echo \esc_attr($field->get_classes()); ?>" + <?php endif; ?> + + <?php if ($field->get_type() === 'text' && $field->has_placeholder()):?> + placeholder="<?php echo \esc_html($field->get_placeholder());?>" + <?php endif; ?> + + <?php foreach ($field->get_attributes() as $key => $atr_val): + echo $key.'="'.\esc_attr($atr_val).'"'; ?> + <?php endforeach; ?> + + <?php if ($field->is_required()): ?>required="required"<?php endif; ?> + <?php if ($field->is_disabled()): ?>disabled="disabled"<?php endif; ?> + <?php if ($field->is_readonly()): ?>readonly="readonly"<?php endif; ?> + <?php if (\in_array($field->get_type(), ['number', 'text', 'hidden'])): ?> + value="<?php echo \esc_html($text_value); ?>" + <?php else: ?> + value="yes" + <?php if ($value === 'yes'): ?> + checked="checked" + <?php endif; ?> + <?php endif; ?> + /> + <span class="add-field"><span class="dashicons dashicons-plus-alt"></span></span> + <span class="remove-field hidden"><span class="dashicons dashicons-remove"></span></span> + </div> + + <?php if ($field->get_type() === 'checkbox' && $field->has_sublabel()): ?> + <?php echo \esc_html($field->get_sublabel()); ?></label> +<?php endif; ?> +<?php endforeach; ?> +</div> +<style> + .clone-element-container .clone-wrapper .add-field { + display: none; + } + .clone-element-container .clone-wrapper:first-child .add-field { + display: inline-block; + } + + .clone-element-container .clone-wrapper .remove-field { + display: inline-block; + } + .clone-element-container .clone-wrapper:first-child .remove-field { + display: none; + } +</style> +<script> + jQuery( function ( $ ) { + var add_field = jQuery( '.add-field' ); + if ( add_field.length ) { + add_field.click( function ( e ) { + let html = jQuery( this ).closest( '.clone-wrapper' ).clone(); + html.find( 'input' ).val( '' ); + jQuery( this ).closest( '.clone-wrapper' ).after( html ); + } ) + + jQuery( '.clone-element-container' ).on( "click", ".remove-field", function ( e ) { + let is_disabled = jQuery( this ).hasClass( 'field-disabled' ); + if ( !is_disabled ) { + jQuery( this ).closest( '.clone-wrapper' ).remove(); + } + } ) + + jQuery( '.form-table' ).find( 'input,select' ).each( function ( i, v ) { + let disabled = jQuery( this ).attr( 'data-disabled' ); + if ( disabled === 'yes' ) { + jQuery( this ).attr( 'disabled', 'disabled' ) + jQuery( this ).parent().addClass( 'field-disabled' ); + } + } ); + } + } ); +</script>