Tabs.php — Tutor LMS – eLearning and online course solution 4.0.3

tutor / components / Tabs.php

tutor / components Last commit date

Constants 3 weeks ago Accordion.php 6 days ago Alert.php 6 days ago AttachmentCard.php 6 days ago Avatar.php 6 days ago Badge.php 6 days ago BaseComponent.php 3 weeks ago Button.php 6 days ago ConfirmationModal.php 6 days ago CourseFilter.php 6 days ago DateFilter.php 6 days ago DropdownFilter.php 6 days ago EmptyState.php 6 days ago FileUploader.php 6 days ago InputField.php 6 days ago Modal.php 6 days ago Nav.php 6 days ago Pagination.php 6 days ago Popover.php 6 days ago PreviewTrigger.php 6 days ago Progress.php 6 days ago SearchFilter.php 6 days ago Sorting.php 6 days ago StarRating.php 6 days ago StarRatingInput.php 6 days ago StatusSelect.php 6 days ago SvgIcon.php 6 days ago Table.php 6 days ago Tabs.php 6 days ago Tooltip.php 6 days ago WPEditor.php 6 days ago

Tabs.php

265 lines

1	<?php
2	/**
3	* Tutor Component: Tabs
4	*
5	* Provides a fluent builder for rendering tabs
6	* with different orientation.
7	*
8	* @package Tutor\Components
9	* @author Themeum
10	* @link https://themeum.com
11	* @since 4.0.0
12	*/
13
14	namespace Tutor\Components;
15
16	use TUTOR\Input;
17
18	defined( 'ABSPATH' ) \|\| exit;
19
20	/**
21	* Class Tabs
22	*
23	* Responsible for rendering the tab navigation and tab content using Alpine.js (`tutorTabs`).
24	* Supports both horizontal and vertical orientations.
25	*
26	* Example usage:
27	*
28	* ```php
29	* // Horizontal tabs (default orientation)
30	* $tabs_data = array(
31	* array( 'id' => 'overview', 'label' => 'Overview', 'content' => '<p>Course overview.</p>' ),
32	* array( 'id' => 'lessons', 'label' => 'Lessons', 'content' => '<p>Lesson list here.</p>' ),
33	* array( 'id' => 'quizzes', 'label' => 'Quizzes', 'content' => '<p>Quiz list here.</p>' ),
34	* );
35	*
36	* Tabs::make()
37	* ->tabs( $tabs_data )
38	* ->default_tab( 'overview' )
39	* ->render();
40	*
41	* // Vertical orientation
42	* Tabs::make()
43	* ->tabs( $tabs_data )
44	* ->default_tab( 'lessons' )
45	* ->orientation( Tabs::TYPE_VERTICAL )
46	* ->render();
47	*
48	* // With icons in tab buttons
49	* $tabs_data = array(
50	* array( 'id' => 'lesson', 'label' => 'Lessons', 'icon' => Icon::BOOK, 'content' => '<p>Lesson content.</p>' ),
51	* array( 'id' => 'assignments', 'label' => 'Assignments', 'icon' => Icon::FILE, 'content' => '<p>Assignment content.</p>' ),
52	* array( 'id' => 'quizzes', 'label' => 'Quizzes', 'icon' => Icon::CHECK, 'content' => '<p>Quiz content.</p>' ),
53	* );
54	*
55	* Tabs::make()
56	* ->tabs( $tabs_data )
57	* ->default_tab( 'lesson' )
58	* ->render();
59	*
60	* // Sync active tab to a custom URL query param (?section=...)
61	* Tabs::make()
62	* ->tabs( $tabs_data )
63	* ->default_tab( 'overview' )
64	* ->url_params( array( 'enabled' => true, 'paramName' => 'section' ) )
65	* ->render();
66	*
67	* // Disable URL sync entirely
68	* Tabs::make()
69	* ->tabs( $tabs_data )
70	* ->default_tab( 'overview' )
71	* ->url_params( array( 'enabled' => false ) )
72	* ->render();
73	*
74	* // With a disabled tab
75	* $tabs_data = array(
76	* array( 'id' => 'active', 'label' => 'Active', 'content' => '<p>...</p>' ),
77	* array( 'id' => 'disabled', 'label' => 'Locked', 'content' => '', 'disabled' => true ),
78	* );
79	*
80	* Tabs::make()
81	* ->tabs( $tabs_data )
82	* ->default_tab( 'active' )
83	* ->render();
84	*
85	* // Retrieve HTML without echoing
86	* $html = Tabs::make()->tabs( $tabs_data )->default_tab( 'overview' )->get();
87	* ```
88	*
89	* @since 4.0.0
90	*/
91	class Tabs extends BaseComponent {
92
93	/**
94	* Tab data array.
95	*
96	* @since 4.0.0
97	*
98	* @var array
99	*/
100	protected array $tabs = array();
101
102	/**
103	* Default active tab ID.
104	*
105	* @since 4.0.0
106	*
107	* @var string
108	*/
109	protected string $default_tab = '';
110
111
112	/**
113	* Tab orientation type (horizontal\|vertical).
114	*
115	* @since 4.0.0
116	*
117	* @var string
118	*/
119	public const TYPE_HORIZONTAL = 'horizontal';
120	public const TYPE_VERTICAL = 'vertical';
121
122	/**
123	* Tab orientation (horizontal\|vertical).
124	*
125	* @since 4.0.0
126	*
127	* @var string
128	*/
129	protected string $orientation = 'horizontal';
130
131	/**
132	* URL parameters for syncing tab state.
133	*
134	* @since 4.0.0
135	* @var array
136	*/
137	protected array $url_params = array(
138	'enabled' => true,
139	'paramName' => 'tab',
140	);
141
142	/**
143	* Set the tab data.
144	*
145	* @since 4.0.0
146	*
147	* @param array $tabs Tabs configuration data.
148	*
149	* @return $this
150	*/
151	public function tabs( array $tabs ) {
152	$this->tabs = $tabs;
153	return $this;
154	}
155
156	/**
157	* Set the default active tab.
158	*
159	* @since 4.0.0
160	*
161	* @param string $tab_id Tab ID to activate by default.
162	*
163	* @return $this
164	*/
165	public function default_tab( string $tab_id ) {
166	$this->default_tab = Input::get( 'tab', $tab_id );
167	return $this;
168	}
169
170	/**
171	* Set the tab orientation.
172	*
173	* @since 4.0.0
174	*
175	* @param string $orientation Either 'horizontal' or 'vertical'.
176	*
177	* @return $this
178	*/
179	public function orientation( string $orientation ) {
180	$this->orientation = in_array( $orientation, array( self::TYPE_HORIZONTAL, self::TYPE_VERTICAL ), true )
181	? $orientation
182	: self::TYPE_HORIZONTAL;
183	return $this;
184	}
185
186	/**
187	* Set the URL parameter configuration for tab state.
188	*
189	* @since 4.0.0
190	*
191	* @param array $params URL parameter settings.
192	*
193	* @return $this
194	*/
195	public function url_params( array $params ) {
196	$this->url_params = wp_parse_args(
197	$params,
198	array(
199	'enabled' => true,
200	'paramName' => 'tab',
201	)
202	);
203	return $this;
204	}
205
206	/**
207	* Get the tabs component.
208	*
209	* @since 4.0.0
210	*
211	* @return string HTML markup for the tabs component.
212	*/
213	public function get(): string {
214	$tabs_json = wp_json_encode( $this->tabs );
215	$default = esc_js( $this->default_tab );
216	$orientation = esc_attr( $this->orientation );
217	$url_params = wp_json_encode( $this->url_params );
218
219	ob_start();
220	?>
221	<div
222	x-data='tutorTabs({
223	tabs: <?php echo $tabs_json; // phpcs:ignore ?>,
224	orientation: "<?php echo $orientation; // phpcs:ignore ?>",
225	defaultTab: "<?php echo $default; // phpcs:ignore ?>",
226	urlParams: <?php echo $url_params; // phpcs:ignore ?>
227	})'
228	>
229	<div x-ref="tablist" class="tutor-tabs-nav" role="tablist" aria-orientation="<?php echo $orientation; // phpcs:ignore ?>">
230	<template x-for="tab in tabs" :key="tab.id">
231	<button
232	type="button"
233	role="tab"
234	:class='getTabClass(tab)'
235	x-bind:aria-selected="isActive(tab.id)"
236	:disabled="tab.disabled ? true : false"
237	@click="selectTab(tab.id)"
238	>
239	<template x-if="tab.icon">
240	<span x-data="tutorIcon({ name: tab.icon, width: 24, height: 24 })"></span>
241	</template>
242	<span x-text="tab.label"></span>
243	</button>
244	</template>
245	</div>
246
247	<div class="tutor-tabs-content">
248	<template x-for="tab in tabs" :key="tab.id">
249	<div
250	class="tutor-tab-panel"
251	role="tabpanel"
252	x-show="activeTab === tab.id"
253	x-cloak
254	x-html="tab.content"
255	></div>
256	</template>
257	</div>
258	</div>
259	<?php
260	$this->component_string = ob_get_clean();
261
262	return $this->component_string;
263	}
264	}
265