pinafore/routes/_components/status/StatusSpoiler.html

86 lines
2.4 KiB
HTML
Raw Normal View History

<div class="status-spoiler {isStatusInNotification ? 'status-in-notification' : ''} {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
<p>{@html massagedSpoilerText}</p>
2018-02-04 21:49:42 +01:00
</div>
<div class="status-spoiler-button {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
<button type="button" delegate-key={delegateKey}>
{spoilerShown ? 'Show less' : 'Show more'}
2018-02-04 19:44:04 +01:00
</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;
}
:global(.status-spoiler .status-emoji) {
width: 1.4em;
height: 1.4em;
margin: -0.1em 0;
object-fit: contain;
vertical-align: middle;
}
.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'
import { registerClickDelegate } from '../../_utils/delegate'
import { mark, stop } from '../../_utils/marks'
import { emojifyText } from '../../_utils/emojifyText'
import escapeHtml from 'escape-html'
2018-02-04 19:44:04 +01:00
export default {
2018-04-20 06:38:01 +02:00
oncreate () {
let { delegateKey } = this.get()
registerClickDelegate(this, delegateKey, () => this.onClickSpoilerButton())
2018-03-05 02:16:33 +01:00
},
2018-02-04 19:44:04 +01:00
store: () => store,
computed: {
spoilerText: ({ originalStatus }) => originalStatus.spoiler_text,
emojis: ({ originalStatus }) => originalStatus.emojis,
massagedSpoilerText: ({ spoilerText, emojis, $autoplayGifs }) => {
spoilerText = escapeHtml(spoilerText)
return emojifyText(spoilerText, emojis, $autoplayGifs)
},
delegateKey: ({ uuid }) => `spoiler-${uuid}`
2018-02-04 19:44:04 +01:00
},
methods: {
2018-04-20 06:38:01 +02:00
onClickSpoilerButton () {
2018-03-23 16:29:54 +01:00
requestAnimationFrame(() => {
mark('clickSpoilerButton')
let { uuid } = this.get()
let { spoilersShown } = this.store.get()
spoilersShown[uuid] = !spoilersShown[uuid]
this.store.set({spoilersShown})
2018-03-23 16:29:54 +01:00
this.fire('recalculateHeight')
stop('clickSpoilerButton')
2018-03-23 16:29:54 +01:00
})
2018-02-04 19:44:04 +01:00
}
}
}
</script>