← All changes | includes/blocks/toggle/block.php +94 -24 2.9.1 → 2.14.0 View file →

		@@ -6,19 +6,21 @@
6	6	}
7	7
8	8	use ABlocks\Classes\BlockBaseAbstract;
9	9	use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
10	11	use ABlocks\Controls\Alignment;
11	12	use ABlocks\Controls\Typography;
12	13	use ABlocks\Controls\Range;
13	14	use ABlocks\Controls\Dimensions;
14	15	use ABlocks\Controls\Border;
	16	+use ABlocks\Controls\Color;
15	17
16	18
17	19	class Block extends BlockBaseAbstract {
18	20	protected $block_name = 'toggle';
19	21
20		- public function build_css( $attributes ) {
	22	+ public function build_css_v1( $attributes ) {
21	23	$css_generator = new CssGenerator( $attributes );
22	24
23	25	$css_generator->add_class_styles(
24	26	'{{WRAPPER}} .ablocks-toggle__topbar',
		@@ -23,27 +25,31 @@
23	25	$css_generator->add_class_styles(
24	26	'{{WRAPPER}} .ablocks-toggle__topbar',
25	27	$this->get_toggle_bar_css( $attributes ),
26	28	$this->get_toggle_bar_css( $attributes, 'Tablet' ),
27		- $this->get_toggle_bar_css( $attributes, 'Mobile' )
	29	+ $this->get_toggle_bar_css( $attributes, 'Mobile' ),
	30	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_toggle_bar_css( $attributes, $device ); } )
28	31	);
29	32	$css_generator->add_class_styles(
30	33	'{{WRAPPER}} .ablocks-toggle__topbar:hover',
31	34	$this->get_toggle_bar_hover_css( $attributes ),
32	35	$this->get_toggle_bar_hover_css( $attributes, 'Tablet' ),
33		- $this->get_toggle_bar_hover_css( $attributes, 'Mobile' )
	36	+ $this->get_toggle_bar_hover_css( $attributes, 'Mobile' ),
	37	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_toggle_bar_hover_css( $attributes, $device ); } )
34	38	);
35	39	$css_generator->add_class_styles(
36	40	'{{WRAPPER}} .ablocks-toggle__topbar-wrapper',
37	41	$this->get_toggle_bar_wrapper_css( $attributes ),
38	42	$this->get_toggle_bar_wrapper_css( $attributes, 'Tablet' ),
39		- $this->get_toggle_bar_wrapper_css( $attributes, 'Mobile' )
	43	+ $this->get_toggle_bar_wrapper_css( $attributes, 'Mobile' ),
	44	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_toggle_bar_wrapper_css( $attributes, $device ); } )
40	45	);
41	46	$css_generator->add_class_styles(
42	47	'{{WRAPPER}} .ablocks-toggle__label',
43	48	$this->get_toggle_label_css( $attributes ),
44	49	$this->get_toggle_label_css( $attributes, 'Tablet' ),
45		- $this->get_toggle_label_css( $attributes, 'Mobile' )
	50	+ $this->get_toggle_label_css( $attributes, 'Mobile' ),
	51	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_toggle_label_css( $attributes, $device ); } )
46	52	);
47	53	$css_generator->add_class_styles(
48	54	'{{WRAPPER}} .ablocks-toggle__label--active',
49	55	$this->get_toggle_label_active_css( $attributes )
		@@ -78,21 +84,90 @@
78	84	}
79	85
80	86	return $css_generator->generate_css();
81	87	}
	88	+ public function build_css_v2( $attributes ) {
	89	+ $css_generator = new CssGeneratorV2( $attributes );
82	90
	91	+ $css_generator->add_class_styles(
	92	+ '{{WRAPPER}} .ablocks-toggle__topbar',
	93	+ $this->get_toggle_bar_css( $attributes ),
	94	+ $this->get_toggle_bar_css( $attributes, 'Tablet' ),
	95	+ $this->get_toggle_bar_css( $attributes, 'Mobile' ),
	96	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_toggle_bar_css( $attributes, $device ); } )
	97	+ );
	98	+ $css_generator->add_class_styles(
	99	+ '{{WRAPPER}} .ablocks-toggle__topbar:hover',
	100	+ $this->get_toggle_bar_hover_css( $attributes ),
	101	+ $this->get_toggle_bar_hover_css( $attributes, 'Tablet' ),
	102	+ $this->get_toggle_bar_hover_css( $attributes, 'Mobile' ),
	103	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_toggle_bar_hover_css( $attributes, $device ); } )
	104	+ );
	105	+ $css_generator->add_class_styles(
	106	+ '{{WRAPPER}} .ablocks-toggle__topbar-wrapper',
	107	+ $this->get_toggle_bar_wrapper_css( $attributes ),
	108	+ $this->get_toggle_bar_wrapper_css( $attributes, 'Tablet' ),
	109	+ $this->get_toggle_bar_wrapper_css( $attributes, 'Mobile' ),
	110	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_toggle_bar_wrapper_css( $attributes, $device ); } )
	111	+ );
	112	+ $css_generator->add_class_styles(
	113	+ '{{WRAPPER}} .ablocks-toggle__label',
	114	+ $this->get_toggle_label_css( $attributes ),
	115	+ $this->get_toggle_label_css( $attributes, 'Tablet' ),
	116	+ $this->get_toggle_label_css( $attributes, 'Mobile' ),
	117	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_toggle_label_css( $attributes, $device ); } )
	118	+ );
	119	+ $css_generator->add_class_styles(
	120	+ '{{WRAPPER}} .ablocks-toggle__label--active',
	121	+ $this->get_toggle_label_active_css( $attributes )
	122	+ );
	123	+
	124	+ if ( ! empty( $attributes['toggleNormalBgColor'] ) ) {
	125	+ $css_generator->add_class_styles(
	126	+ '{{WRAPPER}} .ablocks-toggle__slider',
	127	+ [ 'background-color' => Color::get_css( isset( $attributes['toggleNormalBgColor'] ) ? $attributes['toggleNormalBgColor'] : '' ) ]
	128	+ );
	129	+ }
	130	+
	131	+ if ( ! empty( $attributes['toggleNormalColor'] ) ) {
	132	+ $css_generator->add_class_styles(
	133	+ '{{WRAPPER}} .ablocks-toggle__slider:before',
	134	+ [ 'background-color' => Color::get_css( isset( $attributes['toggleNormalColor'] ) ? $attributes['toggleNormalColor'] : '' ) ]
	135	+ );
	136	+ }
	137	+
	138	+ if ( ! empty( $attributes['toggleActiveBgColor'] ) ) {
	139	+ $css_generator->add_class_styles(
	140	+ '{{WRAPPER}} input.ablocks-toggle__checkbox:checked + .ablocks-toggle__slider',
	141	+ [ 'background-color' => Color::get_css( isset( $attributes['toggleActiveBgColor'] ) ? $attributes['toggleActiveBgColor'] : '' ) ]
	142	+ );
	143	+ }
	144	+
	145	+ if ( ! empty( $attributes['toggleActiveColor'] ) ) {
	146	+ $css_generator->add_class_styles(
	147	+ '{{WRAPPER}} input.ablocks-toggle__checkbox:checked + .ablocks-toggle__slider:before',
	148	+ [ 'background-color' => Color::get_css( isset( $attributes['toggleActiveColor'] ) ? $attributes['toggleActiveColor'] : '' ) ]
	149	+ );
	150	+ }
	151	+
	152	+ return $css_generator->generate_css();
	153	+ }
	154	+ public function build_css( $attributes ) {
	155	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	156	+ return $this->build_css_v2( $attributes );
	157	+ }
	158	+ return $this->build_css_v1( $attributes );
	159	+ }
	160	+
