From 750dd273be7d4cd1bf5e8e3441c1dd40d1aa85a5 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 19 Apr 2022 16:34:04 -0400
Subject: [PATCH] feat: add background fade to indicate scrollable tab header

---
 modules/ext.tabberNeue.js   | 21 +++++++++++----------
 modules/ext.tabberNeue.less | 16 ++++++++++++++++
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/modules/ext.tabberNeue.js b/modules/ext.tabberNeue.js
index edf4ca0..8eb56f1 100644
--- a/modules/ext.tabberNeue.js
+++ b/modules/ext.tabberNeue.js
@@ -128,13 +128,17 @@ function initTabber( tabber, count ) {
 
 				// Just to add the right classes
 				updateButtons();
-				prevButton.addEventListener( 'click', function() {
-					scrollTabs( -scrollOffset );
-				}, false );
 
-				nextButton.addEventListener( 'click', function() {
-					scrollTabs( scrollOffset );
-				}, false );
+				// Button only shows on pointer devices
+				if ( matchMedia( '(hover: hover)' ).matches ) {
+					prevButton.addEventListener( 'click', function() {
+						scrollTabs( -scrollOffset );
+					}, false );
+
+					nextButton.addEventListener( 'click', function() {
+						scrollTabs( scrollOffset );
+					}, false );
+				}
 			} else {
 				container.classList.remove( NEXTCLASS );
 				container.classList.remove( PREVCLASS );
@@ -328,10 +332,7 @@ function initTabber( tabber, count ) {
 
 	switchTab();
 
-	// Only run if client is not a touch device
-	if ( matchMedia( '(hover: hover)' ).matches ) {
-		initButtons();
-	}
+	initButtons();
 
 	// window.addEventListener( 'hashchange', switchTab, false );
 
diff --git a/modules/ext.tabberNeue.less b/modules/ext.tabberNeue.less
index b925e58..ee14c1f 100644
--- a/modules/ext.tabberNeue.less
+++ b/modules/ext.tabberNeue.less
@@ -196,6 +196,22 @@
 	}
 }
 
+@media ( hover: none ) {
+	// Need extra specificity to override
+	.tabber {
+		.tabber__header {
+			&__prev,
+			&__next {
+				pointer-events: none; // Disable arrow button
+
+				&:after {
+					background-image: none; // Remove arrow icon
+				}
+			}
+		}
+	}
+}
+
 @media ( hover: hover ) {
 	.tabber {
 		&__tab {