pinafore/routes/_components/status/StatusComposeBox.html

70 lines
2 KiB
HTML
Raw Normal View History

2018-03-30 08:06:17 +00:00
<div class="status-article-compose-box">
<ComposeBox realm={{originalStatusId}}
2018-03-30 08:06:17 +00:00
size="slim"
autoFocus="true"
hideBottomBorder="true"
2018-04-05 06:03:26 +00:00
isReply="true"
replyVisibility={{visibility}}
replySpoiler={{spoilerText}}
inReplyToUuid={{uuid}}
2018-03-30 08:06:17 +00:00
/>
</div>
<style>
.status-article-compose-box {
grid-area: compose;
}
</style>
<script>
import ComposeBox from '../../_components/compose/ComposeBox.html'
import { store } from '../../_store/store'
import debounce from 'lodash-es/debounce'
import throttle from 'lodash-es/throttle'
2018-04-08 22:08:32 +00:00
import { on } from '../../_utils/eventBus'
import { observe } from 'svelte-extras'
2018-03-30 15:43:36 +00:00
const DEBOUNCE_DELAY = 400
const THROTTLE_DELAY = 150
2018-03-30 08:06:17 +00:00
export default {
2018-04-20 04:38:01 +00:00
oncreate () {
2018-04-08 22:08:32 +00:00
on('postedStatus', this, this.onPostedStatus)
this.setupRecalculateHeightListener()
2018-03-30 08:06:17 +00:00
},
store: () => store,
computed: {
2018-03-30 17:04:35 +00:00
composeData: ($currentComposeData, originalStatusId) => $currentComposeData[originalStatusId] || {}
2018-03-30 08:06:17 +00:00
},
methods: {
observe,
2018-04-20 04:38:01 +00:00
onPostedStatus (realm) {
let { originalStatusId } = this.get()
if (realm !== originalStatusId) {
2018-04-08 22:08:32 +00:00
return
}
2018-03-30 08:06:17 +00:00
requestAnimationFrame(() => {
let { uuid } = this.get()
let { repliesShown } = this.store.get()
repliesShown[uuid] = false
this.store.set({repliesShown})
2018-03-30 08:06:17 +00:00
this.fire('recalculateHeight')
})
2018-04-08 22:08:32 +00:00
},
2018-04-20 04:38:01 +00:00
setupRecalculateHeightListener () {
2018-04-08 22:08:32 +00:00
const recalc = () => requestAnimationFrame(() => this.fire('recalculateHeight'))
// debounce AND throttle due to 333ms content warning animation
const debounced = debounce(recalc, DEBOUNCE_DELAY)
const throttled = throttle(() => {
debounced()
recalc()
}, THROTTLE_DELAY, {
leading: true,
trailing: true
})
this.observe('composeData', throttled)
2018-03-30 08:06:17 +00:00
}
2018-04-08 22:08:32 +00:00
},
components: {
ComposeBox
2018-03-30 08:06:17 +00:00
}
}
</script>