83	161	public function get_toggle_bar_css( $attributes, $device = '' ) {
84		- $toggleBarCSS = [];
85		- if ( ! empty( $attributes['toggleBarBgColor'] ) ) {
86		- $toggleBarCSS['background-color'] = $attributes['toggleBarBgColor'];
87		- }
	162	+
88	163	return array_merge(
89		- $toggleBarCSS,
	164	+ [ 'background-color' => Color::get_css( isset( $attributes['toggleBarBgColor'] ) ? $attributes['toggleBarBgColor'] : '' ) ],
90	165	Range::get_css([
91	166	'attributeValue' => $attributes['space'],
92	167	'attribute_object_key' => 'value',
93	168	'isResponsive' => true,
94		- 'defaultValue' => 0,
	169	+ 'defaultValue' => 10,
95	170	'unitDefaultValue' => 'px',
96	171	'property' => 'margin-bottom',
97	172	'device' => $device,
98	173	]),
		@@ -106,9 +181,9 @@
106	181	$toggleBarWrapperCSS = Range::get_css([
107	182	'attributeValue' => $attributes['gap'],
108	183	'attribute_object_key' => 'value',
109	184	'isResponsive' => true,
110		- 'defaultValue' => 0,
	185	+ 'defaultValue' => 10,
111	186	'unitDefaultValue' => 'px',
112	187	'property' => 'gap',
113	188	'device' => $device,
114	189	]);
		@@ -123,21 +198,16 @@
123	198	return isset( $attributes['toggleBarBorder'] ) ? Border::get_hover_css( $attributes['toggleBarBorder'], $device ) : [];
124	199	}
125	200
126	201	public function get_toggle_label_css( $attributes, $device = '' ) {
127		- $labelCSS = isset( $attributes['labelTypography'] ) ? Typography::get_css( $attributes['labelTypography'], '', $device ) : [];
128		- if ( ! empty( $attributes['labelNormalColor'] ) ) {
129		- $labelCSS['color'] = $attributes['labelNormalColor'];
130		- }
131		- return $labelCSS;
	202	+ $typographyValueGlobal = ! empty( $attributes['labelTypographyGlobal'] ) ? $attributes['labelTypographyGlobal'] : [];
	203	+ $labelCSS = isset( $attributes['labelTypography'] ) ? Typography::get_css( $attributes['labelTypography'], '', $device, $typographyValueGlobal ) : [];
	204	+ return array_merge(
	205	+ [ 'color' => Color::get_css( isset( $attributes['labelNormalColor'] ) ? $attributes['labelNormalColor'] : '' ) ],
	206	+ $labelCSS
	207	+ );
132	208	}
133	209
134	210	public function get_toggle_label_active_css( $attributes ) {
135		- $labelActiveCSS = [];
136		-
137		- if ( ! empty( $attributes['labelActiveColor'] ) ) {
138		- $labelActiveCSS['color'] = $attributes['labelActiveColor'];
139		- }
140		-
141		- return $labelActiveCSS;
	211	+ return [ 'color' => Color::get_css( isset( $attributes['labelActiveColor'] ) ? $attributes['labelActiveColor'] : '' ) ];
142	212	}
143	213	}