<?php
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
/**
* Class Opalestate_Widget_Base
*/
abstract class Opalestate_Elementor_Widget_Base extends Widget_Base {
/**
* Get widget categories.
*
* Retrieve the list of categories the widget belongs to.
*
* @access public
*
* @return array Widget categories.
*/
public function get_categories() {
return [ 'opalestate-pro' ];
}
/**
* Render widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @access protected
*/
protected function render() {
$settings = $this->get_settings_for_display();
$located = $this->locate_template( $this->get_name() . '.php' );
if ( ! file_exists( $located ) ) {
return;
}
if ( ! empty( $located ) && file_exists( $located ) ) {
@ include apply_filters( 'opalestate_elementor_render_widget_templates', $located, $settings, $this );
}
}
/**
* Render widget output in the editor.
*
* Written as a Backbone JavaScript template and used to generate the live preview.
*
* @access protected
*/
protected function _content_template() {
$located = $this->locate_template( $this->get_name() . '-preview.php' );
if ( ! file_exists( $located ) ) {
return;
}
if ( ! empty( $located ) && file_exists( $located ) ) {
@ include apply_filters( 'opalestate_elementor_preview_widget_templates', $located, $this );
}
}
/**
* Locate template.
*
* @param string $template_name Template name.
*
* @return string
*/
protected function locate_template( $template_name ) {
// Locate in your {theme}/opalestate-elementor.
$template = locate_template( [
trailingslashit( 'opalestate/elementor-templates/' ) . $template_name,
] );
// Fallback to default template in the plugin.
if ( ! $template ) {
$template = OPALESTATE_PLUGIN_DIR . 'templates/elementor-templates/' . $template_name;
}
// Return what we found.
return apply_filters( 'abrs_elementor_locate_template', $template, $template_name );
}
/**
* Register image carousel widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
* @access protected
*/
public function get_settings_json( $settings ) {
$data = [
"slides_to_show" => $settings['slides_to_show'],
"slides_to_scroll" => $settings['slides_to_scroll'],
"navigation" => $settings['navigation'],
"pause_on_hover" => $settings['pause_on_hover'],
"autoplay" => $settings['autoplay'],
"autoplay_speed" => $settings['autoplay_speed'],
"infinite" => $settings['infinite'],
"speed" => $settings['speed'],
"direction" => $settings['direction'],
];
return wp_json_encode( $data );
}
public function render_content() {
$settings = $this->get_settings_for_display();
if ( ! isset( $settings['enable_carousel'] ) ) {
return parent::render_content();
}
if ( $settings['enable_carousel'] === 'yes' ) {
$this->add_render_attribute( 'wrapper-style', 'class', 'elementor-slick-slider-row row-items' );
$data = $this->get_settings_json( $settings );
$this->add_render_attribute( 'wrapper', 'data-settings', $data );
echo '<div class="elementor-opal-slick-slider elementor-slick-slider" ' . $this->get_render_attribute_string( 'wrapper' ) . '>';
} else {
$this->add_render_attribute( 'wrapper-style', 'class', 'elementor-grid row-items elementor-items-container' );
}
parent::render_content();
if ( $settings['enable_carousel'] === 'yes' ) {
echo '</div>';
}
}
/**
* Register image carousel widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
* @access protected
*/
public function add_slick_controls( $condition, $slick_class ) {
$slick_class = ' .elementor-opal-slick-slider ';
$this->start_controls_section(
'section_carousel_options',
[
'label' => esc_html__( 'Carousel Options', 'opalestate-pro' ),
'type' => Controls_Manager::SECTION,
'condition' => $condition,
]
);
$slides_to_show = range( 1, 10 );
$slides_to_show = array_combine( $slides_to_show, $slides_to_show );
$this->add_responsive_control(
'slides_to_show',
[
'label' => esc_html__( 'Slides to Show', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'' => esc_html__( 'Default', 'opalestate-pro' ),
] + $slides_to_show,
'frontend_available' => true,
]
);
$this->add_control(
'slides_to_scroll',
[
'label' => esc_html__( 'Slides to Scroll', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'description' => esc_html__( 'Set how many slides are scrolled per swipe.', 'opalestate-pro' ),
'default' => '2',
'options' => $slides_to_show,
'condition' => [
'slides_to_show!' => '1',
],
'frontend_available' => true,
]
);
$this->add_control(
'navigation',
[
'label' => esc_html__( 'Navigation', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'both',
'options' => [
'both' => esc_html__( 'Arrows and Dots', 'opalestate-pro' ),
'arrows' => esc_html__( 'Arrows', 'opalestate-pro' ),
'dots' => esc_html__( 'Dots', 'opalestate-pro' ),
'none' => esc_html__( 'None', 'opalestate-pro' ),
],
'frontend_available' => true,
]
);
$this->add_control(
'view',
[
'label' => esc_html__( 'View', 'opalestate-pro' ),
'type' => Controls_Manager::HIDDEN,
'default' => 'traditional',
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_additional_options',
[
'label' => esc_html__( 'Carousel Additional Options', 'opalestate-pro' ),
'condition' => $condition,
]
);
$this->add_control(
'pause_on_hover',
[
'label' => esc_html__( 'Pause on Hover', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'yes',
'options' => [
'yes' => esc_html__( 'Yes', 'opalestate-pro' ),
'no' => esc_html__( 'No', 'opalestate-pro' ),
],
'frontend_available' => true,
]
);
$this->add_control(
'autoplay',
[
'label' => esc_html__( 'Autoplay', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'yes',
'options' => [
'yes' => esc_html__( 'Yes', 'opalestate-pro' ),
'no' => esc_html__( 'No', 'opalestate-pro' ),
],
'frontend_available' => true,
]
);
$this->add_control(
'autoplay_speed',
[
'label' => esc_html__( 'Autoplay Speed', 'opalestate-pro' ),
'type' => Controls_Manager::NUMBER,
'default' => 5000,
'frontend_available' => true,
]
);
$this->add_control(
'infinite',
[
'label' => esc_html__( 'Infinite Loop', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'yes',
'options' => [
'yes' => esc_html__( 'Yes', 'opalestate-pro' ),
'no' => esc_html__( 'No', 'opalestate-pro' ),
],
'frontend_available' => true,
]
);
$this->add_control(
'effect',
[
'label' => esc_html__( 'Effect', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'slide',
'options' => [
'slide' => esc_html__( 'Slide', 'opalestate-pro' ),
'fade' => esc_html__( 'Fade', 'opalestate-pro' ),
],
'condition' => [
'slides_to_show' => '1',
],
'frontend_available' => true,
]
);
$this->add_control(
'speed',
[
'label' => esc_html__( 'Animation Speed', 'opalestate-pro' ),
'type' => Controls_Manager::NUMBER,
'default' => 500,
'frontend_available' => true,
]
);
$this->add_control(
'direction',
[
'label' => esc_html__( 'Direction', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'ltr',
'options' => [
'ltr' => esc_html__( 'Left', 'opalestate-pro' ),
'rtl' => esc_html__( 'Right', 'opalestate-pro' ),
],
'frontend_available' => true,
]
);
$this->end_controls_section();
$a = array_merge( $condition, [
'navigation' => [
'arrows',
'dots',
'both',
],
] );
$this->start_controls_section(
'section_style_navigation',
[
'label' => esc_html__( 'Navigation', 'opalestate-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => $a,
]
);
$this->add_control(
'heading_style_arrows',
[
'label' => esc_html__( 'Arrows', 'opalestate-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'navigation' => [ 'arrows', 'both' ],
],
]
);
$this->add_control(
'arrows_position',
[
'label' => esc_html__( 'Position', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'inside',
'options' => [
'inside' => esc_html__( 'Inside', 'opalestate-pro' ),
'outside' => esc_html__( 'Outside', 'opalestate-pro' ),
],
'condition' => [
'navigation' => [ 'arrows', 'both' ],
],
]
);
$this->add_control(
'arrows_size',
[
'label' => esc_html__( 'Size', 'opalestate-pro' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 20,
'max' => 60,
],
],
'selectors' => [
'{{WRAPPER}} ' . $slick_class . '.slick-slider .slick-prev:before, {{WRAPPER}} ' . $slick_class . '.slick-slider .slick-next:before' => 'font-size: {{SIZE}}{{UNIT}};',
],
'condition' => [
'navigation' => [ 'arrows', 'both' ],
],
]
);
$this->add_control(
'arrows_color',
[
'label' => esc_html__( 'Color', 'opalestate-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} ' . $slick_class . '.slick-slider .slick-prev:before, {{WRAPPER}} ' . $slick_class . '.slick-slider .slick-next:before' => 'color: {{VALUE}};',
],
'condition' => [
'navigation' => [ 'arrows', 'both' ],
],
]
);
$this->add_control(
'heading_style_dots',
[
'label' => esc_html__( 'Dots', 'opalestate-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'navigation' => [ 'dots', 'both' ],
],
]
);
$this->add_control(
'dots_position',
[
'label' => esc_html__( 'Position', 'opalestate-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'outside',
'options' => [
'outside' => esc_html__( 'Outside', 'opalestate-pro' ),
'inside' => esc_html__( 'Inside', 'opalestate-pro' ),
],
'condition' => [
'navigation' => [ 'dots', 'both' ],
],
]
);
$this->add_control(
'dots_size',
[
'label' => esc_html__( 'Size', 'opalestate-pro' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 5,
'max' => 10,
],
],
'selectors' => [
'{{WRAPPER}} ' . $slick_class . ' .slick-dots li button:before' => 'font-size: {{SIZE}}{{UNIT}};',
],
'condition' => [
'navigation' => [ 'dots', 'both' ],
],
]
);
$this->add_control(
'dots_color',
[
'label' => esc_html__( 'Color', 'opalestate-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} ' . $slick_class . ' .slick-dots li button:before' => 'color: {{VALUE}};',
],
'condition' => [
'navigation' => [ 'dots', 'both' ],
],
]
);
$this->end_controls_section();
// if( $this->image_control ){
// $this->add_image_control( $condition, $slick_class );
// }
}
}