s->add_control(
'eael_ticker_content_color',
[
'label' => esc_html__('Text Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '#222222',
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .eael-ticker .ticker-content a' => 'color: {{VALUE}};',
],
]
);
$this->add_control(
'eael_ticker_hover_content_color',
[
'label' => esc_html__('Text Hover Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '#f44336',
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .eael-ticker .ticker-content a:hover' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'eael_ticker_content_typography',
'selector' => '{{WRAPPER}} .eael-ticker-wrap .eael-ticker .ticker-content a',
]
);
$this->add_responsive_control(
'eael_ticker_content_padding',
[
'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .eael-ticker .ticker-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'eael_ticker_content_radius',
[
'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .eael-ticker' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'eael_section_ticker_tag_style_settings',
[
'label' => esc_html__('Tag Style', 'essential-addons-for-elementor-lite'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'eael_ticker_tag_bg_color',
[
'label' => esc_html__('Background Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '#222222',
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .ticker-badge' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'eael_ticker_tag_color',
[
'label' => esc_html__('Text Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '#fff',
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .ticker-badge span' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'eael_ticker_tag_typography',
'selector' => '{{WRAPPER}} .eael-ticker-wrap .ticker-badge span',
]
);
$this->add_responsive_control(
'eael_ticker_tag_padding',
[
'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .ticker-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'eael_ticker_tag_margin',
[
'label' => esc_html__('Margin', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .ticker-badge' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'eael_ticker_tag_radius',
[
'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .eael-ticker-wrap .ticker-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
/**
* Style Tab: Arrows
*/
$this->start_controls_section(
'section_arrows_style',
[
'label' => __('Arrows', 'essential-addons-for-elementor-lite'),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'arrows' => 'yes',
],
]
);
$this->add_control(
'prev_arrow',
[
'label' => __('Choose Prev Arrow', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::ICONS,
'label_block' => true,
'default' => [
'value' => 'fas fa-angle-left',
'library' => 'fa-solid',
],
]
);
$this->add_control(
'arrow_new',
[
'label' => __('Choose Next Arrow', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'arrow',
'label_block' => true,
'default' => [
'value' => 'fas fa-angle-right',
'library' => 'fa-solid',
],
]
);
$this->add_responsive_control(
'arrows_size',
[
'label' => __('Arrows Size', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::SLIDER,
'default' => ['size' => '22'],
'range' => [
'px' => [
'min' => 5,
'max' => 100,
'step' => 1,
],
],
'size_units' => ['px'],
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next, {{WRAPPER}} .eael-ticker .swiper-button-prev' => 'font-size: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .eael-ticker .swiper-button-next img, {{WRAPPER}} .eael-ticker .swiper-button-prev img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .eael-ticker .swiper-button-next svg, {{WRAPPER}} .eael-ticker .swiper-button-prev svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'left_arrow_position',
[
'label' => __('Align Left Arrow', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => -100,
'max' => 100,
'step' => 1,
],
],
'size_units' => ['px'],
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-prev' => 'right: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'right_arrow_position',
[
'label' => __('Align Right Arrow', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => -100,
'max' => 100,
'step' => 1,
],
],
'size_units' => ['px'],
'default' => [
'unit' => 'px',
'size' => 0,
],
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next' => 'right: {{SIZE}}{{UNIT}};',
],
]
);
$this->start_controls_tabs('tabs_arrows_style');
$this->start_controls_tab(
'tab_arrows_normal',
[
'label' => __('Normal', 'essential-addons-for-elementor-lite'),
]
);
$this->add_control(
'arrows_bg_color_normal',
[
'label' => __('Background Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next, {{WRAPPER}} .eael-ticker .swiper-button-prev' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'arrows_color_normal',
[
'label' => __('Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next, {{WRAPPER}} .eael-ticker .swiper-button-prev' => 'color: {{VALUE}};',
'{{WRAPPER}} .eael-ticker .swiper-button-next svg, {{WRAPPER}} .eael-ticker .swiper-button-prev svg' => 'fill: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'arrows_border_normal',
'label' => __('Border', 'essential-addons-for-elementor-lite'),
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} .eael-ticker .swiper-button-next, {{WRAPPER}} .eael-ticker .swiper-button-prev',
]
);
$this->add_control(
'arrows_border_radius_normal',
[
'label' => __('Border Radius', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next, {{WRAPPER}} .eael-ticker .swiper-button-prev' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_arrows_hover',
[
'label' => __('Hover', 'essential-addons-for-elementor-lite'),
]
);
$this->add_control(
'arrows_bg_color_hover',
[
'label' => __('Background Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next:hover, {{WRAPPER}} .eael-ticker .swiper-button-prev:hover' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'arrows_color_hover',
[
'label' => __('Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next:hover, {{WRAPPER}} .eael-ticker .swiper-button-prev:hover' => 'color: {{VALUE}};',
'{{WRAPPER}} .eael-ticker .swiper-button-next:hover svg, {{WRAPPER}} .eael-ticker .swiper-button-prev:hover svg' => 'fill: {{VALUE}};',
],
]
);
$this->add_control(
'arrows_border_color_hover',
[
'label' => __('Border Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next:hover, {{WRAPPER}} .eael-ticker .swiper-button-prev:hover' => 'border-color: {{VALUE}};',
],
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'arrows_padding',
[
'label' => __('Padding', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} .eael-ticker .swiper-button-next, {{WRAPPER}} .eael-ticker .swiper-button-prev' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
'separator' => 'before',
]
);
$this->end_controls_section();
}
protected function render()
{
$settings = $this->get_settings_for_display();
$settings = Helper::fix_old_query($settings);
$args = Helper::get_query_args($settings);
//Supported New SwiperJS version
$swiper_class = $swiper_version_class = '';
if ( class_exists( 'Elementor\Plugin' ) ) {
$swiper_class = \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_swiper_latest' ) ? 'swiper' : 'swiper-container';
$swiper_version_class = 'swiper' === $swiper_class ? 'swiper-8' : 'swiper-8-lower';
}
$this->add_render_attribute('content-ticker-wrap', 'class', 'eael-ticker');
$this->add_render_attribute('content-ticker', 'class', esc_attr( $swiper_class ) );
$this->add_render_attribute('content-ticker', 'class', esc_attr( $swiper_version_class ) );
$this->add_render_attribute('content-ticker', 'class', 'eael-content-ticker');
$this->add_render_attribute('content-ticker', 'class', 'swiper-container-' . esc_attr($this->get_id()));
$this->add_render_attribute('content-ticker', 'data-pagination', '.swiper-pagination-' . esc_attr($this->get_id()));
$this->add_render_attribute('content-ticker', 'data-arrow-next', '.swiper-button-next-' . esc_attr($this->get_id()));
$this->add_render_attribute('content-ticker', 'data-arrow-prev', '.swiper-button-prev-' . esc_attr($this->get_id()));
if ($settings['direction'] == 'right') {
$this->add_render_attribute('content-ticker', 'dir', 'rtl');
}
if (!empty($settings['margin_tablet']['size'])) {
$this->add_render_attribute('content-ticker', 'data-margin-tablet', $settings['margin_tablet']['size']);
}
if (!empty($settings['margin_mobile']['size'])) {
$this->add_render_attribute('content-ticker', 'data-margin-mobile', $settings['margin_mobile']['size']);
}
if ($settings['carousel_effect']) {
$this->add_render_attribute('content-ticker', 'data-effect', $settings['carousel_effect']);
}
if (!empty($settings['slider_speed']['size'])) {
$this->add_render_attribute('content-ticker', 'data-speed', $settings['slider_speed']['size']);
}
if ($settings['autoplay'] == 'yes' && !empty($settings['autoplay_speed']['size'])) {
$this->add_render_attribute('content-ticker', 'data-autoplay', $settings['autoplay_speed']['size']);
} else {
$this->add_render_attribute('content-ticker', 'data-autoplay', '999999');
}
if ($settings['pause_on_hover'] == 'yes') {
$this->add_render_attribute('content-ticker', 'data-pause-on-hover', 'true');
}
if ($settings['infinite_loop'] == 'yes') {
$this->add_render_attribute('content-ticker', 'data-loop', true);
}
if ($settings['grab_cursor'] == 'yes') {
$this->add_render_attribute('content-ticker', 'data-grab-cursor', true);
}
if ($settings['arrows'] == 'yes') {
$this->add_render_attribute('content-ticker', 'data-arrows', '1');
}
echo '
';
if (!empty($settings['eael_ticker_tag_text'])) {
echo '
' . Helper::eael_wp_kses($settings['eael_ticker_tag_text']) . '
';
}
echo '
get_render_attribute_string('content-ticker-wrap') . '>
get_render_attribute_string('content-ticker') . '>
';
if ('dynamic' === $settings['eael_ticker_type']) {
if (\file_exists($this->get_template($settings['eael_dynamic_template_Layout']))) {
$query = new \WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
include $this->get_template($settings['eael_dynamic_template_Layout']);
}
wp_reset_postdata();
}
} else {
echo '
';
}
} elseif ('custom' === $settings['eael_ticker_type'] && apply_filters('eael/is_plugin_active', 'essential-addons-elementor/essential_adons_elementor.php')) {
if (\file_exists($this->get_template($settings['eael_dynamic_template_Layout']))) {
foreach ($settings['eael_ticker_custom_contents'] as $content) {
echo Helper::include_with_variable($this->get_template($settings['eael_dynamic_template_Layout']), ['content' => Helper::eael_wp_kses($content['eael_ticker_custom_content']), 'link' => $content['eael_ticker_custom_content_link']]);
}
}
}
echo '
' . $this->render_arrows() . '
';
}
/**
* Render Content Ticker arrows output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @access protected
*/
protected function render_arrows()
{
$settings = $this->get_settings_for_display();
if ($settings['arrows'] == 'yes') {
if (isset($settings['__fa4_migrated']['arrow_new']) || empty($settings['arrow'])) {
$arrow = Helper::get_render_icon( $settings['arrow_new'] );
} else {
$arrow = '
';
}
$html = '';
return $html;
}
}
}
