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

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

263 lines 7.5 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\AtomicWidgets\Elements\Atomic_Tabs;
3
4	use Elementor\Modules\AtomicWidgets\Elements\Atomic_Element_Base;
5	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Number_Prop_Type;
6	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
7	use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type;
8	use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
9	use Elementor\Modules\AtomicWidgets\Styles\Style_Variant;
10	use Elementor\Modules\AtomicWidgets\Controls\Section;
11	use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control;
12	use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
13	use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
14	use Elementor\Modules\AtomicWidgets\PropTypes\Dimensions_Prop_Type;
15	use Elementor\Modules\AtomicWidgets\Controls\Types\Elements\Tabs_Control;
16	use Elementor\Core\Utils\Collection;
17	use Elementor\Modules\AtomicWidgets\Loader\Frontend_Assets_Loader;
18	use Elementor\Utils;
19	use Elementor\Plugin;
20
21
22	if ( ! defined( 'ABSPATH' ) ) {
23	exit; // Exit if accessed directly.
24	}
25
26	class Atomic_Tabs extends Atomic_Element_Base {
27	const BASE_STYLE_KEY = 'base';
28	const ELEMENT_TYPE_TABS_MENU = 'e-tabs-menu';
29	const ELEMENT_TYPE_TABS_CONTENT_AREA = 'e-tabs-content-area';
30	const ELEMENT_TYPE_TAB = 'e-tab';
31	const ELEMENT_TYPE_TAB_CONTENT = 'e-tab-content';
32
33	public static function get_type() {
34	return 'e-tabs';
35	}
36
37	public static function get_element_type(): string {
38	return 'e-tabs';
39	}
40
41	public function get_title() {
42	return esc_html__( 'Tabs', 'elementor' );
43	}
44
45	public function get_keywords() {
46	return [ 'ato', 'atom', 'atoms', 'atomic' ];
47	}
48
49	public function get_icon() {
50	return 'eicon-tabs';
51	}
52
53	protected static function define_props_schema(): array {
54	return [
55	'classes' => Classes_Prop_Type::make()
56	->default( [] ),
57	'default-active-tab' => Number_Prop_Type::make()
58	->default( 0 ),
59	'attributes' => Attributes_Prop_Type::make(),
60	];
61	}
62
63	protected function define_atomic_controls(): array {
64	return [
65	Section::make()
66	->set_label( __( 'Content', 'elementor' ) )
67	->set_id( 'content' )
68	->set_items( [
69	Tabs_Control::make()
70	->set_label( __( 'Menu items', 'elementor' ) )
71	->set_meta( [
72	'layout' => 'custom',
73	] ),
74	] ),
75	Section::make()
76	->set_label( __( 'Settings', 'elementor' ) )
77	->set_id( 'settings' )
78	->set_items( [
79	Text_Control::bind_to( '_cssid' )
80	->set_label( __( 'ID', 'elementor' ) )
81	->set_meta( [
82	'layout' => 'two-columns',
83	] ),
84	] ),
85	];
86	}
87
88	protected function define_base_styles(): array {
89	$styles = [
90	'display' => String_Prop_Type::generate( 'flex' ),
91	'flex-direction' => String_Prop_Type::generate( 'column' ),
92	'gap' => Size_Prop_Type::generate( [
93	'size' => 30,
94	'unit' => 'px',
95	]),
96	'padding' => Dimensions_Prop_Type::generate( [
97	'block-start' => Size_Prop_Type::generate( [
98	'size' => 0,
99	'unit' => 'px',
100	]),
101	] ),
102	];
103
104	return [
105	static::BASE_STYLE_KEY => Style_Definition::make()
106	->add_variant(
107	Style_Variant::make()
108	->add_props( $styles )
109	),
110	];
111	}
112
113	protected function define_default_children() {
114	$default_tab_count = 3;
115	$tab_elements = [];
116	$tab_content_elements = [];
117
118	foreach ( range( 1, $default_tab_count ) as $i ) {
119	$tab_elements[] = Atomic_Tab::generate()
120	->editor_settings( [
121	'title' => "Tab {$i} trigger",
122	'initial_position' => $i,
123	] )
124	->is_locked( true )
125	->build();
126
127	$tab_content_elements[] = Atomic_Tab_Content::generate()
128	->is_locked( true )
129	->editor_settings( [
130	'title' => "Tab {$i} content",
131	'initial_position' => $i,
132	] )
133	->build();
134	}
135
136	$tabs_menu = Atomic_Tabs_Menu::generate()
137	->children( $tab_elements )
138	->is_locked( true )
139	->build();
140
141	$tabs_content_area = Atomic_Tabs_Content_Area::generate()
142	->children( $tab_content_elements )
143	->is_locked( true )
144	->build();
145
146	return [
147	$tabs_menu,
148	$tabs_content_area,
149	];
150	}
151
152	public function define_initial_attributes() {
153	return [
154	'data-e-type' => $this->get_type(),
155	];
156	}
157
158	public function get_script_depends() {
159	if ( Plugin::$instance->preview->is_preview_mode() ) {
160	return [ 'elementor-tabs-handler', 'elementor-tabs-preview-handler' ];
161	}
162
163	return [ 'elementor-tabs-handler' ];
164	}
165
166	public function register_frontend_handlers() {
167	$assets_url = ELEMENTOR_ASSETS_URL;
168	$min_suffix = ( Utils::is_script_debug() \|\| Utils::is_elementor_tests() ) ? '' : '.min';
169
170	wp_register_script(
171	'elementor-tabs-handler',
172	"{$assets_url}js/tabs-handler{$min_suffix}.js",
173	[ Frontend_Assets_Loader::FRONTEND_HANDLERS_HANDLE, Frontend_Assets_Loader::ALPINEJS_HANDLE ],
174	ELEMENTOR_VERSION,
175	true
176	);
177
178	wp_register_script(
179	'elementor-tabs-preview-handler',
180	"{$assets_url}js/tabs-preview-handler{$min_suffix}.js",
181	[ Frontend_Assets_Loader::FRONTEND_HANDLERS_HANDLE, Frontend_Assets_Loader::ALPINEJS_HANDLE ],
182	ELEMENTOR_VERSION,
183	true
184	);
185	}
186
187	private function get_filtered_children_ids( $parent_element, $child_type ) {
188	if ( ! $parent_element ) {
189	return [];
190	}
191
192	return Collection::make( $parent_element->get_children() )
193	->filter( fn( $element ) => $element->get_type() === $child_type )
194	->map( fn( $element ) => $element->get_id() )
195	->flip()
196	->all();
197	}
198
199	private function get_tab_index( $tab_id ) {
200	$direct_children = Collection::make( $this->get_children() );
201	$tabs_menu = $direct_children->filter( fn( $child ) => $child->get_type() === self::ELEMENT_TYPE_TABS_MENU )->first();
202
203	$tab_ids = $this->get_filtered_children_ids( $tabs_menu, self::ELEMENT_TYPE_TAB );
204
205	return $tab_ids[ $tab_id ];
206	}
207
208	private function get_tab_content_index( $tab_content_id ) {
209	$direct_children = Collection::make( $this->get_children() );
210	$tabs_content_area = $direct_children->filter( fn( $child ) => $child->get_type() === self::ELEMENT_TYPE_TABS_CONTENT_AREA )->first();
211
212	$tab_content_ids = $this->get_filtered_children_ids( $tabs_content_area, self::ELEMENT_TYPE_TAB_CONTENT );
213
214	return $tab_content_ids[ $tab_content_id ];
215	}
216
217	protected function define_render_context(): array {
218	$default_active_tab = $this->get_atomic_setting( 'default-active-tab' );
219
220	return [
221	'default-active-tab' => $default_active_tab,
222	'get-tab-index' => fn( $tab_id ) => $this->get_tab_index( $tab_id ),
223	'get-tab-content-index' => fn( $tab_content_id ) => $this->get_tab_content_index( $tab_content_id ),
224	'tabs-id' => $this->get_id(),
225	];
226	}
227
228	protected function add_render_attributes() {
229	parent::add_render_attributes();
230	$settings = $this->get_atomic_settings();
231	$base_style_class = $this->get_base_styles_dictionary()[ static::BASE_STYLE_KEY ];
232	$initial_attributes = $this->define_initial_attributes();
233
234	$default_active_tab = $settings['default-active-tab'] ?? 0;
235	$default_active_tab_id = static::get_tab_id( $this->get_id(), $default_active_tab );
236
237	$attributes = [
238	'class' => [
239	'e-con',
240	'e-atomic-element',
241	$base_style_class,
242	...( $settings['classes'] ?? [] ),
243	],
244	'x-data' => 'eTabs' . $this->get_id(),
245	'data-e-settings' => json_encode( [ 'default-active-tab' => esc_js( $default_active_tab_id ) ] ),
246	];
247
248	if ( ! empty( $settings['_cssid'] ) ) {
249	$attributes['id'] = esc_attr( $settings['_cssid'] );
250	}
251
252	$this->add_render_attribute( '_wrapper', array_merge( $initial_attributes, $attributes ) );
253	}
254
255	public static function get_tab_id( $tabs_id, $index ) {
256	return "{$tabs_id}-tab-{$index}";
257	}
258
259	public static function get_tab_content_id( $tabs_id, $index ) {
260	return "{$tabs_id}-tab-content-{$index}";
261	}
262	}
263