File: //home/turkishi/www/wp-content/themes/kidzieo/includes/elementor/timeline.php
<?php
namespace Elementor; // Custom widgets must be defined in the Elementor namespace
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly (security measure)
/**
* Widget Name: Projects Carousel
*/
class pbmit_TimelineElement extends Widget_Base{
// The get_name() method is a simple one, you just need to return a widget name that will be used in the code.
public function get_name() {
return 'pbmit_timeline_element';
}
// The get_title() method, which again, is a very simple one, you need to return the widget title that will be displayed as the widget label.
public function get_title() {
return esc_attr__( 'Kidzieo Timeline Element', 'kidzieo' );
}
// The get_icon() method, is an optional but recommended method, it lets you set the widget icon. you can use any of the eicon or font-awesome icons, simply return the class name as a string.
public function get_icon() {
return 'fas fa-history';
}
// The get_categories method, lets you set the category of the widget, return the category name as a string.
public function get_categories() {
return [ 'kidzieo_category' ];
}
public function __construct($data = [], $args = null) {
parent::__construct($data, $args);
if( !empty($data['settings']["view-type"]) && $data['settings']["view-type"]=='carousel' ){
wp_enqueue_script( 'swiper' );
wp_enqueue_style( 'swiper' );
}
}
public function get_style_depends() {
return [ 'pbmit-timeline' ];
}
protected function register_controls() {
// Style
$this->start_controls_section(
'style_section',
[
'label' => esc_attr__( 'Style Options', 'kidzieo' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'style',
[
'label' => esc_attr__( 'Select Timeline View Style', 'kidzieo' ),
'description' => esc_attr__( 'Select Timeline View style.', 'kidzieo' ),
'type' => 'pbmit_imgselect',
'label_block' => true,
'thumb_width' => '110px',
'default' => '1',
'options' => pbmit_element_template_list( 'timeline', true ),
]
);
$this->end_controls_section();
// Content
$this->start_controls_section(
'data_section',
[
'label' => esc_attr__( 'Content Options', 'kidzieo' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$repeater = new Repeater();
$repeater->add_control(
'image',
[
'label' => esc_attr__( 'Choose Image', 'kidzieo' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => get_template_directory_uri() . '/images/history.png',
],
]
);
$repeater->add_control(
'year_text',
[
'label' => esc_attr__( 'Small text like Label', 'kidzieo' ),
'type' => Controls_Manager::TEXT,
'description' => esc_attr__( 'Small text like Label.', 'kidzieo' ),
'label_block' => true,
]
);
$repeater->add_control(
'small_text',
[
'label' => esc_attr__( 'Number of year', 'kidzieo' ),
'type' => Controls_Manager::TEXT,
'description' => esc_attr__( 'Number of year.', 'kidzieo' ),
'label_block' => true,
]
);
$repeater->add_control(
'desc_text',
[
'label' => esc_attr__( 'Description', 'kidzieo' ),
'type' => Controls_Manager::TEXTAREA,
'description' => esc_attr__( 'Description Text.', 'kidzieo' ),
'show_label' => true,
]
);
$this->add_control(
'values',
[
'label' => esc_attr__( 'Values', 'kidzieo' ),
'description' => esc_attr__( 'Enter values for graph - value, title and color.', 'kidzieo' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'image' => get_template_directory_uri() . '/images/history.png',
'year_text' => esc_attr__( 'Our Beginning', 'kidzieo' ),
'small_text' => esc_attr__( '2012', 'kidzieo' ),
'desc_text' => esc_attr__( 'resolution stressing the need for an all-India bar and emphasizing the desirability of having.', 'kidzieo' ),
],
[
'image' => get_template_directory_uri() . '/images/history.png',
'year_text' => esc_attr__( 'School Evolution', 'kidzieo' ),
'small_text' => esc_attr__( '2014', 'kidzieo' ),
'desc_text' => esc_attr__( 'Considering a proposal to set up a Committee of Inquiry to go into the problem in detail.', 'kidzieo' ),
],
[
'image' => get_template_directory_uri() . '/images/history.png',
'year_text' => esc_attr__( 'Culture Functions', 'kidzieo' ),
'small_text' => esc_attr__( '2015', 'kidzieo' ),
'desc_text' => esc_attr__( 'The desirability and feasibility of a completely unified Bar for the whole of India', 'kidzieo' ),
],
[
'image' => get_template_directory_uri() . '/images/history.png',
'year_text' => esc_attr__( 'Established in Town', 'kidzieo' ),
'small_text' => esc_attr__( '2017', 'kidzieo' ),
'desc_text' => esc_attr__( 'In today’s modern age, bars no longer offer, but they have become highly diverse.', 'kidzieo' ),
],
[
'image' => get_template_directory_uri() . '/images/history.png',
'year_text' => esc_attr__( 'Evolved Over', 'kidzieo' ),
'small_text' => esc_attr__( '2020', 'kidzieo' ),
'desc_text' => esc_attr__( 'Today‘s leaders in hospitality realise that their premises are more attractive.', 'kidzieo' ),
],
],
'title_field' => '{{{ small_text }}}',
]
);
$this->end_controls_section();
// Heading and Subheading
$this->start_controls_section(
'heading_section',
[
'label' => esc_attr__( 'Heading and Subheading', 'kidzieo' ),
]
);
$this->add_control(
'heading_style',
[
'label' => esc_attr__( 'Select Heading/Subheading View Style', 'kidzieo' ),
'description' => esc_attr__( 'Select Heading/Subheading View Style.', 'kidzieo' ),
'type' => 'pbmit_imgselect',
'label_block' => true,
'thumb_width' => '110px',
'default' => '1',
'options' => pbmit_element_template_list( 'heading-subheading', true ),
]
);
$this->add_control(
'title_animation',
[
'label' => esc_attr__( 'Heading Animation', 'kidzieo' ),
'description' => esc_attr__( 'Select Heading Text Animation View style.', 'kidzieo' ) . ' ' . pbmit_esc_kses('<br><a target="_blank" href="' . esc_url('http://kidzieo-demo.pbminfotech.com/demo1/element/#heading-animations') . '">' . esc_attr__( 'See all anmiation demo here.', 'kidzieo' ) . '</a>' ),
'type' => Controls_Manager::SELECT,
'options' => [
'' => esc_attr__( 'No animation', 'kidzieo' ),
'1' => esc_attr__( 'Animation Style 1', 'kidzieo' ),
'2' => esc_attr__( 'Animation Style 2', 'kidzieo' ),
'3' => esc_attr__( 'Animation Style 3', 'kidzieo' ),
],
'separator' => 'before',
]
);
$this->add_control(
'title',
[
'label' => esc_attr__( 'Heading', 'kidzieo' ),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'default' => esc_attr__( 'Company History', 'kidzieo' ),
'placeholder' => esc_attr__( 'Enter your heading', 'kidzieo' ),
'label_block' => true,
]
);
$this->add_control(
'title_link',
[
'label' => esc_attr__( 'Heading Link', 'kidzieo' ),
'type' => Controls_Manager::URL,
'label_block' => true,
]
);
$this->add_control(
'subtitle',
[
'label' => esc_attr__( 'Subheading', 'kidzieo' ),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [
'active' => true,
],
'placeholder' => esc_attr__( 'Enter your subtitle', 'kidzieo' ),
'label_block' => true,
]
);
$this->add_control(
'subtitle_link',
[
'label' => esc_attr__( 'Subheading Link', 'kidzieo' ),
'type' => Controls_Manager::URL,
'label_block' => true,
]
);
$this->add_control(
'desc',
[
'label' => esc_attr__( 'Description', 'kidzieo' ),
'type' => Controls_Manager::TEXTAREA,
'placeholder' => esc_attr__( 'Type your description here', 'kidzieo' ),
]
);
$this->add_control(
'reverse_title',
[
'label' => esc_attr__( 'Reverse Heading', 'kidzieo' ),
'description' => esc_attr__( 'Show Subheading before Heading', 'kidzieo' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_attr__( 'Yes', 'kidzieo' ),
'label_off' => esc_attr__( 'No', 'kidzieo' ),
'return_value' => 'yes',
'default' => '',
]
);
$this->add_responsive_control(
'text_align',
[
'label' => esc_attr__( 'Alignment', 'kidzieo' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_attr__( 'Left', 'kidzieo' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => esc_attr__( 'Center', 'kidzieo' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => esc_attr__( 'Right', 'kidzieo' ),
'icon' => 'fa fa-align-right',
],
],
'selectors' => [
'{{WRAPPER}} .pbmit-heading-subheading' => 'text-align: {{VALUE}};',
],
'dynamic' => [
'active' => true,
],
]
);
$this->end_controls_section();
// Data Options
$this->start_controls_section(
'row_col_options_heading',
[
'label' => esc_attr__( 'Column and Carousel Options', 'kidzieo' ),
'type' => Controls_Manager::HEADING,
'condition' => [
'style' => ['1','3'],
],
]
);
$this->add_control(
'view-type',
[
'label' => esc_attr__( 'How you like to view each Post box?', 'kidzieo' ),
'description' => esc_attr__( 'Show as carousel view or simple row-column view.', 'kidzieo' ),
'type' => 'pbmit_imgselect',
'label_block' => true,
'thumb_width' => '110px',
'default' => 'carousel',
'options' => [
'carousel' => esc_url( get_template_directory_uri() . '/includes/images/carousel.png' ),
]
]
);
// Carousel: Heading
$this->add_control(
'carousel_options',
[
'label' => esc_attr__( 'Carousel Options', 'kidzieo' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'view-type' => 'carousel',
]
]
);
// Carousel : Autoplay
$this->add_control(
'carousel-autoplay',
[
'label' => esc_attr__( 'Carousel: Autoplay', 'kidzieo' ),
'description' => esc_attr__( 'Autoplay of carousel.', 'kidzieo' ),
'type' => Controls_Manager::SELECT,
'default' => '0',
'options' => [
'1' => esc_attr__( 'Yes', 'kidzieo' ),
'0' => esc_attr__( 'No', 'kidzieo' ),
],
'condition' => [
'view-type' => 'carousel',
]
]
);
// Carousel : Center
$this->add_control(
'carousel-center',
[
'label' => esc_attr__( 'Carousel: Center', 'kidzieo' ),
'description' => esc_attr__( 'Center item. Works well with even an odd number of items.', 'kidzieo' ),
'type' => Controls_Manager::SELECT,
'default' => '0',
'options' => [
'1' => esc_attr__( 'Yes', 'kidzieo' ),
'0' => esc_attr__( 'No', 'kidzieo' ),
],
'condition' => [
'view-type' => 'carousel',
]
]
);
// Carousel : Nav
$this->add_control(
'carousel-nav',
[
'label' => esc_attr__( 'Carousel: Nav', 'kidzieo' ),
'description' => esc_attr__( 'Show next/prev buttons.', 'kidzieo' ),
'type' => Controls_Manager::SELECT,
'default' => '0',
'options' => [
'1' => esc_attr__( 'Yes', 'kidzieo' ),
'0' => esc_attr__( 'No', 'kidzieo' ),
'above' => esc_attr__( 'Yes, near heading area', 'kidzieo' ),
],
'condition' => [
'view-type' => 'carousel',
]
]
);
// Carousel : Dots
$this->add_control(
'carousel-dots',
[
'label' => esc_attr__( 'Carousel: Dots', 'kidzieo' ),
'description' => esc_attr__( 'Show dots navigation.', 'kidzieo' ),
'type' => Controls_Manager::SELECT,
'default' => '0',
'options' => [
'1' => esc_attr__( 'Yes', 'kidzieo' ),
'0' => esc_attr__( 'No', 'kidzieo' ),
],
'condition' => [
'view-type' => 'carousel',
]
]
);
// Carousel : autoplaySpeed
$this->add_control(
'carousel-autoplayspeed',
[
'label' => esc_attr__( 'Carousel: autoplaySpeed', 'kidzieo' ),
'description' => esc_attr__( 'autoplay speed.', 'kidzieo' ),
'type' => Controls_Manager::TEXT,
'default' => '4000',
'condition' => [
'view-type' => 'carousel',
]
]
);
// Columns
$this->add_control(
'view-column-section-heading',
[
'label' => esc_attr__( 'Column Settings', 'kidzieo' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'columns',
[
'label' => esc_attr__( 'View in Column', 'kidzieo' ),
'description' => esc_attr__( 'Select how many column to show.', 'kidzieo' ),
'type' => 'pbmit_imgselect',
'label_block' => true,
'thumb_width' => '110px',
'default' => '3',
'options' => [
'1' => esc_url( get_template_directory_uri() . '/includes/images/column-1.png' ),
'2' => esc_url( get_template_directory_uri() . '/includes/images/column-2.png' ),
'3' => esc_url( get_template_directory_uri() . '/includes/images/column-3.png' ),
'4' => esc_url( get_template_directory_uri() . '/includes/images/column-4.png' ),
'5' => esc_url( get_template_directory_uri() . '/includes/images/column-5.png' ),
'6' => esc_url( get_template_directory_uri() . '/includes/images/column-6.png' ),
],
]
);
$this->end_controls_section();
// HTML Tags
$this->start_controls_section(
'advanced_section',
[
'label' => pbmit_esc_kses('<img class="pbmit-tab-small-logo" src="'.get_template_directory_uri() . '/includes/images/pbm-small-logo.png" /> ') . esc_attr__( 'Tag & Gap Settings', 'kidzieo' ),
'tab' => Controls_Manager::TAB_ADVANCED,
]
);
$this->add_control(
'tag_options',
[
'label' => esc_attr__( 'Tags for SEO', 'kidzieo' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'title_tag',
[
'label' => esc_attr__( 'Heading Tag', 'kidzieo' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h1' => esc_attr( 'H1' ),
'h2' => esc_attr( 'H2' ),
'h3' => esc_attr( 'H3' ),
'h4' => esc_attr( 'H4' ),
'h5' => esc_attr( 'H5' ),
'h6' => esc_attr( 'H6' ),
'div' => esc_attr( 'DIV' ),
],
'default' => esc_attr( 'h2' ),
]
);
$this->add_control(
'subtitle_tag',
[
'label' => esc_attr__( 'Subheading Tag', 'kidzieo' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h1' => esc_attr( 'H1' ),
'h2' => esc_attr( 'H2' ),
'h3' => esc_attr( 'H3' ),
'h4' => esc_attr( 'H4' ),
'h5' => esc_attr( 'H5' ),
'h6' => esc_attr( 'H6' ),
'div' => esc_attr( 'DIV' ),
],
'default' => esc_attr( 'h4' ),
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
extract($settings);
// Starting container
pbmit_element_container( array(
'position' => 'start',
'cpt' => 'timeline',
'data' => $settings
) );
?>
<div class="pbmit-timeline">
<?php if($style == '1'){?> <div class="container"> <?php } ?>
<div class="pbmit-ele-header-area">
<?php pbmit_heading_subheading($settings, true); ?>
</div>
<?php if($style == '1'){ ?> </div> <?php }
if ( $style == '1' ) { ?>
<div class="pbmit-element-posts-wrapper row multi-columns-row <?php if( !empty($settings['view-type']) && trim($settings['view-type'])=='carousel' ){ ?>swiper-container<?php } ?>">
<?php if( !empty($settings['values']) && count($settings['values'])>0 ) {
$return = '';
foreach($settings['values'] as $value){
$small_text = ( !empty($value['small_text']) ) ? $value['small_text'] : '' ;
$year_text = ( !empty($value['year_text']) ) ? $value['year_text'] : '' ;
$desc_text = ( !empty($value['desc_text']) ) ? $value['desc_text'] : '' ;
$image = ( !empty($value['image']['url']) ) ? '<img src="'.esc_url($value['image']['url']).'" alt="'.esc_attr($year_text).'" />' : '' ;
?>
<div class="pbmit-timeline-wrapper swiper-slide ">
<?php if( !empty($image) ){ ?>
<div class="pbmit-same-height steps-media pbmit-feature-image">
<?php echo pbmit_esc_kses($image); ?>
</div>
<?php } ?>
<div class="steps-dot"><i class="steps-dot-line"></i><span class="dot"></span></div>
<div class="pbmit-same-height steps-content_wrap">
<p class="pbmit-timeline-year"><?php echo esc_html($small_text); ?></p>
<h3 class="pbmit-timeline-title"><?php echo esc_html($year_text); ?></h3>
<p class="pbmit-timeline-desc"><?php echo pbmit_esc_kses($desc_text); ?></p>
</div>
</div>
<?php } //foreach
echo pbmit_esc_kses($return);
} ?>
</div>
<?php } else { ?>
<div class="pbmit-first-timeline"></div>
<div class="pbmit-timeline-post-items">
<?php if( !empty($settings['values']) && count($settings['values'])>0 ) {
foreach($settings['values'] as $value){
$year_text = ( !empty($value['year_text']) ) ? $value['year_text'] : '' ;
$small_text = ( !empty($value['small_text']) ) ? $value['small_text'] : '' ;
$desc_text = ( !empty($value['desc_text']) ) ? $value['desc_text'] : '' ;
$image = ( !empty($value['image']['url']) ) ? '<img src="'.esc_url($value['image']['url']).'" alt="'.esc_attr($year_text).'" />' : '' ;
?>
<div class="pbmit-timeline-inner">
<div class=" col-sm-12 pbmit-ourhistory-type2">
<div class="row pbmit-ourhistory-row">
<div class="col-md-5 col-sm-12 col-xs-5 pbmit-ourhistory-right">
<span class="label"><?php echo esc_html($small_text); ?></span>
<div class="content">
<h4 class="pbmit-title"><?php echo esc_html($year_text); ?></h4>
<div class="simple-text">
<p><?php echo pbmit_esc_kses($desc_text); ?></p>
</div>
</div>
</div>
<div class="col-md-2 pbmit-ourhistory-center">
<span class="label"><?php echo esc_html($small_text); ?></span>
</div>
<div class="col-md-5 pbmit-ourhistory-left">
<span class="pbmit-timeline-image"><?php echo pbmit_esc_kses($image); ?></span>
</div>
</div>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
<div class="pbmit-last-timeline"></div>
<?php } ?>
</div>
<?php
// Ending wrapper of the whole arear
pbmit_element_container( array(
'position' => 'end',
'cpt' => 'timeline',
'data' => $settings
) );
?>
<?php }
protected function content_template() {}
protected function select_category() {
$category = get_terms( array( 'taxonomy' => 'pbmit-timeline-category', 'hide_empty' => false ) );
$cat = array();
foreach( $category as $item ) {
$cat_count = get_category( $item );
if( $item ) {
$cat[$item->slug] = $item->name . ' ('.$cat_count->count.')';
}
}
return $cat;
}
}
// After the Schedule class is defined, I must register the new widget class with Elementor:
Plugin::instance()->widgets_manager->register( new pbmit_TimelineElement() );