pinafore/routes/_components/status/StatusMediaAttachments.html

173 lines
4.5 KiB
HTML
Raw Normal View History

{#if sensitive }
<div class={computedClass}>
{#if sensitiveShown}
<button type="button"
class="status-sensitive-media-button"
aria-label="Hide sensitive media"
delegate-key={delegateKey} >
2018-02-04 18:16:27 +00:00
<div class="svg-wrapper">
<svg class="status-sensitive-media-svg">
<use xlink:href="/icons.svg#fa-eye-slash" />
2018-02-04 18:16:27 +00:00
</svg>
</div>
</button>
<MediaAttachments {mediaAttachments} {sensitive} {uuid} />
{:else}
<button type="button"
class="status-sensitive-media-button"
aria-label="Show sensitive media"
delegate-key={delegateKey} >
<div class="status-sensitive-media-warning">
<span>Sensitive content. Click to show.</span>
</div>
<div class="svg-wrapper">
<svg class="status-sensitive-media-svg">
<use xlink:href="/icons.svg#fa-eye" />
</svg>
</div>
</button>
{/if}
2018-02-04 18:16:27 +00:00
</div>
{:else}
<MediaAttachments {mediaAttachments} {sensitive} {uuid} />
{/if}
2018-02-04 18:16:27 +00:00
<style>
.status-sensitive-media-container {
2018-02-10 04:07:48 +00:00
grid-area: media;
width: 100%;
2018-02-04 18:16:27 +00:00
margin: 10px 0;
position: relative;
border-radius: 0;
border: none;
background: none;
}
.status-sensitive-media-container.grouped-images {
grid-area: media-grp;
}
2018-02-04 18:16:27 +00:00
.status-sensitive-media-button {
margin: 0;
padding: 0;
border: none;
background: none;
}
.status-sensitive-media-button:hover {
background: none;
}
.status-sensitive-media-button:active {
background: none;
}
.status-sensitive-media-shown .status-sensitive-media-button {
position: absolute;
left: 0;
top: 0;
z-index: 90;
}
.status-sensitive-media-hidden .status-sensitive-media-button {
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
2018-02-04 18:16:27 +00:00
.status-sensitive-media-container.status-sensitive-media-hidden {
width: 100%;
margin: 10px auto;
height: 200px;
}
.status-sensitive-media-container .status-sensitive-media-warning {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--deemphasized-text-color);
z-index: 60;
}
.status-sensitive-media-container .svg-wrapper {
display: flex;
align-items: flex-start;
justify-content: flex-start;
z-index: 40;
pointer-events: none;
background: var(--mask-bg);
}
.status-sensitive-media-hidden .svg-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.status-sensitive-media-container.grouped-images .svg-wrapper {
border-radius: 6px;
}
2018-02-04 18:16:27 +00:00
.status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper {
background: none;
}
.status-sensitive-media-svg {
2018-02-04 18:16:27 +00:00
width: 24px;
height: 24px;
fill: var(--mask-svg-fill);
border-radius: 2px;
background: var(--mask-opaque-bg);
margin: 1px;
padding: 6px 10px;
}
.status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg {
2018-02-04 18:16:27 +00:00
fill: var(--deemphasized-text-color);
background: var(--mask-opaque-bg);
}
</style>
<script>
2018-02-05 03:56:06 +00:00
import MediaAttachments from './MediaAttachments.html'
2018-02-04 18:16:27 +00:00
import { store } from '../../_store/store'
import { registerClickDelegate } from '../../_utils/delegate'
import { classname } from '../../_utils/classname'
2018-02-04 18:16:27 +00:00
export default {
2018-04-20 04:38:01 +00:00
oncreate () {
let { delegateKey } = this.get()
registerClickDelegate(this, delegateKey, () => this.onClickSensitiveMediaButton())
2018-03-15 15:59:30 +00:00
},
2018-02-04 18:16:27 +00:00
components: {
2018-02-05 03:56:06 +00:00
MediaAttachments
2018-02-04 18:16:27 +00:00
},
store: () => store,
computed: {
computedClass: ({ sensitiveShown, $largeInlineMedia }) => classname(
'status-sensitive-media-container',
sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden',
!$largeInlineMedia && 'grouped-images'
),
mediaAttachments: ({ originalStatus }) => originalStatus.media_attachments,
sensitiveShown: ({ $sensitivesShown, uuid }) => !!$sensitivesShown[uuid],
sensitive: ({ originalStatus, $markMediaAsSensitive, $neverMarkMediaAsSensitive }) => (
!$neverMarkMediaAsSensitive && ($markMediaAsSensitive || originalStatus.sensitive)
),
delegateKey: ({ uuid }) => `sensitive-${uuid}`
2018-02-04 18:16:27 +00:00
},
methods: {
2018-04-20 04:38:01 +00:00
onClickSensitiveMediaButton () {
let { uuid } = this.get()
let { sensitivesShown } = this.store.get()
sensitivesShown[uuid] = !sensitivesShown[uuid]
this.store.set({ sensitivesShown })
2018-02-04 18:16:27 +00:00
this.fire('recalculateHeight')
}
2018-02-04 18:16:27 +00:00
}
}
</script>