<?php
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Utils;
use Elementor\Group_Control_Image_Size;
use Elementor\Icons_Manager;
use Elementor\Group_Control_Border;
use Elementor\Repeater;
use Motiox\Elementor\Motiox_Base_Widgets;
if (!defined('ABSPATH')) {
exit;
} // Exit if accessed directly
class Motiox_Elementor_Image_Link_Showcase extends Motiox_Base_Widgets {
/**
* Get widget name.
*
* Retrieve counter widget name.
*
* @return string Widget name.
* @since 1.0.0
* @access public
*
*/
public function get_name() {
return 'image-link-showcase';
}
/**
* Get widget title.
*
* Retrieve counter widget title.
*
* @return string Widget title.
* @since 1.0.0
* @access public
*
*/
public function get_title() {
return __('Motiox Image Link Showcase', 'motiox');
}
/**
* Get widget icon.
*
* Retrieve counter widget icon.
*
* @return string Widget icon.
* @since 1.0.0
* @access public
*
*/
public function get_icon() {
return 'eicon-tabs';
}
/**
* Retrieve the list of scripts the counter widget depended on.
*
* Used to set scripts dependencies required to run the widget.
*
* @return array Widget scripts dependencies.
* @since 1.3.0
* @access public
*
*/
public function get_script_depends() {
return ['jquery-numerator'];
}
public function get_categories() {
return array('motiox-addons');
}
/**
* Register counter 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_heading',
[
'label' => esc_html__('Heading', 'motiox'),
]
);
$this->add_control(
'heading-1',
[
'label' => esc_html__('Heading Award', 'motiox'),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'placeholder' => esc_html__('Enter your title 1', 'motiox'),
'default' => esc_html__('Add Your Heading Text Here', 'motiox'),
]
);
$this->add_control(
'heading-2',
[
'label' => esc_html__('Heading Date', 'motiox'),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'placeholder' => esc_html__('Enter your title 2', 'motiox'),
'default' => esc_html__('Add Your Heading Text Here', 'motiox'),
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_image_item',
[
'label' => esc_html__('Item', 'motiox'),
]
);
$repeater = new Repeater();
$repeater->add_control(
'link_showcase_image',
[
'label' => esc_html__('Choose Image', 'motiox'),
'default' => [
'url' => Elementor\Utils::get_placeholder_image_src(),
],
'type' => Controls_Manager::MEDIA,
'show_label' => false,
]
);
$repeater->add_control(
'image_link_subtitle',
[
'label' => esc_html__('Subtitle', 'motiox'),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'placeholder' => esc_html__('Enter your subtitle', 'motiox'),
]
);
$repeater->add_control(
'image_link_title',
[
'label' => esc_html__('Title', 'motiox'),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'placeholder' => esc_html__('Enter your title', 'motiox'),
]
);
$repeater->add_control(
'image_link_date',
[
'label' => esc_html__('Date', 'motiox'),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'placeholder' => esc_html__('Enter your date', 'motiox'),
]
);
$this->add_control(
'table_list',
[
'label' => esc_html__('Table List', 'motiox'),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'title_field' => '{{{ image_link_title }}}',
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'link_showcase_image', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `testimonial_image_size` and `testimonial_image_custom_dimension`.
'default' => 'full',
'separator' => 'none',
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_image_link_wrapper',
[
'label' => esc_html__('Wrapper', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'background_color',
[
'label' => esc_html__('Background Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items' => 'background-color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'team_border',
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} .elementor-table-list-items',
'separator' => 'before',
]
);
$this->add_responsive_control(
'image_link_border_radius',
[
'label' => esc_html__('Border Radius', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'image_link_wrapper_padding_inner',
[
'label' => esc_html__('Padding', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'image_link_wrapper_margin',
[
'label' => esc_html__('Margin', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_link_image',
[
'label' => esc_html__('Image', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'link_width_img',
[
'label' => esc_html__('Width', 'motiox'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 10,
'max' => 500,
],
'vw' => [
'min' => 1,
'max' => 100,
],
],
'size_units' => ['px', '%', 'vw'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-image .image-link-showcase img ' => 'width: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_responsive_control(
'link_height_img',
[
'label' => esc_html__('Height', 'motiox'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 10,
'max' => 500,
],
'vh' => [
'min' => 10,
'max' => 100,
],
],
'size_units' => ['px', 'vh', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-image .image-link-showcase img ' => 'height: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'link_radius_img',
[
'label' => esc_html__('Border Radius', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-image .image-link-showcase img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_image_link_heading',
[
'label' => esc_html__('Heading', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'heading_image_link_color',
[
'label' => esc_html__('Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-head tr th' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'heading_image_link_typography',
'selector' => '{{WRAPPER}} .elementor-table-list-items .elementor-table-head tr th',
]
);
$this->add_responsive_control(
'heading_image_link_padding',
[
'label' => esc_html__('Padding', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-head tr th ' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_image_link_subtitle',
[
'label' => esc_html__('Subtitle', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'link_width_subtitle',
[
'label' => esc_html__('Width', 'motiox'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 10,
'max' => 500,
],
'vw' => [
'min' => 1,
'max' => 100,
],
],
'size_units' => ['px', '%', 'vw'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-subtitle ' => 'width: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'subtitle_image_link_color',
[
'label' => esc_html__('Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-subtitle' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'subtitle_image_link_typography',
'selector' => '{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-subtitle',
]
);
$this->add_responsive_control(
'subtitle_image_link_padding',
[
'label' => esc_html__('Padding', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-subtitle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_image_link_title',
[
'label' => esc_html__('Title', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'link_width_title',
[
'label' => esc_html__('Width', 'motiox'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 10,
'max' => 500,
],
'vw' => [
'min' => 1,
'max' => 100,
],
],
'size_units' => ['px', '%', 'vw'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-title ' => 'width: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'title_image_link_color',
[
'label' => esc_html__('Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-title' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'title_image_link_typography',
'selector' => '{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-title',
]
);
$this->add_responsive_control(
'title_image_link_padding',
[
'label' => esc_html__('Padding', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_image_link_date',
[
'label' => esc_html__('Date', 'motiox'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'date_image_link_color',
[
'label' => esc_html__('Color', 'motiox'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-date' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'date_image_link_typography',
'selector' => '{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-date',
]
);
$this->add_responsive_control(
'date_image_link_padding',
[
'label' => esc_html__('Padding', 'motiox'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .elementor-table-list-items .elementor-table-content .elementor-table-list-item .elementor-table-list-date' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
if (!empty($settings['table_list']) && is_array($settings['table_list'])) {
$this->add_render_attribute('table_list', 'class', 'elementor-table-list-items');
$this->add_render_attribute('list_item', 'class', 'elementor-table-list-item');
?>
<div <?php $this->print_render_attribute_string('table_list'); ?>>
<table>
<thead class="elementor-table-head" >
<tr>
<th scope="col" class="heading-hour">
</th>
<th scope="col" class="heading-hour">
</th>
<th scope="col" class="heading-award">
<?php echo esc_html($settings['heading-1']); ?>
</th>
<th scope="col" class="heading-date">
<?php echo esc_html($settings['heading-2']); ?>
</th>
</tr>
</thead>
<tbody class="elementor-table-content" >
<?php
foreach ($settings['table_list'] as $index => $item) :
$repeater_setting_key = $this->get_repeater_setting_key('text', 'table_list', $index);
$this->add_render_attribute($repeater_setting_key, 'class', 'elementor-table-list-text');
$this->add_inline_editing_attributes($repeater_setting_key);
?>
<tr class="elementor-table-list-item" >
<td class="elementor-table-list-image">
<?php $this->render_image($settings, $item); ?>
</td>
<td class="elementor-table-list-subtitle">
<div class="table-list-sub">
<div class="list-subtitle-hover">
<?php $this->print_unescaped_setting('image_link_subtitle', 'table_list', $index); ?>
</div>
<div class="list-subtitle">
<?php $this->print_unescaped_setting('image_link_subtitle', 'table_list', $index); ?>
</div>
</div>
</td>
<td class="elementor-table-list-title">
<?php $this->print_unescaped_setting('image_link_title', 'table_list', $index); ?>
</td>
<td class="elementor-table-list-date">
<div class="table-list-date">
<div class="list-date-hover">
<?php $this->print_unescaped_setting('image_link_date', 'table_list', $index); ?>
</div>
<div class="list-date">
<?php $this->print_unescaped_setting('image_link_date', 'table_list', $index); ?>
</div>
</div>
</td>
</tr>
<?php
endforeach;
?>
</tbody>
</table>
</div>
<?php
}
}
private function render_image($settings, $item) {
if (!empty($item['link_showcase_image']['url'])) :
?>
<div class="image-link-showcase">
<?php
$item['link_showcase_image_size'] = $settings['link_showcase_image_size'];
$item['link_showcase_image_custom_dimension'] = $settings['link_showcase_image_custom_dimension'];
echo Group_Control_Image_Size::get_attachment_image_html($item, 'link_showcase_image');
?>
</div>
<?php
endif;
}
}
$widgets_manager->register(new Motiox_Elementor_Image_Link_Showcase());