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

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

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

premium-image-scroll.php

909 lines

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