Skip to content

Instantly share code, notes, and snippets.

@kaelri

kaelri/advanced-accordion.php

Created December 17, 2024 16:38
Show Gist options
  • Save kaelri/491fc0d3d63db5a3554d6b36ca6dbc95 to your computer and use it in GitHub Desktop.
Save kaelri/491fc0d3d63db5a3554d6b36ca6dbc95 to your computer and use it in GitHub Desktop.
Download ZIP
JupiterX <=> Elementor 3.26 Scheme Upgrade
Raw
advanced-accordion.php
<?php
namespace JupiterX_Core\Raven\Modules\Advanced_Accordion\Widgets;
defined( 'ABSPATH' ) || die();
use JupiterX_Core\Raven\Controls\Query;
use JupiterX_Core\Raven\Base\Base_Widget;
use Elementor\Icons_Manager;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors as Color;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography as Typo;
use JupiterX_Core\Raven\Controls\Group\Box_Style;
use Elementor\Plugin;
use JupiterX_Core\Raven\Utils;
use Elementor\Utils as ElementorUtils;
/**
* Advanced accordion widget.
*
* @since 3.0.0
*
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
* @SuppressWarnings(PHPMD.CouplingBetweenObjects)
*/
class Advanced_Accordion extends Base_Widget {
public function get_title() {
return esc_html__( 'Advanced Accordion', 'jupiterx-core' );
}
public function get_name() {
return 'raven-advanced-accordion';
}
public function get_icon() {
return 'raven-element-icon raven-element-icon-advanced-accordion';
}
protected function register_controls() {
$this->add_content_controls();
$this->add_style_controls();
}
private function add_content_controls() {
$this->content_items_section();
$this->content_settings_section();
}
private function add_style_controls() {
$this->style_accordion_container_controls();
$this->style_toggle_control_controls();
$this->style_toggle_controls();
$this->style_toggle_content_controls();
}
private function content_items_section() {
$this->start_controls_section(
'section_content_items',
[
'label' => esc_html__( 'Items', 'jupiterx-core' ),
]
);
$repeater = new Repeater();
$repeater->start_controls_tabs(
'item_tabs'
);
$repeater->start_controls_tab(
'item_content_tab',
[
'label' => esc_html__( 'Content', 'jupiterx-core' ),
]
);
$repeater->add_control(
'item_active',
[
'label' => esc_html__( 'Active', 'jupiterx-core' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'jupiterx-core' ),
'label_off' => esc_html__( 'No', 'jupiterx-core' ),
'return_value' => 'yes',
'default' => 'false',
]
);
$repeater->add_control(
'item_label',
[
'label' => esc_html__( 'Label', 'jupiterx-core' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'New Tab', 'jupiterx-core' ),
'dynamic' => [
'active' => true,
],
]
);
$repeater->add_control(
'item_content_type',
[
'label' => esc_html__( 'Content Type', 'jupiterx-core' ),
'type' => Controls_Manager::SELECT,
'default' => 'template',
'options' => [
'template' => esc_html__( 'Template', 'jupiterx-core' ),
'editor' => esc_html__( 'Editor', 'jupiterx-core' ),
],
'label_block' => 'true',
]
);
$repeater->add_control(
'item_content_template_id',
[
'label' => esc_html__( 'Choose Template', 'jupiterx-core' ),
'type' => 'raven_query',
'options' => [],
'label_block' => false,
'multiple' => false,
'query' => [
'source' => Query::QUERY_SOURCE_TEMPLATE,
'template_types' => [
'section',
],
],
'default' => false,
'condition' => [
'item_content_type' => 'template',
],
]
);
$repeater->add_control(
'item_content_editor_content',
[
'label' => esc_html__( 'Content', 'jupiterx-core' ),
'type' => Controls_Manager::WYSIWYG,
'default' => esc_html__( 'Tab Item Content', 'jupiterx-core' ),
'dynamic' => [
'active' => true,
],
'condition' => [
'item_content_type' => 'editor',
],
]
);
$repeater->end_controls_tab();
$repeater->start_controls_tab(
'item_icon_tab',
[
'label' => esc_html__( 'Icon', 'jupiterx-core' ),
]
);
$repeater->add_control(
'label_icon',
[
'label' => esc_html__( 'Label Icon', 'jupiterx-core' ),
'type' => Controls_Manager::ICONS,
'label_block' => false,
'skin' => 'inline',
'fa4compatibility' => 'item_icon',
]
);
$repeater->end_controls_tab();
$repeater->start_controls_tab(
'item_advanced_tab',
[
'label' => esc_html__( 'Advanced', 'jupiterx-core' ),
]
);
$repeater->add_control(
'item_content_id',
[
'label' => esc_html__( 'Custom CSS ID', 'jupiterx-core' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'description' => esc_html__( 'It should only contain dashes, underscores, letters, or numbers. Do not use spaces in the CSS ID. Each tab should have a different CSS ID', 'jupiterx-core' ),
]
);
$repeater->end_controls_tab();
$repeater->end_controls_tabs();
$this->add_control(
'items',
[
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'item_label' => esc_html__( 'Web Design Showcase', 'jupiterx-core' ),
'demo' => true,
'item_content_type' => 'editor',
'item_content_editor_content' => esc_html__( 'Sample Content.', 'jupiterx-core' ),
],
[
'item_active' => 'yes',
'item_label' => esc_html__( 'Graphic Design Showcase', 'jupiterx-core' ),
'demo' => true,
'item_content_type' => 'editor',
'item_content_editor_content' => esc_html__( 'We Pride ourselves in great work, ethic, integrity and end-result. Our company philosophy is to create the best.', 'jupiterx-core' ),
],
[
'item_label' => esc_html__( 'UI Design Experience', 'jupiterx-core' ),
'demo' => true,
'item_content_type' => 'editor',
'item_content_editor_content' => esc_html__( 'Sample Content.', 'jupiterx-core' ),
],
[
'item_label' => esc_html__( 'UX Design Experience', 'jupiterx-core' ),
'demo' => true,
'item_content_type' => 'editor',
'item_content_editor_content' => esc_html__( 'Sample Content.', 'jupiterx-core' ),
],
],
'title_field' => '{{{ item_label }}}',
]
);
$this->end_controls_section();
}
private function content_settings_section() {
$this->start_controls_section(
'content_settings',
[
'label' => esc_html__( 'Settings', 'jupiterx-core' ),
]
);
$this->add_control(
'collapsible',
[
'label' => esc_html__( 'Collapsible', 'jupiterx-core' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'jupiterx-core' ),
'label_off' => esc_html__( 'No', 'jupiterx-core' ),
'return_value' => 'yes',
'default' => 'false',
'frontend_available' => true,
]
);
$this->add_control(
'show_effect',
[
'label' => esc_html__( 'Effect', 'jupiterx-core' ),
'type' => Controls_Manager::SELECT,
'default' => 'none',
'options' => [
'none' => esc_html__( 'None', 'jupiterx-core' ),
'jx-ac-fade-in' => esc_html__( 'Fade', 'jupiterx-core' ),
'jx-ac-zoom-in' => esc_html__( 'Zoom In', 'jupiterx-core' ),
'jx-ac-slide-up' => esc_html__( 'Move Up', 'jupiterx-core' ),
'jx-ac-fade-in-bottom-right' => esc_html__( 'Fall Perspective', 'jupiterx-core' ),
],
'selectors' => [
'{{WRAPPER}} .jx-ac-active .jx-ac-content > div *' => 'animation: {{VALUE}} 800ms;',
],
]
);
$this->add_control(
'toggle_icon',
[
'label' => esc_html__( 'Toggle Icon', 'jupiterx-core' ),
'type' => Controls_Manager::ICONS,
'label_block' => false,
'separator' => 'before',
'skin' => 'inline',
'fa4compatibility' => 'item_icon',
'default' => [
'library' => 'solid',
'value' => 'fas fa-chevron-right',
],
]
);
$this->add_control(
'toggle_active_icon',
[
'label' => esc_html__( 'Toggle Active Icon', 'jupiterx-core' ),
'type' => Controls_Manager::ICONS,
'label_block' => false,
'skin' => 'inline',
'fa4compatibility' => 'item_icon',
'default' => [
'library' => 'solid',
'value' => 'fas fa-chevron-down',
],
]
);
$this->add_control(
'scroll_to_content',
[
'label' => esc_html__( 'Scrolling to the Content', 'jupiterx-core' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'jupiterx-core' ),
'label_off' => esc_html__( 'No', 'jupiterx-core' ),
'return_value' => 'yes',
'default' => 'false',
'separator' => 'before',
'frontend_available' => true,
]
);
$this->add_control(
'content_offset',
[
'label' => esc_html__( 'Scrolling offset (px)', 'jupiterx-core' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => 'px',
'size' => 0,
],
'condition' => [
'scroll_to_content' => 'yes',
],
'frontend_available' => true,
]
);
$this->add_control(
'scrolling_delay',
[
'label' => esc_html__( 'Scroll animation speed (ms)', 'jupiterx-core' ),
'type' => Controls_Manager::NUMBER,
'default' => 500,
'min' => 100,
'max' => 2000,
'step' => 10,
'condition' => [
'scroll_to_content' => 'yes',
],
'frontend_available' => true,
]
);
$this->add_control(
'item_html_tag',
[
'label' => esc_html__( 'Title HTML Tag', 'jupiterx-core' ),
'type' => Controls_Manager::SELECT,
'separator' => 'before',
'options' => [
'h1' => esc_html__( 'H1', 'jupiterx-core' ),
'h2' => esc_html__( 'H2', 'jupiterx-core' ),
'h3' => esc_html__( 'H3', 'jupiterx-core' ),
'h4' => esc_html__( 'H4', 'jupiterx-core' ),
'h5' => esc_html__( 'H5', 'jupiterx-core' ),
'h6' => esc_html__( 'H6', 'jupiterx-core' ),
'div' => esc_html__( 'div', 'jupiterx-core' ),
'span' => esc_html__( 'span', 'jupiterx-core' ),
'p' => esc_html__( 'p', 'jupiterx-core' ),
],
'default' => 'span',
]
);
$this->add_control(
'faq_schema',
[
'label' => esc_html__( 'FAQ Schema', 'jupiterx-core' ),
'type' => Controls_Manager::SWITCHER,
'description' => esc_html__( 'Adds Schema mark up to make the major search engines understand your content.', 'jupiterx-core' ),
]
);
$this->end_controls_section();
}
private function style_accordion_container_controls() {
$this->start_controls_section(
'style_accordion_container',
[
'label' => esc_html__( 'Accordion Container', 'jupiterx-core' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'container_background',
'types' => [ 'classic', 'gradient' ],
'selector' => '{{WRAPPER}} .jupiterx-advanced-accordion-inner-wrapper',
]
);
$this->add_responsive_control(
'container_padding',
[
'label' => esc_html__( 'Padding', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .jupiterx-advanced-accordion-inner-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'container_border',
'label' => esc_html__( 'Border', 'jupiterx-core' ),
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} .jupiterx-advanced-accordion-inner-wrapper',
]
);
$this->add_control(
'container_border_radius',
[
'label' => esc_html__( 'Border Radius', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .jupiterx-advanced-accordion-inner-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'container_shadow',
'selector' => '{{WRAPPER}} .jupiterx-advanced-accordion-inner-wrapper',
]
);
$this->end_controls_section();
}
private function style_toggle_control_controls() {
$this->start_controls_section(
'style_toggle_control',
[
'label' => esc_html__( 'Toggle Control', 'jupiterx-core' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'label_icon_heading',
[
'label' => esc_html__( 'Label Icon', 'jupiterx-core' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'label_icon_position',
[
'label' => esc_html__( 'Position', 'jupiterx-core' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'row' => [
'title' => esc_html__( 'Left', 'jupiterx-core' ),
'icon' => 'eicon-h-align-left',
],
'row-reverse' => [
'title' => esc_html__( 'Right', 'jupiterx-core' ),
'icon' => 'eicon-h-align-right',
],
],
'default' => 'left',
'label_block' => false,
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-header-left' => 'flex-direction: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'label_icon_margin',
[
'label' => esc_html__( 'Margin', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-header-left .jx-ac-label-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'toggle_icon_heading',
[
'label' => esc_html__( 'Toggle Icon', 'jupiterx-core' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'toggle_icon_position',
[
'label' => esc_html__( 'Position', 'jupiterx-core' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'row-reverse' => [
'title' => esc_html__( 'Left', 'jupiterx-core' ),
'icon' => 'eicon-h-align-left',
],
'row' => [
'title' => esc_html__( 'Right', 'jupiterx-core' ),
'icon' => 'eicon-h-align-right',
],
],
'label_block' => false,
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-header' => 'flex-direction: {{VALUE}};',
],
]
);
$this->add_control(
'label_heading',
[
'label' => esc_html__( 'Label', 'jupiterx-core' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_responsive_control(
'toggle_label_aligment',
[
'label' => esc_html__( 'Alignment', 'jupiterx-core' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'flex-start' => [
'title' => esc_html__( 'Start', 'jupiterx-core' ),
'icon' => ! is_rtl() ? 'fa fa-arrow-left' : 'fa fa-arrow-right',
],
'center' => [
'title' => esc_html__( 'Center', 'jupiterx-core' ),
'icon' => 'fa fa-align-center',
],
'space-between' => [
'title' => esc_html__( 'Justify', 'jupiterx-core' ),
'icon' => 'fa fa-align-justify',
],
'flex-end' => [
'title' => esc_html__( 'End', 'jupiterx-core' ),
'icon' => ! is_rtl() ? 'fa fa-arrow-right' : 'fa fa-arrow-left',
],
],
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-header' => 'justify-content: {{VALUE}};',
],
]
);
$this->start_controls_tabs( 'toggle_general_styles' );
$this->start_controls_tab(
'toggle_control_normal',
[
'label' => esc_html__( 'Normal', 'jupiterx-core' ),
]
);
$this->add_control(
'toggle_label_color',
[
'label' => esc_html__( 'Text Color', 'jupiterx-core' ),
'type' => Controls_Manager::COLOR,
'default' => Utils::set_old_default_value( '#000000' ),
'global' => Utils::set_default_value( 'primary' ),
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive .jx-ac-title' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'toggle_label_typography',
'global' => [
'default' => Typo::TYPOGRAPHY_PRIMARY,
],
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive .jx-ac-title',
]
);
$this->add_group_control(
Box_Style::get_type(),
[
'name' => 'lable_toggle_icon_normal',
'label' => esc_html__( 'Label Icon', 'jupiterx-core' ),
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-header-icon-toggle-wrapper',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'toggle_control_background',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive .jx-single-accordion-header',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'toggle_control_border',
'label' => esc_html__( 'Border', 'jupiterx-core' ),
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive .jx-single-accordion-header',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'toggle_control_hover',
[
'label' => esc_html__( 'Hover', 'jupiterx-core' ),
]
);
$this->add_control(
'toggle_label_color_hover',
[
'label' => esc_html__( 'Text Color', 'jupiterx-core' ),
'type' => Controls_Manager::COLOR,
'global' => [
'default' => Color::COLOR_TEXT,
],
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive:hover .jx-ac-title' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'toggle_label_typography_hover',
'global' => [
'default' => Typo::TYPOGRAPHY_PRIMARY,
],
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive:hover .jx-ac-title',
]
);
$this->add_group_control(
Box_Style::get_type(),
[
'name' => 'lable_toggle_icon_hover',
'label' => esc_html__( 'Label Icon', 'jupiterx-core' ),
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive:hover .jx-single-accordion-header-icon-toggle-wrapper',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'toggle_control_background_hover',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive:hover > .jx-single-accordion-header',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'toggle_control_border_hover',
'label' => esc_html__( 'Border', 'jupiterx-core' ),
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-inactive:hover > .jx-single-accordion-header',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'toggle_control_active',
[
'label' => esc_html__( 'Active', 'jupiterx-core' ),
]
);
$this->add_control(
'toggle_label_color_active',
[
'label' => esc_html__( 'Text Color', 'jupiterx-core' ),
'type' => Controls_Manager::COLOR,
'default' => Utils::set_old_default_value( '#000000' ),
'global' => Utils::set_default_value( 'accent' ),
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-active .jx-ac-title' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'toggle_label_typography_active',
'global' => [
'default' => Typo::TYPOGRAPHY_PRIMARY,
],
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-active .jx-ac-title',
]
);
$this->add_group_control(
Box_Style::get_type(),
[
'name' => 'lable_toggle_icon_active',
'label' => esc_html__( 'Label Icon', 'jupiterx-core' ),
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-active .jx-single-accordion-header-icon-toggle-wrapper',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'toggle_control_background_active',
'selector' => '
{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-active .jx-single-accordion-header,
{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-active:hover .jx-single-accordion-header',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'toggle_control_border_active',
'label' => esc_html__( 'Border', 'jupiterx-core' ),
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-ac-active .jx-single-accordion-header',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'toggle_control_padding',
[
'label' => esc_html__( 'Padding', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
'separator' => 'before',
]
);
$this->add_control(
'toggle_control_border_radius',
[
'label' => esc_html__( 'Border Radius', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-header' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'toggle_control_shadow',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-header',
]
);
$this->end_controls_section();
}
private function style_toggle_controls() {
$this->start_controls_section(
'style_toggle',
[
'label' => esc_html__( 'Toggle', 'jupiterx-core' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'toggle_background',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jupiterx-advanced-accordion-inner-wrapper .jx-ac-toggle-icon',
]
);
$this->add_control(
'toggle_color',
[
'label' => esc_html__( 'Color', 'jupiterx-core' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jupiterx-advanced-accordion-inner-wrapper i.jx-ac-toggle-icon' => 'color: {{VALUE}} !important',
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jupiterx-advanced-accordion-inner-wrapper svg.jx-ac-toggle-icon' => 'fill: {{VALUE}} !important',
],
]
);
$this->add_responsive_control(
'toggle_padding',
[
'label' => esc_html__( 'Padding', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .jx-ac-toggle-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'toggle_margin',
[
'label' => esc_html__( 'Margin', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .jx-ac-toggle-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'toggle_border',
'label' => esc_html__( 'Border', 'jupiterx-core' ),
'selector' => '{{WRAPPER}} .jx-ac-toggle-icon',
]
);
$this->add_control(
'toggle_border_radius',
[
'label' => esc_html__( 'Border Radius', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .jx-ac-toggle-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'toggle_shadow',
'selector' => '{{WRAPPER}} .jx-ac-toggle-icon',
]
);
$this->end_controls_section();
}
private function style_toggle_content_controls() {
$this->start_controls_section(
'style_toggle_content',
[
'label' => esc_html__( 'Toggle Content', 'jupiterx-core' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'tabs_content_typography',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-body .jupiterx-ac-content-is-editor',
]
);
$this->add_control(
'tabs_content_text_color',
[
'label' => esc_html__( 'Text color', 'jupiterx-core' ),
'type' => Controls_Manager::COLOR,
'default' => Utils::set_old_default_value( '#000000' ),
'global' => Utils::set_default_value( 'text' ),
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-body .jupiterx-ac-content-is-editor' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'tabs_content_background',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-body',
]
);
$this->add_responsive_control(
'tabs_content_padding',
[
'label' => esc_html__( 'Padding', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-body' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'tabs_content_margin',
[
'label' => esc_html__( 'Margin', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-body' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'tabs_content_border',
'label' => esc_html__( 'Border', 'jupiterx-core' ),
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-body',
]
);
$this->add_responsive_control(
'tabs_content_radius',
[
'label' => esc_html__( 'Border Radius', 'jupiterx-core' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-body' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'tabs_content_box_shadow',
'selector' => '{{WRAPPER}} #jupiterx-advanced-accordion-wrapper .jx-single-accordion-body',
]
);
$this->end_controls_section();
}
/**
* Print content of accordion.
*
* @param array $item item arguments.
* @since 3.0.0
*/
private function print_accordion_content( $item ) {
if ( 'editor' === $item['item_content_type'] ) {
echo '<div class="jupiterx-ac-content-is-editor">';
echo wp_kses_post( $item['item_content_editor_content'] );
echo '</div>';
return;
}
if ( empty( $item['item_content_template_id'] ) ) {
esc_html_e( 'Please choose a template.', 'jupiterx-core' );
return;
}
echo Plugin::instance()->frontend->get_builder_content_for_display( (int) $item['item_content_template_id'], true ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
/**
* Empty fallback message.
*
* @since 3.0.0
*/
private function fallback() {
if ( ! Plugin::$instance->editor->is_edit_mode() ) {
return;
}
?>
<div class="jupiterx-empty-advanced-accordion-fallback-message">
<?php echo esc_html__( 'No Accordion Item Is Added.', 'jupiterx-core' ); ?>
</div>
<?php
}
/**
* Single accordion.
*
* @param array $item item settings.
* @param array $widget widget settings.
* @param string $first_key first key of array.
* @param string $last_key last key of array.
* @param string $key current key.
* @since 3.0.0
*/
private function single_accordion_structure( $item, $settings, $first_key, $last_key, $key ) {
$wrapper_classes = [ 'jupiterx-single-advanced-accordion-wrapper' ];
$icon_classes = [ 'jx-single-accordion-header-icon-toggle-wrapper' ];
if ( $key === $first_key ) {
$wrapper_classes[] = ' jx-ac-first';
}
if ( $key === $last_key ) {
$wrapper_classes[] = ' jx-ac-last';
}
$body_class = [ 'jx-single-accordion-body' ];
if ( array_key_exists( 'item_active', $item ) && 'yes' === $item['item_active'] ) {
$body_class[] = ' jx-ac-body-block';
$wrapper_classes[] = ' jx-ac-active';
} else {
$body_class[] = ' jx-ac-body-none';
$wrapper_classes[] = ' jx-ac-inactive';
}
$title_tag = $settings['item_html_tag'];
if ( ! array_key_exists( 'label_icon', $item ) || empty( $item['label_icon']['value'] ) ) {
$icon_classes[] = 'jx-single-accordion-header-icon-toggle-wrapper-hide';
}
$this->add_render_attribute(
'single_wrapper_' . $item['_id'],
[
'class' => $wrapper_classes,
'id' => $item['item_content_id'],
]
);
$this->add_render_attribute(
'single_body_' . $item['_id'],
[
'class' => $body_class,
]
);
$this->add_render_attribute(
'single_icon_wrapper_' . $item['_id'],
[
'class' => $icon_classes,
]
);
?>
<div <?php echo $this->get_render_attribute_string( 'single_wrapper_' . esc_attr( $item['_id'] ) ); ?> >
<div class="jx-single-accordion-header">
<div class="jx-single-accordion-header-left">
<div <?php echo $this->get_render_attribute_string( 'single_icon_wrapper_' . esc_attr( $item['_id'] ) ); ?> >
<?php
$attributes = [
'aria-hidden' => 'true',
'class' => 'jx-ac-label-icon',
];
$this->render_icon_customized( $attributes, $item['label_icon'] );
?>
</div>
<?php
echo sprintf(
'<%1$s class="jx-ac-title">%2$s</%3$s>',
ElementorUtils::validate_html_tag( $title_tag ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
esc_html( $item['item_label'] ),
ElementorUtils::validate_html_tag( $title_tag ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
);
?>
</div>
<div class="jx-single-accordion-header-right">
<?php
$attributes = [
'aria-hidden' => 'true',
'class' => 'jx-ac-icon-body-closed jx-ac-toggle-icon',
];
$this->render_icon_customized( $attributes, $settings['toggle_icon'] );
$attributes = [
'aria-hidden' => 'true',
'class' => 'jx-ac-icon-body-opened jx-ac-toggle-icon',
];
$this->render_icon_customized( $attributes, $settings['toggle_active_icon'] );
?>
</div>
</div>
<div <?php echo $this->get_render_attribute_string( 'single_body_' . esc_attr( $item['_id'] ) ); ?>>
<div class="jx-ac-content">
<div class="jx-ac-content-inner-wrapper">
<?php ElementorUtils::print_unescaped_internal_string( $this->print_accordion_content( $item ) ); ?>
</div>
</div>
</div>
</div>
<?php
}
private function render_icon_customized( $attributes, $icon_data ) {
$icon = Icons_Manager::try_get_icon_html( $icon_data, $attributes );
if ( is_array( $icon_data['value'] ) ) {
$icon = str_replace( '<svg', '<svg class="' . esc_attr( $attributes['class'] ) . '"', Icons_Manager::try_get_icon_html( $icon_data ) );
}
ElementorUtils::print_unescaped_internal_string( $icon );
}
protected function render() {
$settings = $this->get_settings_for_display();
$items = $settings['items'];
$faq_schema = false;
if ( empty( $items ) ) {
$this->fallback();
return;
}
$first = array_key_first( $items );
$last = array_key_last( $items );
if ( isset( $settings['faq_schema'] ) && 'yes' === $settings['faq_schema'] ) {
$faq_schema = true;
$json = [
'@context' => 'https://schema.org',
'@type' => 'FAQPage',
'mainEntity' => [],
];
}
?>
<div id="jupiterx-advanced-accordion-wrapper" class="jupiterx-advanced-accordion-wrapper">
<div class="jupiterx-advanced-accordion-inner-wrapper">
<?php foreach ( $items as $key => $item ) : ?>
<?php
$this->single_accordion_structure( $item, $settings, $first, $last, $key );
if ( $faq_schema ) {
$json['mainEntity'][] = [
'@type' => 'Question',
'name' => wp_strip_all_tags( $item['item_label'] ),
'acceptedAnswer' => [
'@type' => 'Answer',
'text' => ( ! empty( $item['item_content_editor_content'] ) ) ? $this->parse_text_editor( $item['item_content_editor_content'] ) : '',
],
];
}
?>
<?php endforeach; ?>
</div>
</div>
<?php
if ( $faq_schema ) :
echo '<script type="application/ld+json">' . wp_json_encode( $json ) . '</script>';
endif;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment