pinafore/routes/_components/compose/ComposeAutosuggest.html

107 lines
3.6 KiB
HTML
Raw Normal View History

<div class="compose-autosuggest {shown ? 'shown' : ''} {realm === 'dialog' ? 'is-dialog' : ''}"
aria-hidden="true" >
2018-03-25 03:04:54 +02:00
<ComposeAutosuggestionList
items={autosuggestSearchResults}
2018-03-25 21:24:38 +02:00
on:click="onClick(event)"
type={autosuggestType}
selected={autosuggestSelected}
2018-03-25 03:04:54 +02:00
/>
</div>
<style>
.compose-autosuggest {
position: absolute;
left: 5px;
top: 0;
2018-03-25 03:04:54 +02:00
pointer-events: none;
opacity: 0;
2018-03-25 03:04:54 +02:00
transition: opacity 0.1s linear;
min-width: 400px;
max-width: calc(100vw - 20px);
z-index: 7000;
}
.compose-autosuggest.is-dialog {
z-index: 11000;
2018-03-25 03:04:54 +02:00
}
.compose-autosuggest.shown {
pointer-events: auto;
opacity: 1;
2018-03-25 03:04:54 +02:00
}
@media (max-width: 479px) {
.compose-autosuggest {
/* hack: move this over to the left on mobile so it's easier to see */
transform: translateX(-58px); /* avatar size 48px + 10px padding */
min-width: 0;
2018-03-25 03:04:54 +02:00
width: calc(100vw - 20px);
}
}
</style>
<script>
import { store } from '../../_store/store'
import ComposeAutosuggestionList from './ComposeAutosuggestionList.html'
import get from 'lodash-es/get'
import { selectAutosuggestItem } from '../../_actions/autosuggest'
import { observe } from 'svelte-extras'
import { once } from '../../_utils/once'
2018-03-25 03:04:54 +02:00
export default {
2018-04-20 06:38:01 +02:00
oncreate () {
this._promiseChain = Promise.resolve()
this.observe('shouldBeShown', (shouldBeShown) => {
2018-03-25 03:04:54 +02:00
// TODO: hack so that when the user clicks the button, and the textarea blurs,
// we don't immediately hide the dropdown which would cause the click to get lost
this._promiseChain = this._promiseChain.then(() => {
if (!shouldBeShown) {
return Promise.race([
new Promise(resolve => setTimeout(resolve, 200)),
new Promise(resolve => this.once('autosuggestItemSelected', resolve))
])
}
}).then(() => {
this.set({ shown: shouldBeShown })
2018-03-25 03:04:54 +02:00
})
})
},
methods: {
observe,
once,
2018-04-20 06:38:01 +02:00
onClick (item) {
2018-03-25 21:24:38 +02:00
this.fire('autosuggestItemSelected')
selectAutosuggestItem(item)
2018-03-25 03:04:54 +02:00
}
},
computed: {
/* eslint-disable camelcase */
composeSelectionStart: ({ $autosuggestData_composeSelectionStart, $currentInstance, realm }) => (
get($autosuggestData_composeSelectionStart, [$currentInstance, realm], 0)
),
composeFocused: ({ $autosuggestData_composeFocused, $currentInstance, realm }) => (
get($autosuggestData_composeFocused, [$currentInstance, realm], false)
),
autosuggestSearchResults: ({ $autosuggestData_autosuggestSearchResults, $currentInstance, realm }) => (
get($autosuggestData_autosuggestSearchResults, [$currentInstance, realm], [])
),
autosuggestType: ({ $autosuggestData_autosuggestType, $currentInstance, realm }) => (
get($autosuggestData_autosuggestType, [$currentInstance, realm])
),
autosuggestSelected: ({ $autosuggestData_autosuggestSelected, $currentInstance, realm }) => (
get($autosuggestData_autosuggestSelected, [$currentInstance, realm], 0)
),
autosuggestSearchText: ({ $autosuggestData_autosuggestSelected, $currentInstance, realm }) => (
get($autosuggestData_autosuggestSelected, [$currentInstance, realm])
),
/* eslint-enable camelcase */
shouldBeShown: ({ realm, $autosuggestShown, composeFocused }) => (
!!($autosuggestShown && composeFocused)
)
2018-03-25 03:04:54 +02:00
},
data: () => ({
shown: false
}),
2018-03-25 03:04:54 +02:00
store: () => store,
components: {
ComposeAutosuggestionList
}
}
</script>