king-addons / includes / widgets / Vertical_Scrollable_Image / Vertical_Scrollable_Image.php

Vertical_Scrollable_Image.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.36, at includes/widgets/Vertical_Scrollable_Image/Vertical_Scrollable_Image.php

173 lines 6.3 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode */
2
3	/** @noinspection PhpUnused */
4
5	namespace King_Addons;
6
7	use Elementor\Controls_Manager;
8	use Elementor\Group_Control_Box_Shadow;
9	use Elementor\Group_Control_Image_Size;
10	use Elementor\Utils;
11	use Elementor\Widget_Base;
12
13	/** @noinspection SpellCheckingInspection */
14	if (!defined('ABSPATH')) {
15	exit; // Exit if accessed directly.
16	}
17
18
19
20	class Vertical_Scrollable_Image extends Widget_Base
21	{
22
23
24	public function get_name(): string
25	{
26	return 'king-addons-vertical-scrollable-image';
27	}
28
29	public function get_title(): string
30	{
31	return esc_html__('Vertical Scrollable Image', 'king-addons');
32	}
33
34	public function get_icon(): string
35	{
36	/** @noinspection SpellCheckingInspection */
37	return 'king-addons-icon king-addons-vertical-scrollable-image';
38	}
39
40	public function get_style_depends(): array
41	{
42	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-vertical-scrollable-image-style'];
43	}
44
45	public function get_categories(): array
46	{
47	return ['king-addons'];
48	}
49
50	public function get_keywords(): array
51	{
52	return ['image', 'images', 'scroll', 'scrolling', 'scroller', 'scrollable', 'animation', 'effect', 'animated',
53	'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture', 'king', 'addons', 'mouseover',
54	'kingaddons', 'king-addons'];
55	}
56
57	public function get_custom_help_url()
58	{
59	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
60	}
61
62	protected function register_controls(): void
63	{
64	/** START TAB: CONTENT ===================== */
65	/** SECTION: General ===================== */
66	$this->start_controls_section(
67	'kng_v_scroll_image_section_general',
68	[
69	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
70	]
71	);
72
73	$this->add_control(
74	'kng_v_scroll_image_image',
75	[
76	'label' => esc_html__('Image', 'king-addons'),
77	'type' => Controls_Manager::MEDIA,
78	'default' => [
79	'url' => Utils::get_placeholder_image_src(),
80	],
81	'ai' => [
82	'active' => false,
83	],
84	]
85	);
86
87	$this->add_group_control(
88	Group_Control_Image_Size::get_type(),
89	[
90	'name' => 'kng_v_scroll_image_image_size',
91	'default' => 'full',
92	]
93	);
94
95	$this->add_responsive_control(
96	'kng_v_scroll_image_box_height',
97	[
98	'label' => esc_html__('Box Height (px)', 'king-addons'),
99	'type' => Controls_Manager::NUMBER,
100	'description' => esc_html__('Image size should be more than the box width or height, otherwise scrolling will not work. You can also limit the box width in the container, section or column width settings accordingly.', 'king-addons'),
101	'min' => 50,
102	'step' => 1,
103	'default' => 350,
104	'selectors' => [
105	'{{WRAPPER}} .king-addons-vertical-scrollable-image' => 'height: {{SIZE}}px;',
106	'{{WRAPPER}} .king-addons-vertical-scrollable-image:active img' => 'transform: translateY(calc(-100% + {{SIZE}}px));',
107	'{{WRAPPER}} .king-addons-vertical-scrollable-image:hover img' => 'transform: translateY(calc(-100% + {{SIZE}}px));',
108	],
109	'separator' => 'before',
110	]
111	);
112
113	$this->add_responsive_control(
114	'kng_v_scroll_image_scrolling_duration',
115	[
116	'label' => esc_html__('Scrolling Duration (milliseconds)', 'king-addons'),
117	'description' => esc_html__('Greater is slower', 'king-addons'),
118	'type' => Controls_Manager::NUMBER,
119	'min' => 100,
120	'step' => 100,
121	'default' => 1000,
122	'selectors' => [
123	'{{WRAPPER}} .king-addons-vertical-scrollable-image.king-addons-vertical-scrollable-image-hover img' => 'transition: transform {{SIZE}}ms linear;',
124	],
125	'separator' => 'before',
126	]
127	);
128
129	$this->add_responsive_control(
130	'kng_v_scroll_image_border_radius',
131	[
132	'label' => esc_html__('Border Radius', 'king-addons'),
133	'type' => Controls_Manager::DIMENSIONS,
134	'size_units' => ['px', '%'],
135	'selectors' => [
136	'{{WRAPPER}}, {{WRAPPER}} .king-addons-vertical-scrollable-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
137	],
138	]
139	);
140
141	$this->add_group_control(
142	Group_Control_Box_Shadow::get_type(),
143	[
144	'name' => 'kng_v_scroll_image_box_shadow',
145	'label' => esc_html__('Box Shadow', 'king-addons'),
146	'selector' => '{{WRAPPER}} .king-addons-vertical-scrollable-image',
147	]
148	);
149
150	$this->end_controls_section();
151	/** END SECTION: General ===================== */
152	/** END TAB: CONTENT ===================== */
153	}
154
155	protected function render(): void
156	{
157	$settings = $this->get_settings_for_display();
158	echo '<div class="king-addons-vertical-scrollable-image king-addons-vertical-scrollable-image-hover">';
159
160	$image_html = Group_Control_Image_Size::get_attachment_image_html($settings, 'kng_v_scroll_image_image_size', 'kng_v_scroll_image_image');
161
162	// Define allowed tags and attributes
163	$allowed_tags = wp_kses_allowed_html('post');
164	$allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag
165	$allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
166	$allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
167	$allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
168
169	// Sanitize the image HTML using the extended set of allowed tags and attributes
170	echo wp_kses($image_html, $allowed_tags);
171	echo '</div>';
172	}
173	}