← All changes | includes/blocks/menu/block.php +298 -101 2.9.1 → 2.14.0 View file →

		@@ -1,7 +1,11 @@
1	1	<?php
2	2	namespace ABlocks\Blocks\Menu;
3	3
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
4	8	use ABlocks\Controls\Typography;
5	9	use ABlocks\Controls\Dimensions;
6	10	use ABlocks\Controls\Border;
7	11	use ABlocks\Classes\BlockBaseAbstract;
		@@ -7,41 +11,60 @@
7	11	use ABlocks\Classes\BlockBaseAbstract;
8	12	use ABlocks\Classes\CssGenerator;
9	13	use ABlocks\Controls\Range;
10	14	use ABlocks\Controls\BoxShadow;
	15	+use ABlocks\Classes\CssGeneratorV2;
	16	+use ABlocks\Controls\Color;
	17	+use ABlocks\Controls\Alignment;
11	18
12	19	class Block extends BlockBaseAbstract {
13	20	protected $block_name = 'menu';
14	21
15		- public function build_css( $attributes ) {
16		- // Generate CSS
17		- $css_generator = new CssGenerator( $attributes );
18		- // Wrapper CSS
	22	+ public function build_css_v1( $attributes ) {
	23	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
19	24	$css_generator->add_class_styles(
20	25	'{{WRAPPER}} .ablocks-menu',
21	26	$this->get_menu_css( $attributes, '' ),
22	27	$this->get_menu_css( $attributes, 'Tablet' ),
23		- $this->get_menu_css( $attributes, 'Mobile' )
	28	+ $this->get_menu_css( $attributes, 'Mobile' ),
	29	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_css( $attributes, $device ); } )
24	30	);
25	31	$css_generator->add_class_styles(
26	32	'{{WRAPPER}}.ablocks-menu',
27	33	$this->get_menu_css( $attributes, '' ),
28	34	$this->get_menu_css( $attributes, 'Tablet' ),
29		- $this->get_menu_css( $attributes, 'Mobile' )
	35	+ $this->get_menu_css( $attributes, 'Mobile' ),
	36	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_css( $attributes, $device ); } )
30	37	);
31	38	$css_generator->add_class_styles(
32	39	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item',
33	40	$this->get_menu_item_css( $attributes ),
34	41	$this->get_menu_item_css( $attributes, 'Tablet' ),
35		- $this->get_menu_item_css( $attributes, 'Mobile' )
	42	+ $this->get_menu_item_css( $attributes, 'Mobile' ),
	43	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_css( $attributes, $device ); } )
36	44	);
37	45	$css_generator->add_class_styles(
	46	+ '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item .ablocks-menu-item__link',
	47	+ $this->get_menu_item_css( $attributes ),
	48	+ $this->get_menu_item_css( $attributes, 'Tablet' ),
	49	+ $this->get_menu_item_css( $attributes, 'Mobile' ),
	50	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_css( $attributes, $device ); } )
	51	+ );
	52	+ $css_generator->add_class_styles(
38	53	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover',
39	54	$this->get_menu_item_hover_css( $attributes, '' ),
40	55	$this->get_menu_item_hover_css( $attributes, 'Tablet' ),
41		- $this->get_menu_item_hover_css( $attributes, 'Mobile' )
	56	+ $this->get_menu_item_hover_css( $attributes, 'Mobile' ),
	57	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_hover_css( $attributes, $device ); } )
42	58	);
43	59	$css_generator->add_class_styles(
	60	+ '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__link:hover',
	61	+ $this->get_menu_item_hover_css( $attributes, '' ),
	62	+ $this->get_menu_item_hover_css( $attributes, 'Tablet' ),
	63	+ $this->get_menu_item_hover_css( $attributes, 'Mobile' ),
	64	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_hover_css( $attributes, $device ); } )
	65	+ );
	66	+ $css_generator->add_class_styles(
44	67	'{{WRAPPER}} .ablocks-block--menu-child-sub',
45	68	$this->get_sub_menu_css( $attributes, '' ),
46	69	$this->get_sub_menu_css( $attributes, 'Tablet' ),
47	70	$this->get_sub_menu_css( $attributes, 'Mobile' ),
		@@ -71,15 +94,17 @@
71	94	$css_generator->add_class_styles(
72	95	'{{WRAPPER}} .ablocks-menu-child-mega',
73	96	$this->getMegaMenuCSS( $attributes ),
74	97	$this->getMegaMenuCSS( $attributes, 'Tablet' ),
75		- $this->getMegaMenuCSS( $attributes, 'Mobile' )
	98	+ $this->getMegaMenuCSS( $attributes, 'Mobile' ),
	99	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getMegaMenuCSS( $attributes, $device ); } )
