文件操作 - Tabs.php

文件: /home/www/public/wp-content/plugins/tutor/components/Tabs.php

编辑文件内容

<?php
/**
 * Tutor Component: Tabs
 *
 * Provides a fluent builder for rendering tabs
 * with different orientation.
 *
 * @package Tutor\Components
 * @author Themeum
 * @link https://themeum.com
 * @since 4.0.0
 */

namespace Tutor\Components;

use TUTOR\Input;

defined( 'ABSPATH' ) || exit;

/**
 * Class Tabs
 *
 * Responsible for rendering the tab navigation and tab content using Alpine.js (`tutorTabs`).
 * Supports both horizontal and vertical orientations.
 *
 * Example usage:
 *
 * ```php
 * // Horizontal tabs (default orientation)
 * $tabs_data = array(
 *     array( 'id' => 'overview',  'label' => 'Overview',  'content' => '<p>Course overview.</p>' ),
 *     array( 'id' => 'lessons',   'label' => 'Lessons',   'content' => '<p>Lesson list here.</p>' ),
 *     array( 'id' => 'quizzes',   'label' => 'Quizzes',   'content' => '<p>Quiz list here.</p>' ),
 * );
 *
 * Tabs::make()
 *     ->tabs( $tabs_data )
 *     ->default_tab( 'overview' )
 *     ->render();
 *
 * // Vertical orientation
 * Tabs::make()
 *     ->tabs( $tabs_data )
 *     ->default_tab( 'lessons' )
 *     ->orientation( Tabs::TYPE_VERTICAL )
 *     ->render();
 *
 * // With icons in tab buttons
 * $tabs_data = array(
 *     array( 'id' => 'lesson',      'label' => 'Lessons',     'icon' => Icon::BOOK,  'content' => '<p>Lesson content.</p>' ),
 *     array( 'id' => 'assignments', 'label' => 'Assignments', 'icon' => Icon::FILE,  'content' => '<p>Assignment content.</p>' ),
 *     array( 'id' => 'quizzes',     'label' => 'Quizzes',     'icon' => Icon::CHECK, 'content' => '<p>Quiz content.</p>' ),
 * );
 *
 * Tabs::make()
 *     ->tabs( $tabs_data )
 *     ->default_tab( 'lesson' )
 *     ->render();
 *
 * // Sync active tab to a custom URL query param (?section=...)
 * Tabs::make()
 *     ->tabs( $tabs_data )
 *     ->default_tab( 'overview' )
 *     ->url_params( array( 'enabled' => true, 'paramName' => 'section' ) )
 *     ->render();
 *
 * // Disable URL sync entirely
 * Tabs::make()
 *     ->tabs( $tabs_data )
 *     ->default_tab( 'overview' )
 *     ->url_params( array( 'enabled' => false ) )
 *     ->render();
 *
 * // With a disabled tab
 * $tabs_data = array(
 *     array( 'id' => 'active',   'label' => 'Active',   'content' => '<p>...</p>' ),
 *     array( 'id' => 'disabled', 'label' => 'Locked',   'content' => '', 'disabled' => true ),
 * );
 *
 * Tabs::make()
 *     ->tabs( $tabs_data )
 *     ->default_tab( 'active' )
 *     ->render();
 *
 * // Retrieve HTML without echoing
 * $html = Tabs::make()->tabs( $tabs_data )->default_tab( 'overview' )->get();
 * ```
 *
 * @since 4.0.0
 */
