premium-image-scroll.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.11.34

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

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

premium-image-scroll.php

1084 lines

1	<?php
2	/**
3	* Premium Image Scroll.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Plugin;
10	use Elementor\Widget_Base;
11	use Elementor\Utils;
12	use Elementor\Control_Media;
13	use Elementor\Controls_Manager;
14	use Elementor\Group_Control_Border;
15	use Elementor\Group_Control_Image_Size;
16	use Elementor\Group_Control_Css_Filter;
17	use Elementor\Group_Control_Box_Shadow;
18	use Elementor\Group_Control_Text_Shadow;
19
20
21	// PremiumAddons Classes.
22	use PremiumAddons\Includes\Controls\Premium_Post_Filter;
23	use PremiumAddons\Includes\Helper_Functions;
24
25	if ( ! defined( 'ABSPATH' ) ) {
26	exit;
27	}
28
29	/**
30	* Class Premium_Image_Scroll
31	*/
32	class Premium_Image_Scroll extends Widget_Base {
33
34	/**
35	* Retrieve Widget Name.
36	*
37	* @since 1.0.0
38	* @access public
39	*/
40	public function get_name() {
41	return 'premium-image-scroll';
42	}
43
44	/**
45	* Retrieve Widget Title.
46	*
47	* @since 1.0.0
48	* @access public
49	*/
50	public function get_title() {
51	return __( 'Image Scroll', 'premium-addons-for-elementor' );
52	}
53
54	/**
55	* Widget preview refresh button.
56	*
57	* @since 1.0.0
58	* @access public
59	*/
60	public function is_reload_preview_required() {
61	return true;
62	}
63
64	/**
65	* Retrieve Widget Icon.
66	*
67	* @since 1.0.0
68	* @access public
69	*
70	* @return string widget icon.
71	*/
72	public function get_icon() {
73	return 'pa-image-scroll';
74	}
75
76	/**
77	* Retrieve Widget Keywords.
78	*
79	* @since 1.0.0
80	* @access public
81	*
82	* @return string Widget keywords.
83	*/
84	public function get_keywords() {
85	return array( 'pa', 'premium', 'premium image scroll', 'link', 'cta', 'animation' );
86	}
87
88	protected function is_dynamic_content(): bool {
89	return false;
90	}
91
92	public function has_widget_inner_wrapper(): bool {
93	return ! Helper_Functions::check_elementor_experiment( 'e_optimized_markup' );
94	}
95
96	/**
97	* Retrieve Widget Categories.
98	*
99	* @since 1.0.0
100	* @access public
101	*
102	* @return string Widget Categories.
103	*/
104	public function get_categories() {
105	return array( 'premium-elements' );
106	}
107
108	/**
109	* Retrieve Widget Dependent CSS.
110	*
111	* @since 1.0.0
112	* @access public
113	*
114	* @return array CSS style handles.
115	*/
116	public function get_style_depends() {
117	return array(
118	'premium-addons',
119	);
120	}
121
122	/**
123	* Retrieve Widget Dependent JS.
124	*
125	* @since 1.0.0
126	* @access public
127	*
128	* @return array JS script handles.
129	*/
130	public function get_script_depends() {
131	return array(
132	'imagesloaded',
133	'premium-addons',
134	);
135	}
136
137	/**
138	* Retrieve Widget Support URL.
139	*
140	* @access public
141	*
142	* @return string support URL.
143	*/
144	public function get_custom_help_url() {
145	return 'https://premiumaddons.com/support/';
146	}
147
148	/**
149	* Register Image Scroll controls.
150	*
151	* @since 1.0.0
152	* @access protected
153	*/
154	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
155
156	$this->start_controls_section(
157	'general_settings',
158	array(
159	'label' => __( 'Image Settings', 'premium-addons-for-elementor' ),
160	)
161	);
162
163	$demo = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/elementor-image-scroll-widget/', 'img-scroll', 'wp-editor', 'demo' );
164	Helper_Functions::add_templates_controls( $this, 'image-scroll', $demo );
165
166	$this->add_control(
167	'image',
168	array(
169	'label' => __( 'Image', 'premium-addons-for-elementor' ),
170	'type' => Controls_Manager::MEDIA,
171	'dynamic' => array( 'active' => true ),
172	'default' => array(
173	'url' => Utils::get_placeholder_image_src(),
174	),
175	'description' => __( 'Choose the scroll image', 'premium-addons-for-elementor' ),
176	'label_block' => true,
177	)
178	);
179
180	$this->add_group_control(
181	Group_Control_Image_Size::get_type(),
182	array(
183	'name' => 'thumbnail',
184	'default' => 'full',
185	'separator' => 'none',
186	)
187	);
188
189	$this->add_responsive_control(
190	'image_height',
191	array(
192	'label' => __( 'Image Height', 'premium-addons-for-elementor' ),
193	'type' => Controls_Manager::SLIDER,
194	'size_units' => array( 'px', 'em', 'vh', 'custom' ),
195	'default' => array(
196	'unit' => 'px',
197	'size' => 300,
198	),
199	'range' => array(
200	'px' => array(
201	'min' => 200,
202	'max' => 800,
203	),
204	'em' => array(
205	'min' => 1,
206	'max' => 50,
207	),
208	),
209	'selectors' => array(
210	'{{WRAPPER}} .premium-image-scroll-container' => 'height: {{SIZE}}{{UNIT}};',
211	),
212	)
213	);
214
215	$this->add_control(
216	'link_switcher',
217	array(
218	'label' => __( 'Link', 'premium-addons-for-elementor' ),
219	'type' => Controls_Manager::SWITCHER,
220	'description' => __( 'Add a custom link or select an existing page link', 'premium-addons-for-elementor' ),
221	)
222	);
223
224	$this->add_control(
225	'link_type',
226	array(
227	'label' => __( 'Link/URL', 'premium-addons-for-elementor' ),
228	'type' => Controls_Manager::SELECT,
229	'options' => array(
230	'url' => __( 'URL', 'premium-addons-for-elementor' ),
231	'link' => __( 'Existing Page', 'premium-addons-for-elementor' ),
232	),
233	'default' => 'url',
234	'condition' => array(
235	'link_switcher' => 'yes',
236	),
237	'label_block' => true,
238	)
239	);
240
241	$this->add_control(
242	'link',
243	array(
244	'label' => __( 'URL', 'premium-addons-for-elementor' ),
245	'type' => Controls_Manager::URL,
246	'dynamic' => array( 'active' => true ),
247	'placeholder' => 'https://premiumaddons.com/',
248	'label_block' => true,
249	'condition' => array(
250	'link_switcher' => 'yes',
251	'link_type' => 'url',
252	),
253	)
254	);
255
256	$this->add_control(
257	'existing_page',
258	array(
259	'label' => __( 'Existing Page', 'premium-addons-for-elementor' ),
260	'type' => Premium_Post_Filter::TYPE,
261	'label_block' => true,
262	'multiple' => false,
263	'source' => array( 'post', 'page' ),
264	'condition' => array(
265	'link_switcher' => 'yes',
266	'link_type' => 'link',
267	),
268	)
269	);
270
271	$this->add_control(
272	'mask_image_scroll_switcher',
273	array(
274	'label' => esc_html__( 'Mask Image Shape', 'premium-addons-for-elementor' ),
275	'type' => Controls_Manager::SWITCHER,
276	'separator' => 'before',
277	)
278	);
279
280	$this->add_control(
281	'mask_shape_image_scroll',
282	array(
283	'label' => esc_html__( 'Mask Image', 'premium-addons-for-elementor' ),
284	'type' => Controls_Manager::MEDIA,
285	'default' => array(
286	'url' => '',
287	),
288	'description' => esc_html__( 'Use PNG image with the shape you want to mask around feature image.', 'premium-addons-for-elementor' ),
289	'selectors' => array(
290	'{{WRAPPER}} .premium-image-scroll-mask-media ' => 'mask-image: url("{{URL}}");-webkit-mask-image: url("{{URL}}");',
291	),
292	'condition' => array(
293	'mask_image_scroll_switcher' => 'yes',
294	),
295	)
296	);
297
298	$this->add_control(
299	'mask_size',
300	array(
301	'label' => __( 'Mask Size', 'premium-addons-for-elementor' ),
302	'type' => Controls_Manager::SELECT,
303	'options' => array(
304	'contain' => __( 'Contain', 'premium-addons-for-elementor' ),
305	'cover' => __( 'Cover', 'premium-addons-for-elementor' ),
306	),
307	'default' => 'contain',
308	'selectors' => array(
309	'{{WRAPPER}} .premium-image-scroll-mask-media' => 'mask-size: {{VALUE}};-webkit-mask-size: {{VALUE}};',
310	),
311	'condition' => array(
312	'mask_image_scroll_switcher' => 'yes',
313	),
314	)
315	);
316
317	$this->add_control(
318	'mask_position_cover',
319	array(
320	'label' => __( 'Mask Position', 'premium-addons-for-elementor' ),
321	'type' => Controls_Manager::SELECT,
322	'options' => array(
323	'center center' => __( 'Center Center', 'premium-addons-for-elementor' ),
324	'center left' => __( 'Center Left', 'premium-addons-for-elementor' ),
325	'center right' => __( 'Center Right', 'premium-addons-for-elementor' ),
326	'top center' => __( 'Top Center', 'premium-addons-for-elementor' ),
327	'top left' => __( 'Top Left', 'premium-addons-for-elementor' ),
328	'top right' => __( 'Top Right', 'premium-addons-for-elementor' ),
329	'bottom center' => __( 'Bottom Center', 'premium-addons-for-elementor' ),
330	'bottom left' => __( 'Bottom Left', 'premium-addons-for-elementor' ),
331	'bottom right' => __( 'Bottom Right', 'premium-addons-for-elementor' ),
332	),
333	'default' => 'center center',
334	'selectors' => array(
335	'{{WRAPPER}} .premium-image-scroll-mask-media' => 'mask-position: {{VALUE}};-webkit-mask-position: {{VALUE}}',
336	),
337	'condition' => array(
338	'mask_image_scroll_switcher' => 'yes',
339	'mask_size' => 'cover',
340	),
341	)
342	);
343
344	$this->add_control(
345	'mask_position_contain',
346	array(
347	'label' => __( 'Mask Position', 'premium-addons-for-elementor' ),
348	'type' => Controls_Manager::SELECT,
349	'options' => array(
350	'center center' => __( 'Center Center', 'premium-addons-for-elementor' ),
351	'top center' => __( 'Top Center', 'premium-addons-for-elementor' ),
352	'bottom center' => __( 'Bottom Center', 'premium-addons-for-elementor' ),
353	),
354	'default' => 'center center',
355	'selectors' => array(
356	'{{WRAPPER}} .premium-image-scroll-mask-media' => 'mask-position: {{VALUE}};-webkit-mask-position: {{VALUE}}',
357	),
358	'condition' => array(
359	'mask_image_scroll_switcher' => 'yes',
360	'mask_size' => 'contain',
361	),
362	)
363	);
364
365	$this->add_control(
366	'image_scroll_shadow',
367	array(
368	'label' => __( 'Image Shadow', 'premium-addons-for-elementor' ),
369	'type' => Controls_Manager::POPOVER_TOGGLE,
370	'condition' => array(
371	'mask_image_scroll_switcher' => 'yes',
372	),
373	'return_value' => 'yes',
374	'render_type' => 'template',
375	)
376	);
377
378	$this->start_popover();
379
380	$this->add_control(
381	'image_scroll_shadow_color',
382	array(
383	'label' => __( 'Color', 'premium-addons-for-elementor' ),
384	'type' => Controls_Manager::COLOR,
385	'default' => 'rgba(0,0,0,0.5)',
386	)
387	);
388
389	$this->add_control(
390	'image_scroll_shadow_h',
391	array(
392	'label' => __( 'Horizontal', 'premium-addons-for-elementor' ),
393	'type' => Controls_Manager::SLIDER,
394	'range' => array(
395	'px' => array(
396	'min' => 0,
397	'max' => 100,
398	'step' => 1,
399	),
400	),
401	'default' => array(
402	'size' => 0,
403	'unit' => 'px',
404	),
405	)
406	);
407
408	$this->add_control(
409	'image_scroll_shadow_v',
410	array(
411	'label' => __( 'Vertical', 'premium-addons-for-elementor' ),
412	'type' => Controls_Manager::SLIDER,
413	'range' => array(
414	'px' => array(
415	'min' => 0,
416	'max' => 100,
417	'step' => 1,
418	),
419	),
420	'default' => array(
421	'size' => 0,
422	'unit' => 'px',
423	),
424	)
425	);
426
427	$this->add_control(
428	'image_scroll_shadow_blur',
429	array(
430	'label' => __( 'Blur', 'premium-addons-for-elementor' ),
431	'type' => Controls_Manager::SLIDER,
432	'range' => array(
433	'px' => array(
434	'min' => 0,
435	'max' => 100,
436	'step' => 1,
437	),
438	),
439	'default' => array(
440	'size' => 10,
441	'unit' => 'px',
442	),
443	)
444	);
445
446	$this->end_popover();
447
448	$this->end_controls_section();
449
450	$this->start_controls_section(
451	'advanced_settings',
452	array(
453	'label' => __( 'Advanced Settings', 'premium-addons-for-elementor' ),
454	)
455	);
456
457	$this->add_control(
458	'direction_type',
459	array(
460	'label' => __( 'Direction', 'premium-addons-for-elementor' ),
461	'description' => __( 'Select Scroll Direction', 'premium-addons-for-elementor' ),
462	'type' => Controls_Manager::SELECT,
463	'options' => array(
464	'vertical' => __( 'Vertical', 'premium-addons-for-elementor' ),
465	'horizontal' => __( 'Horizontal', 'premium-addons-for-elementor' ),
466	),
467	'default' => 'vertical',
468	)
469	);
470
471	$this->add_control(
472	'image_fit',
473	array(
474	'label' => __( 'Image Fit', 'premium-addons-for-elementor' ),
475	'type' => Controls_Manager::SELECT,
476	'options' => array(
477	'fill' => __( 'Fill', 'premium-addons-for-elementor' ),
478	'cover' => __( 'Cover', 'premium-addons-for-elementor' ),
479	),
480	'condition' => array(
481	'direction_type' => 'horizontal',
482	),
483	'default' => 'fill',
484	'selectors' => array(
485	'{{WRAPPER}} .premium-image-scroll-container .premium-image-scroll-horizontal img ' => 'object-fit:{{VALUE}};',
486	),
487	)
488	);
489
490	$this->add_control(
491	'reverse',
492	array(
493	'label' => __( 'Reverse Direction', 'premium-addons-for-elementor' ),
494	'type' => Controls_Manager::SWITCHER,
495	'condition' => array(
496	'trigger_type' => 'hover',
497	),
498	)
499	);
500
501	$this->add_control(
502	'trigger_type',
503	array(
504	'label' => __( 'Trigger', 'premium-addons-for-elementor' ),
505	'type' => Controls_Manager::SELECT,
506	'options' => array(
507	'hover' => __( 'Hover', 'premium-addons-for-elementor' ),
508	'scroll' => __( 'Mouse Scroll', 'premium-addons-for-elementor' ),
509	),
510	'default' => 'hover',
511	)
512	);
513
514	$this->add_control(
515	'duration_speed',
516	array(
517	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
518	'description' => __( 'Set the scroll speed value. The value will be counted in seconds (s)', 'premium-addons-for-elementor' ),
519	'type' => Controls_Manager::NUMBER,
520	'default' => 3,
521	'condition' => array(
522	'trigger_type' => 'hover',
523	),
524	'selectors' => array(
525	'{{WRAPPER}} .premium-image-scroll-container img' => 'transition-duration: {{Value}}s',
526	),
527	)
528	);
529
530	$this->add_control(
531	'icon_switcher',
532	array(
533	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
534	'type' => Controls_Manager::SWITCHER,
535	)
536	);
537
538	$this->add_control(
539	'icon_size',
540	array(
541	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
542	'type' => Controls_Manager::SLIDER,
543	'size_units' => array( 'px', 'em' ),
544	'default' => array(
545	'size' => 30,
546	),
547	'range' => array(
548	'px' => array(
549	'min' => 5,
550	'max' => 100,
551	),
552	),
553	'selectors' => array(
554	'{{WRAPPER}} .premium-image-scroll-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
555	),
556	'condition' => array(
557	'icon_switcher' => 'yes',
558	),
559	)
560	);
561
562	$this->add_control(
563	'overlay',
564	array(
565	'label' => __( 'Overlay', 'premium-addons-for-elementor' ),
566	'type' => Controls_Manager::SWITCHER,
567	'label_on' => __( 'Show', 'premium-addons-for-elementor' ),
568	'label_off' => __( 'Hide', 'premium-addons-for-elementor' ),
569
570	)
571	);
572
573	$this->end_controls_section();
574
575	$this->start_controls_section(
576	'section_pa_docs',
577	array(
578	'label' => __( 'Help & Docs', 'premium-addons-for-elementor' ),
579	)
580	);
581
582	$doc1_url = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/docs/image-scroll-widget-tutorial/', 'img-scroll-widget', 'wp-editor', 'get-support' );
583
584	$this->add_control(
585	'doc_1',
586	array(
587	'type' => Controls_Manager::RAW_HTML,
588	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc1_url, __( 'Getting started »', 'premium-addons-for-elementor' ) ),
589	'content_classes' => 'editor-pa-doc',
590	)
591	);
592
593	$this->end_controls_section();
594
595	Helper_Functions::register_papro_promotion_controls( $this, 'img-scroll' );
596
597	$this->start_controls_section(
598	'image_style',
599	array(
600	'label' => __( 'Image', 'premium-addons-for-elementor' ),
601	'tab' => Controls_Manager::TAB_STYLE,
602	)
603	);
604
605	$this->add_control(
606	'icon_color',
607	array(
608	'label' => __( 'Icon Color', 'premium-addons-for-elementor' ),
609	'type' => Controls_Manager::COLOR,
610	'selectors' => array(
611	'{{WRAPPER}} .premium-image-scroll-icon' => 'fill: {{VALUE}};',
612	),
613	'condition' => array(
614	'icon_switcher' => 'yes',
615	),
616	)
617	);
618
619	$this->add_control(
620	'overlay_background',
621	array(
622	'label' => __( 'Overlay Color', 'premium-addons-for-elementor' ),
623	'type' => Controls_Manager::COLOR,
624	'selectors' => array(
625	'{{WRAPPER}} .premium-image-scroll-overlay' => 'background: {{VALUE}};',
626	),
627	'condition' => array(
628	'overlay' => 'yes',
629	),
630	)
631	);
632
633	$this->start_controls_tabs( 'image_style_tabs' );
634
635	$this->start_controls_tab(
636	'image_style_tab_normal',
637	array(
638	'label' => __( 'Normal', 'premium-addons-for-elementor' ),
639	)
640	);
641
642	$this->add_control(
643	'opacity',
644	array(
645	'label' => __( 'Opacity', 'premium-addons-for-elementor' ),
646	'type' => Controls_Manager::SLIDER,
647	'range' => array(
648	'px' => array(
649	'max' => 1,
650	'min' => 0.10,
651	'step' => 0.01,
652	),
653	),
654	'selectors' => array(
655	'{{WRAPPER}} img' => 'opacity: {{SIZE}};',
656	),
657	)
658	);
659
660	$this->add_group_control(
661	Group_Control_Css_Filter::get_type(),
662	array(
663	'name' => 'css_filters',
664	'selector' => '{{WRAPPER}} .premium-image-scroll-container img',
665	)
666	);
667
668	$this->end_controls_tab();
669
670	$this->start_controls_tab(
671	'image_style_tab_hover',
672	array(
673	'label' => __( 'Hover', 'premium-addons-for-elementor' ),
674	)
675	);
676
677	$this->add_control(
678	'hover_opacity',
679	array(
680	'label' => __( 'Opacity', 'premium-addons-for-elementor' ),
681	'type' => Controls_Manager::SLIDER,
682	'range' => array(
683	'px' => array(
684	'max' => 1,
685	'min' => 0.10,
686	'step' => 0.01,
687	),
688	),
689	'selectors' => array(
690	'{{WRAPPER}} .premium-image-scroll-section:hover img' => 'opacity: {{SIZE}};',
691	),
692	)
693	);
694
695	$this->add_group_control(
696	Group_Control_Css_Filter::get_type(),
697	array(
698	'name' => 'css_filters_hover',
699	'selector' => '{{WRAPPER}} .premium-image-scroll-container img:hover',
700	)
701	);
702
703	$this->end_controls_tab();
704
705	$this->end_controls_tabs();
706
707	$this->add_control(
708	'blend_mode',
709	array(
710	'label' => __( 'Blend Mode', 'premium-addons-for-elementor' ),
711	'type' => Controls_Manager::SELECT,
712	'options' => array(
713	'' => __( 'Normal', 'premium-addons-for-elementor' ),
714	'multiply' => 'Multiply',
715	'screen' => 'Screen',
716	'overlay' => 'Overlay',
717	'darken' => 'Darken',
718	'lighten' => 'Lighten',
719	'color-dodge' => 'Color Dodge',
720	'saturation' => 'Saturation',
721	'color' => 'Color',
722	'luminosity' => 'Luminosity',
723	),
724	'separator' => 'before',
725	'selectors' => array(
726	'{{WRAPPER}} .premium-image-scroll-container img' => 'mix-blend-mode: {{VALUE}}',
727	),
728	)
729	);
730
731	$this->end_controls_section();
732
733	$this->start_controls_section(
734	'container_style',
735	array(
736	'label' => __( 'Container', 'premium-addons-for-elementor' ),
737	'tab' => Controls_Manager::TAB_STYLE,
738	)
739	);
740
741	$this->start_controls_tabs( 'container_style_tabs' );
742
743	$this->start_controls_tab(
744	'container_style_normal',
745	array(
746	'label' => __( 'Normal', 'premium-addons-for-elementor' ),
747	)
748	);
749
750	$this->add_group_control(
751	Group_Control_Border::get_type(),
752	array(
753	'name' => 'container_border',
754	'selector' => '{{WRAPPER}} .premium-image-scroll-section',
755	)
756	);
757
758	$this->add_control(
759	'container_border_radius',
760	array(
761	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
762	'type' => Controls_Manager::SLIDER,
763	'size_units' => array( 'px', '%', 'em' ),
764	'selectors' => array(
765	'{{WRAPPER}} .premium-image-scroll-section, {{WRAPPER}} .premium-container-scroll' => 'border-radius: {{SIZE}}{{UNIT}}',
766	),
767	'condition' => array(
768	'container_adv_radius!' => 'yes',
769	),
770	)
771	);
772
773	$this->add_control(
774	'container_adv_radius',
775	array(
776	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
777	'type' => Controls_Manager::SWITCHER,
778	'description' => __( 'Apply custom radius values. Get the radius value from ', 'premium-addons-for-elementor' ) . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>' . __( '. See ', 'premium-addons-for-elementor' ) . '<a href="https://www.youtube.com/watch?v=S0BJazLHV-M" target="_blank">tutorial</a>',
779	)
780	);
781
782	$this->add_control(
783	'container_adv_radius_value',
784	array(
785	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
786	'type' => Controls_Manager::TEXT,
787	'dynamic' => array( 'active' => true ),
788	'selectors' => array(
789	'{{WRAPPER}} .premium-image-scroll-section, {{WRAPPER}} .premium-container-scroll' => 'border-radius: {{VALUE}};',
790	),
791	'condition' => array(
792	'container_adv_radius' => 'yes',
793	),
794	)
795	);
796
797	$this->add_group_control(
798	Group_Control_Box_Shadow::get_type(),
799	array(
800	'name' => 'container_box_shadow',
801	'selector' => '{{WRAPPER}} .premium-image-scroll-section',
802	)
803	);
804
805	$this->end_controls_tab();
806
807	$this->start_controls_tab(
808	'container_style_hover',
809	array(
810	'label' => __( 'Hover', 'premium-addons-for-elementor' ),
811	)
812	);
813
814	$this->add_group_control(
815	Group_Control_Border::get_type(),
816	array(
817	'name' => 'container_border_hover',
818	'selector' => '{{WRAPPER}} .premium-image-scroll-section:hover',
819	)
820	);
821
822	$this->add_control(
823	'container_border_radius_hover',
824	array(
825	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
826	'type' => Controls_Manager::SLIDER,
827	'size_units' => array( 'px', '%', 'em' ),
828	'selectors' => array(
829	'{{WRAPPER}} .premium-image-scroll-section:hover, {{WRAPPER}} .premium-container-scroll:hover' => 'border-radius: {{SIZE}}{{UNIT}}',
830	),
831	'condition' => array(
832	'container_hover_adv_radius!' => 'yes',
833	),
834	)
835	);
836
837	$this->add_control(
838	'container_hover_adv_radius',
839	array(
840	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
841	'type' => Controls_Manager::SWITCHER,
842	'description' => __( 'Apply custom radius values. Get the radius value from ', 'premium-addons-for-elementor' ) . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>' . __( '. See ', 'premium-addons-for-elementor' ) . '<a href="https://www.youtube.com/watch?v=S0BJazLHV-M" target="_blank">tutorial</a>',
843	)
844	);
845
846	$this->add_control(
847	'container_hover_adv_radius_value',
848	array(
849	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
850	'type' => Controls_Manager::TEXT,
851	'dynamic' => array( 'active' => true ),
852	'selectors' => array(
853	'{{WRAPPER}} .premium-image-scroll-section:hover, {{WRAPPER}} .premium-container-scroll:hover' => 'border-radius: {{VALUE}};',
854	),
855	'condition' => array(
856	'container_hover_adv_radius' => 'yes',
857	),
858	)
859	);
860
861	$this->add_group_control(
862	Group_Control_Box_Shadow::get_type(),
863	array(
864	'name' => 'container_box_shadow_hover',
865	'selector' => '{{WRAPPER}} .premium-image-scroll-section:hover',
866	)
867	);
868
869	$this->end_controls_tab();
870
871	$this->end_controls_tabs();
872
873	$this->end_controls_section();
874	}
875
876	/**
877	* Get Icon SVG
878	*
879	* @access protected
880	* @since 4.10.79
881	*
882	* @param string $dir direction.
883	*/
884	protected function render_icon_svg( $dir ) {
885
886	if ( 'vertical' === $dir ) {
887
888	$svg = '<svg class="premium-image-scroll-icon pa-vertical-mouse-scroll" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{display:none;}.st1{display:inline;}</style><g><path d="M67.7,42.6c0-9.6-7.8-17.3-17.3-17.3h-0.8c-9.6,0-17.3,7.8-17.3,17.3v14.7c0,9.6,7.8,17.3,17.3,17.3h0.8c9.6,0,17.3-7.8,17.3-17.3V42.6z M64.8,57.4c0,4-1.6,7.6-4.2,10.2c-2.6,2.6-6.2,4.2-10.2,4.2h-0.8c-4,0-7.6-1.6-10.2-4.2c-2.6-2.6-4.2-6.2-4.2-10.2V42.6c0-4,1.6-7.6,4.2-10.2c2.6-2.6,6.2-4.2,10.2-4.2h0.8c4,0,7.6,1.6,10.2,4.2c2.6,2.6,4.2,6.2,4.2,10.2V57.4z"/><path d="M50,39.9c-0.8,0-1.5,0.7-1.5,1.5v4.3c0,0.8,0.7,1.5,1.5,1.5c0.8,0,1.5-0.7,1.5-1.5v-4.3C51.4,40.6,50.8,39.9,50,39.9z"/><g><path d="M49.1,94.7c0.5,0.4,1.3,0.4,1.8,0l7.3-5.8c0.6-0.5,0.7-1.4,0.2-2c-0.5-0.6-1.4-0.7-2-0.2l0,0L50,91.7l-6.4-5.1c-0.6-0.5-1.5-0.4-2,0.2c-0.5,0.6-0.4,1.5,0.2,2L49.1,94.7z"/><path d="M56.4,13.4c0.6,0.5,1.5,0.4,2-0.2s0.4-1.5-0.2-2l-7.3-5.8c-0.5-0.4-1.3-0.4-1.8,0l-7.3,5.8c-0.6,0.5-0.7,1.4-0.2,2s1.4,0.7,2,0.2l0,0L50,8.3L56.4,13.4z"/></g><g class="st0"><path class="st1" d="M5.3,49.1c-0.4,0.5-0.4,1.3,0,1.8l5.8,7.3c0.5,0.6,1.4,0.7,2,0.2c0.6-0.5,0.7-1.4,0.2-2l0,0L8.3,50l5.1-6.4c0.5-0.6,0.4-1.5-0.2-2c-0.6-0.5-1.5-0.4-2,0.2L5.3,49.1z"/><path class="st1" d="M86.6,56.4c-0.5,0.6-0.4,1.5,0.2,2s1.5,0.4,2-0.2l5.8-7.3c0.4-0.5,0.4-1.3,0-1.8l-5.8-7.3c-0.5-0.6-1.4-0.7-2-0.2s-0.7,1.4-0.2,2l0,0l5.1,6.4L86.6,56.4z"/></g></g></svg>';
889
890	} else {
891
892	$svg = '<svg class="premium-image-scroll-icon pa-horizontal-mouse-scroll" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{display:none;}.st1{display:inline;}</style><g><path d="M67.7,42.6c0-9.6-7.8-17.3-17.3-17.3h-0.8c-9.6,0-17.3,7.8-17.3,17.3v14.7c0,9.6,7.8,17.3,17.3,17.3h0.8c9.6,0,17.3-7.8,17.3-17.3V42.6z M64.8,57.4c0,4-1.6,7.6-4.2,10.2c-2.6,2.6-6.2,4.2-10.2,4.2h-0.8c-4,0-7.6-1.6-10.2-4.2c-2.6-2.6-4.2-6.2-4.2-10.2V42.6c0-4,1.6-7.6,4.2-10.2c2.6-2.6,6.2-4.2,10.2-4.2h0.8c4,0,7.6,1.6,10.2,4.2c2.6,2.6,4.2,6.2,4.2,10.2V57.4z"/><path d="M50,39.9c-0.8,0-1.5,0.7-1.5,1.5v4.3c0,0.8,0.7,1.5,1.5,1.5c0.8,0,1.5-0.7,1.5-1.5v-4.3C51.4,40.6,50.8,39.9,50,39.9z"/><g class="st0"><path class="st1" d="M49.1,94.7c0.5,0.4,1.3,0.4,1.8,0l7.3-5.8c0.6-0.5,0.7-1.4,0.2-2c-0.5-0.6-1.4-0.7-2-0.2l0,0L50,91.7l-6.4-5.1c-0.6-0.5-1.5-0.4-2,0.2c-0.5,0.6-0.4,1.5,0.2,2L49.1,94.7z"/><path class="st1" d="M56.4,13.4c0.6,0.5,1.5,0.4,2-0.2s0.4-1.5-0.2-2l-7.3-5.8c-0.5-0.4-1.3-0.4-1.8,0l-7.3,5.8c-0.6,0.5-0.7,1.4-0.2,2s1.4,0.7,2,0.2l0,0L50,8.3L56.4,13.4z"/></g><g><path d="M5.3,49.1c-0.4,0.5-0.4,1.3,0,1.8l5.8,7.3c0.5,0.6,1.4,0.7,2,0.2c0.6-0.5,0.7-1.4,0.2-2l0,0L8.3,50l5.1-6.4c0.5-0.6,0.4-1.5-0.2-2c-0.6-0.5-1.5-0.4-2,0.2L5.3,49.1z"/><path d="M86.6,56.4c-0.5,0.6-0.4,1.5,0.2,2s1.5,0.4,2-0.2l5.8-7.3c0.4-0.5,0.4-1.3,0-1.8l-5.8-7.3c-0.5-0.6-1.4-0.7-2-0.2s-0.7,1.4-0.2,2l0,0l5.1,6.4L86.6,56.4z"/></g></g></svg>';
893
894	}
895
896	echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
897	}
898
899	/**
900	* Render Image Scroll widget output on the frontend.
901	*
902	* Written in PHP and used to generate the final HTML.
903	*
904	* @since 1.0.0
905	* @access protected
906	*/
907	protected function render() {
908
909	$settings = $this->get_settings_for_display();
910
911	$link_type = $settings['link_type'];
912
913	if ( 'yes' === $settings['link_switcher'] ) {
914
915	$link_url = 'url' === $link_type ? $settings['link'] : get_permalink( $settings['existing_page'] );
916
917	$this->add_render_attribute( 'link', 'class', 'premium-image-scroll-link' );
918
919	if ( 'url' === $link_type ) {
920	$this->add_link_attributes( 'link', $link_url );
921	} else {
922	$this->add_render_attribute( 'link', 'href', $link_url );
923	}
924	}
925
926	$image_scroll = array(
927	'trigger' => $settings['trigger_type'],
928	'direction' => $settings['direction_type'],
929	'reverse' => $settings['reverse'],
930	);
931
932	$this->add_render_attribute(
933	'container',
934	array(
935	'class' => 'premium-image-scroll-container',
936	'data-settings' => wp_json_encode( $image_scroll ),
937	)
938	);
939
940	$this->add_render_attribute( 'direction_type', 'class', 'premium-image-scroll-' . $settings['direction_type'] );
941
942	if ( ! empty( $settings['mask_image_scroll_switcher'] ) && 'yes' === $settings['mask_image_scroll_switcher'] ) {
943	$this->add_render_attribute( 'direction_type', 'class', 'premium-image-scroll-mask-media' );
944	}
945
946	$image_html = '';
947	if ( ! empty( $settings['image']['url'] ) ) {
948
949	$image_id = apply_filters( 'wpml_object_id', $settings['image']['id'], 'attachment', true );
950
951	$settings['image']['id'] = $image_id;
952
953	$image_html = Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' );
954
955	}
956	if ( 'yes' === $settings['mask_image_scroll_switcher'] && '' !== $settings['mask_shape_image_scroll']['url'] && 'yes' === $settings['image_scroll_shadow'] ) {
957	$this->add_render_attribute( 'shadow', 'style', 'filter: drop-shadow(' . $settings['image_scroll_shadow_color'] . ' ' . $settings['image_scroll_shadow_h']['size'] . 'px ' . $settings['image_scroll_shadow_v']['size'] . 'px ' . $settings['image_scroll_shadow_blur']['size'] . 'px )' );
958	}
959
960	?>
961	<div class="premium-image-scroll-section" <?php echo wp_kses_post( $this->get_render_attribute_string( 'shadow' ) ); ?>>
962	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'container' ) ); ?>>
963	<?php if ( 'yes' === $settings['icon_switcher'] ) : ?>
964	<div class="premium-image-scroll-content">
965	<?php $this->render_icon_svg( $settings['direction_type'] ); ?>
966	</div>
967	<?php endif; ?>
968	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'direction_type' ) ); ?>>
969	<?php if ( 'yes' === $settings['overlay'] ) : ?>
970	<div class="premium-image-scroll-overlay">
971	<?php
972	endif;
973	if ( 'yes' === $settings['link_switcher'] ) :
974	?>
975	<a <?php echo wp_kses_post( $this->get_render_attribute_string( 'link' ) ); ?>></a>
976	<?php
977	endif;
978	if ( 'yes' === $settings['overlay'] ) :
979	?>
980	</div>
981	<?php
982	endif;
983	echo wp_kses_post( $image_html );
984	?>
985	</div>
986	</div>
987	</div>
988	<?php
989	}
990
991	/**
992	* Render Image Scroll widget output in the editor.
993	*
994	* Written as a Backbone JavaScript template and used to generate the live preview.
995	*
996	* @since 1.0.0
997	* @access protected
998	*/
999	protected function content_template() {
1000	?>
1001	<#
1002	var linkType = settings.link_type,
1003	trigger = settings.trigger_type,
1004	direction = settings.direction_type,
1005	reverse = settings.reverse,
1006	url;
1007
1008	var scrollSettings = {};
1009
1010	scrollSettings.trigger = trigger;
1011	scrollSettings.direction = direction,
1012	scrollSettings.reverse = reverse;
1013
1014	if ( 'yes' == settings.link_switcher ) {
1015
1016	view.addRenderAttribute( 'link', 'class', 'premium-image-scroll-link' );
1017
1018	url = 'url' == linkType ? settings.link.url : settings.existing_page;
1019
1020	view.addRenderAttribute( 'link', 'href', url );
1021
1022	}
1023
1024	view.addRenderAttribute( 'container', 'class', 'premium-image-scroll-container' );
1025
1026	view.addRenderAttribute( 'container', 'data-settings', JSON.stringify(scrollSettings) );
1027
1028	view.addRenderAttribute( 'direction_type', 'class', 'premium-image-scroll-' + direction );
1029
1030	view.addRenderAttribute( 'image', 'src', settings.image.url );
1031
1032	if( settings.mask_image_scroll_switcher && 'yes' === settings.mask_image_scroll_switcher ) {
1033	view.addRenderAttribute( 'direction_type', 'class', 'premium-image-scroll-mask-media');
1034	}
1035
1036	var imageHtml = '';
1037	if ( settings.image.url ) {
1038	var image = {
1039	id: settings.image.id,
1040	url: settings.image.url,
1041	size: settings.thumbnail_size,
1042	dimension: settings.thumbnail_custom_dimension,
1043	model: view.getEditModel()
1044	};
1045
1046	var image_url = elementor.imagesManager.getImageUrl( image );
1047
1048	}
1049	if( 'yes' === settings.mask_image_scroll_switcher && settings.mask_shape_image_scroll.url !== '' && 'yes' === settings.image_scroll_shadow ) {
1050	view.addRenderAttribute( 'shadow', 'style', 'filter: drop-shadow('+settings.image_scroll_shadow_color +' '+ settings.image_scroll_shadow_h.size +'px '+ settings.image_scroll_shadow_v.size +'px '+ settings.image_scroll_shadow_blur.size+'px '+')' );
1051	}
1052
1053	#>
1054	<div class="premium-image-scroll-section" {{{ view.getRenderAttributeString('shadow') }}}>
1055	<div {{{ view.getRenderAttributeString('container') }}}>
1056	<# if ( 'yes' == settings.icon_switcher ) { #>
1057	<div class="premium-image-scroll-content">
1058	<# if( 'vertical' === direction ) { #>
1059	<svg class="premium-image-scroll-icon pa-vertical-mouse-scroll" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{display:none;}.st1{display:inline;}</style><g><path d="M67.7,42.6c0-9.6-7.8-17.3-17.3-17.3h-0.8c-9.6,0-17.3,7.8-17.3,17.3v14.7c0,9.6,7.8,17.3,17.3,17.3h0.8c9.6,0,17.3-7.8,17.3-17.3V42.6z M64.8,57.4c0,4-1.6,7.6-4.2,10.2c-2.6,2.6-6.2,4.2-10.2,4.2h-0.8c-4,0-7.6-1.6-10.2-4.2c-2.6-2.6-4.2-6.2-4.2-10.2V42.6c0-4,1.6-7.6,4.2-10.2c2.6-2.6,6.2-4.2,10.2-4.2h0.8c4,0,7.6,1.6,10.2,4.2c2.6,2.6,4.2,6.2,4.2,10.2V57.4z"/><path d="M50,39.9c-0.8,0-1.5,0.7-1.5,1.5v4.3c0,0.8,0.7,1.5,1.5,1.5c0.8,0,1.5-0.7,1.5-1.5v-4.3C51.4,40.6,50.8,39.9,50,39.9z"/><g><path d="M49.1,94.7c0.5,0.4,1.3,0.4,1.8,0l7.3-5.8c0.6-0.5,0.7-1.4,0.2-2c-0.5-0.6-1.4-0.7-2-0.2l0,0L50,91.7l-6.4-5.1c-0.6-0.5-1.5-0.4-2,0.2c-0.5,0.6-0.4,1.5,0.2,2L49.1,94.7z"/><path d="M56.4,13.4c0.6,0.5,1.5,0.4,2-0.2s0.4-1.5-0.2-2l-7.3-5.8c-0.5-0.4-1.3-0.4-1.8,0l-7.3,5.8c-0.6,0.5-0.7,1.4-0.2,2s1.4,0.7,2,0.2l0,0L50,8.3L56.4,13.4z"/></g><g class="st0"><path class="st1" d="M5.3,49.1c-0.4,0.5-0.4,1.3,0,1.8l5.8,7.3c0.5,0.6,1.4,0.7,2,0.2c0.6-0.5,0.7-1.4,0.2-2l0,0L8.3,50l5.1-6.4c0.5-0.6,0.4-1.5-0.2-2c-0.6-0.5-1.5-0.4-2,0.2L5.3,49.1z"/><path class="st1" d="M86.6,56.4c-0.5,0.6-0.4,1.5,0.2,2s1.5,0.4,2-0.2l5.8-7.3c0.4-0.5,0.4-1.3,0-1.8l-5.8-7.3c-0.5-0.6-1.4-0.7-2-0.2s-0.7,1.4-0.2,2l0,0l5.1,6.4L86.6,56.4z"/></g></g></svg>
1060	<# } else { #>
1061	<svg class="premium-image-scroll-icon pa-horizontal-mouse-scroll" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">.st0{display:none;}.st1{display:inline;}</style><g><path d="M67.7,42.6c0-9.6-7.8-17.3-17.3-17.3h-0.8c-9.6,0-17.3,7.8-17.3,17.3v14.7c0,9.6,7.8,17.3,17.3,17.3h0.8c9.6,0,17.3-7.8,17.3-17.3V42.6z M64.8,57.4c0,4-1.6,7.6-4.2,10.2c-2.6,2.6-6.2,4.2-10.2,4.2h-0.8c-4,0-7.6-1.6-10.2-4.2c-2.6-2.6-4.2-6.2-4.2-10.2V42.6c0-4,1.6-7.6,4.2-10.2c2.6-2.6,6.2-4.2,10.2-4.2h0.8c4,0,7.6,1.6,10.2,4.2c2.6,2.6,4.2,6.2,4.2,10.2V57.4z"/><path d="M50,39.9c-0.8,0-1.5,0.7-1.5,1.5v4.3c0,0.8,0.7,1.5,1.5,1.5c0.8,0,1.5-0.7,1.5-1.5v-4.3C51.4,40.6,50.8,39.9,50,39.9z"/><g class="st0"><path class="st1" d="M49.1,94.7c0.5,0.4,1.3,0.4,1.8,0l7.3-5.8c0.6-0.5,0.7-1.4,0.2-2c-0.5-0.6-1.4-0.7-2-0.2l0,0L50,91.7l-6.4-5.1c-0.6-0.5-1.5-0.4-2,0.2c-0.5,0.6-0.4,1.5,0.2,2L49.1,94.7z"/><path class="st1" d="M56.4,13.4c0.6,0.5,1.5,0.4,2-0.2s0.4-1.5-0.2-2l-7.3-5.8c-0.5-0.4-1.3-0.4-1.8,0l-7.3,5.8c-0.6,0.5-0.7,1.4-0.2,2s1.4,0.7,2,0.2l0,0L50,8.3L56.4,13.4z"/></g><g><path d="M5.3,49.1c-0.4,0.5-0.4,1.3,0,1.8l5.8,7.3c0.5,0.6,1.4,0.7,2,0.2c0.6-0.5,0.7-1.4,0.2-2l0,0L8.3,50l5.1-6.4c0.5-0.6,0.4-1.5-0.2-2c-0.6-0.5-1.5-0.4-2,0.2L5.3,49.1z"/><path d="M86.6,56.4c-0.5,0.6-0.4,1.5,0.2,2s1.5,0.4,2-0.2l5.8-7.3c0.4-0.5,0.4-1.3,0-1.8l-5.8-7.3c-0.5-0.6-1.4-0.7-2-0.2s-0.7,1.4-0.2,2l0,0l5.1,6.4L86.6,56.4z"/></g></g></svg>
1062	<# } #>
1063	</div>
1064	<# } #>
1065	<div {{{ view.getRenderAttributeString('direction_type') }}}>
1066	<# if( 'yes' == settings.overlay ) { #>
1067	<div class="premium-image-scroll-overlay">
1068	<# }
1069	if ( 'yes' == settings.link_switcher && '' != url ) { #>
1070	<a {{{ view.getRenderAttributeString('link') }}}></a>
1071	<# }
1072	if( 'yes' == settings.overlay ) { #>
1073	</div>
1074	<# } #>
1075
1076	<img src="{{ image_url }}"/>
1077
1078	</div>
1079	</div>
1080	</div>
1081	<?php
1082	}
1083	}
1084