76	100	);
77	101	$css_generator->add_class_styles(
78	102	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__link',
79	103	$this->get_menu_item_link_css( $attributes, '' ),
80	104	$this->get_menu_item_link_css( $attributes, 'Tablet' ),
81		- $this->get_menu_item_link_css( $attributes, 'Mobile' )
	105	+ $this->get_menu_item_link_css( $attributes, 'Mobile' ),
	106	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_link_css( $attributes, $device ); } )
82	107	);
83	108	$css_generator->add_class_styles(
84	109	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover > .ablocks-menu-item__link ',
85	110	$this->get_menu_item_link_hover_css( $attributes, '' ),
		@@ -86,9 +111,10 @@
86	111	);
87	112	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__dropdown-icon svg',
88	113	$this->get_menu_item_dropdown_icon_css( $attributes ),
89	114	$this->get_menu_item_dropdown_icon_css( $attributes, 'Tablet' ),
90		- $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' )
	115	+ $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' ),
	116	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_dropdown_icon_css( $attributes, $device ); } )
91	117	);
92	118	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover > .ablocks-menu-item__dropdown-icon svg', $this->get_menu_item_dropdown_icon_hover_css( $attributes ) );
93	119	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper', $this->get_hamburger_menu_wrapper_css( $attributes ) );
94	120	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger ',
		@@ -104,30 +130,191 @@
