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

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

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

premium-image-scroll.php

1094 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	Helper_Functions::register_element_feedback_controls( $this );
594
595	$this->end_controls_section();
596
597	Helper_Functions::register_papro_promotion_controls( $this, 'img-scroll' );
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' => 'fill: {{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', 'premium-addons-for-elementor' ),
713	'type' => Controls_Manager::SELECT,
714	'options' => array(
715	'' => __( 'Normal', 'premium-addons-for-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>' . __( '. See ', 'premium-addons-for-elementor' ) . '<a href="https://www.youtube.com/watch?v=S0BJazLHV-M" target="_blank">tutorial</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	'ai' => array(
797	'active' => false,
798	),
799	)
800	);
801
802	$this->add_group_control(
803	Group_Control_Box_Shadow::get_type(),
804	array(
805	'name' => 'container_box_shadow',
806	'selector' => '{{WRAPPER}} .premium-image-scroll-section',
807	)
808	);
809
810	$this->end_controls_tab();
811
812	$this->start_controls_tab(
813	'container_style_hover',
814	array(
815	'label' => __( 'Hover', 'premium-addons-for-elementor' ),
816	)
817	);
818
819	$this->add_group_control(
820	Group_Control_Border::get_type(),
821	array(
822	'name' => 'container_border_hover',
823	'selector' => '{{WRAPPER}} .premium-image-scroll-section:hover',
824	)
825	);
826
827	$this->add_control(
828	'container_border_radius_hover',
829	array(
830	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
831	'type' => Controls_Manager::SLIDER,
832	'size_units' => array( 'px', '%', 'em' ),
833	'selectors' => array(
834	'{{WRAPPER}} .premium-image-scroll-section:hover, {{WRAPPER}} .premium-container-scroll:hover' => 'border-radius: {{SIZE}}{{UNIT}}',
835	),
836	'condition' => array(
837	'container_hover_adv_radius!' => 'yes',
838	),
839	)
840	);
841
842	$this->add_control(
843	'container_hover_adv_radius',
844	array(
845	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
846	'type' => Controls_Manager::SWITCHER,
847	'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>',
848	)
849	);
850
851	$this->add_control(
852	'container_hover_adv_radius_value',
853	array(
854	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
855	'type' => Controls_Manager::TEXT,
856	'dynamic' => array( 'active' => true ),
857	'selectors' => array(
858	'{{WRAPPER}} .premium-image-scroll-section:hover, {{WRAPPER}} .premium-container-scroll:hover' => 'border-radius: {{VALUE}};',
859	),
860	'condition' => array(
861	'container_hover_adv_radius' => 'yes',
862	),
863	'ai' => array(
864	'active' => false,
865	),
866	)
867	);
868
869	$this->add_group_control(
870	Group_Control_Box_Shadow::get_type(),
871	array(
872	'name' => 'container_box_shadow_hover',
873	'selector' => '{{WRAPPER}} .premium-image-scroll-section:hover',
874	)
875	);
876
877	$this->end_controls_tab();
878
879	$this->end_controls_tabs();
880
881	$this->end_controls_section();
882	}
883
884	/**
885	* Get Icon SVG
886	*
887	* @access protected
888	* @since 4.10.79
889	*
890	* @param string $dir direction.
891	*/
892	protected function render_icon_svg( $dir ) {
893
894	if ( 'vertical' === $dir ) {
895
896	$svg = '<svg class="premium-image-scroll-icon pa-vertical-mouse-scroll" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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>';
897
898	} else {
899
900	$svg = '<svg class="premium-image-scroll-icon pa-horizontal-mouse-scroll" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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>';
901
902	}
903
904	echo $svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
905	}
906
907	/**
908	* Render Image Scroll widget output on the frontend.
909	*
910	* Written in PHP and used to generate the final HTML.
911	*
912	* @since 1.0.0
913	* @access protected
914	*/
915	protected function render() {
916
917	$settings = $this->get_settings_for_display();
918
919	$link_type = $settings['link_type'];
920
921	if ( 'yes' === $settings['link_switcher'] ) {
922
923	$link_url = 'url' === $link_type ? $settings['link'] : get_permalink( $settings['existing_page'] );
924
925	$this->add_render_attribute( 'link', 'class', 'premium-image-scroll-link' );
926
927	if ( 'url' === $link_type ) {
928	$this->add_link_attributes( 'link', $link_url );
929	} else {
930	$this->add_render_attribute( 'link', 'href', $link_url );
931	}
932	}
933
934	$image_scroll = array(
935	'trigger' => $settings['trigger_type'],
936	'direction' => $settings['direction_type'],
937	'reverse' => $settings['reverse'],
938	);
939
940	$this->add_render_attribute(
941	'container',
942	array(
943	'class' => 'premium-image-scroll-container',
944	'data-settings' => wp_json_encode( $image_scroll ),
945	)
946	);
947
948	$this->add_render_attribute( 'direction_type', 'class', 'premium-image-scroll-' . $settings['direction_type'] );
949
950	if ( ! empty( $settings['mask_image_scroll_switcher'] ) && 'yes' === $settings['mask_image_scroll_switcher'] ) {
951	$this->add_render_attribute( 'direction_type', 'class', 'premium-image-scroll-mask-media' );
952	}
953
954	$image_html = '';
955	if ( ! empty( $settings['image']['url'] ) ) {
956
957	$image_id = apply_filters( 'wpml_object_id', $settings['image']['id'], 'attachment', true );
958
959	$settings['image']['id'] = $image_id;
960
961	$image_html = Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' );
962
963	}
964	if ( 'yes' === $settings['mask_image_scroll_switcher'] && '' !== $settings['mask_shape_image_scroll']['url'] && 'yes' === $settings['image_scroll_shadow'] ) {
965	$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 )' );
966	}
967
968	?>
969	<div class="premium-image-scroll-section" <?php $this->print_render_attribute_string( 'shadow' ); ?>>
970	<div <?php $this->print_render_attribute_string( 'container' ); ?>>
971	<?php if ( 'yes' === $settings['icon_switcher'] ) : ?>
972	<div class="premium-image-scroll-content">
973	<?php $this->render_icon_svg( $settings['direction_type'] ); ?>
974	</div>
975	<?php endif; ?>
976	<div <?php $this->print_render_attribute_string( 'direction_type' ); ?>>
977	<?php if ( 'yes' === $settings['overlay'] ) : ?>
978	<div class="premium-image-scroll-overlay">
979	<?php
980	endif;
981	if ( 'yes' === $settings['link_switcher'] ) :
982	?>
983	<a <?php $this->print_render_attribute_string( 'link' ); ?>></a>
984	<?php
985	endif;
986	if ( 'yes' === $settings['overlay'] ) :
987	?>
988	</div>
989	<?php
990	endif;
991	echo wp_kses_post( $image_html );
992	?>
993	</div>
994	</div>
995	</div>
996	<?php
997	}
998
999	/**
1000	* Render Image Scroll widget output in the editor.
1001	*
1002	* Written as a Backbone JavaScript template and used to generate the live preview.
1003	*
1004	* @since 1.0.0
1005	* @access protected
1006	*/
1007	protected function content_template() {
1008	?>
1009	<#
1010	var linkType = settings.link_type,
1011	trigger = settings.trigger_type,
1012	direction = settings.direction_type,
1013	reverse = settings.reverse,
1014	url;
1015
1016	var scrollSettings = {};
1017
1018	scrollSettings.trigger = trigger;
1019	scrollSettings.direction = direction;
1020	scrollSettings.reverse = reverse;
1021
1022	if ( 'yes' == settings.link_switcher ) {
1023
1024	view.addRenderAttribute( 'link', 'class', 'premium-image-scroll-link' );
1025
1026	url = 'url' == linkType ? settings.link.url : settings.existing_page;
1027
1028	view.addRenderAttribute( 'link', 'href', url );
1029
1030	}
1031
1032	view.addRenderAttribute( 'container', 'class', 'premium-image-scroll-container' );
1033
1034	view.addRenderAttribute( 'container', 'data-settings', JSON.stringify(scrollSettings) );
1035
1036	view.addRenderAttribute( 'direction_type', 'class', 'premium-image-scroll-' + direction );
1037
1038	view.addRenderAttribute( 'image', 'src', settings.image.url );
1039
1040	if( settings.mask_image_scroll_switcher && 'yes' === settings.mask_image_scroll_switcher ) {
1041	view.addRenderAttribute( 'direction_type', 'class', 'premium-image-scroll-mask-media');
1042	}
1043
1044	var imageHtml = '',
1045	image_url = '';
1046
1047	if ( settings.image.url ) {
1048	var image = {
1049	id: settings.image.id,
1050	url: settings.image.url,
1051	size: settings.thumbnail_size,
1052	dimension: settings.thumbnail_custom_dimension,
1053	model: view.getEditModel()
1054	};
1055
1056	image_url = elementor.imagesManager.getImageUrl( image );
1057
1058	}
1059	if( 'yes' === settings.mask_image_scroll_switcher && settings.mask_shape_image_scroll.url !== '' && 'yes' === settings.image_scroll_shadow ) {
1060	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 '+')' );
1061	}
1062
1063	#>
1064	<div class="premium-image-scroll-section" {{{ view.getRenderAttributeString('shadow') }}}>
1065	<div {{{ view.getRenderAttributeString('container') }}}>
1066	<# if ( 'yes' == settings.icon_switcher ) { #>
1067	<div class="premium-image-scroll-content">
1068	<# if( 'vertical' === direction ) { #>
1069	<svg class="premium-image-scroll-icon pa-vertical-mouse-scroll" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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>
1070	<# } else { #>
1071	<svg class="premium-image-scroll-icon pa-horizontal-mouse-scroll" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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>
1072	<# } #>
1073	</div>
1074	<# } #>
1075	<div {{{ view.getRenderAttributeString('direction_type') }}}>
1076	<# if( 'yes' == settings.overlay ) { #>
1077	<div class="premium-image-scroll-overlay">
1078	<# }
1079	if ( 'yes' == settings.link_switcher && '' != url ) { #>
1080	<a {{{ view.getRenderAttributeString('link') }}}></a>
1081	<# }
1082	if( 'yes' == settings.overlay ) { #>
1083	</div>
1084	<# } #>
1085
1086	<img src="{{ image_url }}"/>
1087
1088	</div>
1089	</div>
1090	</div>
1091	<?php
1092	}
1093	}
1094