pinafore/routes/_components/status/StatusSpoiler.html

49 lines
1.2 KiB
HTML
Raw Normal View History

2018-02-04 18:44:04 +00:00
<div class="status-spoiler">{{status.spoiler_text}}</div>
<div class="status-spoiler-button">
<button type="button" on:click="onClickSpoilerButton()">
{{spoilerShown ? 'Show less' : 'Show more'}}
</button>
</div>
<style>
.status-spoiler {
grid-area: status-spoiler;
word-wrap: break-word;
overflow: hidden;
white-space: pre-wrap;
font-size: 1.1em;
margin: 5px;
}
.status-spoiler-button {
grid-area: status-spoiler-button;
margin: 5px;
}
.status-spoiler-button button {
padding: 5px 10px;
font-size: 1.1em;
}
</style>
<script>
import { store } from '../../_store/store'
export default {
store: () => store,
computed: {
statusId: (status) => status.id
},
methods: {
onClickSpoilerButton() {
let statusId = this.get('statusId')
let instanceName = this.store.get('currentInstance')
let $spoilersShown = this.store.get('spoilersShown') || {}
if (!$spoilersShown[instanceName]) {
$spoilersShown[instanceName] = {}
}
$spoilersShown[instanceName][statusId] = !$spoilersShown[instanceName][statusId]
this.store.set({'spoilersShown': $spoilersShown})
this.fire('recalculateHeight')
}
}
}
</script>