start_controls_section(
'kng_image_comparison_section_general',
[
'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
]
);
$this->add_control(
'kng_image_comparison_info',
[
'type' => Controls_Manager::ALERT,
'alert_type' => 'info',
'content' => esc_html__('The comparison box uses the height from the Image After by default. It is always good practice to use images with the same width and height for comparison.', 'king-addons'),
]
);
$this->add_control(
'kng_image_comparison_image_before',
[
'label' => '' . esc_html__('Image Before', 'king-addons') . '',
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'ai' => [
'active' => false,
],
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'kng_image_comparison_image_before_size',
'default' => 'full',
]
);
$this->add_responsive_control(
'kng_image_comparison_image_before_fit',
[
'label' => esc_html__('Image-Fit', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'none' => esc_html__('None', 'king-addons'),
'cover' => esc_html__('Cover', 'king-addons'),
'contain' => esc_html__('Contain', 'king-addons'),
'fill' => esc_html__('Fill', 'king-addons'),
],
'default' => 'cover',
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison-container .king-addons-image-comparison-image-before img' => 'object-fit: {{VALUE}};',
],
'separator' => 'after',
]
);
$this->add_control(
'kng_image_comparison_image_after',
[
'label' => '' . esc_html__('Image After', 'king-addons') . '',
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'ai' => [
'active' => false,
],
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'kng_image_comparison_image_after_size',
'default' => 'full',
]
);
$this->add_responsive_control(
'kng_image_comparison_image_after_fit',
[
'label' => esc_html__('Image-Fit', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'none' => esc_html__('None', 'king-addons'),
'cover' => esc_html__('Cover', 'king-addons'),
'contain' => esc_html__('Contain', 'king-addons'),
'fill' => esc_html__('Fill', 'king-addons'),
],
'default' => 'none',
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison-container .king-addons-image-comparison-image-after img' => 'object-fit: {{VALUE}};',
],
'separator' => 'after',
]
);
$this->add_responsive_control(
'kng_image_comparison_box_max_height',
[
'label' => esc_html__('Box Maximum Height (px)', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'min' => 50,
'step' => 1,
'default' => 600,
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison' => 'max-height: {{SIZE}}px;'
],
]
);
$this->add_control(
'kng_image_comparison_CSS_filters_head',
[
'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image overlay filters', 'king-addons'),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Css_Filter::get_type(),
[
'label' => esc_html__('CSS Filter for Image Before', 'king-addons'),
'name' => 'kng_image_comparison_image_before_css_filters',
'selector' => '{{WRAPPER}} .king-addons-image-comparison-image-before',
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Css_Filter::get_type(),
[
'label' => esc_html__('CSS Filter for Image After', 'king-addons'),
'name' => 'kng_image_comparison_image_after_css_filters',
'selector' => '{{WRAPPER}} .king-addons-image-comparison-image-after',
]
);
$this->add_control(
'kng_image_comparison_slider_line_head',
[
'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Slider', 'king-addons'),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'kng_image_comparison_slider_line_color',
[
'label' => esc_html__('Slider Line Color', 'king-addons'),
'type' => Controls_Manager::COLOR,
'default' => '#FFFFFF',
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison-slider-line' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'kng_image_comparison_slider_btn_color',
[
'label' => esc_html__('Slider Button Color', 'king-addons'),
'type' => Controls_Manager::COLOR,
'default' => '#FFFFFF',
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'background-color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'kng_image_comparison_box_max_width',
[
'label' => esc_html__('Slider Initial Position', 'king-addons'),
'description' => esc_html__('If there were previous moves of slider, then check the live site for updates on the slider initial position.', 'king-addons'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['%'],
'range' => [
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => '%',
'size' => 50,
],
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison' => '--position: {{SIZE}}{{UNIT}};'
],
]
);
$this->add_control(
'kng_image_comparison_icon_head',
[
'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Icon', 'king-addons'),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'kng_image_comparison_btn_icon',
[
'label' => esc_html__('Select Icon', 'king-addons'),
'type' => Controls_Manager::ICONS,
'skin' => 'inline',
'label_block' => false,
'default' => [
'value' => 'fas fa-arrows-alt-h',
'library' => 'fa-solid',
],
]
);
$this->add_control(
'kng_image_comparison_btn_color',
[
'label' => esc_html__('Icon Color (optional)', 'king-addons'),
'type' => Controls_Manager::COLOR,
'default' => '#000000',
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'color: {{VALUE}};',
'{{WRAPPER}} .king-addons-image-comparison-slider-button svg' => 'fill: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'kng_image_comparison_btn_size',
[
'label' => esc_html__('Icon Size (px)', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'min' => 1,
'step' => 1,
'default' => 22,
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'font-size: {{VALUE}}px;',
'{{WRAPPER}} .king-addons-image-comparison-slider-button svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
],
]
);
$this->add_control(
'kng_image_comparison_icon_box_head',
[
'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Icon Box', 'king-addons'),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'kng_image_comparison_btn_border',
'label' => esc_html__('Border', 'king-addons'),
'selector' => '{{WRAPPER}} .king-addons-image-comparison-slider-button',
'fields_options' => [
'border' => [
'default' => 'none',
],
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'kng_image_comparison_btn_shadow',
'label' => esc_html__('Shadow', 'king-addons'),
'selector' => '{{WRAPPER}} .king-addons-image-comparison-slider-button',
]
);
$this->add_responsive_control(
'kng_image_comparison_btn_padding',
[
'label' => esc_html__('Padding', 'king-addons'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['em', 'px'],
'default' => [
'top' => 15,
'right' => 15,
'bottom' => 15,
'left' => 15,
'unit' => 'px',
'isLinked' => true,
],
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
]
]
);
$this->add_responsive_control(
'kng_image_comparison_btn_border_radius',
[
'label' => esc_html__('Border Radius', 'king-addons'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%', 'vw', 'vh'],
'default' => [
'top' => 100,
'right' => 100,
'bottom' => 100,
'left' => 100,
'unit' => 'vw',
'isLinked' => true,
],
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
]
]
);
$this->add_control(
'kng_image_comparison_box_shadow_head',
[
'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Box', 'king-addons'),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'kng_image_comparison_box_border',
'label' => esc_html__('Border', 'king-addons'),
'selector' => '{{WRAPPER}} .king-addons-image-comparison',
'fields_options' => [
'border' => [
'default' => 'none',
],
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'kng_image_comparison_box_shadow',
'label' => esc_html__('Shadow', 'king-addons'),
'selector' => '{{WRAPPER}} .king-addons-image-comparison',
]
);
$this->add_responsive_control(
'kng_image_comparison_border_radius',
[
'label' => esc_html__('Border Radius', 'king-addons'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} .king-addons-image-comparison' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
]
]
);
$this->end_controls_section();
/** END SECTION: General ===================== */
/** END TAB: CONTENT ===================== */
}
protected function render(): void
{
$settings = $this->get_settings_for_display();
$element_ID = sanitize_key($this->get_id());
// Define allowed tags and attributes
$allowed_tags = wp_kses_allowed_html('post');
$allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag
$allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
$allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
$allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
?>
{
const container = document.querySelector(' . wp_json_encode($container_selector) . ');
const slider = document.querySelector(' . wp_json_encode($slider_selector) . ');
if (!container || !slider) {
return;
}
slider.addEventListener("input", (event) => {
container.style.setProperty("--position", `${event.target.value}%`);
});
})();';
wp_print_inline_script_tag($inline_js);
}
}