← All changes | includes/widgets/Vertical_Scrollable_Image/Vertical_Scrollable_Image.php +173 -0 51.1.2 → 51.1.86 View file →

		@@ -1,0 +1,173 @@
	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:[email protected]?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	+}