feat: use Tabber count instead of MD5 as identifier

This commit is contained in:
alistair3149 2021-10-23 00:47:49 -04:00
parent 5e4471d23f
commit 09715dcef6
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
3 changed files with 9 additions and 50 deletions

View file

@ -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
}

View file

@ -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' ),
];
}
}

View file

@ -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++;
} );
}
}