easy-elements / widgets / process-grid / process-grid.php

process-grid.php in Easy Elements for Elementor – Addons & Website Templates 1.2.1, at widgets/process-grid/process-grid.php

618 lines 25.1 KB

Raw Download Zip

1	<?php
2	use Elementor\Repeater;
3	use Elementor\Utils;
4	use Elementor\Controls_Manager;
5	use Elementor\Responsive_Control;
6	use Elementor\Group_Control_Image_Size;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Typography;
9	defined( 'ABSPATH' ) \|\| die();
10	if ( ! class_exists( 'Easyel_Process_Widget' ) ) {
11	class Easyel_Process_Widget extends \Elementor\Widget_Base {
12
13	public function get_style_depends() {
14	$handle = 'eel-process';
15	$css_path = plugin_dir_path( __FILE__ ) . 'css/process.min.css';
16
17	if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
18	wp_register_style( $handle, plugins_url( 'css/process.min.css', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : EASYELEMENTS_VER );
19	}
20
21	return [ $handle ];
22	}
23
24	public function get_name() {
25	return 'eel-process';
26	}
27
28	public function get_title() {
29	return esc_html__( 'Process Grid', 'easy-elements' );
30	}
31
32	public function get_icon() {
33	return 'easyicon easyelIcon-process-grid';
34	}
35
36	public function get_categories() {
37	return [ 'easyelements_category' ];
38	}
39
40	public function get_keywords() {
41	return [ 'process', 'sevice', 'icon', 'process-box', 'text' ];
42	}
43
44	protected function register_controls() {
45	$this->start_controls_section(
46	'_section_logo',
47	[
48	'label' => esc_html__( 'Process Grid Settings', 'easy-elements' ),
49	'tab' => Controls_Manager::TAB_CONTENT,
50	]
51	);
52
53	$repeater = new Repeater();
54
55	$repeater->add_control(
56	'icon',
57	[
58	'label' => esc_html__( 'Icon', 'easy-elements' ),
59	'type' => \Elementor\Controls_Manager::ICONS,
60	'label_block' => true,
61	'default' => [
62	'value' => 'fas fa-star',
63	'library' => 'fa-solid',
64	],
65	]
66	);
67
68	$repeater->add_control(
69	'_title',
70	[
71	'label' => esc_html__( 'Title', 'easy-elements' ),
72	'type' => \Elementor\Controls_Manager::TEXT,
73	'default' => esc_html__( 'Manufacturing Industrial', 'easy-elements' ),
74	'label_block' => true,
75	]
76	);
77
78	$repeater->add_control(
79	'_description',
80	[
81	'label' => esc_html__( 'Description', 'easy-elements' ),
82	'type' => \Elementor\Controls_Manager::TEXTAREA,
83	'default' => esc_html__( 'Optimizing production and supply chain operations and generational transitions', 'easy-elements' ),
84	]
85	);
86
87	$repeater->add_control(
88	'link',
89	[
90	'label' => esc_html__('Link', 'easy-elements'),
91	'type' => Controls_Manager::URL,
92	'placeholder' => 'https://example.com',
93	]
94	);
95	$repeater->add_control(
96	'process_number_or_icon',
97	[
98	'label' => esc_html__('Process Number or Icon', 'easy-elements'),
99	'type' => \Elementor\Controls_Manager::SELECT,
100	'options' => [
101	'p_number' => esc_html__('Process Number', 'easy-elements'),
102	'p_icon' => esc_html__('Process Icon', 'easy-elements'),
103	],
104	'default' => 'p_number',
105	]
106	);
107	$repeater->add_control(
108	'process_number',
109	[
110	'label' => esc_html__( 'Process Number', 'easy-elements' ),
111	'type' => \Elementor\Controls_Manager::TEXT,
112	'default' => '1',
113	'placeholder' => 'Enter a number',
114	'condition' => [
115	'process_number_or_icon' => 'p_number',
116	],
117	]
118	);
119	$repeater->add_control(
120	'process_icon',
121	[
122	'label' => esc_html__( 'Process Icon', 'easy-elements' ),
123	'type' => \Elementor\Controls_Manager::ICONS,
124	'label_block' => true,
125	'default' => [
126	'value' => 'fas fa-long-arrow-alt-right',
127	'library' => 'fa-solid',
128	],
129	'condition' => [
130	'process_number_or_icon' => 'p_icon',
131	],
132	]
133	);
134
135
136	$this->add_control(
137	'easy_icon_box',
138	[
139	'type' => Controls_Manager::REPEATER,
140	'fields' => $repeater->get_controls(),
141	'title_field' => '{{{ _title }}}',
142	'default' => [
143	[
144	'icon' => [
145	'value' => 'fas fa-heart',
146	'library' => 'fa-solid',
147	],
148	'_title' => esc_html__( 'Manufacturing Industrial', 'easy-elements' ),
149	'_description' => esc_html__( 'Optimizing production and supply chain operations and generational transitions', 'easy-elements' ),
150	'link' => ['url' => ''],
151	],
152	[
153	'icon' => [
154	'value' => 'fas fa-heart',
155	'library' => 'fa-solid',
156	],
157	'_title' => esc_html__( 'Professional Services', 'easy-elements' ),
158	'_description' => esc_html__( 'Growth strategies for knowledge-based businesses with strategic guidance throughout', 'easy-elements' ),
159	'link' => ['url' => ''],
160	],
161	[
162	'icon' => [
163	'value' => 'fas fa-heart',
164	'library' => 'fa-solid',
165	],
166	'_title' => esc_html__( 'Technology & SaaS', 'easy-elements' ),
167	'_description' => esc_html__( 'Scaling strategies for rapid growth and market leadership expertise for companies facing challenges', 'easy-elements' ),
168	'link' => ['url' => ''],
169	],
170	],
171	]
172	);
173
174	$this->add_control(
175	'icon_direction',
176	[
177	'label' => esc_html__( 'Direction', 'easy-elements' ),
178	'type' => \Elementor\Controls_Manager::CHOOSE,
179	'default' => 'top',
180	'options' => [
181	'left' => [
182	'title' => esc_html__( 'Left', 'easy-elements' ),
183	'icon' => 'eicon-h-align-left',
184	],
185	'top' => [
186	'title' => esc_html__( 'Top', 'easy-elements' ),
187	'icon' => 'eicon-v-align-top',
188	],
189	'right' => [
190	'title' => esc_html__( 'Right', 'easy-elements' ),
191	'icon' => 'eicon-h-align-right',
192	],
193	],
194	'toggle' => false,
195	]
196	);
197
198	$this->add_responsive_control(
199	'_text_align',
200	[
201	'label' => esc_html__( 'Alignment', 'easy-elements' ),
202	'type' => \Elementor\Controls_Manager::CHOOSE,
203	'options' => [
204	'left' => [
205	'title' => esc_html__( 'Left', 'easy-elements' ),
206	'icon' => 'eicon-text-align-left',
207	],
208	'center' => [
209	'title' => esc_html__( 'Center', 'easy-elements' ),
210	'icon' => 'eicon-text-align-center',
211	],
212	'right' => [
213	'title' => esc_html__( 'Right', 'easy-elements' ),
214	'icon' => 'eicon-text-align-right',
215	],
216	],
217	'default' => 'center',
218	'selectors' => [
219	'{{WRAPPER}} .ee--icon-box' => 'text-align: {{VALUE}};',
220	],
221	]
222	);
223
224	$this->add_control(
225	'title_tag',
226	[
227	'label' => esc_html__( 'Title HTML Tag', 'easy-elements' ),
228	'type' => \Elementor\Controls_Manager::SELECT,
229	'default' => 'h3',
230	'options' => [
231	'h1' => 'H1',
232	'h2' => 'H2',
233	'h3' => 'H3',
234	'h4' => 'H4',
235	'h5' => 'H5',
236	'h6' => 'H6',
237	'div' => 'div',
238	'span' => 'span',
239	'p' => 'p',
240	],
241	]
242	);
243
244	$this->add_responsive_control(
245	'columns',
246	[
247	'label' => esc_html__( 'Select Columns', 'easy-elements' ),
248	'type' => Controls_Manager::SELECT,
249	'default' => '3',
250	'tablet_default' => '3',
251	'mobile_default' => '2',
252	'options' => [
253	'1' => '1 Column',
254	'2' => '2 Columns',
255	'3' => '3 Columns',
256	'4' => '4 Columns',
257	'5' => '5 Columns',
258	'6' => '6 Columns',
259	],
260	'selectors' => [
261	'{{WRAPPER}} .eel-icon-box-wrap .eel-icon-item' => 'width: calc(100% / {{VALUE}});',
262	],
263	]
264	);
265
266
267	$this->add_responsive_control(
268	'item_padding',
269	[
270	'label' => esc_html__( 'Space', 'easy-elements' ),
271	'type' => Controls_Manager::DIMENSIONS,
272	'size_units' => [ 'px', 'em', '%' ],
273	'selectors' => [
274	'{{WRAPPER}} .eel-icon-box-wrap .eel-icon-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
275	],
276	]
277	);
278
279	$this->end_controls_section();
280
281	$this->start_controls_section(
282	'section_style_icon_box',
283	[
284	'label' => esc_html__( 'Box Style', 'easy-elements' ),
285	'tab' => Controls_Manager::TAB_STYLE,
286	]
287	);
288
289	$this->add_control(
290	'box_background_color',
291	[
292	'label' => esc_html__( 'Background Color', 'easy-elements' ),
293	'type' => Controls_Manager::COLOR,
294	'selectors' => [
295	'{{WRAPPER}} .eel-icon-item .ee--icon-box' => 'background-color: {{VALUE}};',
296	],
297	]
298	);
299
300	$this->add_responsive_control(
301	'item_padding_inner',
302	[
303	'label' => esc_html__( 'Padding', 'easy-elements' ),
304	'type' => Controls_Manager::DIMENSIONS,
305	'size_units' => [ 'px', 'em', '%' ],
306	'selectors' => [
307	'{{WRAPPER}} .eel-icon-box-wrap .eel-icon-item .ee--icon-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
308	],
309	]
310	);
311
312	$this->add_group_control(
313	\Elementor\Group_Control_Border::get_type(),
314	[
315	'name' => 'item_border',
316	'selector' => '{{WRAPPER}} .ee--icon-box',
317	]
318	);
319
320	$this->add_control(
321	'item__border_radius',
322	[
323	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
324	'type' => \Elementor\Controls_Manager::DIMENSIONS,
325	'size_units' => [ 'px', '%' ],
326	'selectors' => [
327	'{{WRAPPER}} .eel-icon-box-wrap .eel-icon-item .ee--icon-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
328	],
329	]
330	);
331	$this->add_group_control(
332	\Elementor\Group_Control_Box_Shadow::get_type(),
333	[
334	'name' => 'item_box_shadow',
335	'selector' => '{{WRAPPER}} .eel-icon-box-wrap .ee--icon-box',
336	]
337	);
338
339	$this->end_controls_section();
340
341	$this->start_controls_section(
342	'section_style_icon',
343	[
344	'label' => esc_html__( 'Icon', 'easy-elements' ),
345	'tab' => Controls_Manager::TAB_STYLE,
346	]
347	);
348
349	$this->add_control(
350	'icon_color',
351	[
352	'label' => esc_html__( 'Color', 'easy-elements' ),
353	'type' => Controls_Manager::COLOR,
354	'selectors' => [
355	'{{WRAPPER}} .ee--icon-box .eel-icon' => 'color: {{VALUE}};',
356	'{{WRAPPER}} .ee--icon-box .eel-icon svg' => 'fill: {{VALUE}};',
357	'{{WRAPPER}} .ee--icon-box .eel-icon svg path' => 'fill: {{VALUE}};',
358	],
359	]
360	);
361
362	$this->add_control(
363	'icon_bg_color',
364	[
365	'label' => esc_html__( 'Background', 'easy-elements' ),
366	'type' => Controls_Manager::COLOR,
367	'selectors' => [
368	'{{WRAPPER}} .ee--icon-box .eel-icon' => 'background-color: {{VALUE}};',
369	],
370	]
371	);
372
373	$this->add_group_control(
374	\Elementor\Group_Control_Typography::get_type(),
375	[
376	'name' => 'icon_typography',
377	'label' => esc_html__( 'Icon Typography', 'easy-elements' ),
378	'selector' => '{{WRAPPER}} .ee--icon-box .eel-icon',
379	]
380	);
381
382	$this->add_group_control(
383	\Elementor\Group_Control_Border::get_type(),
384	[
385	'name' => 'icon_border',
386	'selector' => '{{WRAPPER}} .ee--icon-box .eel-icon',
387	]
388	);
389
390	$this->add_control(
391	'icon__border_radius',
392	[
393	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
394	'type' => \Elementor\Controls_Manager::DIMENSIONS,
395	'size_units' => [ 'px', '%' ],
396	'selectors' => [
397	'{{WRAPPER}} .ee--icon-box .eel-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
398	],
399	]
400	);
401
402	$this->end_controls_section();
403
404	$this->start_controls_section(
405	'section_style_title',
406	[
407	'label' => esc_html__( 'Title', 'easy-elements' ),
408	'tab' => Controls_Manager::TAB_STYLE,
409	]
410	);
411
412	$this->add_control(
413	'title_color',
414	[
415	'label' => esc_html__( 'Color', 'easy-elements' ),
416	'type' => Controls_Manager::COLOR,
417	'selectors' => [
418	'{{WRAPPER}} .icon-box-title' => 'color: {{VALUE}};',
419	],
420	]
421	);
422
423	$this->add_group_control(
424	\Elementor\Group_Control_Typography::get_type(),
425	[
426	'name' => 'box_title_typography',
427	'label' => esc_html__( 'Typography', 'easy-elements' ),
428	'selector' => '{{WRAPPER}} .icon-box-title',
429	]
430	);
431
432	$this->add_responsive_control(
433	'title_margin',
434	[
435	'label' => esc_html__( 'Margin', 'easy-elements' ),
436	'type' => \Elementor\Controls_Manager::DIMENSIONS,
437	'size_units' => [ 'px', 'em', '%' ],
438	'selectors' => [
439	'{{WRAPPER}} .icon-box-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
440	],
441	]
442	);
443
444	$this->end_controls_section();
445
446	$this->start_controls_section(
447	'section_style_description',
448	[
449	'label' => esc_html__( 'Description', 'easy-elements' ),
450	'tab' => Controls_Manager::TAB_STYLE,
451	]
452	);
453
454	$this->add_control(
455	'desc_color',
456	[
457	'label' => esc_html__( 'Color', 'easy-elements' ),
458	'type' => Controls_Manager::COLOR,
459	'selectors' => [
460	'{{WRAPPER}} .icon-box-description' => 'color: {{VALUE}};',
461	],
462	]
463	);
464
465
466	$this->add_group_control(
467	\Elementor\Group_Control_Typography::get_type(),
468	[
469	'name' => 'box_desc_typography',
470	'label' => esc_html__( 'Typography', 'easy-elements' ),
471	'selector' => '{{WRAPPER}} .icon-box-description',
472	]
473	);
474
475
476	$this->end_controls_section();
477
478	$this->start_controls_section(
479	'section_process_number',
480	[
481	'label' => esc_html__( 'Number', 'easy-elements' ),
482	'tab' => Controls_Manager::TAB_STYLE,
483	]
484	);
485	$this->add_control(
486	'process_number_color',
487	[
488	'label' => esc_html__( 'Color', 'easy-elements' ),
489	'type' => \Elementor\Controls_Manager::COLOR,
490	'selectors' => [
491	'{{WRAPPER}} .eel-process-number' => 'background-image:linear-gradient(180deg, {{VALUE}} 0%, rgba(255, 255, 255, 0.24) 100%);',
492	],
493	]
494	);
495	$this->add_group_control(
496	Group_Control_Typography::get_type(),
497	[
498	'name' => 'number_typography',
499	'label' => esc_html__('Number Typography', 'easy-elements'),
500	'selector' => '{{WRAPPER}} .eel-process-number',
501	]
502	);
503	$this->add_responsive_control(
504	'process_number_opacity',
505	[
506	'label' => esc_html__( 'Opacity', 'easy-elements' ),
507	'type' => \Elementor\Controls_Manager::SLIDER,
508	'range' => [
509	'px' => [
510	'min' => 0, 'max' => 1, 'step' => 0.1,
511	],
512	],
513	'selectors' => [
514	'{{WRAPPER}} .eel-process-number' => 'opacity: {{SIZE}};',
515	],
516	]
517	);
518	$this->add_responsive_control(
519	'process_number_offset',
520	[
521	'label' => esc_html__( 'Number Vertical Position', 'easy-elements' ),
522	'type' => \Elementor\Controls_Manager::SLIDER,
523	'size_units' => [ 'px', '%' ],
524	'range' => [
525	'px' => [ 'min' => -500, 'max' => 500 ],
526	'%' => [ 'min' => -100, 'max' => 100 ],
527	],
528	'selectors' => [
529	'{{WRAPPER}} .eel-process-number' => 'bottom: {{SIZE}}{{UNIT}};',
530	],
531	]
532	);
533	$this->add_responsive_control(
534	'process_number_offset_horizontal',
535	[
536	'label' => esc_html__( 'Number Horizontal Position', 'easy-elements' ),
537	'type' => \Elementor\Controls_Manager::SLIDER,
538	'size_units' => [ 'px', '%' ],
539	'range' => [
540	'px' => [ 'min' => -500, 'max' => 500 ],
541	'%' => [ 'min' => -100, 'max' => 100 ],
542	],
543	'selectors' => [
544	'{{WRAPPER}} .eel-process-number' => 'left: {{SIZE}}{{UNIT}};',
545	],
546	]
547	);
548	$this->end_controls_section();
549	}
550
551	protected function render() {
552	$settings = $this->get_settings_for_display();
553
554	if ( empty( $settings['easy_icon_box'] ) ) {
555	return;
556	}
557	?>
558	<div class="eel-icon-box-wrap">
559	<div class="grid-wrap">
560	<?php foreach ( $settings['easy_icon_box'] as $item ) :
561	$link = $item['link']['url'] ?? '';
562	$target = ! empty( $item['link']['is_external'] ) ? ' target="_blank"' : '';
563	$nofollow = ! empty( $item['link']['nofollow'] ) ? ' rel="nofollow"' : '';
564	$icon_direction = $settings['icon_direction'] ?? '';
565	?>
566
567	<div class="eel-icon-item">
568	<div class="ee--icon-box <?php echo esc_attr($icon_direction); ?>">
569	<?php if ( $link ) : ?>
570	<a href="<?php echo esc_url( $link ); ?>" <?php echo esc_attr( $target ); ?> <?php echo esc_attr( $nofollow ); ?>>
571	<?php endif; ?>
572
573	<?php
574	if ( isset( $item['icon']['value'] ) && $item['icon']['value'] ) { ?>
575	<span class="eel-icon"><?php \Elementor\Icons_Manager::render_icon( $item['icon'], [ 'aria-hidden' => 'true' ] ); ?></span>
576	<?php } ?>
577
578	<?php if ( $icon_direction === 'left' \|\| $icon_direction === 'right' ) : ?>
579	<div class="eel-title-content-wrap">
580	<?php endif; ?>
581	<?php
582	if ( $item['process_number_or_icon'] === 'p_number' && ! empty( $item['process_number'] ) ) :
583	echo '<span class="eel-process-number">' . esc_html( $item['process_number'] ) . '</span>';
584	elseif ( $item['process_number_or_icon'] === 'p_icon' && ! empty( $item['process_icon'] ) ) :
585	echo '<span class="eel-process-number">';
586	\Elementor\Icons_Manager::render_icon( $item['process_icon'], [ 'aria-hidden' => 'true' ] );
587	echo '</span>';
588	endif;
589	?>
590	<?php if ( ! empty( $item['_title'] ) ) :
591	$title_tag = isset( $settings['title_tag'] ) ? $settings['title_tag'] : 'h3'; ?>
592	<<?php echo esc_attr( $title_tag ); ?> class="icon-box-title">
593	<?php echo wp_kses_post( $item['_title'] ); ?>
594	</<?php echo esc_attr( $title_tag ); ?>>
595	<?php endif; ?>
596
597	<?php if ( ! empty( $item['_description'] ) ) : ?>
598	<div class="icon-box-description"><?php echo wp_kses_post( $item['_description'] ); ?></div>
599	<?php endif; ?>
600
601	<?php if ( $icon_direction === 'left' \|\| $icon_direction === 'right' ) : ?>
602	</div>
603	<?php endif; ?>
604
605	<?php if ( $link ) : ?>
606	</a>
607	<?php endif; ?>
608	</div>
609	</div>
610
611	<?php endforeach; ?>
612	</div>
613	</div>
614	<?php
615	}
616	}
617	}
618	?>