68 lines
2.0 KiB
HTML
68 lines
2.0 KiB
HTML
<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
|
|
<p>{{status.spoiler_text}}</p>
|
|
</div>
|
|
<div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
|
|
<button type="button" delegate-key="{{delegateKey}}">
|
|
{{spoilerShown ? 'Show less' : 'Show more'}}
|
|
</button>
|
|
</div>
|
|
<style>
|
|
.status-spoiler {
|
|
grid-area: spoiler;
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
white-space: pre-wrap;
|
|
font-size: 0.9em;
|
|
margin: 10px 5px;
|
|
}
|
|
|
|
.status-spoiler.status-in-own-thread {
|
|
font-size: 1.3em;
|
|
margin: 20px 5px 10px;
|
|
}
|
|
|
|
.status-spoiler.status-in-notification {
|
|
color: var(--very-deemphasized-text-color);
|
|
}
|
|
|
|
.status-spoiler-button {
|
|
grid-area: spoiler-btn;
|
|
margin: 10px 5px;
|
|
}
|
|
|
|
.status-spoiler-button.status-in-own-thread {
|
|
}
|
|
|
|
.status-spoiler-button button {
|
|
padding: 5px 10px;
|
|
font-size: 1.1em;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { store } from '../../_store/store'
|
|
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
|
|
|
export default {
|
|
oncreate() {
|
|
registerClickDelegate(this.get('delegateKey'), () => this.onClickSpoilerButton())
|
|
},
|
|
ondestroy() {
|
|
unregisterClickDelegate(this.get('delegateKey'))
|
|
},
|
|
store: () => store,
|
|
computed: {
|
|
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
|
|
statusId: (status) => status.id,
|
|
delegateKey: (statusId, timelineType, timelineValue) => `spoiler-${timelineType}-${timelineValue}-${statusId}`
|
|
},
|
|
methods: {
|
|
onClickSpoilerButton() {
|
|
let contextualStatusId = this.get('contextualStatusId')
|
|
let $spoilersShown = this.store.get('spoilersShown')
|
|
$spoilersShown[contextualStatusId] = !$spoilersShown[contextualStatusId]
|
|
this.store.set({'spoilersShown': $spoilersShown})
|
|
this.fire('recalculateHeight')
|
|
}
|
|
}
|
|
}
|
|
</script> |