diff options
| author | Tulir Asokan <tulir@maunium.net> | 2020-09-06 18:52:25 +0300 |
|---|---|---|
| committer | Tulir Asokan <tulir@maunium.net> | 2020-09-06 18:52:25 +0300 |
| commit | bddb5608bc7890a430205568794054e7bebe7c30 (patch) | |
| tree | 37137e3f94312b0416b2f6c2ce8184f68dc2ddff | |
| parent | 8c45207b0f5a4ed441fab889fa42da69928de2f5 (diff) | |
Allow scrolling navbar with mouse wheel. Fixes #9
| -rw-r--r-- | web/index.js | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/web/index.js b/web/index.js index 236e327..348277a 100644 --- a/web/index.js +++ b/web/index.js @@ -38,7 +38,9 @@ class App extends Component { this.state.frequentlyUsed.stickers = this._getStickersByID(this.state.frequentlyUsed.stickerIDs) this.imageObserver = null this.packListRef = null + this.navRef = null this.sendSticker = this.sendSticker.bind(this) + this.navScroll = this.navScroll.bind(this) } _getStickersByID(ids) { @@ -137,6 +139,10 @@ class App extends Component { widgetAPI.sendSticker(sticker) } + navScroll(evt) { + this.navRef.scrollLeft += evt.deltaY * 12 + } + render() { if (this.state.loading) { return html`<main class="spinner"><${Spinner} size=${80} green /></main>` @@ -149,7 +155,7 @@ class App extends Component { return html`<main class="empty"><h1>No packs found 😿</h1></main>` } return html`<main class="has-content"> - <nav> + <nav onWheel=${this.navScroll} ref=${elem => this.navRef = elem}> <${NavBarItem} pack=${this.state.frequentlyUsed} iconOverride="res/recent.svg" altOverride="🕓️" /> ${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)} </nav> |