Add group achievements option link

SteamDatabase · Sep 27, 2024 · 3ca4a42 · 3ca4a42
1 parent 82bb94c
commit 3ca4a42
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/options/options.css b/options/options.css
@@ -160,6 +160,14 @@ footer p {
 	margin-top: 0.4rem;
 }
 
+:focus,
+.checkbox:focus {
+	outline: solid;
+	outline-color: #00aff4;
+	outline-offset: 4px;
+	outline-width: 2px;
+}
+
 .checkbox > input {
 	width: 1rem;
 	height: 1rem;

diff --git a/options/options.html b/options/options.html
@@ -215,6 +215,10 @@ <h3 data-msg="options_header_achievements"></h3>
 					<input type="checkbox" class="option-check" data-option="achievements-global-unlock" checked>
 					<div data-msg="options_achievements_global_unlock"></div>
 				</label>
+				<label class="checkbox">
+					<input type="checkbox" class="option-check" checked disabled>
+					<div><a href="#" class="js-scroll-to-option" data-option="achievements-group-updates" data-msg="options_achievement_groups"></a> 🠉</div>
+				</label>
 				<div class="checkbox">
 					<input type="checkbox" class="option-check" checked disabled>
 					<div data-msg="options_modernized_achievements"></div>

diff --git a/options/options.js b/options/options.js
@@ -49,6 +49,8 @@
 	let element;
 	let starDismissed = false;
 	const checkboxes = document.querySelectorAll( '.option-check:not(:disabled)' );
+
+	/** @type {Object.<string, HTMLElement>} */
 	const options =
 	{
 		'clicked-star': null,
@@ -106,6 +108,21 @@
 		}
 	} );
 
+	document.querySelectorAll( '.js-scroll-to-option' ).forEach( ( el ) =>
+	{
+		el.addEventListener( 'click', ( e )=>
+		{
+			e.preventDefault();
+
+			const option = options[ el.dataset.option ];
+			option.scrollIntoView( {
+				behavior: 'smooth',
+				block: 'center',
+			} );
+			option.closest( 'label' ).focus( { preventScroll: true } );
+		} );
+	} );
+
 	// Must be synced with host_permissions in manifest.json
 	const permissions = {
 		origins: [