104	130	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger .ablocks-menu__trigger-item ', $this->get_hamburger_menu_item_css( $attributes ) );
105	131
106	132	return $css_generator->generate_css();
107	133	}
	134	+ public function build_css_v2( $attributes ) {
	135	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	136	+ // Wrapper CSS
	137	+ $css_generator->add_class_styles(
	138	+ '{{WRAPPER}} .ablocks-menu',
	139	+ $this->get_menu_css( $attributes, '' ),
	140	+ $this->get_menu_css( $attributes, 'Tablet' ),
	141	+ $this->get_menu_css( $attributes, 'Mobile' ),
	142	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_css( $attributes, $device ); } )
	143	+ );
	144	+ $css_generator->add_class_styles(
	145	+ '{{WRAPPER}}.ablocks-menu',
	146	+ $this->get_menu_css( $attributes, '' ),
	147	+ $this->get_menu_css( $attributes, 'Tablet' ),
	148	+ $this->get_menu_css( $attributes, 'Mobile' ),
	149	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_css( $attributes, $device ); } )
	150	+ );
	151	+ $css_generator->add_class_styles(
	152	+ '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item',
	153	+ $this->get_menu_item_css( $attributes ),
	154	+ $this->get_menu_item_css( $attributes, 'Tablet' ),
	155	+ $this->get_menu_item_css( $attributes, 'Mobile' ),
	156	+ $this->get_menu_tablet_hamburger_css( $attributes, $this->get_menu_responsive_background_only_css( $attributes ) ),
	157	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_css( $attributes, $device ); } )
	158	+ );
	159	+ $css_generator->add_class_styles(
	160	+ '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item .ablocks-menu-item__link',
	161	+ $this->get_menu_item_css( $attributes ),
	162	+ $this->get_menu_item_css( $attributes, 'Tablet' ),
	163	+ $this->get_menu_item_css( $attributes, 'Mobile' ),
	164	+ $this->get_menu_tablet_hamburger_css( $attributes, $this->get_menu_responsive_background_only_css( $attributes ) ),
	165	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_css( $attributes, $device ); } )
	166	+ );
	167	+ $css_generator->add_class_styles(
	168	+ '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover',
	169	+ $this->get_menu_item_hover_css( $attributes, '' ),
	170	+ $this->get_menu_item_hover_css( $attributes, 'Tablet' ),
	171	+ $this->get_menu_item_hover_css( $attributes, 'Mobile' ),
	172	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_hover_css( $attributes, $device ); } )
	173	+ );
	174	+ $css_generator->add_class_styles(
	175	+ '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item .ablocks-menu-item__link:hover',
	176	+ $this->get_menu_item_hover_css( $attributes, '' ),
	177	+ $this->get_menu_item_hover_css( $attributes, 'Tablet' ),
	178	+ $this->get_menu_item_hover_css( $attributes, 'Mobile' ),
	179	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_hover_css( $attributes, $device ); } )
	180	+ );
	181	+ $css_generator->add_class_styles(
	182	+ '{{WRAPPER}} .ablocks-block--menu-child-sub',
	183	+ $this->get_sub_menu_css( $attributes, '' ),
	184	+ $this->get_sub_menu_css( $attributes, 'Tablet' ),
	185	+ $this->get_sub_menu_css( $attributes, 'Mobile' ),
	186	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_menu_css( $attributes, $device ); } )
	187	+ );
	188	+ $css_generator->add_class_styles(
	189	+ '{{WRAPPER}} .ablocks-block--menu-child-sub:hover',
	190	+ $this->get_sub_menu_hover_css( $attributes, '' ),
	191	+ $this->get_sub_menu_hover_css( $attributes, 'Tablet' ),
	192	+ $this->get_sub_menu_hover_css( $attributes, 'Mobile' ),
	193	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_menu_hover_css( $attributes, $device ); } )
	194	+ );
	195	+ $css_generator->add_class_styles(
	196	+ '{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-block--menu-item',
	197	+ $this->get_subMenu_responsive_css( $attributes, '' ),
	198	+ $this->get_subMenu_responsive_css( $attributes, 'Tablet' ),
	199	+ $this->get_subMenu_responsive_css( $attributes, 'Mobile' ),
	200	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_subMenu_responsive_css( $attributes, $device ); } )
	201	+ );
	202	+ $css_generator->add_class_styles(
	203	+ '{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-block--menu-item:hover',
	204	+ $this->get_subMenu_responsive_hover_css( $attributes, '' ),
	205	+ );
	206	+ $css_generator->add_class_styles(
	207	+ '{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-block--menu-item .ablocks-menu-item__link',
	208	+ $this->get_subMenu_responsive_text_css( $attributes, '' ),
	209	+ $this->get_subMenu_responsive_text_css( $attributes, 'Tablet' ),
	210	+ $this->get_subMenu_responsive_text_css( $attributes, 'Mobile' ),
	211	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_subMenu_responsive_text_css( $attributes, $device ); } )
	212	+ );
	213	+ $css_generator->add_class_styles(
	214	+ '{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-menu-item:hover .ablocks-menu-item__link',
	215	+ $this->get_subMenu__text_hover_css( $attributes )
	216	+ );
	217	+ $css_generator->add_class_styles(
	218	+ '{{WRAPPER}} .ablocks-menu-child-mega',
	219	+ $this->getMegaMenuCSS( $attributes ),
	220	+ $this->getMegaMenuCSS( $attributes, 'Tablet' ),
	221	+ $this->getMegaMenuCSS( $attributes, 'Mobile' ),
	222	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getMegaMenuCSS( $attributes, $device ); } )
	223	+ );
	224	+ $css_generator->add_class_styles(
	225	+ '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__link',
	226	+ $this->get_menu_item_link_css( $attributes, '' ),
	227	+ $this->get_menu_item_link_css( $attributes, 'Tablet' ),
	228	+ $this->get_menu_item_link_css( $attributes, 'Mobile' ),
	229	+ $this->get_menu_tablet_hamburger_css( $attributes, $this->get_menu_item_link_css( $attributes, 'Mobile' ) ),
	230	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_link_css( $attributes, $device ); } )
	231	+ );
	232	+ $css_generator->add_class_styles(
	233	+ '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover > .ablocks-menu-item__link ',
	234	+ $this->get_menu_item_link_hover_css( $attributes, '' ),
	235	+ );
	236	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__dropdown-icon svg',
	237	+ $this->get_menu_item_dropdown_icon_css( $attributes ),
	238	+ $this->get_menu_item_dropdown_icon_css( $attributes, 'Tablet' ),
	239	+ $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' ),
	240	+ $this->get_menu_tablet_hamburger_css( $attributes, $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' ) ),
	241	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_dropdown_icon_css( $attributes, $device ); } )
	242	+ );
	243	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover > .ablocks-menu-item__dropdown-icon svg', $this->get_menu_item_dropdown_icon_hover_css( $attributes ) );
	244	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper', $this->get_hamburger_menu_wrapper_css( $attributes ) );
	245	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger ',
	246	+ $this->get_hamburger_menu_css( $attributes ),
	247	+ $this->get_hamburger_menu_css( $attributes, 'Tablet' ),
	248	+ $this->get_hamburger_menu_css( $attributes, 'Mobile' ),
	249	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_hamburger_menu_css( $attributes, $device ); } )
	250	+ );
	251	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger:hover ',
	252	+ $this->get_hamburgerHoverCSS( $attributes ),
	253	+ $this->get_hamburgerHoverCSS( $attributes, 'Tablet' ),
	254	+ $this->get_hamburgerHoverCSS( $attributes, 'Mobile' ),
	255	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_hamburgerHoverCSS( $attributes, $device ); } )
	256	+ );
	257	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger .ablocks-menu__trigger-item ',
	258	+ $this->get_hamburger_menu_item_css( $attributes )
	259	+ );
	260	+ // menu active syle
	261	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu .ablocks-menu-item.ablocks-block--menu-item-active',
	262	+ $this->get_menu_active_styles_css( $attributes ),
	263	+ $this->get_menu_active_styles_css( $attributes, 'Tablet' ),
	264	+ $this->get_menu_active_styles_css( $attributes, 'Mobile' ),
	265	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_active_styles_css( $attributes, $device ); } )
	266	+ );
	267	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu .ablocks-menu-item.ablocks-block--menu-item-active > .ablocks-menu-item__link',
	268	+ [ 'color' => $this->get_menu_active_color_value( $attributes, '' ) ],
	269	+ [ 'color' => $this->get_menu_active_color_value( $attributes, 'Tablet' ) ],
	270	+ [ 'color' => $this->get_menu_active_color_value( $attributes, 'Mobile' ) ],
	271	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return [ 'color' => $this->get_menu_active_color_value( $attributes, $device ) ]; } )
	272	+ );
	273	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu .ablocks-menu-item.ablocks-block--menu-item-active > .ablocks-menu-item__dropdown-icon svg',
	274	+ [ 'fill' => $this->get_menu_active_color_value( $attributes, '' ) ],
	275	+ [ 'fill' => $this->get_menu_active_color_value( $attributes, 'Tablet' ) ],
	276	+ [ 'fill' => $this->get_menu_active_color_value( $attributes, 'Mobile' ) ],
	277	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return [ 'fill' => $this->get_menu_active_color_value( $attributes, $device ) ]; } )
	278	+ );
	279	+ return $css_generator->generate_css();
	280	+ }