class Tabs extends BaseComponent {

/**
	 * Tab data array.
	 *
	 * @since 4.0.0
	 *
	 * @var array
	 */
	protected array $tabs = array();

/**
	 * Default active tab ID.
	 *
	 * @since 4.0.0
	 *
	 * @var string
	 */
	protected string $default_tab = '';

/**
	 * Tab orientation type (horizontal|vertical).
	 *
	 * @since 4.0.0
	 *
	 * @var string
	 */
	public const TYPE_HORIZONTAL = 'horizontal';
	public const TYPE_VERTICAL   = 'vertical';

/**
	 * Tab orientation (horizontal|vertical).
	 *
	 * @since 4.0.0
	 *
	 * @var string
	 */
	protected string $orientation = 'horizontal';

/**
	 * URL parameters for syncing tab state.
	 *
	 * @since 4.0.0
	 * @var array
	 */
	protected array $url_params = array(
		'enabled'   => true,
		'paramName' => 'tab',
	);

/**
	 * Set the tab data.
	 *
	 * @since 4.0.0
	 *
	 * @param array $tabs Tabs configuration data.
	 *
	 * @return $this
	 */
	public function tabs( array $tabs ) {
		$this->tabs = $tabs;
		return $this;
	}

/**
	 * Set the default active tab.
	 *
	 * @since 4.0.0
	 *
	 * @param string $tab_id Tab ID to activate by default.
	 *
	 * @return $this
	 */
	public function default_tab( string $tab_id ) {
		$this->default_tab = Input::get( 'tab', $tab_id );
		return $this;
	}

/**
	 * Set the tab orientation.
	 *
	 * @since 4.0.0
	 *
	 * @param string $orientation Either 'horizontal' or 'vertical'.
	 *
	 * @return $this
	 */
	public function orientation( string $orientation ) {
		$this->orientation = in_array( $orientation, array( self::TYPE_HORIZONTAL, self::TYPE_VERTICAL ), true )
			? $orientation
			: self::TYPE_HORIZONTAL;
		return $this;
	}

/**
	 * Set the URL parameter configuration for tab state.
	 *
	 * @since 4.0.0
	 *
	 * @param array $params URL parameter settings.
	 *
	 * @return $this
	 */
	public function url_params( array $params ) {
		$this->url_params = wp_parse_args(
			$params,
			array(
				'enabled'   => true,
				'paramName' => 'tab',
			)
		);
		return $this;
	}

/**
	 * Get the tabs component.
	 *
	 * @since 4.0.0
	 *
	 * @return string HTML markup for the tabs component.
	 */
	public function get(): string {
		$tabs_json   = wp_json_encode( $this->tabs );
		$default     = esc_js( $this->default_tab );
		$orientation = esc_attr( $this->orientation );
		$url_params  = wp_json_encode( $this->url_params );

ob_start();
		?>
		<div 
			x-data='tutorTabs({
				tabs: <?php echo $tabs_json; // phpcs:ignore ?>,
				orientation: "<?php echo $orientation; // phpcs:ignore ?>",
				defaultTab: "<?php echo $default; // phpcs:ignore ?>",
				urlParams: <?php echo $url_params; // phpcs:ignore ?>
			})'
		>
			<div x-ref="tablist" class="tutor-tabs-nav" role="tablist" aria-orientation="<?php echo $orientation; // phpcs:ignore ?>">
				<template x-for="tab in tabs" :key="tab.id">
					<button
						type="button"
						role="tab"
						:class='getTabClass(tab)'
						x-bind:aria-selected="isActive(tab.id)"
						:disabled="tab.disabled ? true : false"
						@click="selectTab(tab.id)"
					>
						<template x-if="tab.icon">
							<span x-data="tutorIcon({ name: tab.icon, width: 24, height: 24 })"></span>
						</template>
						<span x-text="tab.label"></span>
					</button>
				</template>
			</div>

<div class="tutor-tabs-content">
				<template x-for="tab in tabs" :key="tab.id">
					<div
						class="tutor-tab-panel"
						role="tabpanel"
						x-show="activeTab === tab.id"
						x-cloak
						x-html="tab.content"
					></div>
				</template>
			</div>
		</div>
		<?php
		$this->component_string = ob_get_clean();

return $this->component_string;
	}
}

文件操作 - Tabs.php

文件: /home/www/public/wp-content/plugins/tutor/components/Tabs.php

编辑文件内容

修改文件时间

删除文件