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

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

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

premium-image-scroll.php

1077 lines

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