premium-image-separator.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.1.0

premium-addons-for-elementor / widgets / premium-image-separator.php

premium-addons-for-elementor / widgets Last commit date

premium-image-separator.php

586 lines

1	<?php
2
3	/**
4	* Premium Image Separator.
5	*/
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Modules\DynamicTags\Module as TagsModule;
10	use Elementor\Widget_Base;
11	use Elementor\Utils;
12	use Elementor\Control_Media;
13	use Elementor\Controls_Manager;
14	use Elementor\Scheme_Color;
15	use Elementor\Icons_Manager;
16	use Elementor\Group_Control_Css_Filter;
17	use Elementor\Group_Control_Text_Shadow;
18
19	// PremiumAddons Classes.
20	use PremiumAddons\Includes\Helper_Functions;
21	use PremiumAddons\Includes\Premium_Template_Tags;
22
23	if ( ! defined( 'ABSPATH' ) ) exit; // If this file is called directly, abort.
24
25	/**
26	* Class Premium_Image_Separator
27	*/
28	class Premium_Image_Separator extends Widget_Base {
29
30	protected $templateInstance;
31
32	public function getTemplateInstance() {
33	return $this->templateInstance = Premium_Template_Tags::getInstance();
34	}
35
36	public function get_name() {
37	return 'premium-addon-image-separator';
38	}
39
40	public function get_title() {
41	return sprintf( '%1$s %2$s', Helper_Functions::get_prefix(), __('Image Separator', 'premium-addons-for-elementor') );
42	}
43
44	public function get_style_depends() {
45	return [
46	'premium-addons'
47	];
48	}
49
50	public function get_script_depends() {
51	return [
52	'lottie-js'
53	];
54	}
55
56	public function get_icon() {
57	return 'pa-image-separator';
58	}
59
60	public function get_categories() {
61	return [ 'premium-elements' ];
62	}
63
64	public function get_keywords() {
65	return [ 'divider', 'section', 'shape' ];
66	}
67
68	public function get_custom_help_url() {
69	return 'https://premiumaddons.com/support/';
70	}
71
72	/**
73	* Register Image Controls controls.
74	*
75	* @since 1.0.0
76	* @access protected
77	*/
78	protected function _register_controls() {
79
80	$this->start_controls_section('premium_image_separator_general_settings',
81	[
82	'label' => __('Image Settings', 'premium-addons-for-elementor')
83	]
84	);
85
86	$this->add_control('separator_type',
87	[
88	'label' => __( 'Separator Type', 'premium-addons-for-elementor' ),
89	'type' => Controls_Manager::SELECT,
90	'options' => [
91	'icon' => __('Icon', 'premium-addons-for-elementor'),
92	'image' => __( 'Image', 'premium-addons-for-elementor'),
93	'animation' => __('Lottie Animation', 'premium-addons-for-elementor'),
94	],
95	'default' => 'image'
96	]
97	);
98
99	$this->add_control('separator_icon',
100	[
101	'label' => __( 'Select an Icon', 'premium-addons-for-elementor' ),
102	'type' => Controls_Manager::ICONS,
103	'default' => [
104	'value' => 'fas fa-grip-lines',
105	'library' => 'fa-solid',
106	],
107	'condition' => [
108	'separator_type' => 'icon'
109	]
110	]
111	);
112
113	$this->add_control('premium_image_separator_image',
114	[
115	'label' => __('Image', 'premium-addons-for-elementor'),
116	'description' => __('Choose the separator image', 'premium-addons-for-elementor' ),
117	'type' => Controls_Manager::MEDIA,
118	'dynamic' => [ 'active' => true ],
119	'default' => [
120	'url' => Utils::get_placeholder_image_src(),
121	],
122	'label_block' => true,
123	'condition' => [
124	'separator_type' => 'image'
125	]
126	]
127	);
128
129	$this->add_control('lottie_url',
130	[
131	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
132	'type' => Controls_Manager::TEXT,
133	'dynamic' => [ 'active' => true ],
134	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
135	'label_block' => true,
136	'condition' => [
137	'separator_type' => 'animation'
138	],
139	]
140	);
141
142	$this->add_control('lottie_loop',
143	[
144	'label' => __('Loop','premium-addons-for-elementor'),
145	'type' => Controls_Manager::SWITCHER,
146	'return_value' => 'true',
147	'default' => 'true',
148	'condition' => [
149	'separator_type' => 'animation'
150	],
151	]
152	);
153
154	$this->add_control('lottie_reverse',
155	[
156	'label' => __('Reverse','premium-addons-for-elementor'),
157	'type' => Controls_Manager::SWITCHER,
158	'return_value' => 'true',
159	'condition' => [
160	'separator_type' => 'animation'
161	],
162	]
163	);
164
165	$this->add_control('lottie_hover',
166	[
167	'label' => __('Only Play on Hover','premium-addons-for-elementor'),
168	'type' => Controls_Manager::SWITCHER,
169	'return_value' => 'true',
170	'condition' => [
171	'separator_type' => 'animation'
172	],
173	]
174	);
175
176	$this->add_responsive_control('premium_image_separator_image_size',
177	[
178	'label' => __('Size', 'premium-addons-for-elementor'),
179	'type' => Controls_Manager::SLIDER,
180	'size_units' => ['px', 'em', '%'],
181	'default' => [
182	'unit' => 'px',
183	'size' => 200,
184	],
185	'range' => [
186	'px' => [
187	'min' => 1,
188	'max' => 800,
189	],
190	'em' => [
191	'min' => 1,
192	'max' => 30,
193	],
194	],
195	'selectors' => [
196	'{{WRAPPER}} .premium-image-separator-container img' => 'width: {{SIZE}}{{UNIT}}',
197	'{{WRAPPER}} .premium-image-separator-container i' => 'font-size: {{SIZE}}{{UNIT}}',
198	'{{WRAPPER}} .premium-image-separator-container svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}'
199	]
200	]
201	);
202
203	$this->add_responsive_control('premium_image_separator_image_gutter',
204	[
205	'label' => __('Gutter (%)', 'premium-addons-for-elementor'),
206	'type' => Controls_Manager::NUMBER,
207	'default' => -50,
208	'description' => __('-50% is default. Increase to push the image outside or decrease to pull the image inside.','premium-addons-for-elementor'),
209	'selectors' => [
210	'{{WRAPPER}} .premium-image-separator-container' => 'transform: translateY( {{VALUE}}% );'
211	]
212	]
213	);
214
215	$this->add_control('premium_image_separator_image_align',
216	[
217	'label' => __('Alignment', 'premium-addons-for-elementor'),
218	'type' => Controls_Manager::CHOOSE,
219	'options' => [
220	'left' => [
221	'title' => __('Left', 'premium-addons-for-elementor'),
222	'icon' => 'fa fa-align-left'
223	],
224	'center' => [
225	'title' => __('Center', 'premium-addons-for-elementor'),
226	'icon' => 'fa fa-align-center'
227	],
228	'right' => [
229	'title' => __('Right', 'premium-addons-for-elementor'),
230	'icon' => 'fa fa-align-right'
231	],
232	],
233	'default' => 'center',
234	'selectors' => [
235	'{{WRAPPER}} .premium-image-separator-container' => 'text-align: {{VALUE}};',
236	]
237	]
238	);
239
240	$this->add_control('premium_image_separator_link_switcher',
241	[
242	'label' => __('Link', 'premium-addons-for-elementor'),
243	'type' => Controls_Manager::SWITCHER,
244	'description' => __('Add a custom link or select an existing page link','premium-addons-for-elementor'),
245	]
246	);
247
248	$this->add_control('premium_image_separator_link_type',
249	[
250	'label' => __('Link/URL', 'premium-addons-for-elementor'),
251	'type' => Controls_Manager::SELECT,
252	'options' => [
253	'url' => __('URL', 'premium-addons-for-elementor'),
254	'link' => __('Existing Page', 'premium-addons-for-elementor'),
255	],
256	'default' => 'url',
257	'label_block' => true,
258	'condition' => [
259	'premium_image_separator_link_switcher' => 'yes',
260	],
261	]
262	);
263
264	$this->add_control('premium_image_separator_existing_page',
265	[
266	'label' => __('Existing Page', 'premium-addons-for-elementor'),
267	'type' => Controls_Manager::SELECT2,
268	'options' => $this->getTemplateInstance()->get_all_posts(),
269	'multiple' => false,
270	'label_block' => true,
271	'condition' => [
272	'premium_image_separator_link_switcher' => 'yes',
273	'premium_image_separator_link_type' => 'link',
274	],
275	]
276	);
277
278	$this->add_control('premium_image_separator_image_link',
279	[
280	'label' => __('URL', 'premium-addons-for-elementor'),
281	'type' => Controls_Manager::TEXT,
282	'dynamic' => [
283	'active' => true,
284	'categories' => [
285	TagsModule::POST_META_CATEGORY,
286	TagsModule::URL_CATEGORY
287	]
288	],
289	'label_block' => true,
290	'condition' => [
291	'premium_image_separator_link_switcher' => 'yes',
292	'premium_image_separator_link_type' => 'url',
293	],
294	]
295	);
296
297	$this->add_control('premium_image_separator_image_link_text',
298	[
299	'label' => __('Image Title', 'premium-addons-for-elementor'),
300	'type' => Controls_Manager::TEXT,
301	'label_block' => true,
302	'condition' => [
303	'premium_image_separator_link_switcher' => 'yes',
304	],
305	]
306	);
307
308	$this->add_control('link_new_tab',
309	[
310	'label' => __('Open Link in New Tab', 'premium-addons-for-elementor'),
311	'type' => Controls_Manager::SWITCHER,
312	'default' => 'yes',
313	'condition' => [
314	'premium_image_separator_link_switcher' => 'yes',
315	],
316	]
317	);
318
319	$this->end_controls_section();
320
321	$this->start_controls_section('premium_image_separator_style',
322	[
323	'label' => __('Separator', 'premium-addons-for-elementor'),
324	'tab' => Controls_Manager::TAB_STYLE,
325	]
326	);
327
328	$this->add_group_control(
329	Group_Control_Css_Filter::get_type(),
330	[
331	'name' => 'css_filters',
332	'selector' => '{{WRAPPER}} .premium-image-separator-container',
333	'condition' => [
334	'separator_type!' => 'icon'
335	]
336	]
337	);
338
339	$this->add_group_control(
340	Group_Control_Css_Filter::get_type(),
341	[
342	'name' => 'hover_css_filters',
343	'label' => __('Hover CSS Filters', 'premium-addons-for-elementor'),
344	'selector' => '{{WRAPPER}} .premium-image-separator-container:hover',
345	'condition' => [
346	'separator_type!' => 'icon'
347	]
348	]
349	);
350
351	$this->add_control('icon_color',
352	[
353	'label' => __( 'Color', 'premium-addons-for-elementor' ),
354	'type' => Controls_Manager::COLOR,
355	'scheme' => [
356	'type' => Scheme_Color::get_type(),
357	'value' => Scheme_Color::COLOR_1,
358	],
359	'selectors' => [
360	'{{WRAPPER}} .premium-image-separator-container i' => 'color: {{VALUE}}'
361	],
362	'condition' => [
363	'separator_type' => 'icon'
364	]
365	]
366	);
367
368	$this->add_control('icon_hover_color',
369	[
370	'label' => __( 'Hover Color', 'premium-addons-for-elementor' ),
371	'type' => Controls_Manager::COLOR,
372	'scheme' => [
373	'type' => Scheme_Color::get_type(),
374	'value' => Scheme_Color::COLOR_1,
375	],
376	'selectors' => [
377	'{{WRAPPER}} .premium-image-separator-container i:hover' => 'color: {{VALUE}}'
378	],
379	'condition' => [
380	'separator_type' => 'icon'
381	]
382	]
383	);
384
385	$this->add_control('icon_background_color',
386	[
387	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
388	'type' => Controls_Manager::COLOR,
389	'scheme' => [
390	'type' => Scheme_Color::get_type(),
391	'value' => Scheme_Color::COLOR_2,
392	],
393	'selectors' => [
394	'{{WRAPPER}} .premium-image-separator-container i' => 'background-color: {{VALUE}}'
395	],
396	'condition' => [
397	'separator_type' => 'icon'
398	]
399	]
400	);
401
402	$this->add_control('icon_hover_background_color',
403	[
404	'label' => __( 'Hover Background Color', 'premium-addons-for-elementor' ),
405	'type' => Controls_Manager::COLOR,
406	'scheme' => [
407	'type' => Scheme_Color::get_type(),
408	'value' => Scheme_Color::COLOR_2,
409	],
410	'selectors' => [
411	'{{WRAPPER}} .premium-image-separator-container i:hover' => 'background-color: {{VALUE}}'
412	],
413	'condition' => [
414	'separator_type' => 'icon'
415	]
416	]
417	);
418
419	$this->add_responsive_control('separator_border_radius',
420	[
421	'label' => __('Border Radius', 'premium-addons-for-elementor'),
422	'type' => Controls_Manager::DIMENSIONS,
423	'size_units' => ['px', 'em', '%'],
424	'selectors' => [
425	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}'
426	],
427	]
428	);
429
430	$this->add_group_control(
431	Group_Control_Text_Shadow::get_type(),
432	[
433	'name' => 'separator_shadow',
434	'selector' => '{{WRAPPER}} .premium-image-separator-container i',
435	'condition' => [
436	'separator_type' => 'icon'
437	]
438	]
439	);
440
441	$this->add_responsive_control('icon_padding',
442	[
443	'label' => __('Padding', 'premium-addons-for-elementor'),
444	'type' => Controls_Manager::DIMENSIONS,
445	'size_units' => ['px', 'em', '%'],
446	'selectors' => [
447	'{{WRAPPER}} .premium-image-separator-container i' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}'
448	],
449	'condition' => [
450	'separator_type' => 'icon'
451	]
452	]
453	);
454
455	$this->end_controls_section();
456
457	}
458
459	/**
460	* Render Image Separator widget output on the frontend.
461	*
462	* Written in PHP and used to generate the final HTML.
463	*
464	* @since 1.0.0
465	* @access protected
466	*/
467	protected function render() {
468
469	$settings = $this->get_settings_for_display();
470
471	$type = $settings['separator_type'];
472
473	if( 'yes' === $settings['premium_image_separator_link_switcher'] ) {
474	$link_type = $settings['premium_image_separator_link_type'];
475
476	if( 'url' === $link_type ) {
477	$url = $settings['premium_image_separator_image_link'];
478	} else {
479	$url = get_permalink( $settings['premium_image_separator_existing_page'] );
480	}
481
482	$this->add_render_attribute( 'link', [
483	'class' => 'premium-image-separator-link',
484	'href' => $url
485	]);
486
487	if( 'yes' === $settings['link_new_tab'] ) {
488	$this->add_render_attribute( 'link', 'target', '_blank');
489	}
490
491	if( ! empty ( $settings['premium_image_separator_image_link_text']) ) {
492	$this->add_render_attribute( 'link', 'title', $settings['premium_image_separator_image_link_text'] );
493	}
494
495	}
496
497	if( 'image' === $type ) {
498	$alt = esc_attr( Control_Media::get_image_alt( $settings['premium_image_separator_image'] ) );
499	} elseif ( 'animation' === $type ) {
500	$this->add_render_attribute( 'separator_lottie', [
501	'class' => 'premium-lottie-animation',
502	'data-lottie-url' => $settings['lottie_url'],
503	'data-lottie-loop' => $settings['lottie_loop'],
504	'data-lottie-reverse' => $settings['lottie_reverse'],
505	'data-lottie-hover' => $settings['lottie_hover']
506	]);
507	}
508	?>
509
510	<div class="premium-image-separator-container">
511	<?php if( 'image' === $type ) : ?>
512	<img src="<?php echo $settings['premium_image_separator_image']['url']; ?>" alt="<?php echo $alt; ?>">
513	<?php elseif( 'icon' === $type ) :
514	Icons_Manager::render_icon( $settings['separator_icon'], [ 'aria-hidden' => 'true' ] );
515	else: ?>
516	<div <?php echo $this->get_render_attribute_string( 'separator_lottie' ); ?>></div>
517	<?php endif; ?>
518	<?php if ( $settings['premium_image_separator_link_switcher'] === 'yes' && ! empty( $url ) ) : ?>
519	<a <?php echo $this->get_render_attribute_string( 'link' ); ?>></a>
520	<?php endif; ?>
521	</div>
522	<?php
523	}
524
525	/**
526	* Render Image Separtor widget output in the editor.
527	*
528	* Written as a Backbone JavaScript template and used to generate the live preview.
529	*
530	* @since 1.0.0
531	* @access protected
532	*/
533	protected function content_template() {
534	?>
535	<#
536	var type = settings.separator_type,
537	linkSwitch = settings.premium_image_separator_link_switcher;
538
539	if( 'image' === type ) {
540	var imgUrl = settings.premium_image_separator_image.url;
541	} else if ( 'icon' === type ) {
542	var iconHTML = elementor.helpers.renderIcon( view, settings.separator_icon, { 'aria-hidden': true }, 'i' , 'object' );
543	} else {
544
545	view.addRenderAttribute( 'separator_lottie', {
546	'class': 'premium-lottie-animation',
547	'data-lottie-url': settings.lottie_url,
548	'data-lottie-loop': settings.lottie_loop,
549	'data-lottie-reverse': settings.lottie_reverse,
550	'data-lottie-hover': settings.lottie_hover
551	});
552
553	}
554
555	if( 'yes' === linkSwitch ) {
556	var linkType = settings.premium_image_separator_link_type,
557	linkTitle = settings.premium_image_separator_image_link_text,
558	linkUrl = ( 'url' == linkType ) ? settings.premium_image_separator_image_link : settings.premium_image_separator_existing_page;
559
560	view.addRenderAttribute( 'link', 'class', 'premium-image-separator-link' );
561	view.addRenderAttribute( 'link', 'href', linkUrl );
562
563	if( '' !== linkTitle ) {
564	view.addRenderAttribute( 'link', 'title', linkTitle );
565	}
566
567	}
568
569	#>
570
571	<div class="premium-image-separator-container">
572	<# if( 'image' === type ) { #>
573	<img alt="image separator" src="{{ imgUrl }}">
574	<# } else if( 'icon' === type ) { #>
575	{{{ iconHTML.value }}}
576	<# } else { #>
577	<div {{{ view.getRenderAttributeString('separator_lottie') }}}></div>
578	<# } #>
579	<# if( 'yes' === linkSwitch ) { #>
580	<a {{{ view.getRenderAttributeString( 'link' ) }}}></a>
581	<# } #>
582	</div>
583
584	<?php
585	}
586	}