ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / renovation-antibes / wp-content / plugins / elementor-extras / includes / widgets

<?php
namespace ElementorExtras;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Control_Media;
use Elementor\Utils;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Scheme_Typography;
use Elementor\Scheme_Color;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Elementor Widget_ImageComparison
 *
 * @since 0.1.0
 */
class Widget_Image_Comparison extends Widget_Base {

public function get_name() {
		return 'image-comparison';
	}

public function get_title() {
		return __( 'Image Comparison', 'elementor-extras' );
	}

public function get_icon() {
		return 'nicon nicon-image-comparison';
	}

public function get_categories() {
		return [ 'elementor-extras' ];
	}

/**
	 * A list of scripts that the widgets is depended in
	 * @since 0.1.0
	 **/
	public function get_script_depends() {
		return [
			'image-comparison',
			'jquery-mobile'
		];
	}

protected function _register_controls() {
		$this->start_controls_section(
			'section_buttons',
			[
				'label' => __( 'Images & Labels', 'elementor-extras' ),
			]
		);

$this->add_control(
				'original_image',
				[
					'label' 	=> __( 'Choose Original Image', 'elementor-extras' ),
					'type' 		=> Controls_Manager::MEDIA,
					'default' 	=> [
						'url' 	=> Utils::get_placeholder_image_src(),
					],
				]
			);

$this->add_control(
				'modified_image',
				[
					'label' 	=> __( 'Choose Modified Image', 'elementor-extras' ),
					'type' 		=> Controls_Manager::MEDIA,
					'default' 	=> [
						'url' 	=> Utils::get_placeholder_image_src(),
					],
					'condition'		=> [
						'original_image[url]!' => '',
					]
				]
			);

$this->add_control(
				'original_label',
				[
					'label'			=> __( 'Original Label', 'elementor-extras' ),
					'type' 			=> Controls_Manager::TEXT,
					'default'		=> __( 'Original', 'elementor-extras' ),
					'placeholder'	=> __( 'Original', 'elementor-extras' ),
					'condition'		=> [
						'original_image[url]!' => '',
					]
				]
			);

$this->add_control(
				'modified_label',
				[
					'label'			=> __( 'Modified Label', 'elementor-extras' ),
					'type' 			=> Controls_Manager::TEXT,
					'default'		=> __( 'Modified', 'elementor-extras' ),
					'placeholder'	=> __( 'Modified', 'elementor-extras' ),
					'condition'		=> [
						'modified_image[url]!' => '',
					]
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_style',
			[
				'label' => __( 'Widget', 'elementor-extras' ),
				'tab' 		=> Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'size',
				[
					'label' => __( 'Size (%)', 'elementor-extras' ),
					'type' => Controls_Manager::SLIDER,
					'default' => [
						'size' => 100,
						'unit' => '%',
					],
					'size_units' => [ '%' ],
					'range' => [
						'%' => [
							'min' => 1,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-image-comparison' => 'max-width: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control(
				'align',
				[
					'label' 		=> __( 'Alignment', 'elementor-extras' ),
					'type' 			=> Controls_Manager::CHOOSE,
					'default'		=> 'center',
					'options' 		=> [
						'left' 		=> [
							'title' => __( 'Left', 'elementor-extras' ),
							'icon' 	=> 'eicon-h-align-left',
						],
						'center' 	=> [
							'title' => __( 'Center', 'elementor-extras' ),
							'icon' 	=> 'eicon-h-align-center',
						],
						'right' 	=> [
							'title' => __( 'Right', 'elementor-extras' ),
							'icon' 	=> 'eicon-h-align-right',
						],
					],
					'selectors' 	=> [
						'{{WRAPPER}}' => 'text-align: {{VALUE}};',
					],
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_labels_style',
			[
				'label' => __( 'Labels', 'elementor-extras' ),
				'tab' 		=> Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'labels_spacing',
				[
					'label' => __( 'Distance (em)', 'elementor-extras' ),
					'type' => Controls_Manager::SLIDER,
					'default' => [
						'size' => 0,
					],
					'range' => [
						'px' => [
							'min' 	=> 0,
							'max' 	=> 10,
							'step'	=> 0.1
						],
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-image-comparison-label' => 'margin: 0 {{SIZE}}em {{SIZE}}em 0;',
						'{{WRAPPER}} .elementor-image-comparison-image .elementor-image-comparison-label' => 'margin: 0 0 {{SIZE}}em {{SIZE}}em',

'{{WRAPPER}}.elementor-image-comparison-middle .elementor-image-comparison-label' => 'margin: 0 {{SIZE}}em 0 0;',
						'{{WRAPPER}}.elementor-image-comparison-middle .elementor-image-comparison-image .elementor-image-comparison-label' => 'margin: 0 0 0 {{SIZE}}em',

'{{WRAPPER}}.elementor-image-comparison-top .elementor-image-comparison-label' => 'margin: {{SIZE}}em {{SIZE}}em 0 0;',
						'{{WRAPPER}}.elementor-image-comparison-top .elementor-image-comparison-image .elementor-image-comparison-label' => 'margin: {{SIZE}}em 0 0 {{SIZE}}em',
					],
				]
			);

$this->add_control(
				'labels_padding',
				[
					'label' 		=> __( 'Padding', 'elementor-extras' ),
					'type' 			=> Controls_Manager::DIMENSIONS,
					'size_units' 	=> [ 'px', 'em', '%' ],
					'selectors' 	=> [
						'{{WRAPPER}} .elementor-image-comparison-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
					'separator' => 'before',
				]
			);

$this->add_responsive_control(
				'labels_vertical_align',
				[
					'label' 		=> __( 'Vertical Alignment', 'elementor-extras' ),
					'type' 			=> Controls_Manager::CHOOSE,
					'default' 		=> '',
					'options' 		=> [
						'top'    		=> [
							'title' 	=> __( 'Top', 'elementor-extras' ),
							'icon' 		=> 'eicon-v-align-top',
						],
						'middle' 		=> [
							'title' 	=> __( 'Middle', 'elementor-extras' ),
							'icon' 		=> 'eicon-v-align-middle',
						],
						'bottom' 		=> [
							'title' 	=> __( 'Bottom', 'elementor-extras' ),
							'icon' 		=> 'eicon-v-align-bottom',
						],
					],
					'prefix_class'		=> 'elementor-image-comparison-'
				]
			);

$this->add_group_control(
				Group_Control_Border::get_type(),
				[
					'name' 		=> 'labels_border',
					'label' 	=> __( 'Border', 'elementor-extras' ),
					'selector' 	=> '{{WRAPPER}} .elementor-image-comparison .elementor-image-comparison-label',
				]
			);

$this->add_control(
				'labels_border_radius',
				[
					'label' 		=> __( 'Border Radius', 'elementor-extras' ),
					'type' 			=> Controls_Manager::DIMENSIONS,
					'size_units' 	=> [ 'px', '%' ],
					'selectors' 	=> [
						'{{WRAPPER}} .elementor-image-comparison .elementor-image-comparison-label' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_group_control(
				Group_Control_Text_Shadow::get_type(),
				[
					'name' 		=> 'labels_shadow',
					'selector' 	=> '{{WRAPPER}} .elementor-image-comparison .elementor-image-comparison-label',
				]
			);

$this->add_group_control(
				Group_Control_Box_Shadow::get_type(),
				[
					'name' 		=> 'labels_box_shadow',
					'selector' => '{{WRAPPER}} .elementor-image-comparison .elementor-image-comparison-label',
					'separator'	=> '',
				]
			);

$this->add_group_control(
				Group_Control_Typography::get_type(),
				[
					'name' 		=> 'labels_typography',
					'selector' 	=> '{{WRAPPER}} .elementor-image-comparison .elementor-image-comparison-label',
					'scheme' 	=> Scheme_Typography::TYPOGRAPHY_3,
				]
			);

$this->start_controls_tabs( 'tabs_label_style' );

$this->start_controls_tab( 'tab_label_original', [ 'label' => __( 'Original', 'elementor-extras' ) ] );

$this->add_control(
					'label_original_color',
					[
						'label' 	=> __( 'Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .image-comparison-label-original' => 'color: {{VALUE}};',
						],
						'default'	=> '#FFFFFF',
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_3,
						],
					]
				);

$this->add_control(
					'label_original_background',
					[
						'label' 	=> __( 'Background color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .image-comparison-label-original' => 'background-color: {{VALUE}};',
						],
						'default'	=> '',
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_1,
						],
					]
				);

$this->end_controls_tab();

$this->start_controls_tab( 'tab_label_modified', [ 'label' => __( 'Modified', 'elementor-extras' ) ] );

$this->add_control(
					'label_modified_color',
					[
						'label' 	=> __( 'Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .image-comparison-label-modified' => 'color: {{VALUE}};',
						],
						'default'	=> '#FFFFFF',
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_3,
						],
					]
				);

$this->add_control(
					'label_modified_background',
					[
						'label' 	=> __( 'Background color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .image-comparison-label-modified' => 'background-color: {{VALUE}};',
						],
						'default'	=> '',
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_1,
						],
					]
				);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();

$this->start_controls_section(
			'section_separator_style',
			[
				'label' => __( 'Separator', 'elementor-extras' ),
				'tab' 		=> Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'separator_size',
				[
					'label' => __( 'Size (%)', 'elementor-extras' ),
					'type' => Controls_Manager::SLIDER,
					'default' => [
						'size' => 100,
						'unit' => '%',
					],
					'size_units' => [ '%' ],
					'range' => [
						'%' => [
							'min' => 1,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-image-comparison-separator' => 'height: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_group_control(
				Group_Control_Background::get_type(),
				[
					'name' 		=> 'separator_background_color',
					'types' 	=> [ 'classic', 'gradient' ],
					'selector' 	=> '{{WRAPPER}} .elementor-image-comparison-separator',
					'default'	=> 'classic',
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_handle_style',
			[
				'label' => __( 'Handle', 'elementor-extras' ),
				'tab' 		=> Controls_Manager::TAB_STYLE,
			]
		);

$this->start_controls_tabs( 'tabs_handle_style' );

$this->start_controls_tab(
				'tab_handle_normal',
				[
					'label' => __( 'Normal', 'elementor-extras' ),
				]
			);

$this->add_control(
					'handle_background_color',
					[
						'label' 	=> __( 'Background Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .elementor-image-comparison-handle' => 'background-color: {{VALUE}};',
						],
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_1,
						],
					]
				);

$this->add_control(
					'handle_color',
					[
						'label' 	=> __( 'Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'selectors' => [
							'{{WRAPPER}} .elementor-image-comparison-handle' => 'color: {{VALUE}};',
						],
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_2,
						],
					]
				);

$this->add_control(
					'handle_size',
					[
						'label' 	=> __( 'Size (%)', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'default' 	=> [
							'size' 	=> 44,
						],
						'range' 	=> [
							'px' 	=> [
								'min' 	=> 10,
								'max' 	=> 100,
							],
						],
						'separator'		=> 'none',
						'selectors' 	=> [
							'{{WRAPPER}} .elementor-image-comparison-handle' => 'font-size: {{SIZE}}px; width: {{SIZE}}px; height: {{SIZE}}px; margin-left: calc(-{{SIZE}}px/2); margin-top: calc(-{{SIZE}}px/2);',
						],
					]
				);

$this->end_controls_tab();

$this->start_controls_tab(
				'tab_handle_hover',
				[
					'label' => __( 'Hover', 'elementor-extras' ),
				]
			);

$this->add_control(
					'handle_hover_background_color',
					[
						'label' 	=> __( 'Background Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'default' 	=> '',
						'selectors' => [
							'{{WRAPPER}} .elementor-image-comparison-handle:hover' => 'background-color: {{VALUE}};',
						],
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_2,
						],
					]
				);

$this->add_control(
					'handle_hover_color',
					[
						'label' 	=> __( 'Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'default' 	=> '',
						'selectors' => [
							'{{WRAPPER}} .elementor-image-comparison-handle:hover' => 'color: {{VALUE}};',
						],
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_1,
						],
					]
				);

$this->add_control(
					'handle_size_hover',
					[
						'label' 	=> __( 'Size (%)', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'default' 	=> [
							'size' 	=> 44,
						],
						'range' 	=> [
							'px' 	=> [
								'min' 	=> 10,
								'max' 	=> 100,
							],
						],
						'separator'		=> 'none',
						'selectors' 	=> [
							'{{WRAPPER}} .elementor-image-comparison-handle:hover' => 'font-size: {{SIZE}}px; width: {{SIZE}}px; height: {{SIZE}}px; margin-left: calc(-{{SIZE}}px/2); margin-top: calc(-{{SIZE}}px/2);',
						],
					]
				);

$this->end_controls_tab();

$this->start_controls_tab(
				'tab_handle_dragged',
				[
					'label' => __( 'Dragged', 'elementor-extras' ),
				]
			);

$this->add_control(
					'handle_dragged_background_color',
					[
						'label' 	=> __( 'Background Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'default' 	=> '',
						'selectors' => [
							'{{WRAPPER}} .elementor-image-comparison-handle.draggable' => 'background-color: {{VALUE}};',
						],
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_4,
						],
					]
				);

$this->add_control(
					'handle_dragged_color',
					[
						'label' 	=> __( 'Color', 'elementor-extras' ),
						'type' 		=> Controls_Manager::COLOR,
						'default' 	=> '',
						'selectors' => [
							'{{WRAPPER}} .elementor-image-comparison-handle.draggable' => 'color: {{VALUE}};',
						],
						'scheme' 	=> [
							'type' 	=> Scheme_Color::get_type(),
							'value' => Scheme_Color::COLOR_3,
						],
					]
				);

$this->add_control(
					'handle_size_dragged',
					[
						'label' 	=> __( 'Size (%)', 'elementor-extras' ),
						'type' 		=> Controls_Manager::SLIDER,
						'default' 	=> [
							'size' 	=> 44,
						],
						'range' 	=> [
							'px' 	=> [
								'min' 	=> 10,
								'max' 	=> 100,
							],
						],
						'separator'		=> 'none',
						'selectors' 	=> [
							'{{WRAPPER}} .elementor-image-comparison-handle.draggable' => 'font-size: {{SIZE}}px; width: {{SIZE}}px; height: {{SIZE}}px; margin-left: calc(-{{SIZE}}px/2); margin-top: calc(-{{SIZE}}px/2);',
						],
					]
				);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();
	}

protected function render() {
		$settings = $this->get_settings();

if ( ! empty( $settings['original_image']['url'] ) ) {
			$this->add_render_attribute( 'original-image', 'src', $settings['original_image']['url'] );
			$this->add_render_attribute( 'original-image', 'alt', Control_Media::get_image_alt( $settings['original_image'] ) );
			$this->add_render_attribute( 'original-image', 'title', Control_Media::get_image_title( $settings['original_image'] ) );
		}

if ( ! empty( $settings['modified_image']['url'] ) ) {
			$this->add_render_attribute( 'modified-image', 'src', $settings['modified_image']['url'] );
			$this->add_render_attribute( 'modified-image', 'alt', Control_Media::get_image_alt( $settings['modified_image'] ) );
			$this->add_render_attribute( 'modified-image', 'title', Control_Media::get_image_title( $settings['modified_image'] ) );
		}

?>
		<figure class="elementor-image-comparison">
			<img <?php echo $this->get_render_attribute_string( 'original-image' ) ?>/>
			<span class="elementor-image-comparison-label image-comparison-label-original" data-type="original"><?php echo $settings['original_label']; ?></span>
		
			<div class="elementor-image-comparison-image">
				<img <?php echo $this->get_render_attribute_string( 'modified-image' ) ?>/>
				<span class="elementor-image-comparison-label image-comparison-label-modified" data-type="modified"><?php echo $settings['modified_label']; ?></span>
				<span class="elementor-image-comparison-separator center-vertical"></span>
			</div>
		
			<span class="elementor-image-comparison-handle nicon nicon-resize-horizontal-filled"></span>
		</figure><?php
	}

protected function _content_template() {
		?>
		<#

var html = '<figure class="elementor-image-comparison">';

if ( settings.original_image.url ) {
			html += '<img src="' + settings.original_image.url + '">';
			html += '<span class="elementor-image-comparison-label image-comparison-label-original" data-type="original">' + settings.original_label + '</span>';
		}

if ( settings.modified_image.url ) {
			html += '<div class="elementor-image-comparison-image">';
			html += '<img src="' + settings.modified_image.url + '">';
			html += '<span class="elementor-image-comparison-label image-comparison-label-modified" data-type="modified">' + settings.modified_label + '</span>';
			html += '<span class="elementor-image-comparison-separator center-vertical"></span>';
			html += '</div>';
		}

html += '<span class="elementor-image-comparison-handle nicon nicon-resize-horizontal-filled"></span>';
		html += '</figure>';

print( html );
		#>
		<?php
	}
}

[+] ..
[-] text-divider.php [edit]
[-] button-group.php [edit]
[-] image-comparison.php [edit]
[-] heading-extra.php [edit]
[-] unfold.php [edit]
[-] gallery-slider.php [edit]
[-] gallery-extra.php [edit]
[-] hotspots.php [edit]
[-] html5-video.php [edit]
[-] tables.php [edit]
[-] index.php [edit]
[-] breadcrumbs.php [edit]
[-] devices.php [edit]
[-] timeline.php [edit]
[-] circle-progress.php [edit]