mirror of
https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git
synced 2024-11-27 09:42:48 +00:00
refactor: use Mustache to generate HTML
This commit is contained in:
alistair3149
parent
dc1d16c276
commit
11eb2ac328
|
|
@ -88,7 +88,13 @@ class Tabber {
|
|||
*/
|
||||
public static function render( string $input, int $count, Parser $parser, PPFrame $frame ): string {
|
||||
$arr = explode( '|-|', $input );
|
||||
$tabs = '';
|
||||
$data = [
|
||||
'count' => $count,
|
||||
'array-tabs' => []
|
||||
];
|
||||
|
||||
// For Codex use only
|
||||
// TODO: Maybe we should redo the whole Codex implementation
|
||||
$tabpanels = '';
|
||||
|
||||
foreach ( $arr as $tab ) {
|
||||
|
|
@ -97,13 +103,17 @@ class Tabber {
|
|||
continue;
|
||||
}
|
||||
|
||||
$data['array-tabs'][] = [
|
||||
'content' => $tabData['content'],
|
||||
'label' => $tabData['label'],
|
||||
'tabId' => "tabber-tab-{$tabData['id']}",
|
||||
'tabpanelId' => self::$useLegacyId ? $tabData['id'] : "tabber-tabpanel-{$tabData['id']}"
|
||||
];
|
||||
|
||||
if ( self::$useCodex && self::$isNested ) {
|
||||
$tabpanels .= self::getCodexNestedTabJSON( $tabData );
|
||||
continue;
|
||||
}
|
||||
|
||||
$tabs .= self::getTabHTML( $tabData );
|
||||
$tabpanels .= self::getTabpanelHTML( $tabData );
|
||||
}
|
||||
|
||||
if ( self::$useCodex && self::$isNested ) {
|
||||
|
|
@ -115,11 +125,6 @@ class Tabber {
|
|||
}
|
||||
|
||||
$templateParser = new TemplateParser( __DIR__ . '/templates' );
|
||||
$data = [
|
||||
'count' => $count,
|
||||
'html-tabs' => $tabs,
|
||||
'html-tabpanels' => $tabpanels
|
||||
];
|
||||
return $templateParser->processTemplate( 'Tabber', $data );
|
||||
}
|
||||
|
||||
|
|
@ -212,6 +217,11 @@ class Tabber {
|
|||
}
|
||||
|
||||
$data['content'] = self::getTabContent( $content, $parser, $frame );
|
||||
$isContentHTML = strpos( $content, '<' ) === 0;
|
||||
if ( $data['content'] && !$isContentHTML ) {
|
||||
// If $content does not have any HTML element (i.e. just a text node), wrap it in <p/>
|
||||
$data['content'] = Html::rawElement( 'p', [], $data['content'] );
|
||||
}
|
||||
|
||||
$id = Sanitizer::escapeIdForAttribute( htmlspecialchars( $data['label'] ) );
|
||||
if ( self::$useLegacyId === true ) {
|
||||
|
|
@ -231,47 +241,6 @@ class Tabber {
|
|||
return $data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the HTML for a tab.
|
||||
*
|
||||
* @param array $tabData Tab data
|
||||
*
|
||||
* @return string HTML
|
||||
*/
|
||||
private static function getTabHTML( array $tabData ): string {
|
||||
$tabpanelId = "tabber-tabpanel-{$tabData['id']}";
|
||||
return Html::rawElement( 'a', [
|
||||
'class' => 'tabber__tab',
|
||||
'id' => "tabber-tab-{$tabData['id']}",
|
||||
'href' => "#$tabpanelId",
|
||||
'role' => 'tab',
|
||||
'aria-controls' => $tabpanelId
|
||||
], $tabData['label'] );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the HTML for a tabpanel.
|
||||
*
|
||||
* @param array $tabData Tab data
|
||||
*
|
||||
* @return string HTML
|
||||
*/
|
||||
private static function getTabpanelHTML( array $tabData ): string {
|
||||
$content = $tabData['content'];
|
||||
$isContentHTML = strpos( $content, '<' ) === 0;
|
||||
if ( $content && !$isContentHTML ) {
|
||||
// If $content does not have any HTML element (i.e. just a text node), wrap it in <p/>
|
||||
$content = Html::rawElement( 'p', [], $content );
|
||||
}
|
||||
return Html::rawElement( 'article', [
|
||||
'class' => 'tabber__panel',
|
||||
'id' => "tabber-tabpanel-{$tabData['id']}",
|
||||
'role' => 'tabpanel',
|
||||
'tabindex' => 0,
|
||||
'aria-labelledby' => "tabber-tab-{$tabData['id']}"
|
||||
], $content );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get JSON representation of a nested tab for Codex
|
||||
*
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ declare( strict_types=1 );
|
|||
namespace MediaWiki\Extension\TabberNeue;
|
||||
|
||||
use Exception;
|
||||
use Html;
|
||||
use MediaWiki\MediaWikiServices;
|
||||
use Parser;
|
||||
use PPFrame;
|
||||
|
|
@ -24,6 +23,10 @@ use TemplateParser;
|
|||
use Title;
|
||||
|
||||
class TabberTransclude {
|
||||
|
||||
/** @var bool */
|
||||
private static $useLegacyId = false;
|
||||
|
||||
/**
|
||||
* Parser callback for <tabbertransclude> tag
|
||||
*
|
||||
|
|
@ -39,8 +42,11 @@ class TabberTransclude {
|
|||
return '';
|
||||
}
|
||||
|
||||
$config = MediaWikiServices::getInstance()->getMainConfig();
|
||||
$parserOutput = $parser->getOutput();
|
||||
|
||||
self::$useLegacyId = $config->get( 'TabberNeueUseLegacyTabIds' );
|
||||
|
||||
$count = count( $parserOutput->getExtensionData( 'tabber-count' ) ?? [] );
|
||||
|
||||
$html = self::render( $input, $count, $parser, $frame );
|
||||
|
|
@ -65,29 +71,34 @@ class TabberTransclude {
|
|||
public static function render( string $input, int $count, Parser $parser, PPFrame $frame ): string {
|
||||
$selected = true;
|
||||
$arr = explode( "\n", $input );
|
||||
$tabs = '';
|
||||
$tabpanels = '';
|
||||
$data = [
|
||||
'count' => $count,
|
||||
'array-tabs' => []
|
||||
];
|
||||
|
||||
foreach ( $arr as $tab ) {
|
||||
$tabData = self::getTabData( $tab );
|
||||
if ( $tabData === [] ) {
|
||||
continue;
|
||||
}
|
||||
$tabs .= self::getTabHTML( $tabData );
|
||||
|
||||
$tabpanelHtml = '';
|
||||
try {
|
||||
$tabpanels .= self::buildTabTransclude( $tabData, $parser, $frame, $selected );
|
||||
$tabpanelHtml = self::buildTabTransclude( $tabData, $parser, $frame, $selected );
|
||||
} catch ( Exception $e ) {
|
||||
// This can happen if a $currentTitle is null
|
||||
continue;
|
||||
}
|
||||
|
||||
$data['array-tabs'][] = [
|
||||
'html-tabpanel' => $tabpanelHtml,
|
||||
'label' => $tabData['label'],
|
||||
'tabId' => "tabber-tab-{$tabData['id']}",
|
||||
'tabpanelId' => self::$useLegacyId ? $tabData['id'] : "tabber-tabpanel-{$tabData['id']}"
|
||||
];
|
||||
}
|
||||
|
||||
$templateParser = new TemplateParser( __DIR__ . '/templates' );
|
||||
$data = [
|
||||
'count' => $count,
|
||||
'html-tabs' => $tabs,
|
||||
'html-tabpanels' => $tabpanels
|
||||
];
|
||||
return $templateParser->processTemplate( 'Tabber', $data );
|
||||
}
|
||||
|
||||
|
|
@ -117,24 +128,6 @@ class TabberTransclude {
|
|||
return $data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the HTML for a tab.
|
||||
*
|
||||
* @param array $tabData Tab data
|
||||
*
|
||||
* @return string HTML
|
||||
*/
|
||||
private static function getTabHTML( array $tabData ): string {
|
||||
$tabpanelId = "tabber-tabpanel-{$tabData['id']}";
|
||||
return Html::element( 'a', [
|
||||
'class' => 'tabber__tab',
|
||||
'id' => "tabber-tab-{$tabData['id']}",
|
||||
'href' => "#$tabpanelId",
|
||||
'role' => 'tab',
|
||||
'aria-controls' => $tabpanelId
|
||||
], $tabData['label'] );
|
||||
}
|
||||
|
||||
/**
|
||||
* Build individual tab.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
{{!
|
||||
int count Current Tabber count
|
||||
string html-tabs
|
||||
string html-tabpanels
|
||||
}}
|
||||
<div id="tabber-{{count}}" class='tabber tabber--init'>
|
||||
<header class="tabber__header">
|
||||
<button class="tabber__header__prev" aria-hidden="true"></button>
|
||||
<nav class="tabber__tabs" role="tablist">{{{html-tabs}}}</nav>
|
||||
<button class="tabber__header__next" aria-hidden="true"></button>
|
||||
</header>
|
||||
<section class="tabber__section">{{{html-tabpanels}}}</section>
|
||||
</div>
|
||||
<div id="tabber-{{count}}" class='tabber tabber--init'>{{!
|
||||
}}<header class="tabber__header">{{!
|
||||
}}<button class="tabber__header__prev" aria-hidden="true"></button>{{!
|
||||
}}<nav class="tabber__tabs" role="tablist">{{!
|
||||
}}{{#array-tabs}}{{>TabberTab}}{{/array-tabs}}{{!
|
||||
}}{{#html-tabs}}{{{.}}}{{/html-tabs}}{{!
|
||||
}}</nav>{{!
|
||||
}}<button class="tabber__header__next" aria-hidden="true"></button>{{!
|
||||
}}</header>{{!
|
||||
}}<section class="tabber__section">{{>TabberTabpanel}}</section>{{!
|
||||
}}</div>
|
||||
1
includes/templates/TabberTab.mustache
Normal file
1
includes/templates/TabberTab.mustache
Normal file
|
|
@ -0,0 +1 @@
|
|||
<a class="tabber__tab" id="{{tabId}}" href="#{{tabpanelId}}" role="tab" aria-controls="{{tabpanelId}}">{{{label}}}</a>
|
||||
4
includes/templates/TabberTabpanel.mustache
Normal file
4
includes/templates/TabberTabpanel.mustache
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{{#array-tabs}}
|
||||
{{^html-tabpanel}}<article class="tabber__panel" id="{{tabpanelId}}" role="tabpanel" tabindex="0" aria-labelledby="{{tabId}}">{{{content}}}</article>{{/html-tabpanel}}
|
||||
{{#html-tabpanel}}{{{.}}}{{/html-tabpanel}}
|
||||
{{/array-tabs}}
|
||||
Loading…
Reference in a new issue