<?php
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Image_Size;
use Elementor\Icons_Manager;
use Elementor\Repeater;
use Motiox\Elementor\Motiox_Base_Widgets;
class Motiox_Elementor_Slider_Scrolling extends Motiox_Base_Widgets {
/**
* Get widget name.
*
* Retrieve testimonial widget name.
*
* @return string Widget name.
* @since 1.0.0
* @access public
*
*/
public function get_name() {
return 'motiox-slider-scrolling';
}
/**
* Get widget title.
*
* Retrieve testimonial widget title.
*
* @return string Widget title.
* @since 1.0.0
* @access public
*
*/
public function get_title() {
return esc_html__('Motiox Slider Scrolling', 'motiox');
}
/**
* Get widget icon.
*
* Retrieve testimonial widget icon.
*
* @return string Widget icon.
* @since 1.0.0
* @access public
*
*/
public function get_icon() {
return 'eicon-image';
}
public function get_script_depends() {
return ['motiox-elementor-slider-scrolling'];
}
public function get_categories() {
return array('motiox-addons');
}
/**
* Register testimonial widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
* @access protected
*/
protected function register_controls() {
$this->start_controls_section(
'section_slider_scrolling',
[
'label' => esc_html__('Slider Scrolling', 'motiox'),
]
);
$repeater = new Repeater();
$repeater->add_control(
'selected_icon',
[
'label' => esc_html__('Icon', 'motiox'),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon',
]
);
$repeater->add_control(
'scrolling_title',
[
'label' => esc_html__('Title 1', 'motiox'),
'type' => Controls_Manager::TEXT,
'default' => 'Scrolling title',
]
);
$repeater->add_control(
'scrolling_title_link',
[
'label' => esc_html__('Link to', 'motiox'),
'placeholder' => esc_html__('https://your-link.com', 'motiox'),
'type' => Controls_Manager::URL,
]
);
$this->add_control(
'slider_scrolling',
[
'label' => esc_html__('Items', 'motiox'),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'title_field' => '{{{ scrolling_title }}}',
]
);
$repeater_after = new Repeater();
$repeater_after->add_control(
'selected_icon',
[
'label' => esc_html__('Icon After', 'motiox'),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon',
]
);
$repeater_after->add_control(
'scrolling_title_after',
[
'label' => esc_html__('Title After', 'motiox'),
'type' => Controls_Manager::TEXT,
'default' => 'Scrolling title',
]
);
$repeater_after->add_control(
'scrolling_title_link_after',
[
'label' => esc_html__('Link to', 'motiox'),
'placeholder' => esc_html__('https://your-link.com', 'motiox'),
'type' => Controls_Manager::URL,
]
);
$this->add_control(
'slider_scrolling_after',
[
'label' => esc_html__('Items After', 'motiox'),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater_after->get_controls(),
'title_field' => '{{{ scrolling_title_after }}}',
]
);
$this->add_control(
'effects_scrolling',
[
'label' => esc_html__('Effects Scrolling', 'motiox'),
'type' => Controls_Manager::SWITCHER,
'prefix_class' => 'scrolling-effects-',
]
);
$this->add_control(
'scrolling_layout',
[
'label' => esc_html__('Layout', 'motiox'),
'type' => Controls_Manager::SELECT,
'default' => 'default',
'options' => [
'default' => esc_html__('Default', 'motiox'),
'1' => esc_html__('Layout 1', 'motiox'),
],
'prefix_class' => 'scroll-layout-style-',
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_slider_scrolling_wrapper',
[
'label' => esc_html__('Wrapper', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'slider_scrolling_padding',
[
'label' => esc_html__('Padding', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'slider_scrolling_margin',
[
'label' => esc_html__('Margin', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'slider_scrolling_background_color',
[
'label' => esc_html__('Background Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-item-wrapper' => 'background-color: {{VALUE}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_slider_scrolling_title',
[
'label' => esc_html__('Title', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'slider_scrollingtitle_color',
[
'label' => esc_html__('Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .scrolling-title .title-scrolling a' => 'color: {{VALUE}};',
'{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .scrolling-title .title-scrolling' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'title_typography',
'selector' => '{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .scrolling-title .title-scrolling',
]
);
$this->add_responsive_control(
'slider_scrolling_title_margin',
[
'label' => esc_html__('Margin', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .scrolling-title ' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'slider_scrolling_time',
[
'label' => esc_html__('Time scroll', 'motiox'),
'type' => Controls_Manager::SLIDER,
'default' => [
'unit' => 's',
],
'range' => [
's' => [
'min' => 0,
'max' => 100,
],
],
'size_units' => ['s', 'ms'],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-item-wrapper .elementor-slider-scrolling-inner' => 'animation-duration: {{SIZE}}{{UNIT}};',
],
]
);
$this -> add_control(
'slider_scrolling_direct',
[
'label' => esc_html__('Direct', 'motiox'),
'type' => Controls_Manager::SELECT2,
'default' => 'rtl',
'options' => [
'rtl' => esc_html__('RTL', 'motiox'),
'ltr' => esc_html__('LTR', 'motiox'),
],
'multiple' => false,
'prefix_class' => 'slider-'
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_slider_scrolling_title_after',
[
'label' => esc_html__('Title After', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'slider_scrollingtitle_after_color',
[
'label' => esc_html__('Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner-after .elementor-slider-scrolling-item-after .elementor-scrolling-item-inner-after .scrolling-title-after .title-scrolling-after a' => 'color: {{VALUE}};',
'{{WRAPPER}} .elementor-slider-scrolling-inner-after .elementor-slider-scrolling-item-after .elementor-scrolling-item-inner-after .scrolling-title-after .title-scrolling-after' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'title_after_typography',
'selector' => '{{WRAPPER}} .elementor-slider-scrolling-inner-after .elementor-slider-scrolling-item-after .elementor-scrolling-item-inner-after .scrolling-title-after .title-scrolling-after',
]
);
$this->add_responsive_control(
'slider_scrolling_title_after_margin',
[
'label' => esc_html__('Margin', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner-after .elementor-slider-scrolling-item-after .elementor-scrolling-item-inner-after .scrolling-title-after ' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'slider_scrolling_time_after',
[
'label' => esc_html__('Time scroll', 'motiox'),
'type' => Controls_Manager::SLIDER,
'default' => [
'unit' => 's',
],
'range' => [
's' => [
'min' => 0,
'max' => 100,
],
],
'size_units' => ['s', 'ms'],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-item-wrapper-after .elementor-slider-scrolling-inner-after' => 'animation-duration: {{SIZE}}{{UNIT}};',
],
]
);
$this -> add_control(
'slider_scrolling_direct_after',
[
'label' => esc_html__('Direct', 'motiox'),
'type' => Controls_Manager::SELECT2,
'default' => 'rtl',
'options' => [
'rtl' => esc_html__('RTL', 'motiox'),
'ltr' => esc_html__('LTR', 'motiox'),
],
'multiple' => false,
'prefix_class' => 'slider-after-'
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_icon',
[
'label' => esc_html__('Icon', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'icon_color',
[
'label' => esc_html__('Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .elementor-scrolling-icon' => 'color: {{VALUE}} !important;',
'{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .elementor-scrolling-icon svg' => 'color: {{VALUE}} !important;',
],
]
);
$this->add_responsive_control(
'icon_font_size',
[
'label' => esc_html__('Font Size', 'motiox'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 100,
],
],
'size_units' => ['px', 'em'],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .elementor-scrolling-icon' => 'font-size: {{SIZE}}{{UNIT}} !important;',
],
]
);
$this->add_responsive_control(
'width_svg_scroll',
[
'label' => esc_html__('Width', 'motiox'),
'type' => Controls_Manager::SLIDER,
'default' => [
'unit' => 'px',
],
'tablet_default' => [
'unit' => 'px',
],
'mobile_default' => [
'unit' => 'px',
],
'size_units' => ['%', 'px', 'vw'],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
'px' => [
'min' => 1,
'max' => 1000,
],
'vw' => [
'min' => 1,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .elementor-scrolling-icon svg' => 'width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'height_svg_scroll',
[
'label' => esc_html__('Height', 'motiox'),
'type' => Controls_Manager::SLIDER,
'default' => [
'unit' => 'px',
],
'tablet_default' => [
'unit' => 'px',
],
'mobile_default' => [
'unit' => 'px',
],
'size_units' => ['%', 'px', 'vw'],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
'px' => [
'min' => 1,
'max' => 1000,
],
'vw' => [
'min' => 1,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-slider-scrolling-inner .elementor-slider-scrolling-item .elementor-scrolling-item-inner .elementor-scrolling-icon svg' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
if (!empty($settings['slider_scrolling']) && is_array($settings['slider_scrolling'])) {
$this->add_render_attribute('wrapper', 'class', 'elementor-slider-scrolling-item-wrapper');
$this->add_render_attribute('inner', 'class', 'elementor-slider-scrolling-inner');
// Item
$this->add_render_attribute('item', 'class', 'elementor-slider-scrolling-item');
$migration_allowed = Icons_Manager::is_migration_allowed();
?>
<div <?php $this->print_render_attribute_string('wrapper'); ?>>
<div class="wrapper-item">
<?php
for ($i = 0; $i <= 3; $i++) {
?>
<div <?php $this->print_render_attribute_string('inner'); ?>>
<?php foreach ($settings['slider_scrolling'] as $item) :
if (!isset($item['icon']) && !$migration_allowed) {
$item['icon'] = isset($fallback_defaults[$item]) ? $fallback_defaults[$index] : 'fa fa-check';
}
$migrated = isset($service['__fa4_migrated']['selected_icon']);
$is_new = !isset($service['icon']) && $migration_allowed;
?>
<div <?php $this->print_render_attribute_string('item'); ?>>
<div class="elementor-scrolling-item-inner">
<div class="scrolling-title">
<?php
$scrolling_title_html = $item['scrolling_title'];
if (!empty($item['scrolling_title_link']['url'])) :
$scrolling_title_html = '<a href="' . esc_url($item['scrolling_title_link']['url']) . '">' . esc_html($scrolling_title_html) . '</a>';
endif;
printf('<span class="title-scrolling">%s</span>', $scrolling_title_html);
?>
</div>
<?php
if (!empty($item['icon']) || (!empty($item['selected_icon']['value']) && $is_new)) :
?>
<span class="elementor-scrolling-icon" <?php $this->print_render_attribute_string('color'); ?>>
<?php
if ($is_new || $migrated) {
Icons_Manager::render_icon($item['selected_icon'], ['aria-hidden' => 'true']);
} else { ?>
<i class="<?php echo esc_attr($service['icon']); ?>" aria-hidden="true"></i>
<?php } ?>
</span>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php
}
?>
</div>
</div>
<?php
}
if (!empty($settings['slider_scrolling_after']) && is_array($settings['slider_scrolling_after'])) {
$this->add_render_attribute('wrapper-after', 'class', 'elementor-slider-scrolling-item-wrapper-after');
$this->add_render_attribute('inner-after', 'class', 'elementor-slider-scrolling-inner-after');
// Item
$this->add_render_attribute('item-after', 'class', 'elementor-slider-scrolling-item-after');
$migration_allowed_after = Icons_Manager::is_migration_allowed();
?>
<div <?php $this->print_render_attribute_string('wrapper-after'); ?>>
<div class="wrapper-item">
<?php
for ($i = 0; $i <= 3; $i++) {
?>
<div <?php $this->print_render_attribute_string('inner-after'); ?>>
<?php foreach ($settings['slider_scrolling_after'] as $item_after) :
if (!isset($item_after['icon']) && !$migration_allowed_after) {
$item_after['icon'] = isset($fallback_defaults[$item_after]) ? $fallback_defaults[$index] : 'fa fa-check';
}
$migrated_after = isset($service_after['__fa4_migrated']['selected_icon']);
$is_new_after = !isset($service_after['icon']) && $migration_allowed_after;
?>
<div <?php $this->print_render_attribute_string('item-after'); ?>>
<div class="elementor-scrolling-item-inner-after">
<div class="scrolling-title-after">
<?php
$scrolling_title_after_html = $item_after['scrolling_title_after'];
if (!empty($item_after['scrolling_title_link_after']['url'])) :
$scrolling_title_after_html = '<a href="' . esc_url($item_after['scrolling_title_link_after']['url']) . '">' . esc_html($scrolling_title_after_html) . '</a>';
endif;
printf('<span class="title-scrolling-after">%s</span>', $scrolling_title_after_html);
?>
</div>
<?php
if (!empty($item_after['icon']) || (!empty($item_after['selected_icon']['value']) && $is_new)) :
?>
<span class="elementor-scrolling-icon-after">
<?php
if ($is_new_after || $migrated_after) {
Icons_Manager::render_icon($item_after['selected_icon'], ['aria-hidden' => 'true']);
} else { ?>
<i class="<?php echo esc_attr($service_after['icon']); ?>" aria-hidden="true"></i>
<?php } ?>
</span>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php
}
?>
</div>
</div>
<?php
}
}
}
$widgets_manager->register(new Motiox_Elementor_Slider_Scrolling());