89 lines
2.4 KiB
HTML
89 lines
2.4 KiB
HTML
<div class="status-spoiler {isStatusInNotification ? 'status-in-notification' : ''} {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
|
|
<p>{@html massagedSpoilerText}</p>
|
|
</div>
|
|
<div class="status-spoiler-button {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
|
|
<button id={elementId} type="button" >
|
|
{spoilerShown ? 'intl.showLess' : 'intl.showMore'}
|
|
</button>
|
|
</div>
|
|
{#if enableShortcuts}
|
|
<Shortcut scope={shortcutScope} key="x" on:pressed="toggleSpoilers()"/>
|
|
{/if}
|
|
<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;
|
|
}
|
|
|
|
:global(.underline-links .status-spoiler a) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
import Shortcut from '../shortcut/Shortcut.html'
|
|
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'
|
|
|
|
export default {
|
|
oncreate () {
|
|
const { elementId } = this.get()
|
|
registerClickDelegate(this, elementId, () => this.toggleSpoilers())
|
|
},
|
|
store: () => store,
|
|
components: {
|
|
Shortcut
|
|
},
|
|
computed: {
|
|
massagedSpoilerText: ({ spoilerText, originalStatusEmojis, $autoplayGifs }) => {
|
|
spoilerText = escapeHtml(spoilerText)
|
|
return emojifyText(spoilerText, originalStatusEmojis, $autoplayGifs)
|
|
},
|
|
elementId: ({ uuid }) => `spoiler-${uuid}`
|
|
},
|
|
methods: {
|
|
toggleSpoilers () {
|
|
requestAnimationFrame(() => {
|
|
mark('clickSpoilerButton')
|
|
const { uuid } = this.get()
|
|
const { spoilersShown } = this.store.get()
|
|
spoilersShown[uuid] = !spoilersShown[uuid]
|
|
this.store.set({ spoilersShown })
|
|
this.fire('recalculateHeight')
|
|
stop('clickSpoilerButton')
|
|
})
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
</script>
|