%PDF- %PDF-
Direktori : /proc/19851/cwd/wp-content/plugins/elementor/modules/nested-accordion/widgets/ |
Current File : //proc/19851/cwd/wp-content/plugins/elementor/modules/nested-accordion/widgets/nested-accordion.php |
<?php namespace Elementor\Modules\NestedAccordion\Widgets; use Elementor\Controls_Manager; use Elementor\Modules\NestedElements\Base\Widget_Nested_Base; use Elementor\Modules\NestedElements\Controls\Control_Nested_Repeater; use Elementor\Plugin; use Elementor\Repeater; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } /** * Elementor Nested Accordion widget. * * Elementor widget that displays a collapsible display of content in an * accordion style. * * @since 3.15.0 */ class Nested_Accordion extends Widget_Nested_Base { const NESTED_ACCORDION = 'nested-accordion'; public function get_name() { return static::NESTED_ACCORDION; } public function get_title() { return esc_html__( 'Accordion', 'elementor' ); } public function get_icon() { return 'eicon-accordion'; } public function get_keywords() { return [ 'nested', 'tabs', 'accordion', 'toggle' ]; } public function show_in_panel(): bool { return Plugin::$instance->experiments->is_feature_active( static::NESTED_ACCORDION ); } protected function item_content_container( int $index ) { return [ 'elType' => 'container', 'settings' => [ '_title' => sprintf( __( 'item #%s', 'elementor' ), $index ), 'content_width' => 'full', ], ]; } protected function get_default_children_elements() { return [ $this->item_content_container( 1 ), $this->item_content_container( 2 ), $this->item_content_container( 3 ), ]; } protected function get_default_repeater_title_setting_key() { return 'item_title'; } protected function get_default_children_title() { return esc_html__( 'Item #%d', 'elementor' ); } protected function get_default_children_placeholder_selector() { return '.e-n-accordion'; } protected function get_html_wrapper_class() { return 'elementor-widget-n-accordion'; } protected function register_controls() { $this->start_controls_section( 'section_items', [ 'label' => esc_html__( 'Accordion', 'elementor' ), ] ); $repeater = new Repeater(); $repeater->add_control( 'item_title', [ 'label' => esc_html__( 'Title', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'Item Title', 'elementor' ), 'placeholder' => esc_html__( 'Item Title', 'elementor' ), 'label_block' => true, 'dynamic' => [ 'active' => true, ], ] ); $repeater->add_control( 'element_css_id', [ 'label' => esc_html__( 'CSS ID', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'dynamic' => [ 'active' => true, ], 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ), 'style_transfer' => false, ] ); $this->add_control( 'items', [ 'label' => esc_html__( 'Items', 'elementor' ), 'type' => Control_Nested_Repeater::CONTROL_TYPE, 'fields' => $repeater->get_controls(), 'default' => [ [ 'item_title' => esc_html__( 'Item #1', 'elementor' ), ], [ 'item_title' => esc_html__( 'Item #2', 'elementor' ), ], [ 'item_title' => esc_html__( 'Item #3', 'elementor' ), ], ], 'title_field' => '{{{ item_title }}}', 'button_text' => 'Add Item', ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); $items = $settings['items']; $id_int = substr( $this->get_id_int(), 0, 3 ); $items_title_html = ''; $this->add_render_attribute( 'elementor-accordion', 'class', 'e-n-accordion' ); foreach ( $items as $index => $item ) { $item_setting_key = $this->get_repeater_setting_key( 'item_title', 'items', $index ); $item_classes = [ 'e-n-accordion-item', 'e-normal' ]; $item_id = empty( $item['element_css_id'] ) ? 'e-n-accordion-item-' . $id_int : $item['element_css_id']; $item_title = $item['item_title']; $this->add_render_attribute( $item_setting_key, [ 'id' => $item_id, 'class' => $item_classes, ] ); $title_render_attributes = $this->get_render_attribute_string( $item_setting_key ); // items content. ob_start(); $this->print_child( $index ); $item_content = ob_get_clean(); $items_title_html .= "\t<details {$title_render_attributes}>"; $items_title_html .= "\t\t<summary class='e-n-accordion-item-title'>{$item_title}</summary>"; $items_title_html .= "\t\t{$item_content}"; $items_title_html .= "\t</details>"; } ?> <div <?php $this->print_render_attribute_string( 'elementor-accordion' ); ?>> <?php echo $items_title_html;// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> </div> <?php } protected function content_template() { ?> <div class="e-n-accordion" role="tablist" aria-orientation="vertical"> <# if ( settings['items'] ) { const elementUid = view.getIDInt().toString().substr( 0, 3 ); #> <# _.each( settings['items'], function( item, index ) { const itemCount = index + 1, itemUid = elementUid + itemCount, itemWrapperKey = itemUid, itemTitleKey = 'item-' + itemUid; if ( '' !== item.element_css_id ) { itemId = item.element_css_id; } else { itemId = 'e-n-accordion-item-' + itemUid; } view.addRenderAttribute( itemWrapperKey, { 'id': itemId, 'class': [ 'e-n-accordion-item','e-normal' ], } ); view.addRenderAttribute( itemTitleKey, { 'class': [ 'e-n-accordion-item-title' ], } ); #> <details {{{ view.getRenderAttributeString( itemWrapperKey ) }}}> <summary {{{ view.getRenderAttributeString( itemTitleKey ) }}}>{{{ item.item_title }}}</summary> </details> <# } ); #> <# } #> </div> <?php } }