hello-plus / modules / content / classes / render / widget-zig-zag-render.php

widget-zig-zag-render.php in Hello Plus trunk, at modules/content/classes/render/widget-zig-zag-render.php

298 lines 8.6 KB

Raw Download Zip

1	<?php
2
3	namespace HelloPlus\Modules\Content\Classes\Render;
4
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit; // Exit if accessed directly.
7	}
8
9	use HelloPlus\Classes\Widget_Utils;
10	use Elementor\{
11	Icons_Manager,
12	};
13
14	use HelloPlus\Modules\Content\Widgets\Zig_Zag;
15	use HelloPlus\Classes\{
16	Ehp_Image,
17	Ehp_Shapes,
18	};
19
20	class Widget_Zig_Zag_Render {
21
22	protected Zig_Zag $widget;
23
24	const LAYOUT_CLASSNAME = 'ehp-zigzag';
25
26	protected array $settings;
27
28	public function __construct( Zig_Zag $widget ) {
29	$this->widget = $widget;
30	$this->settings = $widget->get_settings_for_display();
31	}
32
33	public function render(): void {
34	$has_entrance_animation = ! empty( $this->settings['zigzag_animation'] ) && 'none' !== $this->settings['zigzag_animation'];
35	$layout_classnames = [
36	self::LAYOUT_CLASSNAME,
37	'has-direction-' . $this->settings['first_zigzag_direction'],
38	];
39
40	if ( $has_entrance_animation ) {
41	$layout_classnames[] = 'has-entrance-animation';
42	}
43
44	if ( 'yes' === $this->settings['image_stretch'] ) {
45	$layout_classnames[] = 'has-image-stretch';
46	}
47
48	if ( 'yes' === $this->settings['has_alternate_button_styles'] ) {
49	$layout_classnames[] = 'has-alternate-button-styles';
50	}
51
52	if ( 'yes' === $this->settings['has_alternate_icon_color'] ) {
53	$layout_classnames[] = 'has-alternate-icon-color';
54	}
55
56	if ( 'yes' === $this->settings['has_alternate_button_border'] ) {
57	$layout_classnames[] = 'has-alternate-button-border-styles';
58	}
59
60	if ( 'yes' === $this->settings['animation_alternate'] ) {
61	$layout_classnames[] = 'has-alternate-animation';
62	}
63
64	$this->widget->add_render_attribute( 'layout', [
65	'class' => $layout_classnames,
66	] );
67
68	?>
69	<div <?php $this->widget->print_render_attribute_string( 'layout' ); ?>>
70	<?php
71	$graphic_element = $this->settings['graphic_element'];
72	$repeater = 'image' === $graphic_element ? $this->settings['image_zigzag_items'] : $this->settings['icon_zigzag_items'];
73
74	$wrapper_classnames = [
75	self::LAYOUT_CLASSNAME . '__item-wrapper',
76	];
77
78	if ( $has_entrance_animation ) {
79	$wrapper_classnames[] = 'hidden';
80	}
81
82	foreach ( $repeater as $key => $item ) {
83	$this->widget->add_render_attribute( 'zigzag-item-wrapper-' . $key, [
84	'class' => $wrapper_classnames,
85	] );
86
87	$this->widget->add_render_attribute( 'zigzag-item-' . $key, [
88	'class' => self::LAYOUT_CLASSNAME . '__item-container',
89	] );
90	?>
91	<div <?php $this->widget->print_render_attribute_string( 'zigzag-item-wrapper-' . $key ); ?>>
92	<div <?php $this->widget->print_render_attribute_string( 'zigzag-item-' . $key ); ?>>
93	<?php
94	$this->render_graphic_element_container( $item, $key );
95	$this->render_text_element_container( $item, $key, $repeater );
96	?>
97	</div>
98	</div>
99	<?php
100	} ?>
101	</div>
102	<?php
103	}
104
105	private function render_graphic_element_container( $item, $key ) {
106	$graphic_element = $this->settings['graphic_element'];
107
108	$graphic_element_classnames = [
109	self::LAYOUT_CLASSNAME . '__graphic-element-container',
110	];
111
112	$is_icon = 'icon' === $graphic_element && ! empty( $item['icon_graphic_icon'] );
113	$is_image = 'image' === $graphic_element && ! empty( $item['image_graphic_image']['url'] );
114
115	if ( $is_icon ) {
116	$graphic_element_classnames[] = 'has-icon';
117	} elseif ( $is_image ) {
118	$graphic_element_classnames[] = 'has-image';
119	}
120
121	$this->widget->add_render_attribute( 'graphic-element-container-' . $key, [
122	'class' => $graphic_element_classnames,
123	] );
124	?>
125	<div <?php $this->widget->print_render_attribute_string( 'graphic-element-container-' . $key ); ?>>
126	<?php if ( $is_image ) {
127	$this->render_image_container( $item, 'image_graphic_image' );
128	} elseif ( $is_icon ) {
129	Icons_Manager::render_icon( $item['icon_graphic_icon'], [ 'aria-hidden' => 'true' ] );
130	} ?>
131	</div>
132	<?php
133	}
134
135	private function render_image_container( $settings, $key ) {
136	$defaults = [
137	'settings' => $settings,
138	'image_key' => $key,
139	'image' => $settings[ $key ],
140	];
141
142	$image = new Ehp_Image( $this->widget, [
143	'widget_name' => $this->widget->get_name(),
144	], $defaults );
145	$image->render();
146	}
147
148	private function render_text_element_container( $item, $key ) {
149	$graphic_element = $this->settings['graphic_element'];
150
151	$is_graphic_image = 'image' === $graphic_element;
152	$is_graphic_icon = 'icon' === $graphic_element;
153	$text_container_classnames = [
154	self::LAYOUT_CLASSNAME . '__text-container',
155	];
156
157	$zigzag_item_title_setting_key = $this->widget->public_get_repeater_setting_key(
158	$graphic_element . '_title',
159	$graphic_element . '_zigzag_items',
160	$key
161	);
162
163	$zigzag_item_description_setting_key = $this->widget->public_get_repeater_setting_key(
164	$graphic_element . '_description',
165	$graphic_element . '_zigzag_items',
166	$key
167	);
168
169	$this->widget->public_add_inline_editing_attributes( $zigzag_item_title_setting_key, 'none' );
170	$this->widget->public_add_inline_editing_attributes( $zigzag_item_description_setting_key, 'none' );
171
172	if ( $is_graphic_icon ) {
173	$text_container_classnames[] = 'is-graphic-icon';
174	} elseif ( $is_graphic_image ) {
175	$text_container_classnames[] = 'is-graphic-image';
176	}
177
178	$this->widget->add_render_attribute( 'text-container-' . $key, [
179	'class' => $text_container_classnames,
180	] );
181
182	$title_classname = self::LAYOUT_CLASSNAME . '__title';
183	$description_classname = self::LAYOUT_CLASSNAME . '__description';
184	?>
185	<div <?php $this->widget->print_render_attribute_string( 'text-container-' . $key ); ?>>
186	<?php
187
188	Widget_Utils::maybe_render_text_html(
189	$this->widget,
190	$zigzag_item_title_setting_key,
191	$title_classname,
192	$item[ $graphic_element . '_title' ],
193	$this->settings['zigzag_title_tag']
194	);
195
196	Widget_Utils::maybe_render_text_html(
197	$this->widget,
198	$zigzag_item_description_setting_key,
199	$description_classname,
200	$item[ $graphic_element . '_description' ]
201	);
202
203	if ( ! empty( $item[ $graphic_element . '_button_text' ] ) ) {
204	$this->render_cta_button( $item, $key );
205	}
206	?>
207	</div>
208	<?php
209	}
210
211	public function render_cta_button( $item, $key ) {
212	$graphic_element = $this->settings['graphic_element'];
213
214	$this->widget->add_render_attribute( 'button-container', 'class', self::LAYOUT_CLASSNAME . '__button-container' );
215
216	$button_classnames = [
217	'ehp-button',
218	'ehp-button--primary',
219	self::LAYOUT_CLASSNAME . '__button',
220	self::LAYOUT_CLASSNAME . '__button--primary',
221	];
222
223	if ( ! empty( $this->settings['primary_button_type'] ) ) {
224	$button_classnames[] = 'is-type-' . $this->settings['primary_button_type'];
225	}
226
227	if ( $this->settings['primary_button_hover_animation'] ) {
228	$button_classnames[] = 'elementor-animation-' . $this->settings['primary_button_hover_animation'];
229	}
230
231	if ( 'yes' === $this->settings['primary_show_button_border'] ) {
232	$button_classnames[] = 'has-border';
233	}
234
235	$button_render_attr = $graphic_element . '-primary-button-' . $key;
236
237	$shapes = new Ehp_Shapes( $this->widget, [
238	'widget_name' => $this->widget->get_name(),
239	'container_prefix' => 'button',
240	'type_prefix' => 'primary',
241	'render_attribute' => $button_render_attr,
242	'key' => $key,
243	] );
244	$shapes_classnames = $shapes->get_shape_classnames();
245
246	$button_classnames = array_merge( $button_classnames, $shapes_classnames );
247
248	$this->widget->add_render_attribute( $button_render_attr, [
249	'class' => $button_classnames,
250	] );
251
252	$this->widget->add_link_attributes( $button_render_attr, $item[ $graphic_element . '_button_link' ], true );
253	?>
254	<div <?php $this->widget->print_render_attribute_string( 'button-container' ); ?>>
255	<a <?php $this->widget->print_render_attribute_string( $button_render_attr ); ?>>
256	<?php
257	Icons_Manager::render_icon( $item[ $graphic_element . '_button_icon' ], [
258	'aria-hidden' => 'true',
259	'class' => 'ehp-button__icon',
260	self::LAYOUT_CLASSNAME . '__button-icon',
261	] );
262
263	$this->render_button_text( $item, $key );
264	?>
265	</a>
266	</div>
267	<?php
268	}
269
270	protected function render_button_text( $item, $key ) {
271	$graphic_element = $this->settings['graphic_element'];
272
273	$render_attr = $graphic_element . '_button_text';
274
275	$this->widget->add_render_attribute( $render_attr, [
276	'class' => self::LAYOUT_CLASSNAME . '__button-text',
277	] );
278
279	$zigzag_item_button_setting_key = $this->widget->public_get_repeater_setting_key(
280	$graphic_element . '_button_text',
281	$graphic_element . '_zigzag_items',
282	$key
283	);
284
285	$this->widget->public_add_inline_editing_attributes( $zigzag_item_button_setting_key, 'none' );
286
287	Widget_Utils::maybe_render_text_html(
288	$this->widget,
289	$zigzag_item_button_setting_key,
290	self::LAYOUT_CLASSNAME . '__button-text',
291	$item[ $graphic_element . '_button_text' ],
292	'span',
293	);
294	?>
295	<?php
296	}
297	}
298