← All changes | includes/blocks/form-input/block.php +27 -22 2.9.1 → 2.14.0 View file →

		@@ -1,7 +1,10 @@
1	1	<?php
2	2	namespace ABlocks\Blocks\FormInput;
3	3
	4	+use ABlocks\Controls\Color;
	5	+use ABlocks\Controls\Range;
	6	+
4	7	if ( ! defined( 'ABSPATH' ) ) {
5	8	exit;
6	9	}
7	10
		@@ -17,15 +20,17 @@
17	20	$css_generator->add_class_styles(
18	21	'{{WRAPPER}}',
19	22	$this->get_wrapper_css( $attributes ),
20	23	$this->get_wrapper_css( $attributes, 'Tablet' ),
21		- $this->get_wrapper_css( $attributes, 'Mobile' )
	24	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	25	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
22	26	);
23	27	$css_generator->add_class_styles(
24	28	'{{WRAPPER}}.ablocks-block--form-input',
25	29	$this->get_input_block_main_wrapper( $attributes ),
26	30	$this->get_input_block_main_wrapper( $attributes, 'Tablet' ),
27		- $this->get_input_block_main_wrapper( $attributes, 'Mobile' )
	31	+ $this->get_input_block_main_wrapper( $attributes, 'Mobile' ),
	32	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_input_block_main_wrapper( $attributes, $device ); } )
28	33	);
29	34
30	35	// Generate button icon CSS start
31	36	$css_generator->add_class_styles(
		@@ -31,15 +36,17 @@
31	36	$css_generator->add_class_styles(
32	37	'{{WRAPPER}} .ablocks-icon-wrap',
33	38	$this->get_icon_wrapper_css( $attributes ),
34	39	$this->get_icon_wrapper_css( $attributes, 'Tablet' ),
35		- $this->get_icon_wrapper_css( $attributes, 'Mobile' )
	40	+ $this->get_icon_wrapper_css( $attributes, 'Mobile' ),
	41	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_wrapper_css( $attributes, $device ); } )
36	42	);
37	43	$css_generator->add_class_styles(
38	44	'{{WRAPPER}} .ablocks-form-builder__input-show-icon',
39	45	$this->get_icon_space_css( $attributes ),
40	46	$this->get_icon_space_css( $attributes, 'Tablet' ),
41		- $this->get_icon_space_css( $attributes, 'Mobile' )
	47	+ $this->get_icon_space_css( $attributes, 'Mobile' ),
	48	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_space_css( $attributes, $device ); } )
42	49	);
43	50
44	51	$css_generator->add_class_styles(
45	52	'{{WRAPPER}} .ablocks-form-builder__input-toggle-password .ablocks-icon-wrap ',
		@@ -54,25 +61,18 @@
54	61
55	62	}
56	63	public function get_icon_wrapper_css( $attributes, $device = '' ) {
57	64	$css = [];
58		-
59		- // Check for 'inputIconSize' in the attributes and set font-size
60	65	if ( isset( $attributes['inputIconSize'] ) ) {
61	66	$css['font-size'] = $attributes['inputIconSize'] . 'px';
62	67	}
63		-
64		- // Check for 'iconColor' in the attributes and set fill color
65		- if ( isset( $attributes['iconColor'] ) ) {
66		- $css['fill'] = $attributes['iconColor'];
67		- }
68		-
69		- return $css;
	68	+ return array_merge(
	69	+ [ 'fill' => Color::get_css( isset( $attributes['iconColor'] ) ? $attributes['iconColor'] : '' ) ],
	70	+ $css
	71	+ );
70	72	}
71	73	public function get_icon_space_css( $attributes, $device = '' ) {
72	74	$css = [];
73		-
74		- // Check for 'inputIconSpace' in the attributes and set padding-left
75	75	if ( isset( $attributes['inputIconSpace'] ) ) {
76	76	$css['padding-left'] = $attributes['inputIconSpace'] . 'px';
77	77	}
78	78
		@@ -80,18 +80,23 @@
80	80	}
81	81
82	82	public function get_input_block_main_wrapper( $attributes, $device = '' ) {
83	83	$css = [];
84		- $css['display'] = 'inline-block';
85	84	$css['box-sizing'] = 'border-box';
86		- $css['padding'] = '0px 2px';
87	85
88		- if ( isset( $attributes['inputWidth'] ) && is_numeric( $attributes['inputWidth'] ) ) {
89		- $css['width'] = ( $attributes['inputWidth'] - 1 ) . '%';
90		- } else {
91		- // Handle case where inputWidth is not set or not a number
92		- $css['width'] = '100%'; // or some default value
	86	+ // The device's own width, else the nearest containing wider device's
	87	+ // (custom breakpoints included), else Desktop's.
	88	+ $input_width = isset( $attributes['inputWidth'] ) ? (array) $attributes['inputWidth'] : [];
	89	+ $widthValue = \ABlocks\Helper::get_responsive_value( $input_width, 'value', $device );
	90	+ $widthValue = false === $widthValue ? 100 : $widthValue;
	91	+ $widthUnit = \ABlocks\Helper::get_responsive_value( $input_width, 'valueUnit', $device );
	92	+ $widthUnit = false === $widthUnit ? '%' : $widthUnit;
	93	+
	94	+ if ( is_numeric( $widthValue ) ) {
	95	+ $widthValue = max( 0, floatval( $widthValue ) - 1 );
93	96	}
	97	+
	98	+ $css['width'] = $widthValue . $widthUnit;
94	99
95	100	return $css;
96	101	}
97	102