mirror of
https://github.com/maunium/stickerpicker.git
synced 2025-07-16 05:53:28 +02:00
90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
// maunium-stickerpicker - A fast and simple Matrix sticker picker widget.
|
|
// Copyright (C) 2020 Tulir Asokan
|
|
//
|
|
// This program is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU Affero General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
//
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU Affero General Public License for more details.
|
|
//
|
|
// 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 { html, Component } from "../lib/htm/preact.js"
|
|
import { checkMobileSafari, checkAndroid } from "./user-agent-detect.js"
|
|
|
|
export function shouldDisplayAutofocusSearchBar() {
|
|
return !checkMobileSafari() && !checkAndroid()
|
|
}
|
|
|
|
export function shouldAutofocusSearchBar() {
|
|
return localStorage.mauAutofocusSearchBar === 'true' && shouldDisplayAutofocusSearchBar()
|
|
}
|
|
|
|
export function focusSearchBar() {
|
|
const inputInWebView = document.querySelector('.search-box input')
|
|
if (inputInWebView && shouldAutofocusSearchBar()) {
|
|
inputInWebView.focus()
|
|
}
|
|
}
|
|
|
|
export class SearchBox extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.autofocus = shouldAutofocusSearchBar()
|
|
this.value = props.value
|
|
this.onSearch = props.onSearch
|
|
this.onReset = props.onReset
|
|
|
|
this.search = this.search.bind(this)
|
|
this.clearSearch = this.clearSearch.bind(this)
|
|
}
|
|
|
|
componentDidMount() {
|
|
focusSearchBar()
|
|
}
|
|
|
|
componentWillReceiveProps(props) {
|
|
this.value = props.value
|
|
}
|
|
|
|
search(e) {
|
|
if (e.key === "Escape") {
|
|
this.clearSearch()
|
|
return
|
|
}
|
|
this.onSearch(e.target.value)
|
|
}
|
|
|
|
clearSearch() {
|
|
this.onReset()
|
|
}
|
|
|
|
render() {
|
|
const isEmpty = !this.value
|
|
|
|
const className = `icon-display ${isEmpty ? null : 'reset-click-zone'}`
|
|
const title = isEmpty ? null : 'Click to reset'
|
|
const onClick = isEmpty ? null : this.clearSearch
|
|
const iconToDisplay = `icon-${isEmpty ? 'search' : 'reset'}`
|
|
|
|
return html`
|
|
<div class="search-box">
|
|
<input
|
|
placeholder="Find stickers …"
|
|
value=${this.value}
|
|
onKeyUp=${this.search}
|
|
autoFocus=${this.autofocus}
|
|
/>
|
|
<div class=${className} title=${title} onClick=${onClick}>
|
|
<span class="icon ${iconToDisplay}" />
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
}
|