From 74cd8d82fe7721ca5dfb6eea7fbe457b857b19fd Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Sep 2020 17:00:17 +0300
Subject: Make number of stickers per row configurable

---
 web/src/index.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

(limited to 'web/src')

diff --git a/web/src/index.js b/web/src/index.js
index 815f321..e81bfd1 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -27,6 +27,7 @@ class App extends Component {
 			packs: [],
 			loading: true,
 			error: null,
+			stickersPerRow: parseInt(localStorage.mauStickersPerRow || "4"),
 			frequentlyUsed: {
 				id: "frequently-used",
 				title: "Frequently used",
@@ -61,6 +62,15 @@ class App extends Component {
 		localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker]))
 	}
 
+	setStickersPerRow(val) {
+		localStorage.mauStickersPerRow = val
+		document.documentElement.style.setProperty("--stickers-per-row", localStorage.mauStickersPerRow)
+		this.setState({
+			stickersPerRow: val,
+		})
+		this.packListRef.scrollTop = this.packListRef.scrollHeight
+	}
+
 	reloadPacks() {
 		this.imageObserver.disconnect()
 		this.sectionObserver.disconnect()
@@ -97,6 +107,7 @@ class App extends Component {
 	}
 
 	componentDidMount() {
+		document.documentElement.style.setProperty("--stickers-per-row", this.state.stickersPerRow.toString())
 		this._loadPacks()
 		this.imageObserver = new IntersectionObserver(this.observeImageIntersections, {
 			rootMargin: "100px",
@@ -189,6 +200,12 @@ const Settings = ({ app }) => html`
 		<h1>Settings</h1>
 		<div class="settings-list">
 			<button onClick=${app.reloadPacks}>Reload</button>
+			<div>
+				<label for="stickers-per-row">Stickers per row: ${app.state.stickersPerRow}</label>
+				<input type="range" min=2 max=10 id="stickers-per-row" id="stickers-per-row"
+					value=${app.state.stickersPerRow}
+					onInput=${evt => app.setStickersPerRow(evt.target.value)} />
+			</div>
 		</div>
 	</section>
 `
-- 
cgit v1.2.3