108	281
109	282	private function get_menu_css( $attributes, $device = '' ) {
110	283	$css = [];
111	284	$padding = isset( $attributes['padding'] ) ? $attributes['padding'] : '';
112	285
113		- if ( ! empty( $attributes['alignment'] ) ) {
114		- $css['justify-content'] = $attributes['alignment'];
	286	+ $alignment = isset( $attributes['alignment'] ) ? $attributes['alignment'] : '';
	287	+ if ( is_string( $alignment ) ) {
	288	+ // `alignment` became a responsive object; a menu saved before that
	289	+ // still has the old plain string, which only ever applied to desktop.
	290	+ if ( '' === $device && '' !== $alignment ) {
	291	+ $css['justify-content'] = $alignment;
	292	+ }
	293	+ } else {
	294	+ $css = array_merge( $css, Alignment::get_css( $alignment, 'justify-content', $device ) );
115	295	}
	296	+
116	297	return array_merge(
117	298	Dimensions::get_css( $padding, 'padding', $device ),
118	299	$css
119	300	);
120	301	}
	302	+ public function build_css( $attributes ) {
	303	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	304	+ return $this->build_css_v2( $attributes );
	305	+ }
	306	+ return $this->build_css_v1( $attributes );
	307	+ }
121	308
122	309
123	310
124		-
125	311	private function get_menu_item_css( $attributes, $device = '' ) {
126	312	$menu_border_css = ! empty( $attributes['menuItemBorder'] ) ? Border::get_css( $attributes['menuItemBorder'], '', $device ) : array();
	313	+ $typographyValueGlobal = ! empty( $attributes['menuItemTypographyGlobal'] ) ? $attributes['menuItemTypographyGlobal'] : array();
127	314	$css = array_merge(
128	315	$menu_border_css,
129		- Typography::get_css( isset( $attributes['menuItemTypography'] ) ? $attributes['menuItemTypography'] : [], '', $device ),
	316	+ isset( $attributes['menuItemTypography'] ) ? Typography::get_css( $attributes['menuItemTypography'], '', $device, $typographyValueGlobal ) : [],
130	317	Dimensions::get_css( isset( $attributes['menuItemPadding'] ) ? $attributes['menuItemPadding'] : [], 'padding', $device ),
131	318	Dimensions::get_css( isset( $attributes['menuItemMargin'] ) ? $attributes['menuItemMargin'] : [], 'margin', $device )
132	319	);
133	320
		@@ -143,15 +330,8 @@
143	330	// Align items
144	331	if ( isset( $attributes[ 'menuItemAlign' . $device ] ) && ! empty( $attributes[ 'menuItemAlign' . $device ] ) ) {
145	332	$css['align-items'] = $attributes[ 'menuItemAlign' . $device ];
146	333	}
147		- // Text color
148		- if ( ! empty( $attributes['menuItemTextColor'] ) ) {
149		- $css['color'] = $attributes['menuItemTextColor'];
150		- }
151		- if ( ! empty( $attributes['menuItemBackground'] ) ) {
152		- $css['background'] = $attributes['menuItemBackground'];
153		- }
154	334	if ( ! empty( $attributes['menuItemTransition'] ) ) {
155	335	$css['transition'] = $attributes['menuItemTransition'] . 's';
156	336	}
157	337	if (
		@@ -157,53 +337,40 @@
157	337	if (
158	338	( $attributes['sideBarMenuDevice'] ?? null ) === 'tablet' && in_array( $device, [ 'Tablet', 'Mobile' ], true ) ||
159	339	( ( $attributes['sideBarMenuDevice'] ?? null ) !== 'tablet' && $device === 'Mobile' )
160	340	) {
161		- $background_color = isset( $attributes['menuResponsiveBackground'] ) ? $attributes['menuResponsiveBackground'] : '';
162		- if ( ! empty( $background_color ) ) {
163		- $css['background'] = $background_color;
164		- }
	341	+ $css['background'] = Color::get_css( isset( $attributes['menuResponsiveBackground'] ) ? $attributes['menuResponsiveBackground'] : '' );
165	342	}
166		- return $css;
	343	+ return array_merge(
	344	+ [ 'color' => Color::get_css( isset( $attributes['menuItemTextColor'] ) ? $attributes['menuItemTextColor'] : '' ) ],
	345	+ [ 'background' => Color::get_css( isset( $attributes['menuItemBackground'] ) ? $attributes['menuItemBackground'] : '' ) ],
	346	+ $css
	347	+ );
167	348	}
168	349	private function get_menu_item_link_css( $attributes, $device = '' ) {
169	350	$css = [];
170		- if ( ! empty( $attributes['menuItemTextColor'] ) ) {
171		- $css['color'] = $attributes['menuItemTextColor'];
172		- }
173	351	if (
174	352	( $attributes['sideBarMenuDevice'] ?? null ) === 'tablet' && in_array( $device, [ 'Tablet', 'Mobile' ], true ) ||
175	353	( ( $attributes['sideBarMenuDevice'] ?? null ) !== 'tablet' && $device === 'Mobile' )
176	354	) {
177		- $text_color = isset( $attributes['menuResponsiveTextColor'] ) ? $attributes['menuResponsiveTextColor'] : '';
178		- if ( ! empty( $text_color ) ) {
179		- $css['color'] = $text_color . ' !important';
180		- }
	355	+ $css['color'] = Color::get_css( isset( $attributes['menuResponsiveTextColor'] ) ? $attributes['menuResponsiveTextColor'] : '' ) . ' !important';
	356	+
181	357	}
182		- return $css;
	358	+ return array_merge(
	359	+ [ 'color' => Color::get_css( isset( $attributes['menuItemTextColor'] ) ? $attributes['menuItemTextColor'] : '' ) ],
	360	+ $css
	361	+ );
183	362	}
184	363
185	364	private function get_menu_item_hover_css( $attributes, $device = '' ) {
186		- $css = array_merge(
	365	+ return array_merge(
	366	+ [ 'color' => Color::get_css( isset( $attributes['menuItemTextColorH'] ) ? $attributes['menuItemTextColorH'] : '' ) ],
	367	+ [ 'background' => Color::get_css( isset( $attributes['menuItemBackgroundH'] ) ? $attributes['menuItemBackgroundH'] : '' ) ],
187	368	Border::get_hover_css( isset( $attributes['menuItemBorder'] ) ? $attributes['menuItemBorder'] : [], $device )
188	369	);
189		-
190		- // Text color on hover
191		- if ( ! empty( $attributes['menuItemTextColorH'] ) ) {
192		- $css['color'] = $attributes['menuItemTextColorH'];
193		- }
194		- if ( ! empty( $attributes['menuItemBackgroundH'] ) ) {
195		- $css['background'] = $attributes['menuItemBackgroundH'];
196		- }
197		- return $css;
198	370	}
199	371	private function get_menu_item_link_hover_css( $attributes ) {
200		- $css = [];
201		- if ( ! empty( $attributes['menuItemTextColorH'] ) ) {
202		- $css['color'] = $attributes['menuItemTextColorH'];
203		- }
204		-
205		- return $css;
	372	+ return [ 'color' => Color::get_css( isset( $attributes['menuItemTextColorH'] ) ? $attributes['menuItemTextColorH'] : '' ) ];
206	373	}
207	374	private function get_sub_menu_css( $attributes, $device = '' ) {
208	375	$css = [];
209	376	if ( isset( $attributes['menuItemBorder']['commonWidth'] ) ) {
		@@ -236,11 +403,8 @@
236	403	);
237	404	}
238	405	private function get_subMenu_responsive_css( $attributes, $device = '' ) {
239	406	$css = [];
240		- if ( ! empty( $attributes['subMenuItemBackground'] ) ) {
241		- $css['background'] = $attributes['subMenuItemBackground'];
242		- }
243	407	if ( ! empty( $attributes['subMenuItemTransition'] ) ) {
244	408	$css['transition-duration'] = $attributes['subMenuItemTransition'] . 's';
245	409	}
246	410	if (
		@@ -246,50 +410,44 @@
246	410	if (
247	411	( isset( $attributes['sideBarMenuDevice'] ) && $attributes['sideBarMenuDevice'] === 'tablet' && in_array( $device, [ 'Tablet', 'Mobile' ], true ) ) ||
248	412	( isset( $attributes['sideBarMenuDevice'] ) && $attributes['sideBarMenuDevice'] !== 'tablet' && $device === 'Mobile' )
249	413	) {
250		- $background_color = $attributes['subMenuResponsiveBg'] ?? '';
251		- if ( ! empty( $background_color ) ) {
252		- $css['background'] = $background_color . '!important';
253		- }
	414	+ $css['background'] = Color::get_css( isset( $attributes['subMenuResponsiveBg'] ) ? $attributes['subMenuResponsiveBg'] : '' ) . '!important';
254	415	}
255		- return $css;
	416	+ return array_merge(
	417	+ [ 'background' => Color::get_css( isset( $attributes['subMenuItemBackground'] ) ? $attributes['subMenuItemBackground'] : '' ) ],
	418	+ $css
	419	+ );
256	420	}
257	421
258	422	private function get_subMenu_responsive_hover_css( $attributes ) {
259		- $css = [];
260		- if ( ! empty( $attributes['subMenuItemTextColorH'] ) ) {
261		- $css['color'] = $attributes['subMenuItemTextColorH'];
262		- }
263		- if ( ! empty( $attributes['subMenuItemBackgroundH'] ) ) {
264		- $css['background'] = $attributes['subMenuItemBackgroundH'];
265		- }
266		-
267		- return $css;
	423	+ return array_merge(
	424	+ [ 'color' => Color::get_css( isset( $attributes['subMenuItemTextColorH'] ) ? $attributes['subMenuItemTextColorH'] : '' ) ],
	425	+ [ 'background' => Color::get_css( isset( $attributes['subMenuItemBackgroundH'] ) ? $attributes['subMenuItemBackgroundH'] : '' ) ]
	426	+ );
268	427	}
269	428	private function get_subMenu_responsive_text_css( $attributes, $device = '' ) {
270	429	$css = [];
271		- if ( ! empty( $attributes['subMenuItemTextColor'] ) ) {
272		- $css['color'] = $attributes['subMenuItemTextColor'];
273		- }
274	430	if (
275	431	( $attributes['sideBarMenuDevice'] ?? null ) === 'tablet' && in_array( $device, [ 'Tablet', 'Mobile' ], true ) ||
276	432	( ( $attributes['sideBarMenuDevice'] ?? null ) !== 'tablet' && $device === 'Mobile' )
277	433	) {
278		- $text_color = isset( $attributes['subMenuResponsiveColor'] ) ? $attributes['subMenuResponsiveColor'] : '';
279		- if ( ! empty( $text_color ) ) {
280		- $css['color'] = $text_color . ' !important';
281		- }
	434	+ $css['color'] = Color::get_css( isset( $attributes['subMenuResponsiveColor'] ) ? $attributes['subMenuResponsiveColor'] : '' ) . ' !important';
282	435	}
283	436
284		- return $css;
	437	+ return array_merge(
	438	+ [ 'color' => Color::get_css( isset( $attributes['subMenuItemTextColor'] ) ? $attributes['subMenuItemTextColor'] : '' ) ],
	439	+ $css
	440	+ );
285	441	}
	442	+ private function get_subMenu__text_hover_css( $attributes, $device = '' ) {
	443	+ return [ 'color' => Color::get_css( isset( $attributes['subMenuItemTextColorH'] ) ? $attributes['subMenuItemTextColorH'] : '' ) ];
	444	+ }
286	445	private function getMegaMenuCSS( $attributes, $device = '' ) {
287	446	$css = [];
288	447	if ( isset( $attributes['sideBarMenuDevice'] ) && $attributes['sideBarMenuDevice'] === 'tablet' && $device === 'Tablet' ) {
289	448	$css['position'] = 'static !important';
290	449	}
291		-
292	450	return $css;
293	451	}
294	452
295	453
		@@ -294,28 +452,21 @@
294	452
295	453
296	454	private function get_menu_item_dropdown_icon_css( $attributes, $device = '' ) {
297	455	$css = [];
298		- if ( ! empty( $attributes['menuItemTextColor'] ) ) {
299		- $css['fill'] = $attributes['menuItemTextColor'];
300		- }
301	456	if (
302	457	( $attributes['sideBarMenuDevice'] ?? null ) === 'tablet' && in_array( $device, [ 'Tablet', 'Mobile' ], true ) ||
303	458	( ( $attributes['sideBarMenuDevice'] ?? null ) !== 'tablet' && $device === 'Mobile' )
304	459	) {
305		- $text_color = isset( $attributes['menuResponsiveTextColor'] ) ? $attributes['menuResponsiveTextColor'] : '';
306		- if ( ! empty( $text_color ) ) {
307		- $css['fill'] = $text_color . ' !important';
308		- }
	460	+ $css['fill'] = Color::get_css( isset( $attributes['menuResponsiveTextColor'] ) ? $attributes['menuResponsiveTextColor'] : '' ) . ' !important';
309	461	}
310		- return $css;
	462	+ return array_merge(
	463	+ [ 'fill' => Color::get_css( isset( $attributes['menuItemTextColor'] ) ? $attributes['menuItemTextColor'] : '' ) ],
	464	+ $css
	465	+ );
311	466	}
312	467	private function get_menu_item_dropdown_icon_hover_css( $attributes ) {
313		- $css = [];
314		- if ( ! empty( $attributes['menuItemTextColorH'] ) ) {
315		- $css['fill'] = $attributes['menuItemTextColorH'];
316		- }
317		- return $css;
	468	+ return [ 'fill' => Color::get_css( isset( $attributes['menuItemTextColorH'] ) ? $attributes['menuItemTextColorH'] : '' ) ];
318	469	}
319	470	private function get_hamburger_menu_wrapper_css( $attributes ) {
320	471	$css = [];
321	472	if ( isset( $attributes['hamburgerAlignment'] ) ) {
		@@ -326,14 +477,11 @@
326	477	public function get_hamburger_menu_css( $attributes, $device = '' ) {
327	478	$hamburger_border_css = ! empty( $attributes['hamburgerBorder'] ) ? Border::get_css( $attributes['hamburgerBorder'], '', $device ) : array();
328	479	$css = array_merge(
329	480	$hamburger_border_css,
330		- Dimensions::get_css( isset( $attributes['hamburgerPadding'] ) ? $attributes['hamburgerPadding'] : [], 'padding', $device )
	481	+ Dimensions::get_css( isset( $attributes['hamburgerPadding'] ) ? $attributes['hamburgerPadding'] : [], 'padding', $device ),
	482	+ [ 'background' => Color::get_css( isset( $attributes['hamburgerBackground'] ) ? $attributes['hamburgerBackground'] : '' ) ],
331	483	);
332		-
333		- if ( isset( $attributes['hamburgerBackground'] ) ) {
334		- $css['background'] = $attributes['hamburgerBackground'];
335		- }
336	484	$height_humber = 30 + ( isset( $attributes['hamburgerHeight.value'] ) ? $attributes['hamburgerHeight.value'] : 0 );
337	485	if ( $height_humber ) {
338	486	$css['height'] = "{$height_humber}px";
339	487	}
		@@ -346,15 +494,10 @@
346	494	}
347	495
348	496
349	497	public function get_hamburger_menu_item_css( $attributes, $device = '' ) {
350		- $css = [];
351		- if ( isset( $attributes['hamburgerColor'] ) ) {
352		- $css['background'] = $attributes['hamburgerColor'];
353		- }
354		-
355	498	return array_merge(
356		- $css,
	499	+ [ 'background' => Color::get_css( isset( $attributes['hamburgerColor'] ) ? $attributes['hamburgerColor'] : '' ) ],
357	500	Range::get_css([
358	501	'attributeValue' => $attributes['hamburgerHeight'],
359	502	'attribute_object_key' => 'value',
360	503	'isResponsive' => false,
		@@ -374,6 +517,60 @@
374	517	'property' => 'width',
375	518	'device' => $device,
376	519	])
377	520	);
	521	+ }
	522	+ // menu active color syle
	523	+ public function get_menu_active_styles_css( $attributes, $device = '' ) {
	524	+ return array_merge(
	525	+ [ 'color' => Color::get_css( isset( $attributes['menuActveColor'] ) ? $attributes['menuActveColor'] : '' ) ],
	526	+ [ 'background' => Color::get_css( isset( $attributes['menuActveColorBg'] ) ? $attributes['menuActveColorBg'] : '' ) ],
	527	+ );
	528	+ }
	529	+ // The responsive text color is emitted with !important on these devices, so the active color needs it too to win over it.
	530	+ private function get_menu_active_color_value( $attributes, $device = '' ) {
	531	+ $color = Color::get_css( isset( $attributes['menuActveColor'] ) ? $attributes['menuActveColor'] : '' );
	532	+ if (
	533	+ '' !== $color &&
	534	+ ( ( $attributes['sideBarMenuDevice'] ?? null ) === 'tablet' && in_array( $device, [ 'Tablet', 'Mobile' ], true ) ||
	535	+ ( ( $attributes['sideBarMenuDevice'] ?? null ) !== 'tablet' && $device === 'Mobile' ) )
	536	+ ) {
	537	+ return $color . ' !important';
	538	+ }
	539	+ return $color;
	540	+ }
	541	+
	542	+ /**
	543	+ * Just the "Menu Responsive" background, with none of get_menu_item_css()'s
	544	+ * other declarations (border, padding, direction, ...) that don't belong in
	545	+ * the tablet-hamburger custom breakpoint below.
	546	+ */
	547	+ private function get_menu_responsive_background_only_css( $attributes ) {
	548	+ if ( empty( $attributes['menuResponsiveBackground'] ) ) {
	549	+ return [];
	550	+ }
	551	+ return [ 'background' => Color::get_css( $attributes['menuResponsiveBackground'] ) ];
	552	+ }
	553	+
	554	+ /**
	555	+ * "Enable Tablet Hamburger Menu" shows a hamburger in the 768px-1024px range
	556	+ * (see style.css) independently of the Tablet(800)/Mobile(480) breakpoints the
	557	+ * responsive controls use, and independently of "Hamburger Menu Device". The
	558	+ * "Menu Responsive" colors were only ever emitted for those two breakpoints,
	559	+ * so they never reached this range. This adds them there too, as a custom
	560	+ * breakpoint on the same selector, without touching the standard Tablet/Mobile
	561	+ * output.
	562	+ */
	563	+ private function get_menu_tablet_hamburger_css( $attributes, $styles ) {
	564	+ if ( empty( $attributes['enableTabletHamburger'] ) || empty( $styles ) ) {
	565	+ return [];
	566	+ }
	567	+ return [
	568	+ 'tabletHamburger' => [
	569	+ 'width' => 1024,
	570	+ 'min' => 768,
	571	+ 'max' => 1024,
	572	+ 'styles' => $styles,
	573	+ ],
	574	+ ];
378	575	}
379	576	}