feat: add config to disable MD5 hash (#6)

README.md

@@ -52,3 +52,7 @@ Tab2={{{2|}}}
 }}
 ```
 
+## Configurations
+Name | Description | Values | Default
+:--- | :--- | :--- | :---
+`$wgTabberNeueMD5Hash` | Enable or disable appending unique MD5 hash key to tabs. Disable if you need permalink to specific tabs. | `true`; `false` | `true`

extension.json

@@ -21,14 +21,21 @@
 	"AutoloadClasses": {
 		"TabberNeue\\TabberNeueHooks": "includes/TabberNeueHooks.php"
 	},
+	"ConfigRegistry": {
+		"TabberNeue": "GlobalVarConfig::newInstance"
+	},
 	"ResourceModules": {
 		"ext.tabberNeue": {
+			"packageFiles": [
+				"ext.tabberNeue.js",
+				{
+					"name": "config.json",
+					"callback": "TabberNeue\\TabberNeueHooks::getTabberNeueResourceLoaderConfig"
+				}
+			],
 			"styles": [
 				"ext.tabberNeue.less"
 			],
-			"scripts": [
-				"ext.tabberNeue.js"
-			],
 			"dependencies": [
 				"mediawiki.Uri",
 				"mediawiki.util"
@@ -61,6 +68,15 @@
 		"localBasePath": "modules",
 		"remoteExtPath": "TabberNeue/modules"
 	},
+	"config_prefix": "wgTabberNeue",
+	"config": {
+		"MD5Hash": {
+			"value": true,
+			"description": "Enable or disable appending unique MD5 hash key to tabs",
+			"descriptionmsg": "tabberneue-config-md5hash",
+			"public": true
+		}
+	},
 	"Hooks": {
 		"ParserFirstCallInit": [
 			"TabberNeue\\TabberNeueHooks::onParserFirstCallInit"

includes/TabberNeueHooks.php

@@ -9,10 +9,14 @@
  * @link    https://www.mediawiki.org/wiki/Extension:TabberNeue
  */
 
+declare( strict_types=1 );
+
 namespace TabberNeue;
 
+use Config;
 use Parser;
 use PPFrame;
+use ResourceLoaderContext;
 
 class TabberNeueHooks {
 	/**
@@ -75,4 +79,19 @@ 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 [
+			'wgTabberNeueMD5Hash' => $config->get( 'MD5Hash' ),
+		];
+	}
 }

modules/ext.tabberNeue.js

@@ -4,8 +4,7 @@
  * @param {HTMLElement} tabber
  */
 function initTabber( tabber ) {
-	const key = tabber.getAttribute( 'id' ).substring( 7 ),
-		tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' );
+	const tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' );
 
 	const container = document.createElement( 'header' ),
 		tabList = document.createElement( 'nav' ),
@@ -16,9 +15,18 @@ function initTabber( tabber ) {
 		const fragment = new DocumentFragment();
 
 		[ ...tabPanels ].forEach( ( tabPanel ) => {
-			const hash = mw.util.escapeIdForAttribute( tabPanel.title ) + '-' + key,
+			const isMD5 = require( './config.json' ).wgTabberNeueMD5Hash.value,
 				tab = document.createElement( 'a' );
 
+			// Prepend with tab so that it does not collide with article heading
+			let hash = 'tab-' + mw.util.escapeIdForAttribute( tabPanel.title ).slice( 0, -1 );
+
+			// 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 );