Pinafore-Web-Client-Frontend/routes/_components/status/StatusSpoiler.html

68 lines
1.9 KiB
HTML
Raw Normal View History

<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
<p>{{status.spoiler_text}}</p>
2018-02-04 21:49:42 +01:00
</div>
<div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
2018-03-05 02:16:33 +01:00
<button type="button" delegate-key="{{delegateKey}}">
2018-02-04 19:44:04 +01:00
{{spoilerShown ? 'Show less' : 'Show more'}}
</button>
</div>
<style>
.status-spoiler {
2018-02-10 05:07:48 +01:00
grid-area: spoiler;
2018-02-04 19:44:04 +01:00
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);
2018-02-04 19:44:04 +01:00
}
.status-spoiler-button {
grid-area: spoiler-btn;
margin: 10px 5px;
}
.status-spoiler-button.status-in-own-thread {
2018-02-04 19:44:04 +01:00
}
.status-spoiler-button button {
padding: 5px 10px;
font-size: 1.1em;
}
</style>
<script>
import { store } from '../../_store/store'
2018-03-05 02:16:33 +01:00
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
2018-02-04 19:44:04 +01:00
export default {
2018-03-05 02:16:33 +01:00
oncreate() {
registerClickDelegate(this.get('delegateKey'), () => this.onClickSpoilerButton())
},
ondestroy() {
unregisterClickDelegate(this.get('delegateKey'))
},
2018-02-04 19:44:04 +01:00
store: () => store,
computed: {
2018-03-05 02:16:33 +01:00
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
statusId: (status) => status.id,
2018-03-15 16:59:30 +01:00
delegateKey: (statusId) => `spoiler-${statusId}`
2018-02-04 19:44:04 +01:00
},
methods: {
onClickSpoilerButton() {
let contextualStatusId = this.get('contextualStatusId')
let $spoilersShown = this.store.get('spoilersShown')
$spoilersShown[contextualStatusId] = !$spoilersShown[contextualStatusId]
2018-02-04 19:44:04 +01:00
this.store.set({'spoilersShown': $spoilersShown})
this.fire('recalculateHeight')
}
}
}
</script>