From 9110f5ee38fe20d9a6e37eab2b25917617ed83ca Mon Sep 17 00:00:00 2001
From: salixor <salixor@pm.me>
Date: Wed, 20 Dec 2023 21:47:41 +0100
Subject: [PATCH] Move some parameters to a constants file
---
web/src/constants.js | 4 ++++
web/src/frequently-used.js | 4 +++-
web/src/index.js | 19 ++++++++++++-------
3 files changed, 19 insertions(+), 8 deletions(-)
create mode 100644 web/src/constants.js
diff --git a/web/src/constants.js b/web/src/constants.js
new file mode 100644
index 0000000..de75b5d
--- /dev/null
+++ b/web/src/constants.js
@@ -0,0 +1,4 @@
+export const DEFAULT_PER_ROW = 4;
+export const MIN_PER_ROW = 2;
+export const MAX_PER_ROW = 10;
+export const FREQUENTLY_USED_ROWS = 3;
diff --git a/web/src/frequently-used.js b/web/src/frequently-used.js
index d35f6a9..4aa994d 100644
--- a/web/src/frequently-used.js
+++ b/web/src/frequently-used.js
@@ -14,6 +14,8 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
+import { MAX_PER_ROW, FREQUENTLY_USED_ROWS } from "./constants.js"
+
const FREQUENTLY_USED_STORAGE_KEY = 'mauFrequentlyUsedStickerIDs'
const FREQUENTLY_USED_STORAGE_CACHE_KEY = 'mauFrequentlyUsedStickerCache'
@@ -44,7 +46,7 @@ export const add = (id) => {
setFrequentlyUsedStorage(FREQUENTLY_USED_COPY)
}
-export const get = (limit = 16) => {
+export const get = (limit = FREQUENTLY_USED_ROWS * MAX_PER_ROW) => {
if (FREQUENTLY_USED_SORTED === null) {
FREQUENTLY_USED_SORTED = Object.entries(FREQUENTLY_USED || {})
.sort(sortFrequentlyUsedEntries)
diff --git a/web/src/index.js b/web/src/index.js
index 8ef30c9..573b6cd 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -21,6 +21,7 @@ import {giphyIsEnabled, GiphySearchTab, setGiphyAPIKey} from "./giphy.js"
import * as widgetAPI from "./widget-api.js"
import * as frequent from "./frequently-used.js"
import * as userSettings from "./user-settings.js"
+import * as constants from "./constants.js"
// The base URL for fetching packs. The app will first fetch ${PACK_BASE_URL}/index.json,
// then ${PACK_BASE_URL}/${packFile} for each packFile in the packs object of the index.json file.
@@ -71,11 +72,14 @@ const sanitizeString = s => s.toLowerCase().trim()
class App extends Component {
constructor(props) {
super(props)
+
+ const stickersPerRow = +(localStorage.mauStickersPerRow ?? constants.DEFAULT_PER_ROW)
+
this.defaultTheme = getUrlParameter("theme")
this.state = {
...defaultState,
...defaultSearchState,
- stickersPerRow: parseInt(localStorage.mauStickersPerRow || "4"),
+ stickersPerRow,
theme: localStorage.mauStickerThemeOverride || this.defaultTheme,
frequentlyUsed: makeFrequentlyUsedState(),
userSettings: {
@@ -162,12 +166,10 @@ class App extends Component {
body.classList = `theme-${theme}`
}
- setStickersPerRow(val) {
- localStorage.mauStickersPerRow = val
+ setStickersPerRow(stickersPerRow) {
+ localStorage.mauStickersPerRow = stickersPerRow
document.documentElement.style.setProperty("--stickers-per-row", localStorage.mauStickersPerRow)
- this.setState({
- stickersPerRow: val,
- })
+ this.setState({ stickersPerRow })
this.packListRef.scrollTop = this.packListRef.scrollHeight
}
@@ -408,7 +410,10 @@ const Settings = ({app}) => html`
<button onClick=${app.clearFrequentlyUsed}>Clear frequently used</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"
+ <input type="range"
+ min=${constants.MIN_PER_ROW}
+ max=${constants.MAX_PER_ROW}
+ id="stickers-per-row"
value=${app.state.stickersPerRow}
onInput=${evt => app.setStickersPerRow(evt.target.value)}/>
</div>
--
GitLab