????
Your IP : 3.141.2.206
<?php
namespace ElementorPro\Modules\VideoPlaylist\Widgets;
use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Repeater;
use Elementor\Utils;
use ElementorPro\Base\Base_Widget;
use Elementor\Modules\DynamicTags\Module as TagsModule;
use Elementor\Icons_Manager;
use ElementorPro\Plugin;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
class Video_Playlist extends Base_Widget {
public function get_name() {
return 'video-playlist';
}
public function get_title() {
return esc_html__( 'Video Playlist', 'elementor-pro' );
}
public function get_icon() {
return 'eicon-video-playlist';
}
protected function is_dynamic_content(): bool {
return false;
}
public function has_widget_inner_wrapper(): bool {
return ! Plugin::elementor()->experiments->is_feature_active( 'e_optimized_markup' );
}
/**
* Get style dependencies.
*
* Retrieve the list of style dependencies the widget requires.
*
* @since 3.24.0
* @access public
*
* @return array Widget style dependencies.
*/
public function get_style_depends(): array {
return [ 'widget-video-playlist' ];
}
protected function register_controls() {
$start = is_rtl() ? 'right' : 'left';
$end = is_rtl() ? 'left' : 'right';
$this->start_controls_section(
'section_playlist',
[
'label' => esc_html__( 'Playlist', 'elementor-pro' ),
]
);
$this->add_control(
'tabs_direction',
[
'label' => esc_html__( 'Position', 'elementor-pro' ),
'type' => Controls_Manager::HIDDEN,
'default' => 'vertical',
'options' => [
'horizontal' => esc_html__( 'Horizontal', 'elementor-pro' ),
'vertical' => esc_html__( 'Vertical', 'elementor-pro' ),
],
'prefix_class' => 'e-tabs-view-',
]
);
$this->add_control(
'playlist_title',
[
'label' => esc_html__( 'Playlist Name', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Playlist', 'elementor-pro' ),
'placeholder' => esc_html__( 'Playlist', 'elementor-pro' ),
'frontend_available' => true,
]
);
$this->add_control(
'playlist_title_tag',
[
'label' => esc_html__( 'HTML Tag', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h1' => 'H1',
'h2' => 'H2',
'h3' => 'H3',
'h4' => 'H4',
'h5' => 'H5',
'h6' => 'H6',
'div' => 'div',
'span' => 'span',
],
'default' => 'h2',
'condition' => [
'playlist_title!' => '',
],
]
);
$repeater = new Repeater();
$repeater->add_control(
'type',
[
'label' => esc_html__( 'Type', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'youtube',
'options' => [
'youtube' => esc_html__( 'YouTube', 'elementor-pro' ),
'vimeo' => esc_html__( 'Vimeo', 'elementor-pro' ),
'hosted' => esc_html__( 'Self Hosted', 'elementor-pro' ),
'section' => esc_html__( 'Section', 'elementor-pro' ),
],
]
);
$repeater->add_control(
'youtube_url',
[
'label' => esc_html__( 'Link', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'ai' => [
'active' => false,
],
'placeholder' => esc_html__( 'Paste URL', 'elementor-pro' ) . ' (YouTube)',
'label_block' => true,
'condition' => [
'type' => 'youtube',
],
]
);
$repeater->add_control(
'vimeo_url',
[
'label' => esc_html__( 'Link', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
'categories' => [
TagsModule::POST_META_CATEGORY,
TagsModule::URL_CATEGORY,
],
],
'ai' => [
'active' => false,
],
'placeholder' => esc_html__( 'Enter your URL', 'elementor-pro' ) . ' (Vimeo)',
'default' => 'https://vimeo.com/235215203',
'label_block' => true,
'condition' => [
'type' => 'vimeo',
],
]
);
$repeater->add_control(
'vimeo_fetch_data',
[
'type' => Controls_Manager::BUTTON,
'label_block' => true,
'text' => esc_html__( 'Get Video Data', 'elementor-pro' ),
'event' => 'elementorPlaylistWidget:fetchVideoData',
'condition' => [
'type' => [ 'youtube', 'vimeo' ],
],
]
);
$repeater->add_control(
'is_external_url',
[
'label' => esc_html__( 'External URL', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'condition' => [
'type' => 'hosted',
],
]
);
$repeater->add_control(
'hosted_url',
[
'label' => esc_html__( 'Choose File', 'elementor-pro' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
'categories' => [
TagsModule::MEDIA_CATEGORY,
],
],
'media_types' => [ 'video' ],
'condition' => [
'type' => 'hosted',
'is_external_url' => '',
],
]
);
$repeater->add_control(
'external_url',
[
'label' => esc_html__( 'URL', 'elementor-pro' ),
'type' => Controls_Manager::URL,
'autocomplete' => false,
'options' => false,
'label_block' => true,
'show_label' => false,
'dynamic' => [
'active' => true,
'categories' => [
TagsModule::POST_META_CATEGORY,
TagsModule::URL_CATEGORY,
],
],
'media_types' => [ 'video' ],
'placeholder' => esc_html__( 'Enter your URL', 'elementor-pro' ),
'condition' => [
'type' => 'hosted',
'is_external_url' => 'yes',
],
]
);
$repeater->add_control(
'title',
[
'label' => esc_html__( 'Title', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'default' => esc_html__( 'Title', 'elementor-pro' ),
'placeholder' => esc_html__( 'Add Your Text Here', 'elementor-pro' ),
'label_block' => true,
]
);
$repeater->add_control(
'section_html_tag',
[
'label' => esc_html__( 'Title HTML Tag', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h1' => 'H1',
'h2' => 'H2',
'h3' => 'H3',
'h4' => 'H4',
'h5' => 'H5',
'h6' => 'H6',
'div' => 'div',
'span' => 'span',
],
'default' => 'h3',
'condition' => [
'type' => 'section',
],
]
);
$repeater->add_control(
'video_html_tag',
[
'label' => esc_html__( 'Title HTML Tag', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h1' => 'H1',
'h2' => 'H2',
'h3' => 'H3',
'h4' => 'H4',
'h5' => 'H5',
'h6' => 'H6',
'div' => 'div',
'span' => 'span',
],
'default' => 'h4',
'condition' => [
'type!' => 'section',
],
]
);
$repeater->add_control(
'duration',
[
'label' => esc_html__( 'Duration', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'placeholder' => '1:05',
'default' => '',
'ai' => [
'active' => false,
],
'condition' => [
'type!' => 'section',
],
]
);
$repeater->add_control(
'thumbnail',
[
'label' => esc_html__( 'Thumbnail', 'elementor-pro' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'condition' => [
'type!' => 'section',
],
]
);
$repeater->add_control(
'inner_tab_is_content_visible',
[
'label' => esc_html__( 'Contents Tabs ', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'return_value' => 'show',
'default' => '',
'condition' => [
'type' => [ 'youtube', 'hosted', 'vimeo' ],
],
]
);
$repeater->start_controls_tabs( 'video_tabs' );
$repeater->start_controls_tab(
'inner_tab_1',
[
'label' => esc_html__( 'Tab #1', 'elementor-pro' ),
'condition' => [
'type' => [ 'youtube', 'hosted', 'vimeo' ],
'inner_tab_is_content_visible' => 'show',
],
]
);
$repeater->add_control(
'inner_tab_content_1',
[
'label' => '',
'type' => Controls_Manager::WYSIWYG,
'default' => '<p>' . esc_html__( 'Add some content for each one of your videos, like a description, transcript or external links.To add, remove or edit tab names, go to Tabs.', 'elementor-pro' ) . '</p>',
'condition' => [
'type' => [ 'youtube', 'hosted', 'vimeo' ],
'inner_tab_is_content_visible' => 'show',
],
]
);
$repeater->end_controls_tab();
$repeater->start_controls_tab(
'inner_tab_2',
[
'label' => esc_html__( 'Tab #2', 'elementor-pro' ),
'condition' => [
'type' => [ 'youtube', 'hosted', 'vimeo' ],
'inner_tab_is_content_visible' => 'show',
],
]
);
$repeater->add_control(
'inner_tab_content_2',
[
'label' => '',
'type' => Controls_Manager::WYSIWYG,
'condition' => [
'type' => [ 'youtube', 'hosted', 'vimeo' ],
'inner_tab_is_content_visible' => 'show',
],
]
);
$repeater->end_controls_tab();
$repeater->end_controls_tabs();
$this->add_control(
'tabs',
[
'label' => esc_html__( 'Playlist Items', 'elementor-pro' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'title' => esc_html__( 'Sample Video', 'elementor-pro' ),
'youtube_url' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
'duration' => '0:16',
'thumbnail' => [ 'url' => 'https://img.youtube.com/vi/XHOmBV4js_E/maxresdefault.jpg' ],
],
[
'title' => esc_html__( 'Sample Video', 'elementor-pro' ),
'youtube_url' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
'duration' => '0:16',
'thumbnail' => [ 'url' => 'https://img.youtube.com/vi/XHOmBV4js_E/maxresdefault.jpg' ],
],
[
'title' => esc_html__( 'Sample Video', 'elementor-pro' ),
'youtube_url' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
'duration' => '0:16',
'thumbnail' => [ 'url' => 'https://img.youtube.com/vi/XHOmBV4js_E/maxresdefault.jpg' ],
],
],
'frontend_available' => true,
'title_field' => '{{{ title }}}',
'separator' => 'before',
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_inner_tab',
[
'label' => esc_html__( 'Tabs', 'elementor-pro' ),
]
);
$this->add_control(
'inner_tab_title_1',
[
'label' => esc_html__( 'Tab 1 Name', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Tab #1', 'elementor-pro' ),
'dynamic' => [
'active' => true,
],
'ai' => [
'active' => false,
],
'placeholder' => esc_html__( 'Name', 'elementor-pro' ),
'frontend_available' => true,
]
);
$this->add_control(
'inner_tab_title_2',
[
'label' => esc_html__( 'Tab 2 Name', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Tab #2', 'elementor-pro' ),
'dynamic' => [
'active' => true,
],
'ai' => [
'active' => false,
],
'placeholder' => esc_html__( 'Name', 'elementor-pro' ),
'frontend_available' => true,
]
);
$this->add_control(
'inner_tab_is_content_collapsible',
[
'label' => esc_html__( 'Collapsible', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'return_value' => 'collapsible',
'default' => '',
'separator' => 'before',
'frontend_available' => true,
]
);
$this->add_control(
'inner_tab_label_show_more',
[
'label' => esc_html__( 'Read More Label', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'ai' => [
'active' => false,
],
'placeholder' => esc_html__( 'Show More', 'elementor-pro' ),
'default' => esc_html__( 'Show More', 'elementor-pro' ),
'condition' => [
'inner_tab_is_content_collapsible' => 'collapsible',
],
]
);
$this->add_control(
'inner_tab_label_show_less',
[
'label' => esc_html__( 'Read Less Label', 'elementor-pro' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'ai' => [
'active' => false,
],
'placeholder' => esc_html__( 'Show Less', 'elementor-pro' ),
'default' => esc_html__( 'Show Less', 'elementor-pro' ),
'condition' => [
'inner_tab_is_content_collapsible' => 'collapsible',
],
]
);
$this->add_responsive_control(
'inner_tab_collapsible_height',
[
'label' => esc_html__( 'Height', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
'default' => [
'size' => 54,
],
'range' => [
'px' => [
'min' => 50,
'max' => 500,
],
'em' => [
'min' => 5,
'max' => 50,
],
'rem' => [
'min' => 5,
'max' => 50,
],
],
'render_type' => 'template',
'selectors' => [
'{{WRAPPER}} .e-inner-tabs-content-wrapper .collapsible .e-inner-tab-text' => 'height: {{SIZE}}{{UNIT}};',
],
'condition' => [
'inner_tab_is_content_collapsible' => 'collapsible',
],
'frontend_available' => true,
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_image_overlay',
[
'label' => esc_html__( 'Image Overlay', 'elementor-pro' ),
]
);
$this->add_control(
'show_image_overlay',
[
'label' => esc_html__( 'Image Overlay', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
]
);
$this->add_control(
'image_overlay',
[
'label' => esc_html__( 'Choose Image', 'elementor-pro' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'dynamic' => [
'active' => true,
],
'condition' => [
'show_image_overlay' => 'yes',
],
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'image_overlay',
'default' => 'full',
'condition' => [
'show_image_overlay' => 'yes',
],
]
);
$this->add_control(
'show_play_icon',
[
'label' => esc_html__( 'Play Icon', 'elementor-pro' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon',
'default' => [
'value' => 'far fa-play-circle',
'library' => 'fa-regular',
],
'label_block' => false,
'skin' => 'inline',
'condition' => [
'show_image_overlay' => 'yes',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_additional_options',
[
'label' => esc_html__( 'Additional Options', 'elementor-pro' ),
]
);
$this->add_control(
'heading_autoplay',
[
'label' => esc_html__( 'Autoplay', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'autoplay_on_load',
[
'label' => esc_html__( 'On Load', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'frontend_available' => true,
]
);
$this->add_control(
'autoplay_next',
[
'label' => esc_html__( 'Next Up', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'frontend_available' => true,
]
);
$this->add_control(
'show_watched_indication',
[
'label' => esc_html__( 'Indicate Watched', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'separator' => 'before',
'frontend_available' => true,
]
);
$this->add_control(
'show_video_count',
[
'label' => esc_html__( 'Video Count', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'default' => 'yes',
]
);
$this->add_control(
'show_duration',
[
'label' => esc_html__( 'Duration', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'default' => 'yes',
]
);
$this->add_control(
'show_thumbnail',
[
'label' => esc_html__( 'Thumbnails', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'elementor-pro' ),
'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
'default' => 'yes',
]
);
$this->add_control(
'play_icon',
[
'label' => esc_html__( 'Play Icon', 'elementor-pro' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon',
'default' => [
'value' => 'fas fa-play-circle',
'library' => 'fa-solid',
],
'label_block' => false,
'skin' => 'inline',
]
);
$this->add_control(
'watched_icon',
[
'label' => esc_html__( 'Watched Icon', 'elementor-pro' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon',
'default' => [
'value' => 'fas fa-check-circle',
'library' => 'fa-solid',
],
'label_block' => false,
'skin' => 'inline',
]
);
$this->add_control(
'lazy_load',
[
'label' => esc_html__( 'Lazy Load', 'elementor-pro' ),
'type' => Controls_Manager::SWITCHER,
'separator' => 'before',
'frontend_available' => true,
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_layout',
[
'label' => esc_html__( 'Layout', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'tabs_alignment',
[
'label' => esc_html__( 'Video Position', 'elementor-pro' ),
'type' => Controls_Manager::CHOOSE,
'default' => 'end',
'options' => [
'start' => [
'title' => esc_html__( 'Start', 'elementor-pro' ),
'icon' => "eicon-h-align-$start",
],
'end' => [
'title' => esc_html__( 'End', 'elementor-pro' ),
'icon' => "eicon-h-align-$end",
],
],
'prefix_class' => 'elementor-layout-',
]
);
$this->add_responsive_control(
'layout_height',
[
'label' => esc_html__( 'Height', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
'range' => [
'px' => [
'min' => 200,
'max' => 1200,
],
'em' => [
'min' => 20,
'max' => 120,
],
'rem' => [
'min' => 20,
'max' => 120,
],
],
'selectors' => [
'{{WRAPPER}} .e-tabs .e-tabs-main-area' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_top_bar',
[
'label' => esc_html__( 'Top Bar', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'heading_playlist_name',
[
'label' => esc_html__( 'Playlist Name', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'playlist_name_background',
[
'label' => esc_html__( 'Background', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'playlist_name_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header .e-tabs-title' => 'color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'playlist_name_typography',
'selector' => '{{WRAPPER}} .e-tabs-header .e-tabs-title',
]
);
$this->add_control(
'heading_videos_amount',
[
'label' => esc_html__( 'Video Count', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'videos_amount_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header .e-tabs-videos-count' => 'color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header .e-tabs-header-right-side i' => 'color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header .e-tabs-header-right-side svg' => 'fill: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'videos_amount_typography',
'selector' => '{{WRAPPER}} .e-tabs-header .e-tabs-videos-count',
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_style_videos',
[
'label' => esc_html__( 'Videos', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->start_controls_tabs( 'playlist_tabs' );
$this->start_controls_tab(
'playlist_tabs_normal',
[
'label' => esc_html__( 'Normal', 'elementor-pro' ),
]
);
$this->add_control(
'heading_tab_normal',
[
'label' => esc_html__( 'Item', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'normal_background',
[
'label' => esc_html__( 'Background', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items .e-tab-title:not(:where( .e-active ))' => 'background-color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-wrapper .e-tabs-items-wrapper' => 'background-color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-wrapper .e-tabs-items-wrapper .shadow-bottom' => 'background: linear-gradient(180deg, transparent 0%, {{VALUE}} 100%)',
'{{WRAPPER}} .e-tabs-wrapper .e-tabs-items-wrapper .shadow-top' => 'background: linear-gradient(0deg, transparent 0%, {{VALUE}} 100%);',
],
]
);
$this->add_control(
'normal_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items .e-tab-title .e-tab-title-text' => 'color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-items .e-tab-title .e-tab-title-text a' => 'color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'normal_typography',
'selector' => '{{WRAPPER}} .e-tabs-items .e-tab-title .e-tab-title-text',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_TEXT,
],
]
);
$this->add_control(
'heading_duration_normal',
[
'label' => esc_html__( 'Duration', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'normal_duration_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items .e-tab-title .e-tab-duration' => 'color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'normal_duration_typography',
'selector' => '{{WRAPPER}} .e-tab-title .e-tab-duration',
]
);
$this->add_control(
'heading_icon_normal',
[
'label' => esc_html__( 'Icon', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'normal_icon_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title i' => 'color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title svg' => 'fill: {{VALUE}};',
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title svg path' => 'fill: {{VALUE}};',
],
]
);
// Default shadow values for the icon.
$this->add_group_control(
Group_Control_Text_Shadow::get_type(),
[
'name' => 'normal_icon_top_text_shadow',
'fields_options' => [
'text_shadow_type' => [
'label' => _x( 'Shadow', 'Text Shadow Control', 'elementor-pro' ),
],
'text_shadow' => [
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title i' => 'text-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}};',
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title svg' => 'filter: drop-shadow({{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}});',
],
],
],
]
);
$this->add_responsive_control(
'normal_icon_size',
[
'label' => esc_html__( 'Size', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'min' => 10,
'max' => 30,
],
'em' => [
'min' => 1,
'max' => 3,
],
'rem' => [
'min' => 1,
'max' => 3,
],
],
'selectors' => [
'{{WRAPPER}}' => '--playlist-item-icon-size: {{SIZE}}{{UNIT}}',
],
]
);
$this->add_control(
'heading_separator_normal',
[
'label' => esc_html__( 'Separator', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'normal_separator_style',
[
'label' => esc_html__( 'Style', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => '',
'options' => [
'' => esc_html__( 'None', 'elementor-pro' ),
'solid' => _x( 'Solid', 'Border Control', 'elementor-pro' ),
'double' => _x( 'Double', 'Border Control', 'elementor-pro' ),
'dotted' => _x( 'Dotted', 'Border Control', 'elementor-pro' ),
'dashed' => _x( 'Dashed', 'Border Control', 'elementor-pro' ),
'groove' => _x( 'Groove', 'Border Control', 'elementor-pro' ),
],
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title' => 'border-style: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'normal_separator_weight',
[
'label' => esc_html__( 'Weight', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'max' => 10,
],
'em' => [
'max' => 1,
],
'rem' => [
'max' => 1,
],
],
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title' => 'border-width: 0 0 {{SIZE}}{{UNIT}} 0;',
],
'condition' => [
'normal_separator_style!' => '',
],
]
);
$this->add_control(
'normal_separator_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title' => 'border-color: {{VALUE}};',
],
'condition' => [
'normal_separator_style!' => '',
],
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'playlist_tabs_active',
[
'label' => esc_html__( 'Active', 'elementor-pro' ),
]
);
$this->add_control(
'heading_tab_active',
[
'label' => esc_html__( 'Item', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'active_background',
[
'label' => esc_html__( 'Background', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover )' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'active_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'default' => '#556068',
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-title-text' => 'color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-title-text a' => 'color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'active_typography',
'selector' => '{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-title-text',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_TEXT,
],
]
);
$this->add_control(
'heading_duration_active',
[
'label' => esc_html__( 'Duration', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'active_duration_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-duration' => 'color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'active_duration_typography',
'selector' => '{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-duration',
]
);
$this->add_control(
'heading_icon_active',
[
'label' => esc_html__( 'Icon', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'active_icon_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) i' => 'color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) svg' => 'color: {{VALUE}};',
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) svg path' => 'fill: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Text_Shadow::get_type(),
[
'name' => 'active_icon_top_text_shadow',
'fields_options' => [
'text_shadow_type' => [
'label' => _x( 'Shadow', 'Text Shadow Control', 'elementor-pro' ),
],
],
'selector' => '{{WRAPPER}} .e-tab-title:where( .e-active, :hover ) i, {{WRAPPER}} .e-tab-title:where( .e-active, :hover ) svg',
]
);
$this->add_responsive_control(
'active_icon_size',
[
'label' => esc_html__( 'Size', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'min' => 10,
'max' => 30,
],
'em' => [
'min' => 1,
'max' => 3,
],
'rem' => [
'min' => 1,
'max' => 3,
],
],
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) span i' => 'font-size: {{SIZE}}{{UNIT}}',
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) span svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'heading_separator_active',
[
'label' => esc_html__( 'Separator', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'active_separator_style',
[
'label' => esc_html__( 'Style', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => '',
'options' => [
'' => esc_html__( 'None', 'elementor-pro' ),
'solid' => _x( 'Solid', 'Border Control', 'elementor-pro' ),
'double' => _x( 'Double', 'Border Control', 'elementor-pro' ),
'dotted' => _x( 'Dotted', 'Border Control', 'elementor-pro' ),
'dashed' => _x( 'Dashed', 'Border Control', 'elementor-pro' ),
'groove' => _x( 'Groove', 'Border Control', 'elementor-pro' ),
],
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title.e-active' => 'border-style: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'active_separator_weight',
[
'label' => esc_html__( 'Weight', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'max' => 10,
],
'em' => [
'max' => 1,
],
'rem' => [
'max' => 1,
],
],
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title.e-active' => 'border-width: 0 0 {{SIZE}}{{UNIT}} 0;',
],
'condition' => [
'active_separator_style!' => '',
],
]
);
$this->add_control(
'active_separator_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title.e-active' => 'border-color: {{VALUE}};',
],
'condition' => [
'active_separator_style!' => '',
],
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
$this->start_controls_section(
'section_style_sections',
[
'label' => esc_html__( 'Sections', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'heading_section',
[
'label' => esc_html__( 'Section', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'section_background',
[
'label' => esc_html__( 'Background', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'section_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'section_typography',
'selector' => '{{WRAPPER}} .e-tabs-items-wrapper .e-section-title',
]
);
$this->add_control(
'section_border_type',
[
'label' => esc_html__( 'Border Type', 'elementor-pro' ),
'type' => Controls_Manager::SELECT,
'default' => 'solid',
'options' => [
'' => esc_html__( 'None', 'elementor-pro' ),
'solid' => _x( 'Solid', 'Border Control', 'elementor-pro' ),
'double' => _x( 'Double', 'Border Control', 'elementor-pro' ),
'dotted' => _x( 'Dotted', 'Border Control', 'elementor-pro' ),
'dashed' => _x( 'Dashed', 'Border Control', 'elementor-pro' ),
'groove' => _x( 'Groove', 'Border Control', 'elementor-pro' ),
],
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'border-style: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'section_border_width',
[
'label' => esc_html__( 'Width', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'section_border_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'border-color: {{VALUE}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_inner_tab_style',
[
'label' => esc_html__( 'Tabs', 'elementor-pro' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'inner_tab_border_width',
[
'label' => esc_html__( 'Border Width', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'range' => [
'px' => [
'max' => 20,
],
'em' => [
'max' => 2,
],
'rem' => [
'max' => 2,
],
],
'selectors' => [
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper' => '--inner-tabs-border-height: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title.e-inner-tab-active' => 'border-width: 0 0 {{SIZE}}{{UNIT}} 0;',
],
]
);
$this->add_control(
'inner_tab_border_color',
[
'label' => esc_html__( 'Border Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper' => '--inner-tabs-border-color: {{VALUE}};',
],
]
);
$this->add_control(
'inner_tab_background_color',
[
'label' => esc_html__( 'Background Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-active' => 'background-color: {{VALUE}};',
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content' => 'background-color: {{VALUE}};',
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-title' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'heading_inner_tab_title',
[
'label' => esc_html__( 'Title', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'inner_tab_title_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title a' => 'color: {{VALUE}};',
],
]
);
$this->add_control(
'inner_tab_active_title_color',
[
'label' => esc_html__( 'Active Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title.e-inner-tab-active a' => 'color: {{VALUE}};',
'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title.e-inner-tab-active' => 'border-color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'inner_tab_title_typography',
'selector' => '{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title a',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_TEXT,
],
]
);
$this->add_control(
'heading_inner_tab_content',
[
'label' => esc_html__( 'Content', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'inner_tab_content_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content .e-inner-tab-text' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'inner_tab_content_typography',
'selector' => '{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content .e-inner-tab-text',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_TEXT,
],
]
);
$this->add_responsive_control(
'inner_tab_content_padding',
[
'label' => esc_html__( 'Padding', 'elementor-pro' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'heading_inner_tab_show_more',
[
'label' => esc_html__( 'Show More', 'elementor-pro' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->start_controls_tabs( 'inner_tab_show_more_color' );
$this->start_controls_tab(
'inner_tab_normal_show_more',
[
'label' => esc_html__( 'Normal', 'elementor-pro' ),
]
);
$this->add_control(
'inner_tab_normal_show_more_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content button' => 'color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'inner_tab_hover_show_more',
[
'label' => esc_html__( 'Hover', 'elementor-pro' ),
]
);
$this->add_control(
'inner_tab_hover_show_more_color',
[
'label' => esc_html__( 'Color', 'elementor-pro' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content button:hover' => 'color: {{VALUE}};',
],
'global' => [
'default' => Global_Colors::COLOR_TEXT,
],
]
);
$this->add_control(
'inner_tab_hover_show_more_color_transition_duration',
[
'label' => esc_html__( 'Transition Duration', 'elementor-pro' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 's', 'ms', 'custom' ],
'default' => [
'unit' => 'ms',
],
'selectors' => [
'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content button' => 'transition-duration: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'inner_tab_show_more_typography',
'selector' => '{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content button',
'global' => [
'default' => Global_Typography::TYPOGRAPHY_ACCENT,
],
]
);
$this->end_controls_section();
}
private function create_playlist_item_tabs_array( $playlist_item, $playlist_item_index, $tab_1_title, $tab_2_title ) {
$playlist_item_tabs_array = [];
$is_already_activated_tab = false;
$playlist_item_tabs_content = [
$playlist_item['inner_tab_content_1'],
$playlist_item['inner_tab_content_2'],
];
$playlist_item_tabs_title = [
$tab_1_title,
$tab_2_title,
];
foreach ( $playlist_item_tabs_content as $index => $playlist_item_tab_content ) {
$playlist_item_tab_content_object = new \stdClass();
$playlist_item_tab_content_object->tab_title = $playlist_item_tabs_title[ $index ];
$playlist_item_tab_content_object->tab_content = $playlist_item_tab_content;
$tab_index = $index + 1;
$playlist_item_tab_content_object->tab_content_setting_key = $this->get_repeater_setting_key( 'inner_tab_content_' . $tab_index, 'tabs', $playlist_item_index );
if ( $playlist_item_tab_content ) {
$playlist_item_tab_content_object->tab_attribute = ! $is_already_activated_tab ? '' : 'hidden';
$playlist_item_tab_content_object->tab_class = ! $is_already_activated_tab ? 'e-inner-tab-active' : '';
$is_already_activated_tab = true;
}
$playlist_item_tabs_array [] = $playlist_item_tab_content_object;
}
return $playlist_item_tabs_array;
}
private function create_playlist_item_video_attributes( $index, $id_int, $playlist_item, $video_url = '' ) {
$html_attributes_object = new \stdClass();
$tab_count = $index + 1;
// The first tab will be activated and not hidden like the second tab.
$hidden = 1 === $tab_count ? false : 'hidden';
$html_attributes_object->attributes = [
'id' => 'e-tab-content-' . $id_int . $tab_count,
'class' => [ 'e-tab-content', 'elementor-clearfix' ],
'data-tab' => $tab_count,
'role' => 'tabpanel',
'aria-labelledby' => 'e-tab-title-' . $id_int . $tab_count,
'tabindex' => '0',
'data-video-url' => $video_url,
'data-video-type' => $playlist_item['type'],
'data-video-title' => $playlist_item['title'],
'data-video-duration' => $playlist_item['duration'],
];
if ( $hidden ) {
$html_attributes_object->attributes['hidden'] = $hidden;
}
return $html_attributes_object;
}
private function create_playlist_item_title_attributes( $index, $id_int ) {
$html_attributes_object = new \stdClass();
$tab_count = $index + 1;
$html_attributes_object->attributes = [
'id' => 'e-tab-title-' . $id_int . $tab_count,
'class' => [ 'e-tab-title', 'e-tab-desktop-title' ],
'aria-selected' => 1 === $tab_count ? 'true' : 'false',
'data-tab' => $tab_count,
'role' => 'tab',
'tabindex' => 1 === $tab_count ? '0' : '-1',
'aria-controls' => 'e-tab-content-' . $id_int . $tab_count,
];
return $html_attributes_object;
}
private function create_playlist_items_array( $playlist_items ) {
$playlist_items_array = [];
$id_int = substr( $this->get_id_int(), 0, 3 );
foreach ( $playlist_items as $index => $playlist_item ) {
$playlist_item_object = new \stdClass();
$playlist_item_object->video_url = '';
$playlist_item_object->show_overlay_image = false;
$playlist_item_object->is_inner_tabs_visible = $playlist_item['inner_tab_is_content_visible'];
switch ( $playlist_item['type'] ) {
case 'youtube':
case 'vimeo':
case 'hosted':
$playlist_item_object->type = $playlist_item['type'];
$playlist_item_object->video_title = $playlist_item['title'];
$playlist_item_object->video_html_tag = Utils::validate_html_tag( $playlist_item['video_html_tag'] );
if ( $playlist_item['youtube_url'] && 'youtube' === $playlist_item['type'] ) {
$playlist_item_object->video_url = $playlist_item['youtube_url'];
} elseif ( $playlist_item['vimeo_url'] && 'vimeo' === $playlist_item['type'] ) {
$playlist_item_object->video_url = $playlist_item['vimeo_url'];
} elseif ( $playlist_item['external_url'] && 'hosted' === $playlist_item['type'] && 'yes' === $playlist_item['is_external_url'] ) {
$playlist_item_object->video_url = $playlist_item['external_url']['url'];
} elseif ( $playlist_item['hosted_url'] && 'hosted' === $playlist_item['type'] && 'yes' !== $playlist_item['is_external_url'] ) {
$playlist_item_object->video_url = $playlist_item['hosted_url']['url'];
}
$playlist_item_object->tab_collapsible = $this->get_settings_for_display( 'inner_tab_is_content_collapsible' );
$playlist_item_object->read_more_label = $this->get_settings_for_display( 'inner_tab_label_show_more' );
$playlist_item_object->read_less_label = $this->get_settings_for_display( 'inner_tab_label_show_less' );
$playlist_item_object->video_duration = '';
if ( $this->get_settings_for_display( 'show_duration' ) ) {
$playlist_item_object->video_duration = $playlist_item['duration'];
}
$playlist_item_object->video_thumbnail = '';
if ( $this->get_settings_for_display( 'show_thumbnail' ) ) {
$playlist_item_object->video_thumbnail = $playlist_item['thumbnail']['url'];
}
$playlist_item_object->html_attributes_title = $this->create_playlist_item_title_attributes( $index, $id_int );
$playlist_item_object->tabs = [];
if ( $playlist_item['inner_tab_content_1'] || $playlist_item['inner_tab_content_2'] ) {
$tab_1_title = $this->get_settings_for_display( 'inner_tab_title_1' );
$tab_2_title = $this->get_settings_for_display( 'inner_tab_title_2' );
if ( $playlist_item_object->is_inner_tabs_visible ) {
$playlist_item_object->tabs = $this->create_playlist_item_tabs_array( $playlist_item, $index, $tab_1_title, $tab_2_title );
}
}
if ( 0 === $index && 'yes' !== $this->get_settings_for_display( 'autoplay_on_load' ) && $this->get_settings_for_display( 'show_image_overlay' ) ) {
$playlist_item_object->show_overlay_image = true;
}
break;
case 'section':
$playlist_item_object->type = $playlist_item['type'];
$playlist_item_object->section_title = $playlist_item['title'];
$playlist_item_object->section_html_tag = Utils::validate_html_tag( $playlist_item['section_html_tag'] );
$playlist_item_object->video_title = '';
break;
}
$playlist_item_object->html_attributes_video = $this->create_playlist_item_video_attributes( $index, $id_int, $playlist_item, $playlist_item_object->video_url );
$playlist_items_array [] = $playlist_item_object;
}
return $playlist_items_array;
}
private function count_video_items( $playlist_items ) {
$filtered_playlist_items = $playlist_items;
foreach ( $filtered_playlist_items as $key => $tab ) {
if ( 'section' === $tab['type'] ) {
unset( $filtered_playlist_items[ $key ] );
}
}
return count( $filtered_playlist_items );
}
private function prepare_video_playlist_data_object() {
$settings = $this->get_settings_for_display();
$playlist_items = $settings['tabs'];
$playlist_object = new \stdClass();
$playlist_object->playlist_name = $settings['playlist_title'];
$playlist_object->playlist_title_tag = Utils::validate_html_tag( $settings['playlist_title_tag'] );
$playlist_object->is_show_video_count = $settings['show_video_count'];
if ( $playlist_object->is_show_video_count ) {
$playlist_object->video_count = $this->count_video_items( $playlist_items );
}
$playlist_object->show_thumbnails = $settings['show_thumbnail'];
$playlist_object->play_icon = $settings['play_icon'];
$playlist_object->watched_icon = $settings['watched_icon'];
$playlist_object->playlist_items = $this->create_playlist_items_array( $playlist_items );
$playlist_object->is_image_overlay = $settings['show_image_overlay'];
$playlist_object->image_overlay_icon = $settings['show_play_icon'];
$image_overlay = $settings['image_overlay'];
if ( ! empty( $image_overlay['url'] ) ) {
$playlist_object->image_overlay_image = Group_Control_Image_Size::get_attachment_image_src( $image_overlay['id'], 'image_overlay', $settings );
if ( ! $playlist_object->image_overlay_image[1] ) {
$playlist_object->image_overlay_image = $image_overlay['url'];
}
}
return $playlist_object;
}
protected function render() {
$playlist_object = $this->prepare_video_playlist_data_object();
?>
<div class="e-tabs">
<div class="e-tabs-main-area">
<div class="e-tabs-wrapper">
<div class="e-tabs-header">
<<?php Utils::print_validated_html_tag( $playlist_object->playlist_title_tag ); ?> class="e-tabs-title"><?php
// PHPCS - the main text of a widget should not be escaped.
echo $playlist_object->playlist_name; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?></<?php Utils::print_validated_html_tag( $playlist_object->playlist_title_tag ); ?>>
<div class="e-tabs-header-right-side">
<?php if ( $playlist_object->is_show_video_count ) : ?>
<span class="e-tabs-videos-count"><?php echo esc_attr( $playlist_object->video_count ); ?> <?php echo esc_html__( 'Videos', 'elementor-pro' ); ?></span>
<?php endif; ?>
<?php
Icons_Manager::render_icon(
[
'library' => 'eicons',
'value' => 'eicon-caret-down',
],
[
'aria-hidden' => 'true',
'class' => [
'e-tabs-toggle-videos-display-button',
'rotate-down',
],
]
);
?>
</div>
</div>
<div class="e-tabs-items-wrapper">
<div class="e-tabs-items" role="tablist">
<?php
foreach ( $playlist_object->playlist_items as $item ) : ?>
<?php if ( 'section' === $item->type ) : ?>
<<?php Utils::print_validated_html_tag( $item->section_html_tag ); ?> class="e-section-title"><?php
// PHPCS - the main text of a widget should not be escaped.
echo $item->section_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?></<?php Utils::print_validated_html_tag( $item->section_html_tag ); ?>>
<?php else : ?>
<div <?php Utils::print_html_attributes( $item->html_attributes_title->attributes ); ?>>
<?php if ( $playlist_object->show_thumbnails ) : ?>
<div class="e-tab-thumbnail">
<?php if ( $item->video_thumbnail ) : ?>
<img src="<?php echo esc_url( $item->video_thumbnail ); ?>" alt="<?php echo esc_attr( $item->video_title ); ?>" loading="lazy" />
<?php endif; ?>
<span class="icon-play"><?php Icons_Manager::render_icon( $playlist_object->play_icon, [ 'aria-hidden' => 'true' ] ); ?></span>
<span class="icon-watched"><?php Icons_Manager::render_icon( $playlist_object->watched_icon, [ 'aria-hidden' => 'true' ] ); ?></span>
</div>
<?php else : ?>
<span class="icon-play"><?php Icons_Manager::render_icon( $playlist_object->play_icon, [ 'aria-hidden' => 'true' ] ); ?></span>
<span class="icon-watched"><?php Icons_Manager::render_icon( $playlist_object->watched_icon, [ 'aria-hidden' => 'true' ] ); ?></span>
<?php endif; ?>
<<?php Utils::print_validated_html_tag( $item->video_html_tag ); ?> class="e-tab-title-text">
<a tabindex="0"><?php
// PHPCS - the main text of a widget should not be escaped.
echo $item->video_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?></a>
</<?php Utils::print_validated_html_tag( $item->video_html_tag ); ?>>
<?php if ( $item->video_duration ) : ?>
<span class="e-tab-duration"><?php echo esc_html( $item->video_duration ); ?></span>
<?php endif; ?>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<div class="shadow shadow-top" aria-hidden="true"></div>
<div class="shadow shadow-bottom" aria-hidden="true"></div>
</div>
</div>
<div class="e-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
<?php foreach ( $playlist_object->playlist_items as $item ) : ?>
<div <?php Utils::print_html_attributes( $item->html_attributes_video->attributes ); ?>>
<div></div>
<?php if ( $item->show_overlay_image ) : ?>
<div class="elementor-custom-embed-image-overlay elementor-clickable" style="background-image: url('<?php echo esc_url( $playlist_object->image_overlay_image ); ?>');">
<?php if ( ! empty( $playlist_object->image_overlay_icon['value'] ) ) : ?>
<div class="elementor-custom-embed-play" role="button" tabindex="0" aria-label="<?php echo esc_attr__( 'Play Video', 'elementor-pro' ); ?>">
<?php Icons_Manager::render_icon( $playlist_object->image_overlay_icon, [ 'aria-hidden' => 'true' ] ); ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="e-tabs-inner-tabs" >
<?php foreach ( $playlist_object->playlist_items as $item ) : ?>
<?php if ( $item->is_inner_tabs_visible ) : ?>
<div <?php Utils::print_html_attributes( $item->html_attributes_video->attributes ); ?>>
<?php if ( count( $item->tabs ) > 0 ) : ?>
<div class="e-inner-tabs-wrapper">
<?php foreach ( $item->tabs as $tab ) :
if ( $tab->tab_content ) { ?>
<div class="e-inner-tab-title <?php Utils::print_unescaped_internal_string( $tab->tab_class ); ?>">
<a class="e-inner-tab-title-text" tabindex="0"><?php Utils::print_unescaped_internal_string( $tab->tab_title ); ?></a>
</div>
<?php } ?>
<?php endforeach; ?>
</div>
<div class="e-inner-tabs-content-wrapper">
<?php foreach ( $item->tabs as $tab ) :
if ( $tab->tab_content ) { ?>
<div class="e-inner-tab-title e-tab-mobile-title <?php Utils::print_unescaped_internal_string( $tab->tab_class ); ?>">
<?php // PHPCS - the main text of a widget should not be escaped. ?>
<?php echo $tab->tab_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<div <?php Utils::print_unescaped_internal_string( $tab->tab_attribute ); ?> class="e-inner-tab-content <?php Utils::print_unescaped_internal_string( $tab->tab_class ); ?> <?php echo esc_attr( $item->tab_collapsible ); ?>">
<div class="e-inner-tab-text">
<?php $this->add_inline_editing_attributes( $tab->tab_content_setting_key, 'advanced' ); ?>
<div <?php $this->print_render_attribute_string( $tab->tab_content_setting_key ); ?>>
<?php // PHPCS - the main text of a widget should not be escaped. ?>
<?php echo $this->parse_text_editor( $tab->tab_content ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
</div>
<div class="e-inner-tab-buttons">
<?php // PHPCS - the main text of a widget should not be escaped. ?>
<button class="show-button"><?php echo $item->read_more_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></button>
<button><?php echo $item->read_less_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></button>
</div>
</div>
<?php } ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<?php
}
protected function content_template() {
?>
<#
function createPlaylistItemTabsArray( playlistItem, playlistItemIndex, tab1Title, tab2Title ) {
var playlistItemTabsArray = [];
var isAlreadyActivatedTab = false;
var playlistItemTabsContent = [
playlistItem.inner_tab_content_1,
playlistItem.inner_tab_content_2,
];
var playlistItemTabsTitle = [
tab1Title,
tab2Title,
];
playlistItemTabsContent.forEach( function( playlistItemTabContent, index ) {
var playlistItemTabContentObject = {};
playlistItemTabContentObject.tab_title = playlistItemTabsTitle[ index ];
playlistItemTabContentObject.tab_content = playlistItemTabContent;
var tabIndex = index + 1;
playlistItemTabContentObject.tabContentSettingKey = view.getRepeaterSettingKey( 'inner_tab_content_' + tabIndex, 'tabs', playlistItemIndex );
if ( playlistItemTabContent ) {
playlistItemTabContentObject.tabAttribute = ! isAlreadyActivatedTab ? '' : 'hidden';
playlistItemTabContentObject.tabClass = ! isAlreadyActivatedTab ? 'e-inner-tab-active' : '';
isAlreadyActivatedTab = true;
}
playlistItemTabsArray.push(playlistItemTabContentObject);
} );
return playlistItemTabsArray;
}
function createPlaylistItemVideoAttributes( index, id, playlistItem, videoUrl ) {
var videoUrl = videoUrl ? videoUrl : '';
var htmlAttributesObject = {};
var tabCount = index + 1;
// The first tab will be activated and not hidden like the second tab.
var hidden = 1 === tabCount ? false : 'hidden';
htmlAttributesObject.attributes = {
'id' : 'e-tab-content-' + id + tabCount,
'class' : [ 'e-tab-content', 'elementor-clearfix' ],
'data-tab' : tabCount,
'role' : 'tabpanel',
'aria-labelledby' : 'e-tab-title-' + id + tabCount,
'tabindex' : '0',
'data-video-url' : videoUrl,
'data-video-type' : playlistItem.type,
'data-video-title' : playlistItem.title,
'data-video-duration' : playlistItem.duration,
};
if ( hidden ) {
htmlAttributesObject.attributes.hidden = hidden;
}
return htmlAttributesObject;
}
function createPlaylistItemTitleAttributes( index, id ) {
var htmlAttributesObject = {};
var tabCount = index + 1;
htmlAttributesObject.attributes = {
'id' : 'e-tab-title-' + id + tabCount,
'class' : [ 'e-tab-title', 'e-tab-desktop-title' ],
'aria-selected' : 1 === tabCount ? 'true' : 'false',
'data-tab' : tabCount,
'role' : 'tab',
'tabindex' : 1 === tabCount ? '0' : '-1',
'aria-controls' : 'e-tab-content-' + id + tabCount,
};
return htmlAttributesObject;
}
function createPlaylistItemsArray( playlistItems ) {
var playlistItemsArray = [];
id = view.getIDInt().toString().substr( 0, 3 )
playlistItems.forEach( function( playlistItem, index ) {
var playlistItemObject = {};
playlistItemObject.videoUrl = '';
playlistItemObject.showOverlayImage = false;
playlistItemObject.isInnerTabsVisible = playlistItem.inner_tab_is_content_visible;
switch ( playlistItem.type ) {
case 'youtube':
case 'vimeo':
case 'hosted':
playlistItemObject.type = playlistItem.type;
playlistItemObject.videoTitle = playlistItem.title;
playlistItemObject.videoHtmlTag = elementor.helpers.validateHTMLTag( playlistItem.video_html_tag );
if ( playlistItem.youtube_url && 'youtube' === playlistItem.type ) {
playlistItemObject.videoUrl = playlistItem.youtube_url;
} else if ( playlistItem.vimeo_url && 'vimeo' === playlistItem.type ) {
playlistItemObject.videoUrl = playlistItem.vimeo_url;
} else if ( playlistItem.external_url && 'hosted' === playlistItem.type && 'yes' === playlistItem.is_external_url ) {
playlistItemObject.videoUrl = playlistItem.external_url.url;
} else if ( playlistItem.hosted_url && 'hosted' === playlistItem.type && 'yes' !== playlistItem.is_external_url ) {
playlistItemObject.videoUrl = playlistItem.hosted_url.url;
}
playlistItemObject.tabCollapsible = settings.inner_tab_is_content_collapsible;
playlistItemObject.readMoreLabel = settings.inner_tab_label_show_more;
playlistItemObject.readLessLabel = settings.inner_tab_label_show_less;
playlistItemObject.videoDuration = '';
if ( settings.show_duration ) {
playlistItemObject.videoDuration = playlistItem.duration;
}
playlistItemObject.videoThumbnail = '';
if ( settings.show_thumbnail ) {
playlistItemObject.videoThumbnail = playlistItem.thumbnail.url;
}
playlistItemObject.htmlAttributesTitle = createPlaylistItemTitleAttributes( index, id );
playlistItemObject.tabs = [];
if ( playlistItem.inner_tab_content_1 || playlistItem.inner_tab_content_2 ) {
var tab1Title = settings.inner_tab_title_1;
var tab2Title = settings.inner_tab_title_2;
if ( playlistItemObject.isInnerTabsVisible ) {
playlistItemObject.tabs = createPlaylistItemTabsArray( playlistItem, index, tab1Title, tab2Title );
}
}
if ( (0 === index) && (settings.autoplay_on_load !== 'yes') && settings.show_image_overlay ) {
playlistItemObject.showOverlayImage = true;
}
break;
case 'section':
playlistItemObject.type = playlistItem.type;
playlistItemObject.sectionTitle = playlistItem.title;
playlistItemObject.sectionHtmlTag = elementor.helpers.validateHTMLTag( playlistItem.section_html_tag );
playlistItemObject.isInnerTabsVisible = false;
break;
}
playlistItemObject.htmlAttributesVideo = createPlaylistItemVideoAttributes( index, id, playlistItem, elementor.helpers.sanitizeUrl( playlistItemObject.videoUrl ) );
playlistItemsArray.push(playlistItemObject);
} );
return playlistItemsArray;
}
function countVideoItems( playlistItems ) {
var filteredPlaylistItems = playlistItems.filter(function(playlistItem) {
return 'section' !== playlistItem.type
});
return filteredPlaylistItems.length;
}
function prepare_video_playlist_data_object() {
var playlistItems = settings.tabs
playlistObject = {};
playlistObject.playlistName = settings.playlist_title;
playlistObject.playlistNameHTMLTag = elementor.helpers.validateHTMLTag( settings.playlist_title_tag );
playlistObject.isShowVideoCount = settings.show_video_count;
if( playlistObject.isShowVideoCount ) {
playlistObject.videoCount = countVideoItems( playlistItems );
}
playlistObject.showThumbnails = settings.show_thumbnail;
playlistObject.playIcon = settings.play_icon;
playlistObject.watchedIcon = settings.watched_icon;
playlistObject.playlistItems = createPlaylistItemsArray( playlistItems );
playlistObject.isImageOverlay = !settings.autoplay_on_load && settings.show_image_overlay ? true : false;
playlistObject.imageOverlayIcon = settings.show_play_icon;
playlistObject.imageOverlayImage = '';
imageOverlay = settings.image_overlay;
if ( imageOverlay.url && settings.image_overlay.id && playlistObject.isImageOverlay ) {
var image_overlay_object = {
id: settings.image_overlay.id,
url: settings.image_overlay.url,
size: settings.image_overlay_size,
dimension: settings.image_overlay_custom_dimension,
model: view.getEditModel()
};
playlistObject.imageOverlayImage = elementor.imagesManager.getImageUrl( image_overlay_object );
} else {
playlistObject.imageOverlayImage = imageOverlay.url;
}
return playlistObject;
}
var playlistObject = prepare_video_playlist_data_object();
var watchedIconHTML = elementor.helpers.renderIcon( view, playlistObject.watchedIcon, { 'aria-hidden': true }, 'i' , 'object' );
var playIconHTML = elementor.helpers.renderIcon( view, playlistObject.playIcon, { 'aria-hidden': true }, 'i' , 'object' );
var overlayImagePlayIconHTML = elementor.helpers.renderIcon( view, playlistObject.imageOverlayIcon, { 'aria-hidden': true }, 'i' , 'object' );
#>
<div class="e-tabs" role="tablist" aria-orientation="vertical">
<div class="e-tabs-main-area">
<div class="e-tabs-wrapper">
<div class="e-tabs-header">
<{{ playlistObject.playlistNameHTMLTag }} class="e-tabs-title">
{{{ playlistObject.playlistName }}}
</{{ playlistObject.playlistNameHTMLTag }}>
<div class="e-tabs-header-right-side">
<# if ( playlistObject.isShowVideoCount ) { #>
<span class="e-tabs-videos-count">{{{ playlistObject.videoCount }}} Videos</span>
<# } #>
<i class="e-tabs-toggle-videos-display-button eicon-caret-down rotate-down" aria-hidden="true"></i>
</div>
</div>
<div class="e-tabs-items-wrapper">
<div class="e-tabs-items" role="tablist">
<# _.each( playlistObject.playlistItems, function( item, index ) { #>
<# if ( 'section' === item.type ) { #>
<{{ item.sectionHtmlTag }} class="e-section-title">
{{{ item.sectionTitle }}}
</{{ item.sectionHtmlTag }}>
<# } else { #>
<#
var tabTitleKey = item.htmlAttributesTitle.attributes.id;
view.addRenderAttribute(tabTitleKey, item.htmlAttributesTitle.attributes);
#>
<div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
<# if ( playlistObject.showThumbnails ) { #>
<div class="e-tab-thumbnail">
<# if ( item.videoThumbnail ) { #>
<img src="{{ item.videoThumbnail }}" />
<# } #>
<span class="icon-play">{{{ playIconHTML.value }}}</span>
<span class="icon-watched">{{{ watchedIconHTML.value }}}</span>
</div>
<# } else { #>
<span class="icon-play">{{{ playIconHTML.value }}}</span>
<span class="icon-watched">{{{ watchedIconHTML.value }}}</span>
<# } #>
<{{ item.videoHtmlTag }} class="e-tab-title-text">
<a tabindex="0">{{{ item.videoTitle }}}</a>
</{{ item.videoHtmlTag }}>
<# if ( item.videoDuration ) { #>
<span class="e-tab-duration">{{{ item.videoDuration }}}</span>
<# } #>
</div>
<# } #>
<# } ); #>
</div>
<div class="shadow shadow-top" aria-hidden="true"></div>
<div class="shadow shadow-bottom" aria-hidden="true"></div>
</div>
</div>
<div class="e-tabs-content-wrapper">
<# _.each( playlistObject.playlistItems, function( item, index ) { #>
<div class="e-tab-title e-tab-mobile-title" role="tab">{{{ item.title }}}</div>
<#
var tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs', index );
view.addRenderAttribute(tabContentKey, item.htmlAttributesVideo.attributes);
#>
<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>
<div></div>
<# if ( item.showOverlayImage ) { #>
<div class="elementor-custom-embed-image-overlay elementor-clickable" style="background-image: url( {{ playlistObject.imageOverlayImage }} );">
<# if ( playlistObject.imageOverlayIcon.value ) { #>
<div class="elementor-custom-embed-play" role="button">
{{{ overlayImagePlayIconHTML.value }}}
</div>
<# } #>
</div>
<# } #>
</div>
<# } ); #>
</div>
</div>
<div class="e-tabs-inner-tabs">
<# _.each( playlistObject.playlistItems, function( item, index ) { #>
<# if ( item.isInnerTabsVisible ) { #>
<#
var tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'inner-tabs', index );
view.addRenderAttribute(tabContentKey, item.htmlAttributesVideo.attributes);
#>
<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>
<# if ( item.tabs.length > 0 ) { #>
<div class="e-inner-tabs-wrapper">
<# _.each( item.tabs, function( tab ) { #>
<# if ( tab.tab_content ) { #>
<div class="e-inner-tab-title {{{ tab.tabClass }}}">
<a class="e-inner-tab-title-text" tabindex="0"> {{{ tab.tab_title }}} </a>
</div>
<# } #>
<# }); #>
</div>
<div class="e-inner-tabs-content-wrapper">
<# _.each( item.tabs, function( tab ) { #>
<div class="e-inner-tab-title e-tab-mobile-title {{{ tab.tabClass }}}">
{{{ tab.tab_title }}}
</div>
<div {{{ tab.tabAttribute }}} class="e-inner-tab-content {{{ tab.tabClass }}} {{{ item.tabCollapsible }}}">
<div class="e-inner-tab-text">
<# view.addInlineEditingAttributes( tab.tabContentSettingKey, 'advanced' ); #>
<div {{{ view.getRenderAttributeString( tab.tabContentSettingKey ) }}}>
{{{ tab.tab_content }}}
</div>
</div>
<div class="e-inner-tab-buttons">
<button class="show-button">{{{ item.readMoreLabel }}}</button>
<button>{{{ item.readLessLabel }}}</button>
</div>
</div>
<# } ); #>
</div>
<# } #>
</div>
<# } #>
<# } ); #>
</div>
</div>
<?php
}
}