hello-plus / classes / ehp-button.php

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

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