mirror of
https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git
synced 2024-11-11 17:02:05 +00:00
feat: use Tabber count instead of MD5 as identifier
This commit is contained in:
parent
5e4471d23f
commit
09715dcef6
|
@ -21,17 +21,10 @@
|
|||
"AutoloadClasses": {
|
||||
"TabberNeue\\TabberNeueHooks": "includes/TabberNeueHooks.php"
|
||||
},
|
||||
"ConfigRegistry": {
|
||||
"TabberNeue": "GlobalVarConfig::newInstance"
|
||||
},
|
||||
"ResourceModules": {
|
||||
"ext.tabberNeue": {
|
||||
"packageFiles": [
|
||||
"ext.tabberNeue.js",
|
||||
{
|
||||
"name": "config.json",
|
||||
"callback": "TabberNeue\\TabberNeueHooks::getTabberNeueResourceLoaderConfig"
|
||||
}
|
||||
"ext.tabberNeue.js"
|
||||
],
|
||||
"styles": [
|
||||
"ext.tabberNeue.less"
|
||||
|
@ -68,19 +61,10 @@
|
|||
"localBasePath": "modules",
|
||||
"remoteExtPath": "TabberNeue/modules"
|
||||
},
|
||||
"config_prefix": "wgTabberNeue",
|
||||
"config": {
|
||||
"EnableMD5Hash": {
|
||||
"value": true,
|
||||
"description": "Enable or disable appending unique MD5 hash key to tabs",
|
||||
"descriptionmsg": "tabberneue-config-md5hash",
|
||||
"public": true
|
||||
}
|
||||
},
|
||||
"Hooks": {
|
||||
"ParserFirstCallInit": [
|
||||
"TabberNeue\\TabberNeueHooks::onParserFirstCallInit"
|
||||
]
|
||||
},
|
||||
"manifest_version": 1
|
||||
"manifest_version": 2
|
||||
}
|
||||
|
|
|
@ -13,10 +13,8 @@ declare( strict_types=1 );
|
|||
|
||||
namespace TabberNeue;
|
||||
|
||||
use Config;
|
||||
use Parser;
|
||||
use PPFrame;
|
||||
use ResourceLoaderContext;
|
||||
|
||||
class TabberNeueHooks {
|
||||
/**
|
||||
|
@ -40,15 +38,13 @@ class TabberNeueHooks {
|
|||
*/
|
||||
public static function renderTabber( $input, array $args, Parser $parser, PPFrame $frame ) {
|
||||
$parser->getOutput()->addModules( 'ext.tabberNeue' );
|
||||
|
||||
$key = substr( md5( $input ), 0, 6 );
|
||||
$arr = explode( "|-|", $input );
|
||||
$htmlTabs = '';
|
||||
foreach ( $arr as $tab ) {
|
||||
$htmlTabs .= self::buildTab( $tab, $parser, $frame );
|
||||
}
|
||||
|
||||
$html = '<div id="tabber-' . $key . '" class="tabber">' .
|
||||
$html = '<div class="tabber">' .
|
||||
'<section class="tabber__section">' . $htmlTabs . "</section></div>";
|
||||
|
||||
return $html;
|
||||
|
@ -79,19 +75,4 @@ class TabberNeueHooks {
|
|||
|
||||
return $tab;
|
||||
}
|
||||
|
||||
/**
|
||||
* Passes config variables to ext.tabberNeue ResourceLoader module.
|
||||
* @param ResourceLoaderContext $context
|
||||
* @param Config $config
|
||||
* @return array
|
||||
*/
|
||||
public static function getTabberNeueResourceLoaderConfig(
|
||||
ResourceLoaderContext $context,
|
||||
Config $config
|
||||
) {
|
||||
return [
|
||||
'wgTabberNeueEnableMD5Hash' => $config->get( 'EnableMD5Hash' ),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,8 +2,9 @@
|
|||
* Initialize Tabber
|
||||
*
|
||||
* @param {HTMLElement} tabber
|
||||
* @param {number} count
|
||||
*/
|
||||
function initTabber( tabber ) {
|
||||
function initTabber( tabber, count ) {
|
||||
const tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' );
|
||||
|
||||
const container = document.createElement( 'header' ),
|
||||
|
@ -15,18 +16,9 @@ function initTabber( tabber ) {
|
|||
const fragment = new DocumentFragment();
|
||||
|
||||
[ ...tabPanels ].forEach( ( tabPanel ) => {
|
||||
const isMD5 = require( './config.json' ).wgTabberNeueEnableMD5Hash.value,
|
||||
const hash = mw.util.escapeIdForAttribute( tabPanel.title ) + '-' + count,
|
||||
tab = document.createElement( 'a' );
|
||||
|
||||
// Prepend with tab so that it does not collide with article heading
|
||||
let hash = 'tab-' + mw.util.escapeIdForAttribute( tabPanel.title );
|
||||
|
||||
// If MD5 Hash is enabled
|
||||
if ( isMD5 ) {
|
||||
const key = tabber.getAttribute( 'id' ).substring( 7 );
|
||||
hash += '-' + key;
|
||||
}
|
||||
|
||||
tabPanel.setAttribute( 'id', hash );
|
||||
tabPanel.setAttribute( 'role', 'tabpanel' );
|
||||
tabPanel.setAttribute( 'aria-labelledby', 'tab-' + hash );
|
||||
|
@ -223,9 +215,11 @@ function main() {
|
|||
const tabbers = document.querySelectorAll( '.tabber' );
|
||||
|
||||
if ( tabbers ) {
|
||||
let count = 0;
|
||||
mw.loader.load( 'ext.tabberNeue.icons' );
|
||||
tabbers.forEach( ( tabber ) => {
|
||||
initTabber( tabber );
|
||||
initTabber( tabber, count );
|
||||
count++;
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue