← All changes | includes/blocks/form-password/block.php +31 -24 2.9.1 → 2.14.0 View file →

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