feat: add config to toggle Tabber animation and default to false

Add a config to enable/disable Tabber scrolling animation.

It is currently default to false as smooth scrolling is broken on Safari,
as tabs would not scroll at all with it on. It is an upstream browser bug
that is being tracked here: https://bugs.webkit.org/show_bug.cgi?id=238497

Author: alistair3149

README.md

@@ -89,4 +89,10 @@ First Page Name|First Tab Title
 Second Page Name|Second Tab Title
 Third Page Name|Third Tab Title
 </tabbertransclude>
-```
+```
+
+## Configurations
+Name | Description | Values | Default
+:--- | :--- | :--- | :---
+`$wgTabberNeueEnableAnimation` | Enable or disable smooth scroll animation |`true` - enable; `false` - disable | `false`
+`$wgTabberNeueUpdateLocationOnTabChange` | If enabled, when a tab is selected, the URL displayed on the browser changes. Opening this URL makes that tab initially selected |`true` - enable; `false` - disable | `true`

extension.json

@@ -33,6 +33,7 @@
 				{
 					"name": "config.json",
 					"config": {
+						"enableAnimation": "TabberNeueEnableAnimation",
 						"updateLocationOnTabChange": "TabberNeueUpdateLocationOnTabChange"
 					}
 				}
@@ -108,6 +109,11 @@
 	},
 	"config_prefix": "wg",
 	"config": {
+		"TabberNeueEnableAnimation": {
+			"value": false,
+			"description": "Enable or disable smooth scroll animation",
+			"public": true
+		},
 		"TabberNeueUpdateLocationOnTabChange": {
 			"value": true,
 			"description": "If enabled, when a tab is selected, the URL displayed on the browser changes. Opening this URL makes that tab initially selected.",

modules/ext.tabberNeue.js

@@ -153,6 +153,16 @@ function initTabber( tabber, count ) {
 			updateButtons();
 		} );
 
+		// Add class to enable animation
+		// TODO: Change default to true when Safari bug is resolved
+		//
+		// Safari does not scroll when scroll-behavior: smooth and overflow: hidden
+		// Therefore the default is set to false now until it gets resolved
+		// https://bugs.webkit.org/show_bug.cgi?id=238497
+		if ( !config || config.enableAnimation ) {
+			tabber.classList.add( 'tabber--animate' );
+		}
+
 		// Listen for element resize
 		if ( window.ResizeObserver ) {
 			var tabListResizeObserver = new ResizeObserver( mw.util.debounce( 250, setupButtons ) );
@@ -380,4 +390,4 @@ if ( document.readyState === 'interactive' || document.readyState === 'complete'
 	document.addEventListener( 'DOMContentLoaded', function () {
 		main();
 	} );
-};
+}

modules/ext.tabberNeue.less

@@ -237,11 +237,13 @@
 // Smooth scrolling through a large number of panels hurt performance on mobile
 // Also it will trigger unnessecary lazyloading as lazyload content show up momentarily
 @media ( prefers-reduced-motion: no-preference ) and ( min-width: 720px ) {
-	.tabber {
-		&__header,
-		&__section,
-		&__tabs {
-			scroll-behavior: smooth;
+	.tabber--animate {
+		.tabber {
+			&__header,
+			&__section,
+			&__tabs {
+				scroll-behavior: smooth;
+			}
 		}
 	}
 }