/
var
/
www
/
barefootlaw.org
/
wp-content
/
plugins
/
happy-elementor-addons
/
widgets
/
slider
/
Upload File
HOME
<?php /** * Slider widget class * * @package Happy_Addons */ namespace Happy_Addons\Elementor\Widget; use Elementor\Group_Control_Background; use Elementor\Repeater; use Elementor\Controls_Manager; use Elementor\Group_Control_Border; use Elementor\Group_Control_Image_Size; use Elementor\Group_Control_Typography; use Elementor\Core\Schemes\Typography; use Elementor\Utils; use Elementor\Icons_Manager; defined( 'ABSPATH' ) || die(); class Slider extends Base { /** * Get widget title. * * @since 1.0.0 * @access public * * @return string Widget title. */ public function get_title() { return __( 'Slider', 'happy-elementor-addons' ); } public function get_custom_help_url() { return 'https://happyaddons.com/docs/happy-addons-for-elementor/widgets/slider/'; } /** * Get widget icon. * * @since 1.0.0 * @access public * * @return string Widget icon. */ public function get_icon() { return 'hm hm-image-slider'; } public function get_keywords() { return [ 'slider', 'image', 'gallery', 'carousel' ]; } /** * Register widget content controls */ protected function register_content_controls() { $this->__slider_content_controls(); $this->__slider_settings_content_controls(); } protected function __slider_content_controls() { $this->start_controls_section( '_section_slides', [ 'label' => __( 'Slides', 'happy-elementor-addons' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $repeater = new Repeater(); $repeater->add_control( 'image', [ 'type' => Controls_Manager::MEDIA, 'label' => __( 'Image', 'happy-elementor-addons' ), 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], 'dynamic' => [ 'active' => true, ] ] ); $repeater->add_control( 'title', [ 'type' => Controls_Manager::TEXT, 'label_block' => true, 'label' => __( 'Title', 'happy-elementor-addons' ), 'placeholder' => __( 'Type title here', 'happy-elementor-addons' ), 'dynamic' => [ 'active' => true, ] ] ); $repeater->add_control( 'subtitle', [ 'type' => Controls_Manager::TEXTAREA, 'label_block' => true, 'label' => __( 'Subtitle', 'happy-elementor-addons' ), 'placeholder' => __( 'Type subtitle here', 'happy-elementor-addons' ), 'dynamic' => [ 'active' => true, ] ] ); $repeater->add_control( 'link', [ 'label' => __( 'Link', 'happy-elementor-addons' ), 'type' => Controls_Manager::URL, 'label_block' => true, 'placeholder' => 'https://example.com', 'dynamic' => [ 'active' => true, ] ] ); $placeholder = [ 'image' => [ 'url' => Utils::get_placeholder_image_src(), ], ]; $this->add_control( 'slides', [ 'show_label' => false, 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'title_field' => '<# print(title || "Carousel Item"); #>', 'default' => array_fill( 0, 5, $placeholder ) ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'thumbnail', 'default' => 'medium_large', 'separator' => 'before', 'exclude' => [ 'custom' ] ] ); $this->add_control( 'title_tag', [ 'label' => __( 'Title HTML Tag', 'happy-elementor-addons' ), 'type' => Controls_Manager::SELECT, // 'separator' => 'before', 'options' => [ 'h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3', 'h4' => 'H4', 'h5' => 'H5', 'h6' => 'H6', 'div' => 'div', 'span' => 'span', 'p' => 'p', ], 'default' => 'h2', ] ); $this->end_controls_section(); } protected function __slider_settings_content_controls() { $this->start_controls_section( '_section_settings', [ 'label' => __( 'Settings', 'happy-elementor-addons' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'animation_speed', [ 'label' => __( 'Animation Speed', 'happy-elementor-addons' ), 'type' => Controls_Manager::NUMBER, 'min' => 100, 'step' => 10, 'max' => 10000, 'default' => 300, 'description' => __( 'Slide speed in milliseconds', 'happy-elementor-addons' ), 'frontend_available' => true, 'render_type' => 'ui', ] ); $this->add_control( 'autoplay', [ 'label' => __( 'Autoplay?', 'happy-elementor-addons' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => __( 'Yes', 'happy-elementor-addons' ), 'label_off' => __( 'No', 'happy-elementor-addons' ), 'return_value' => 'yes', 'default' => 'yes', 'frontend_available' => true, 'render_type' => 'ui', ] ); $this->add_control( 'autoplay_speed', [ 'label' => __( 'Autoplay Speed', 'happy-elementor-addons' ), 'type' => Controls_Manager::NUMBER, 'min' => 100, 'step' => 100, 'max' => 10000, 'default' => 3000, 'description' => __( 'Autoplay speed in milliseconds', 'happy-elementor-addons' ), 'condition' => [ 'autoplay' => 'yes' ], 'frontend_available' => true, 'render_type' => 'ui', ] ); $this->add_control( 'loop', [ 'label' => __( 'Infinite Loop?', 'happy-elementor-addons' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => __( 'Yes', 'happy-elementor-addons' ), 'label_off' => __( 'No', 'happy-elementor-addons' ), 'return_value' => 'yes', 'default' => 'yes', 'frontend_available' => true, 'render_type' => 'ui', ] ); $this->add_control( 'vertical', [ 'label' => __( 'Vertical Mode?', 'happy-elementor-addons' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => __( 'Yes', 'happy-elementor-addons' ), 'label_off' => __( 'No', 'happy-elementor-addons' ), 'return_value' => 'yes', 'frontend_available' => true, 'style_transfer' => true, 'render_type' => 'ui', ] ); $this->add_control( 'navigation', [ 'label' => __( 'Navigation', 'happy-elementor-addons' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => __( 'None', 'happy-elementor-addons' ), 'arrow' => __( 'Arrow', 'happy-elementor-addons' ), 'dots' => __( 'Dots', 'happy-elementor-addons' ), 'both' => __( 'Arrow & Dots', 'happy-elementor-addons' ), ], 'default' => 'arrow', 'frontend_available' => true, 'style_transfer' => true, 'render_type' => 'ui', ] ); $this->add_control( 'arrow_prev_icon', [ 'label' => __( 'Previous Icon', 'happy-elementor-addons' ), 'label_block' => false, 'type' => Controls_Manager::ICONS, 'skin' => 'inline', 'default' => [ 'value' => 'fas fa-chevron-left', 'library' => 'fa-solid', ], 'condition' => [ 'navigation' => ['arrow', 'both'] ], ] ); $this->add_control( 'arrow_next_icon', [ 'label' => __( 'Next Icon', 'happy-elementor-addons' ), 'label_block' => false, 'type' => Controls_Manager::ICONS, 'skin' => 'inline', 'default' => [ 'value' => 'fas fa-chevron-right', 'library' => 'fa-solid', ], 'condition' => [ 'navigation' => ['arrow', 'both'] ], ] ); $this->end_controls_section(); } /** * Register widget style controls */ protected function register_style_controls() { $this->__slider_item_style_controls(); $this->__slider_content_style_controls(); $this->__slider_arrow_style_controls(); $this->__slider_dot_style_controls(); } protected function __slider_item_style_controls() { $this->start_controls_section( '_section_style_item', [ 'label' => __( 'Slider Item', 'happy-elementor-addons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'item_border', 'selector' => '{{WRAPPER}} .ha-slick-item', ] ); $this->add_responsive_control( 'item_border_radius', [ 'label' => __( 'Border Radius', 'happy-elementor-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .ha-slick-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;', ], ] ); $this->end_controls_section(); } protected function __slider_content_style_controls() { $this->start_controls_section( '_section_style_content', [ 'label' => __( 'Slide Content', 'happy-elementor-addons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'content_padding', [ 'label' => __( 'Content Padding', 'happy-elementor-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .ha-slick-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'content_background', 'selector' => '{{WRAPPER}} .ha-slick-content', 'exclude' => [ 'image' ] ] ); $this->add_control( '_heading_title', [ 'type' => Controls_Manager::HEADING, 'label' => __( 'Title', 'happy-elementor-addons' ), 'separator' => 'before' ] ); $this->add_responsive_control( 'title_spacing', [ 'label' => __( 'Bottom Spacing', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'selectors' => [ '{{WRAPPER}} .ha-slick-title' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'title_color', [ 'label' => __( 'Text Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ha-slick-title' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title', 'selector' => '{{WRAPPER}} .ha-slick-title', 'scheme' => Typography::TYPOGRAPHY_2, ] ); $this->add_control( '_heading_subtitle', [ 'type' => Controls_Manager::HEADING, 'label' => __( 'Subtitle', 'happy-elementor-addons' ), 'separator' => 'before' ] ); $this->add_responsive_control( 'subtitle_spacing', [ 'label' => __( 'Bottom Spacing', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'selectors' => [ '{{WRAPPER}} .ha-slick-subtitle' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'subtitle_color', [ 'label' => __( 'Text Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ha-slick-subtitle' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'subtitle', 'selector' => '{{WRAPPER}} .ha-slick-subtitle', 'scheme' => Typography::TYPOGRAPHY_3, ] ); $this->end_controls_section(); } protected function __slider_arrow_style_controls() { $this->start_controls_section( '_section_style_arrow', [ 'label' => __( 'Navigation :: Arrow', 'happy-elementor-addons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'arrow_position_toggle', [ 'label' => __( 'Position', 'happy-elementor-addons' ), 'type' => Controls_Manager::POPOVER_TOGGLE, 'label_off' => __( 'None', 'happy-elementor-addons' ), 'label_on' => __( 'Custom', 'happy-elementor-addons' ), 'return_value' => 'yes', ] ); $this->start_popover(); $this->add_responsive_control( 'arrow_position_y', [ 'label' => __( 'Vertical', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', '%'], 'condition' => [ 'arrow_position_toggle' => 'yes' ], 'range' => [ 'px' => [ 'min' => -100, 'max' => 500, ], '%' => [ 'min' => -110, 'max' => 110, ], ], 'selectors' => [ '{{WRAPPER}} .slick-prev, {{WRAPPER}} .slick-next' => 'top: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'arrow_position_x', [ 'label' => __( 'Horizontal', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', '%'], 'condition' => [ 'arrow_position_toggle' => 'yes' ], 'range' => [ 'px' => [ 'min' => -100, 'max' => 500, ], '%' => [ 'min' => -110, 'max' => 110, ], ], 'selectors' => [ '{{WRAPPER}} .slick-prev' => 'left: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .slick-next' => 'right: {{SIZE}}{{UNIT}};', ], ] ); $this->end_popover(); $this->add_responsive_control( 'arrow_size', [ 'label' => __( 'Size', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em'], 'selectors' => [ '{{WRAPPER}} .slick-prev, {{WRAPPER}} .slick-next' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'arrow_border', 'selector' => '{{WRAPPER}} .slick-prev, {{WRAPPER}} .slick-next', ] ); $this->add_responsive_control( 'arrow_border_radius', [ 'label' => __( 'Border Radius', 'happy-elementor-addons' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .slick-prev, {{WRAPPER}} .slick-next' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;', ], ] ); $this->start_controls_tabs( '_tabs_arrow' ); $this->start_controls_tab( '_tab_arrow_normal', [ 'label' => __( 'Normal', 'happy-elementor-addons' ), ] ); $this->add_control( 'arrow_color', [ 'label' => __( 'Text Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .slick-prev, {{WRAPPER}} .slick-next' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'arrow_bg_color', [ 'label' => __( 'Background Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .slick-prev, {{WRAPPER}} .slick-next' => 'background-color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( '_tab_arrow_hover', [ 'label' => __( 'Hover', 'happy-elementor-addons' ), ] ); $this->add_control( 'arrow_hover_color', [ 'label' => __( 'Text Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .slick-prev:hover, {{WRAPPER}} .slick-next:hover' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'arrow_hover_bg_color', [ 'label' => __( 'Background Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .slick-prev:hover, {{WRAPPER}} .slick-next:hover' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'arrow_hover_border_color', [ 'label' => __( 'Border Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'condition' => [ 'arrow_border_border!' => '', ], 'selectors' => [ '{{WRAPPER}} .slick-prev:hover, {{WRAPPER}} .slick-next:hover' => 'border-color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); } protected function __slider_dot_style_controls() { $this->start_controls_section( '_section_style_dots', [ 'label' => __( 'Navigation :: Dots', 'happy-elementor-addons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'dots_nav_position_y', [ 'label' => __( 'Vertical Position', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', '%'], 'range' => [ 'px' => [ 'min' => -100, 'max' => 500, ], '%' => [ 'min' => -100, 'max' => 150, ], ], 'selectors' => [ '{{WRAPPER}} .slick-dots' => 'bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'dots_nav_spacing', [ 'label' => __( 'Spacing', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'selectors' => [ '{{WRAPPER}} .slick-dots li' => 'margin-right: calc({{SIZE}}{{UNIT}} / 2); margin-left: calc({{SIZE}}{{UNIT}} / 2);', ], ] ); $this->add_responsive_control( 'dots_nav_align', [ 'label' => __( 'Alignment', 'happy-elementor-addons' ), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'options' => [ 'left' => [ 'title' => __( 'Left', 'happy-elementor-addons' ), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => __( 'Center', 'happy-elementor-addons' ), 'icon' => 'eicon-h-align-center', ], 'right' => [ 'title' => __( 'Right', 'happy-elementor-addons' ), 'icon' => 'eicon-h-align-right', ], ], 'toggle' => true, 'selectors' => [ '{{WRAPPER}} .slick-dots' => 'text-align: {{VALUE}}' ] ] ); $this->start_controls_tabs( '_tabs_dots' ); $this->start_controls_tab( '_tab_dots_normal', [ 'label' => __( 'Normal', 'happy-elementor-addons' ), ] ); $this->add_control( 'dots_nav_size', [ 'label' => __( 'Size', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'selectors' => [ '{{WRAPPER}} .slick-dots li button:before' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'dots_nav_color', [ 'label' => __( 'Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .slick-dots li button:before' => 'color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( '_tab_dots_hover', [ 'label' => __( 'Hover', 'happy-elementor-addons' ), ] ); $this->add_control( 'dots_nav_hover_color', [ 'label' => __( 'Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .slick-dots li button:hover:before' => 'color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( '_tab_dots_active', [ 'label' => __( 'Active', 'happy-elementor-addons' ), ] ); $this->add_control( 'dots_nav_active_size', [ 'label' => __( 'Size', 'happy-elementor-addons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'selectors' => [ '{{WRAPPER}} .slick-dots li.slick-active button:before' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'dots_nav_active_color', [ 'label' => __( 'Color', 'happy-elementor-addons' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .slick-dots .slick-active button:before' => 'color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); if ( empty( $settings['slides'] ) ) { return; } ?> <div class="hajs-slick ha-slick ha-slick--slider"> <?php foreach ( $settings['slides'] as $slide ) : $image = wp_get_attachment_image_url( $slide['image']['id'], $settings['thumbnail_size'] ); if ( ! $image ) { $image = $slide['image']['url']; } $item_tag = 'div'; $id = 'ha-slick-item-' . $slide['_id']; $this->add_render_attribute( $id, 'class', 'ha-slick-item' ); if ( isset( $slide['link'] ) && ! empty( $slide['link']['url'] ) ) { $item_tag = 'a'; $this->add_link_attributes( $id, $slide['link'] ); } ?> <div class="ha-slick-slide slick-slide"> <<?php echo $item_tag; ?> <?php $this->print_render_attribute_string( $id ); ?>> <?php if ( $image ) : ?> <img class="ha-slick-img" src="<?php echo esc_url( $image ); ?>" alt="<?php echo esc_attr( $slide['title'] ); ?>"> <?php endif; ?> <?php if ( $slide['title'] || $slide['subtitle'] ) : ?> <div class="ha-slick-content"> <?php if ( $slide['title'] ) { printf( '<%1$s class="ha-slick-title">%2$s</%1$s>', ha_escape_tags( $settings['title_tag'], 'h2' ), ha_kses_basic( $slide['title'] ) ); } ?> <?php if ( $slide['subtitle'] ) : ?> <p class="ha-slick-subtitle"><?php echo ha_kses_basic( $slide['subtitle'] ); ?></p> <?php endif; ?> </div> <?php endif; ?> </<?php echo $item_tag; ?>> </div> <?php endforeach; ?> </div> <?php if ( ! empty( $settings['arrow_prev_icon']['value'] ) ) : ?> <button type="button" class="slick-prev"><?php Icons_Manager::render_icon( $settings['arrow_prev_icon'], ['aria-hidden' => 'true'] ); ?></button> <?php endif; ?> <?php if ( ! empty( $settings['arrow_next_icon']['value'] ) ) : ?> <button type="button" class="slick-next"><?php Icons_Manager::render_icon( $settings['arrow_next_icon'], ['aria-hidden' => 'true'] ); ?></button> <?php endif; ?> <?php } }