hello-plus / classes / ehp-button.php

ehp-button.php in Hello Plus 1.4.0, at classes/ehp-button.php

632 lines 16.4 KB

Raw Download Zip

1	<?php
2
3	namespace HelloPlus\Classes;
4
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit; // Exit if accessed directly.
7	}
8
9	use Elementor\{
10	Controls_Manager,
11	Group_Control_Background,
12	Group_Control_Box_Shadow,
13	Group_Control_Typography,
14	Icons_Manager,
15	Widget_Base
16	};
17
18	use Elementor\Core\Kits\Documents\Tabs\{
19	Global_Colors,
20	Global_Typography
21	};
22
23	use HelloPlus\Classes\{
24	Ehp_Shapes,
25	Ehp_Padding,
26	};
27
28	class Ehp_Button {
29	private $context = [];
30	private $defaults = [];
31	private ?Widget_Base $widget = null;
32
33	// initialized on render:
34	private $widget_settings = [];
35
36	const EHP_PREFIX = 'ehp-';
37	const CLASSNAME_BUTTON = 'ehp-button';
38	const CLASSNAME_BUTTON_TYPE_PREFIX = 'ehp-button--';
39
40	public function set_context( array $context ) {
41	$this->context = $context;
42	}
43
44	public function render() {
45	$type = $this->context['type'] ?? '';
46	$widget_name = $this->context['widget_name'];
47	$key = $this->context['key'] ?? '';
48	$key_attr = $key ? '-' . $key : '';
49
50	$this->widget->remove_render_attribute( $type . '-button' . $key_attr );
51
52	$this->widget_settings = $this->widget->get_settings_for_display();
53
54	$button_text = $this->get_control_value( 'button_text', '', 'cta_button_text' );
55	$button_link = $this->get_control_value( 'button_link', [], 'cta_button_link' );
56	$button_icon = $this->get_control_value( 'button_icon', '', 'cta_button_icon' );
57	$button_hover_animation = $this->get_control_value( 'button_hover_animation', '' );
58	$button_has_border = $this->get_control_value( 'show_button_border', '' );
59	$button_type = $this->get_control_value( 'button_type', '' );
60
61	$button_classnames = [
62	self::CLASSNAME_BUTTON,
63	self::CLASSNAME_BUTTON_TYPE_PREFIX . $type,
64	self::EHP_PREFIX . $widget_name . '__button',
65	self::EHP_PREFIX . $widget_name . '__button--' . $type,
66	];
67
68	if ( ! empty( $button_type ) ) {
69	$button_classnames[] = 'is-type-' . $button_type;
70	}
71
72	if ( $button_hover_animation ) {
73	$button_classnames[] = 'elementor-animation-' . $button_hover_animation;
74	}
75
76	if ( 'yes' === $button_has_border ) {
77	$button_classnames[] = 'has-border';
78	}
79
80	$shapes = new Ehp_Shapes( $this->widget, [
81	'widget_name' => $widget_name,
82	'container_prefix' => 'button',
83	'type_prefix' => $type,
84	'render_attribute' => $type . '-button',
85	'key' => $key,
86	] );
87	$shapes->add_shape_attributes();
88
89	$this->widget->add_render_attribute( $type . '-button' . $key_attr, [
90	'class' => $button_classnames,
91	] );
92
93	if ( ! empty( $button_link['url'] ) ) {
94	$this->widget->add_link_attributes( $type . '-button', $button_link, true );
95	}
96
97	?>
98	<a <?php $this->widget->print_render_attribute_string( $type . '-button' ); ?>>
99	<?php
100	Icons_Manager::render_icon( $button_icon, [
101	'aria-hidden' => 'true',
102	'class' => 'ehp-button__icon',
103	'ehp-' . $widget_name . '__button-icon',
104	] );
105	?>
106	<?php echo esc_html( $button_text ); ?>
107	</a>
108	<?php
109	}
110
111	/**
112	* @return mixed
113	*/
114	protected function get_control_value( string $defaults_key, $default_value, ?string $settings_key = null ) {
115	$type = ! empty( $this->context['type'] ) ? $this->context['type'] . '_' : '';
116	$settings_key = $type . ( $settings_key ?? $defaults_key );
117	return $this->defaults[ $defaults_key ] ?? $this->widget_settings[ $settings_key ] ?? $default_value;
118	}
119
120	public function add_content_section() {
121	$defaults = [
122	'secondary_cta_show' => $this->defaults['secondary_cta_show'] ?? 'yes',
123	'has_secondary_cta' => $this->defaults['has_secondary_cta'] ?? true,
124	'primary_cta_button_text_placeholder' => $this->defaults['primary_cta_button_text_placeholder'] ?? esc_html__( 'Schedule Now', 'hello-plus' ),
125	];
126
127	$this->widget->start_controls_section(
128	'content_cta',
129	[
130	'label' => esc_html__( 'CTA Button', 'hello-plus' ),
131	'tab' => Controls_Manager::TAB_CONTENT,
132	]
133	);
134
135	if ( $defaults['has_secondary_cta'] ) {
136	$this->widget->add_control(
137	'primary_cta_heading',
138	[
139	'label' => esc_html__( 'Primary CTA', 'hello-plus' ),
140	'type' => Controls_Manager::HEADING,
141	]
142	);
143	}
144
145	$this->widget->add_control(
146	'primary_cta_button_text',
147	[
148	'label' => esc_html__( 'Text', 'hello-plus' ),
149	'type' => Controls_Manager::TEXT,
150	'default' => $defaults['primary_cta_button_text_placeholder'],
151	'dynamic' => [
152	'active' => true,
153	],
154	]
155	);
156
157	$this->widget->add_control(
158	'primary_cta_button_link',
159	[
160	'label' => esc_html__( 'Link', 'hello-plus' ),
161	'type' => Controls_Manager::URL,
162	'dynamic' => [
163	'active' => true,
164	],
165	]
166	);
167
168	$this->widget->add_control(
169	'primary_cta_button_icon',
170	[
171	'label' => esc_html__( 'Icon', 'hello-plus' ),
172	'type' => Controls_Manager::ICONS,
173	'label_block' => false,
174	'skin' => 'inline',
175	]
176	);
177
178	if ( $defaults['has_secondary_cta'] ) {
179	$this->widget->add_control(
180	'secondary_cta_show',
181	[
182	'label' => esc_html__( 'Secondary CTA', 'hello-plus' ),
183	'type' => Controls_Manager::SWITCHER,
184	'label_on' => esc_html__( 'Show', 'hello-plus' ),
185	'label_off' => esc_html__( 'Hide', 'hello-plus' ),
186	'return_value' => 'yes',
187	'default' => $defaults['secondary_cta_show'],
188	'separator' => 'before',
189	]
190	);
191
192	$this->widget->add_control(
193	'secondary_cta_button_text',
194	[
195	'label' => esc_html__( 'Text', 'hello-plus' ),
196	'type' => Controls_Manager::TEXT,
197	'default' => esc_html__( 'Contact Us', 'hello-plus' ),
198	'dynamic' => [
199	'active' => true,
200	],
201	'condition' => [
202	'secondary_cta_show' => 'yes',
203	],
204	]
205	);
206
207	$this->widget->add_control(
208	'secondary_cta_button_link',
209	[
210	'label' => esc_html__( 'Link', 'hello-plus' ),
211	'type' => Controls_Manager::URL,
212	'dynamic' => [
213	'active' => true,
214	],
215	'condition' => [
216	'secondary_cta_show' => 'yes',
217	],
218	]
219	);
220
221	$this->widget->add_control(
222	'secondary_cta_button_icon',
223	[
224	'label' => esc_html__( 'Icon', 'hello-plus' ),
225	'type' => Controls_Manager::ICONS,
226	'label_block' => false,
227	'skin' => 'inline',
228	'condition' => [
229	'secondary_cta_show' => 'yes',
230	],
231	]
232	);
233	}
234
235	$this->widget->end_controls_section();
236	}
237
238	public function add_style_controls() {
239	$widget_name = $this->context['widget_name'];
240	$defaults = [
241	'has_secondary_cta' => $this->defaults['has_secondary_cta'] ?? true,
242	];
243
244	$this->add_button_type_controls(
245	[
246	'type' => 'primary',
247	]
248	);
249
250	if ( $defaults['has_secondary_cta'] ) {
251	$this->add_button_type_controls(
252	[
253	'type' => 'secondary',
254	'add_condition' => true,
255	]
256	);
257
258	$this->widget->add_responsive_control(
259	'cta_space_between',
260	[
261	'label' => esc_html__( 'Space Between', 'hello-plus' ),
262	'type' => Controls_Manager::SLIDER,
263	'size_units' => [ 'px', 'em', 'rem', '%', 'custom' ],
264	'range' => [
265	'px' => [
266	'max' => 200,
267	],
268	'%' => [
269	'max' => 100,
270	],
271	],
272	'default' => [
273	'size' => 16,
274	'unit' => 'px',
275	],
276	'tablet_default' => [
277	'size' => 16,
278	'unit' => 'px',
279	],
280	'mobile_default' => [
281	'size' => 16,
282	'unit' => 'px',
283	],
284	'separator' => 'before',
285	'selectors' => [
286	'{{WRAPPER}} .ehp-' . $widget_name => '--' . $widget_name . '-buttons-space-between: {{SIZE}}{{UNIT}};',
287	],
288	'condition' => [
289	'secondary_cta_show' => 'yes',
290	],
291	]
292	);
293	}
294	}
295
296	public function add_button_type_controls( array $options = [] ) {
297	$defaults = [
298	'has_secondary_cta' => $this->defaults['has_secondary_cta'] ?? true,
299	'button_default_type' => $this->defaults['button_default_type'] ?? 'button',
300	];
301	$type = $options['type'];
302	$add_condition = $options['add_condition'] ?? [];
303
304	$widget_name = $this->context['widget_name'];
305
306	$is_primary = 'primary' === $type;
307	$label = $is_primary ? esc_html__( 'Primary CTA', 'hello-plus' ) : esc_html__( 'Secondary CTA', 'hello-plus' );
308	$show_button_border_default = $is_primary ? 'no' : 'yes';
309	$background_color_default = $is_primary ? Global_Colors::COLOR_ACCENT : '';
310
311	$add_type_condition = $add_condition ? [
312	$type . '_cta_show' => 'yes',
313	] : [];
314
315	if ( isset( $options['ignore_icon_value_condition'] ) && true === $options['ignore_icon_value_condition'] ) {
316	$icon_condition = $add_type_condition;
317	} else {
318	$icon_condition = array_merge( [
319	$type . '_cta_button_icon[value]!' => '',
320	], $add_type_condition );
321	}
322
323	if ( $defaults['has_secondary_cta'] ) {
324	$this->widget->add_control(
325	$type . '_button_label',
326	[
327	'label' => $label,
328	'type' => Controls_Manager::HEADING,
329	'condition' => $add_type_condition,
330	'separator' => 'primary' === $type ? '' : 'before',
331	]
332	);
333	}
334
335	$this->widget->add_control(
336	$type . '_button_type',
337	[
338	'label' => esc_html__( 'Type', 'hello-plus' ),
339	'type' => Controls_Manager::SELECT,
340	'default' => $defaults['button_default_type'],
341	'options' => [
342	'button' => esc_html__( 'Button', 'hello-plus' ),
343	'link' => esc_html__( 'Link', 'hello-plus' ),
344	],
345	'condition' => $add_type_condition,
346	]
347	);
348
349	$this->widget->add_group_control(
350	Group_Control_Typography::get_type(),
351	[
352	'name' => $type . '_button_typography',
353	'selector' => '{{WRAPPER}} .ehp-' . $widget_name . '__button--' . $type,
354	'global' => [
355	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
356	],
357	'condition' => $add_type_condition,
358	]
359	);
360
361	$this->widget->add_responsive_control(
362	$type . '_button_icon_position',
363	[
364	'label' => esc_html__( 'Icon Position', 'hello-plus' ),
365	'type' => Controls_Manager::CHOOSE,
366	'default' => is_rtl() ? 'row' : 'row-reverse',
367	'toggle' => false,
368	'options' => [
369	'row' => [
370	'title' => esc_html__( 'Start', 'hello-plus' ),
371	'icon' => 'eicon-h-align-' . ( is_rtl() ? 'right' : 'left' ),
372	],
373	'row-reverse' => [
374	'title' => esc_html__( 'End', 'hello-plus' ),
375	'icon' => 'eicon-h-align-' . ( is_rtl() ? 'left' : 'right' ),
376	],
377	],
378	'selectors_dictionary' => [
379	'left' => is_rtl() ? 'row-reverse' : 'row',
380	'right' => is_rtl() ? 'row' : 'row-reverse',
381	],
382	'selectors' => [
383	'{{WRAPPER}} .ehp-' . $widget_name . '__button--' . $type => 'flex-direction: {{VALUE}};',
384	],
385	'condition' => $icon_condition,
386	]
387	);
388
389	$this->widget->add_control(
390	$type . '_button_icon_spacing',
391	[
392	'label' => esc_html__( 'Icon Spacing', 'hello-plus' ),
393	'type' => Controls_Manager::SLIDER,
394	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
395	'range' => [
396	'px' => [
397	'max' => 100,
398	],
399	'em' => [
400	'max' => 5,
401	],
402	'rem' => [
403	'max' => 5,
404	],
405	'%' => [
406	'max' => 100,
407	],
408	],
409	'selectors' => [
410	'{{WRAPPER}} .ehp-' . $widget_name => '--' . $widget_name . '-button-' . $type . '-icon-spacing: {{SIZE}}{{UNIT}};',
411	],
412	'condition' => $icon_condition,
413	]
414	);
415
416	$this->widget->start_controls_tabs(
417	$type . '_button_style'
418	);
419
420	$this->widget->start_controls_tab(
421	$type . '_button_normal_tab',
422	[
423	'label' => esc_html__( 'Normal', 'hello-plus' ),
424	'condition' => $add_type_condition,
425	],
426	);
427
428	$this->widget->add_control(
429	$type . '_button_text_color',
430	[
431	'label' => esc_html__( 'Text Color', 'hello-plus' ),
432	'type' => Controls_Manager::COLOR,
433	'global' => [
434	'default' => Global_Colors::COLOR_SECONDARY,
435	],
436	'selectors' => [
437	'{{WRAPPER}} .ehp-' . $widget_name => '--' . $widget_name . '-button-' . $type . '-text-color: {{VALUE}}',
438	],
439	'condition' => $add_type_condition,
440	]
441	);
442
443	$this->widget->add_group_control(
444	Group_Control_Background::get_type(),
445	[
446	'name' => $type . '_button_background',
447	'types' => [ 'classic', 'gradient' ],
448	'exclude' => [ 'image' ],
449	'selector' => '{{WRAPPER}} .is-type-button.ehp-' . $widget_name . '__button--' . $type,
450	'fields_options' => [
451	'background' => [
452	'default' => 'classic',
453	],
454	'color' => [
455	'global' => [
456	'default' => $background_color_default,
457	],
458	],
459	],
460	'condition' => array_merge([
461	$type . '_button_type' => 'button',
462	], $add_type_condition),
463	]
464	);
465
466	$this->widget->end_controls_tab();
467
468	$this->widget->start_controls_tab(
469	$type . '_button_hover_tab',
470	[
471	'label' => esc_html__( 'Hover', 'hello-plus' ),
472	'condition' => $add_type_condition,
473	],
474	);
475
476	$this->widget->add_control(
477	$type . '_hover_button_text_color',
478	[
479	'label' => esc_html__( 'Text Color', 'hello-plus' ),
480	'type' => Controls_Manager::COLOR,
481	'global' => [
482	'default' => Global_Colors::COLOR_TEXT,
483	],
484	'selectors' => [
485	'{{WRAPPER}} .ehp-' . $widget_name => '--' . $widget_name . '-button-' . $type . '-text-color-hover: {{VALUE}}',
486	],
487	'condition' => $add_type_condition,
488	]
489	);
490
491	$this->widget->add_group_control(
492	Group_Control_Background::get_type(),
493	[
494	'name' => $type . '_button_background_hover',
495	'types' => [ 'classic', 'gradient' ],
496	'exclude' => [ 'image' ],
497	'selector' => '{{WRAPPER}} .is-type-button.ehp-' . $widget_name . '__button--' . $type . ':hover, {{WRAPPER}} .is-type-button.ehp-' . $widget_name . '__button--' . $type . ':focus',
498	'fields_options' => [
499	'background' => [
500	'default' => 'classic',
501	],
502	'color' => [
503	'global' => [
504	'default' => $background_color_default,
505	],
506	],
507	],
508	'condition' => array_merge([
509	$type . '_button_type' => 'button',
510	], $add_type_condition),
511	]
512	);
513
514	$this->widget->add_control(
515	$type . '_button_hover_animation',
516	[
517	'label' => esc_html__( 'Hover Animation', 'hello-plus' ),
518	'type' => Controls_Manager::HOVER_ANIMATION,
519	'condition' => $add_type_condition,
520	]
521	);
522
523	$this->widget->end_controls_tab();
524
525	$this->widget->end_controls_tabs();
526
527	$this->widget->add_control(
528	$type . '_show_button_border',
529	[
530	'label' => esc_html__( 'Border', 'hello-plus' ),
531	'type' => Controls_Manager::SWITCHER,
532	'label_on' => esc_html__( 'Yes', 'hello-plus' ),
533	'label_off' => esc_html__( 'No', 'hello-plus' ),
534	'return_value' => 'yes',
535	'default' => $show_button_border_default,
536	'separator' => 'before',
537	'condition' => array_merge([
538	$type . '_button_type' => 'button',
539	], $add_type_condition),
540	]
541	);
542
543	$this->widget->add_control(
544	$type . '_button_border_width',
545	[
546	'label' => __( 'Border Width', 'hello-plus' ),
547	'type' => Controls_Manager::SLIDER,
548	'size_units' => [ 'px' ],
549	'range' => [
550	'px' => [
551	'min' => 0,
552	'max' => 10,
553	'step' => 1,
554	],
555	],
556	'default' => [
557	'size' => 1,
558	'unit' => 'px',
559	],
560	'selectors' => [
561	'{{WRAPPER}} .ehp-' . $widget_name => '--' . $widget_name . '-button-' . $type . '-border-width: {{SIZE}}{{UNIT}};',
562	],
563	'condition' => array_merge([
564	$type . '_show_button_border' => 'yes',
565	], $add_type_condition),
566	]
567	);
568
569	$this->widget->add_control(
570	$type . '_button_border_color',
571	[
572	'label' => esc_html__( 'Color', 'hello-plus' ),
573	'type' => Controls_Manager::COLOR,
574	'global' => [
575	'default' => Global_Colors::COLOR_SECONDARY,
576	],
577	'selectors' => [
578	'{{WRAPPER}} .ehp-' . $widget_name => '--' . $widget_name . '-button-' . $type . '-border-color: {{VALUE}}',
579	],
580	'condition' => array_merge([
581	$type . '_show_button_border' => 'yes',
582	], $add_type_condition),
583	]
584	);
585
586	$shapes = new Ehp_Shapes( $this->widget, [
587	'widget_name' => $this->context['widget_name'],
588	'container_prefix' => 'button',
589	'control_prefix' => $type,
590	'type_prefix' => $type,
591	'condition' => array_merge([
592	$type . '_button_type' => 'button',
593	], $add_type_condition),
594	] );
595	$shapes->add_style_controls();
596
597	$this->widget->add_group_control(
598	Group_Control_Box_Shadow::get_type(),
599	[
600	'name' => $type . '_button_box_shadow',
601	'selector' => '{{WRAPPER}} .ehp-' . $widget_name . '__button--' . $type,
602	'condition' => array_merge([
603	$type . '_button_type' => 'button',
604	], $add_type_condition),
605	]
606	);
607
608	$padding = new Ehp_Padding( $this->widget, [
609	'widget_name' => $widget_name,
610	'container_prefix' => 'button',
611	'type_prefix' => $type,
612	'default_padding' => [
613	'top' => '8',
614	'right' => '16',
615	'bottom' => '8',
616	'left' => '16',
617	'unit' => 'px',
618	],
619	'condition' => array_merge([
620	$type . '_button_type' => 'button',
621	], $add_type_condition),
622	] );
623	$padding->add_style_controls();
624	}
625
626	public function __construct( Widget_Base $widget, $context = [], $defaults = [] ) {
627	$this->widget = $widget;
628	$this->context = $context;
629	$this->defaults = $defaults;
630	}
631	}
632