63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<div class="status-article-compose-box">
|
|
<ComposeBox realm="{{originalStatusId}}"
|
|
size="slim"
|
|
autoFocus="true"
|
|
hideBottomBorder="true"
|
|
replyVisibility="{{visibility}}"
|
|
replySpoiler="{{spoilerText}}"
|
|
on:postedStatus="onPostedStatus()"
|
|
/>
|
|
</div>
|
|
<style>
|
|
.status-article-compose-box {
|
|
grid-area: compose;
|
|
background: var(--main-bg);
|
|
}
|
|
</style>
|
|
<script>
|
|
import ComposeBox from '../../_components/compose/ComposeBox.html'
|
|
import { store } from '../../_store/store'
|
|
import debounce from 'lodash/debounce'
|
|
import throttle from 'lodash/throttle'
|
|
|
|
const DEBOUNCE_DELAY = 400
|
|
const THROTTLE_DELAY = 150
|
|
|
|
export default {
|
|
oncreate() {
|
|
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)
|
|
},
|
|
components: {
|
|
ComposeBox
|
|
},
|
|
store: () => store,
|
|
computed: {
|
|
composeData: ($currentComposeData, originalStatusId) => $currentComposeData[originalStatusId] || {}
|
|
},
|
|
methods: {
|
|
onPostedStatus() {
|
|
requestAnimationFrame(() => {
|
|
let uuid = this.get('uuid')
|
|
let $repliesShown = this.store.get('repliesShown')
|
|
$repliesShown[uuid] = false
|
|
this.store.set({'repliesShown': $repliesShown})
|
|
this.fire('recalculateHeight')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |