elementor / modules / atomic-widgets / elements / atomic-tabs / atomic-tab.php

atomic-tab.php in Elementor Website Builder – more than just a page builder 3.35.7, at modules/atomic-widgets/elements/atomic-tabs/atomic-tab.php

199 lines 5.5 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\AtomicWidgets\Elements\Atomic_Tabs;
3
4	use Elementor\Modules\AtomicWidgets\Elements\Base\Atomic_Element_Base;
5	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
6	use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type;
7	use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
8	use Elementor\Modules\AtomicWidgets\Styles\Style_Variant;
9	use Elementor\Modules\AtomicWidgets\Styles\Style_States;
10	use Elementor\Modules\AtomicWidgets\Controls\Section;
11	use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
12	use Elementor\Modules\AtomicWidgets\PropTypes\Html_Prop_Type;
13	use Elementor\Modules\AtomicWidgets\Elements\Atomic_Paragraph\Atomic_Paragraph;
14	use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
15	use Elementor\Modules\AtomicWidgets\PropTypes\Color_Prop_Type;
16	use Elementor\Modules\AtomicWidgets\Elements\Base\Render_Context;
17	use Elementor\Modules\AtomicWidgets\PropTypes\Background_Prop_Type;
18	use Elementor\Modules\Components\PropTypes\Overridable_Prop_Type;
19
20	if ( ! defined( 'ABSPATH' ) ) {
21	exit; // Exit if accessed directly.
22	}
23
24	class Atomic_Tab extends Atomic_Element_Base {
25	const BASE_STYLE_KEY = 'base';
26
27	public function __construct( $data = [], $args = null ) {
28	parent::__construct( $data, $args );
29	$this->meta( 'llm_support', false );
30	}
31
32	public static function get_type() {
33	return 'e-tab';
34	}
35
36	public static function get_element_type(): string {
37	return 'e-tab';
38	}
39
40	public function get_title() {
41	return esc_html__( 'Tab trigger', 'elementor' );
42	}
43
44	public function get_keywords() {
45	return [ 'ato', 'atom', 'atoms', 'atomic' ];
46	}
47
48	public function get_icon() {
49	return 'eicon-layout';
50	}
51
52	public function should_show_in_panel() {
53	return false;
54	}
55
56	protected static function define_props_schema(): array {
57	return [
58	'classes' => Classes_Prop_Type::make()
59	->default( [] ),
60	'attributes' => Attributes_Prop_Type::make()->meta( Overridable_Prop_Type::ignore() ),
61	];
62	}
63
64	protected function define_atomic_controls(): array {
65	return [
66	Section::make()
67	->set_label( __( 'Settings', 'elementor' ) )
68	->set_id( 'settings' )
69	->set_items( [] ),
70	];
71	}
72
73	protected function define_atomic_style_states(): array {
74	$selected_state = Style_States::get_class_states_map()['selected'];
75
76	return [ $selected_state ];
77	}
78
79	protected function define_base_styles(): array {
80	$styles = [
81	'display' => String_Prop_Type::generate( 'block' ),
82	'cursor' => String_Prop_Type::generate( 'pointer' ),
83	'color' => Color_Prop_Type::generate( '#0C0D0E' ),
84	'border-style' => String_Prop_Type::generate( 'solid' ),
85	'border-color' => Color_Prop_Type::generate( '#E0E0E0' ),
86	'border-width' => Size_Prop_Type::generate( [
87	'size' => 2,
88	'unit' => 'px',
89	]),
90	'padding' => Size_Prop_Type::generate( [
91	'size' => 8,
92	'unit' => 'px',
93	]),
94	'width' => Size_Prop_Type::generate( [
95	'size' => 160,
96	'unit' => 'px',
97	]),
98	'background' => Background_Prop_Type::generate( [
99	'color' => Color_Prop_Type::generate( '#FFFFFF' ),
100	]),
101	];
102
103	$selected_styles = [
104	'outline-width' => Size_Prop_Type::generate( [
105	'size' => 0,
106	'unit' => 'px',
107	]),
108	'border-color' => Color_Prop_Type::generate( '#0C0D0E' ),
109	];
110
111	$hover_styles = [
112	'background' => Background_Prop_Type::generate( [
113	'color' => Color_Prop_Type::generate( '#E0E0E0' ),
114	]),
115	];
116
117	return [
118	static::BASE_STYLE_KEY => Style_Definition::make()
119	->add_variant(
120	Style_Variant::make()
121	->add_props( $styles )
122	)
123	->add_variant(
124	Style_Variant::make()
125	->set_state( Style_States::SELECTED )
126	->add_props( $selected_styles )
127	)
128	->add_variant(
129	Style_Variant::make()
130	->set_state( Style_States::FOCUS )
131	->add_props( $selected_styles )
132	)
133	->add_variant(
134	Style_Variant::make()
135	->set_state( Style_States::HOVER )
136	->add_props( $hover_styles )
137	),
138	];
139	}
140
141	protected function define_initial_attributes() {
142	return [
143	'role' => 'tab',
144	'tabindex' => '-1',
145	];
146	}
147
148	protected function define_default_html_tag() {
149	return 'button';
150	}
151
152	protected function define_default_children() {
153	return [
154	Atomic_Paragraph::generate()
155	->settings( [
156	'paragraph' => Html_Prop_Type::generate( 'Tab' ),
157	'tag' => String_Prop_Type::generate( 'span' ),
158	] )
159	->build(),
160	];
161	}
162
163	protected function add_render_attributes() {
164	parent::add_render_attributes();
165	$settings = $this->get_atomic_settings();
166	$base_style_class = $this->get_base_styles_dictionary()[ static::BASE_STYLE_KEY ];
167	$initial_attributes = $this->define_initial_attributes();
168
169	$tabs_context = Render_Context::get( Atomic_Tabs::class );
170	$default_active_tab = $tabs_context['default-active-tab'];
171	$get_tab_index = $tabs_context['get-tab-index'];
172	$tabs_id = $tabs_context['tabs-id'];
173
174	$index = $get_tab_index( $this->get_id() );
175	$is_active = $default_active_tab === $index;
176
177	$attributes = [
178	'class' => [
179	'e-con',
180	'e-atomic-element',
181	$base_style_class,
182	...( $settings['classes'] ?? [] ),
183	],
184	'tabindex' => $is_active ? '0' : '-1',
185	'aria-selected' => $is_active ? 'true' : 'false',
186	'x-bind' => 'tab',
187	'x-ref' => $this->get_id(),
188	'id' => Atomic_Tabs::get_tab_id( $tabs_id, $index ),
189	'aria-controls' => Atomic_Tabs::get_tab_content_id( $tabs_id, $index ),
190	];
191
192	if ( ! empty( $settings['_cssid'] ) ) {
193	$attributes['id'] = esc_attr( $settings['_cssid'] );
194	}
195
196	$this->add_render_attribute( '_wrapper', array_merge( $initial_attributes, $attributes ) );
197	}
198	}
199