handle autofocus search + setting on/off

web/src/index.js

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { html, render, Component } from "../lib/htm/preact.js"
 import { Spinner } from "./spinner.js"
-import { SearchBox } from "./search-box.js"
+import { shouldAutofocusSearchBar, SearchBox } from "./search-box.js"
 import * as widgetAPI from "./widget-api.js"
 import * as frequent from "./frequently-used.js"
 
@@ -128,6 +128,10 @@ class App extends Component {
 		})
 	}
 
+	// End search
+
+	// Settings
+
 	setStickersPerRow(val) {
 		localStorage.mauStickersPerRow = val
 		document.documentElement.style.setProperty("--stickers-per-row", localStorage.mauStickersPerRow)
@@ -147,6 +151,12 @@ class App extends Component {
 		}
 	}
 
+	setAutofocusSearchBar(checked) {
+		localStorage.mauAutofocusSearchBar = checked
+	}
+
+	// End settings
+
 	reloadPacks() {
 		this.imageObserver.disconnect()
 		this.sectionObserver.disconnect()
@@ -218,6 +228,9 @@ class App extends Component {
 		for (const entry of intersections) {
 			const packID = entry.target.getAttribute("data-pack-id")
 			const navElement = document.getElementById(`nav-${packID}`)
+			if (!navElement) {
+				continue
+			}
 			if (entry.isIntersecting) {
 				navElement.classList.add("visible")
 				const bb = navElement.getBoundingClientRect()
@@ -321,6 +334,14 @@ const Settings = ({ app }) => html`
 					<option value="black">Black</option>
 				</select>
 			</div>
+			<div>
+				Autofocus search bar:
+				<input
+					type="checkbox"
+					checked=${shouldAutofocusSearchBar()}
+					onChange=${evt => app.setAutofocusSearchBar(evt.target.checked)}
+				/>
+			</div>
 		</div>
 	</section>
 `

web/src/search-box.js

@@ -15,7 +15,13 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { html } from "../lib/htm/preact.js"
 
+export function shouldAutofocusSearchBar() {
+  return localStorage.mauAutofocusSearchBar === 'true'
+}
+
 export const SearchBox = ({ onKeyUp, resetSearch, value }) => {
+	const autofocus = shouldAutofocusSearchBar()
+
 	const className = `icon-display ${value ? 'reset-click-zone' : null}`
 	const title = value ? 'Click to reset' : null
 	const onClick = value ? resetSearch : null
@@ -24,7 +30,7 @@ export const SearchBox = ({ onKeyUp, resetSearch, value }) => {
 
 	return html`
 		<div class="search-box">
-			<input value=${value} placeholder="Find stickers" onKeyUp=${onKeyUp} />
+			<input value=${value} placeholder="Find stickers" onKeyUp=${onKeyUp} autoFocus=${autofocus} />
 			<div class=${className} title=${title} onClick=${onClick}>
 				<span class="icon ${iconToDisplay}" />
 			</div>