| @@ -17,9 +17,8 @@ | ||
| 17 | 17 | * |
| 18 | 18 | * @since 0.0.1 |
| 19 | 19 | */ |
| 20 | 20 | class Number_Markup extends Base { |
| 21 | - | |
| 22 | 21 | /** |
| 23 | 22 | * Minimum value allowed for the input field. |
| 24 | 23 | * |
| 25 | 24 | * @var string |
| @@ -67,8 +66,32 @@ | ||
| 67 | 66 | */ |
| 68 | 67 | protected $max_value_attr; |
| 69 | 68 | |
| 70 | 69 | /** |
| 70 | + * Prefix for the input field. | |
| 71 | + * | |
| 72 | + * @var string | |
| 73 | + * @since 1.5.0 | |
| 74 | + */ | |
| 75 | + protected $prefix; | |
| 76 | + | |
| 77 | + /** | |
| 78 | + * Suffix for the input field. | |
| 79 | + * | |
| 80 | + * @var string | |
| 81 | + * @since 1.5.0 | |
| 82 | + */ | |
| 83 | + protected $suffix; | |
| 84 | + | |
| 85 | + /** | |
| 86 | + * Read-only attribute for the number field. | |
| 87 | + * | |
| 88 | + * @var bool | |
| 89 | + * @since 1.7.2 | |
| 90 | + */ | |
| 91 | + protected $read_only; | |
| 92 | + | |
| 93 | + /** | |
| 71 | 94 | * Initialize the properties based on block attributes. |
| 72 | 95 | * |
| 73 | 96 | * @param array<mixed> $attributes Block attributes. |
| 74 | 97 | * @since 0.0.2 |
| @@ -73,16 +96,19 @@ | ||
| 73 | 96 | * @param array<mixed> $attributes Block attributes. |
| 74 | 97 | * @since 0.0.2 |
| 75 | 98 | */ |
| 76 | 99 | public function __construct( $attributes ) { |
| 100 | + $this->slug = 'number'; | |
| 77 | 101 | $this->set_properties( $attributes ); |
| 78 | - $this->slug = 'number'; | |
| 79 | - $this->min_value = isset( $attributes['minValue'] ) ? $attributes['minValue'] : ''; | |
| 80 | - $this->max_value = isset( $attributes['maxValue'] ) ? $attributes['maxValue'] : ''; | |
| 81 | - $this->format_type = isset( $attributes['formatType'] ) ? $attributes['formatType'] : ''; | |
| 82 | - $this->format_attr = $this->format_type ? ' format-type="' . $this->format_type . '" ' : ''; | |
| 83 | - $this->min_value_attr = $this->min_value ? ' min="' . $this->min_value . '" ' : ''; | |
| 84 | - $this->max_value_attr = $this->max_value ? ' max="' . $this->max_value . '" ' : ''; | |
| 102 | + $this->min_value = $attributes['minValue'] ?? ''; | |
| 103 | + $this->max_value = $attributes['maxValue'] ?? ''; | |
| 104 | + $this->format_type = $attributes['formatType'] ?? ''; | |
| 105 | + $this->format_attr = $this->format_type ? ' format-type="' . esc_attr( $this->format_type ) . '" ' : ''; | |
| 106 | + $this->min_value_attr = $this->min_value ? ' min="' . esc_attr( $this->min_value ) . '" ' : ''; | |
| 107 | + $this->max_value_attr = $this->max_value ? ' max="' . esc_attr( $this->max_value ) . '" ' : ''; | |
| 108 | + $this->prefix = $attributes['prefix'] ?? ''; | |
| 109 | + $this->suffix = $attributes['suffix'] ?? ''; | |
| 110 | + $this->read_only = ! empty( trim( $this->default ) ) && $attributes['readOnly']; | |
| 85 | 111 | $this->set_input_label( __( 'Number', 'sureforms' ) ); |
| 86 | 112 | $this->set_error_msg( $attributes, 'srfm_number_block_required_text' ); |
| 87 | 113 | $this->set_unique_slug(); |
| 88 | 114 | $this->set_field_name( $this->unique_slug ); |
| @@ -94,20 +120,30 @@ | ||
| 94 | 120 | /** |
| 95 | 121 | * Render the sureforms number classic styling |
| 96 | 122 | * |
| 97 | 123 | * @since 0.0.2 |
| 98 | - * @return string|boolean | |
| 124 | + * @return string|bool | |
| 99 | 125 | */ |
| 100 | 126 | public function markup() { |
| 127 | + $data_config = $this->field_config; | |
| 128 | + $this->class_name = $this->get_field_classes( $this->read_only ? [ 'srfm-read-only' ] : [] ); | |
| 129 | + | |
| 101 | 130 | ob_start(); ?> |
| 102 | - <div data-block-id="<?php echo esc_attr( $this->block_id ); ?>" class="srfm-block-single srfm-block srfm-<?php echo esc_attr( $this->slug ); ?>-block<?php echo esc_attr( $this->block_width ); ?><?php echo esc_attr( $this->class_name ); ?> <?php echo esc_attr( $this->conditional_class ); ?>"> | |
| 131 | + <div data-block-id="<?php echo esc_attr( $this->block_id ); ?>" class="<?php echo esc_attr( $this->class_name ); ?>" <?php echo $data_config ? "data-field-config='" . esc_attr( $data_config ) . "'" : ''; ?>> | |
| 103 | 132 | <?php echo wp_kses_post( $this->label_markup ); ?> |
| 104 | 133 | <?php echo wp_kses_post( $this->help_markup ); ?> |
| 105 | 134 | <div class="srfm-block-wrap"> |
| 106 | - <input class="srfm-input-common srfm-input-<?php echo esc_attr( $this->slug ); ?>" type="text" name="<?php echo esc_attr( $this->field_name ); ?>" id="<?php echo esc_attr( $this->unique_slug ); ?>" | |
| 107 | - <?php echo ! empty( $this->aria_described_by ) ? "aria-describedby='" . esc_attr( trim( $this->aria_described_by ) ) . "'" : ''; ?> | |
| 108 | - aria-required="<?php echo esc_attr( $this->aria_require_attr ); ?>" <?php echo wp_kses_post( $this->placeholder_attr . '' . $this->default_value_attr . '' . $this->format_attr . '' . $this->min_value_attr . '' . $this->max_value_attr ); ?> /> | |
| 109 | - <?php echo $this->error_svg; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Ignored to render svg ?> | |
| 135 | + <div class="srfm-input-content"> | |
| 136 | + <?php if ( ! empty( $this->prefix ) ) { ?> | |
| 137 | + <span class="srfm-number-prefix" aria-hidden="true"><?php echo esc_html( $this->prefix ); ?></span> | |
| 138 | + <?php } ?> | |
| 139 | + <input class="srfm-input-common srfm-input-<?php echo esc_attr( $this->slug ); ?>" type="text" name="<?php echo esc_attr( $this->field_name ); ?>" id="<?php echo esc_attr( $this->unique_slug ); ?>" | |
| 140 | + <?php echo ! empty( $this->aria_described_by ) ? "aria-describedby='" . esc_attr( trim( $this->aria_described_by ) ) . "'" : ''; ?> | |
| 141 | + data-required="<?php echo esc_attr( $this->data_require_attr ); ?>" aria-required="<?php echo esc_attr( $this->data_require_attr ); ?>" <?php echo wp_kses_post( $this->placeholder_attr . '' . $this->default_value_attr . '' . $this->format_attr . '' . $this->min_value_attr . '' . $this->max_value_attr ); ?> <?php echo $this->read_only ? 'readonly' : ''; ?> /> | |
| 142 | + <?php if ( ! empty( $this->suffix ) ) { ?> | |
| 143 | + <span class="srfm-number-suffix" aria-hidden="true"><?php echo esc_html( $this->suffix ); ?></span> | |
| 144 | + <?php } ?> | |
| 145 | + </div> | |
| 110 | 146 | </div> |
| 111 | 147 | <div class="srfm-error-wrap"> |
| 112 | 148 | <?php echo wp_kses_post( $this->error_msg_markup ); ?> |
| 113 | 149 | </div> |