refactor out status media attachments

This commit is contained in:
Nolan Lawson 2018-02-04 10:16:27 -08:00
parent 2da9cc8d8f
commit 60cef45be4
2 changed files with 150 additions and 124 deletions

View File

@ -0,0 +1,142 @@
{{#if status.sensitive}}
<div class="status-sensitive-media-container {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}"
on:recalculateHeight
>
<button type="button" class="status-sensitive-media-button"
aria-label="{{sensitiveShown ? 'Hide sensitive media: ' : 'Show sensitive media'}}"
on:click="onClickSensitiveMediaButton()" >
{{#if !sensitiveShown}}
<div class="status-sensitive-media-warning">
<span>
Sensitive content. Click to show.
</span>
</div>
{{/if}}
<div class="svg-wrapper">
<svg>
<use xlink:href="{{sensitiveShown ? '#fa-eye-slash' : '#fa-eye'}}" />
</svg>
</div>
</button>
{{#if sensitiveShown}}
<Media mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
{{/if}}
</div>
{{else}}
<Media mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
{{/if}}
<style>
.status-sensitive-media-container {
grid-area: status-media;
margin: 10px 0;
position: relative;
border-radius: 0;
border: none;
background: none;
}
.status-sensitive-media-button {
margin: 0;
padding: 0;
border: none;
background: none;
width: 100%;
height: 100%;
}
.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;
right: 0;
top: 0;
bottom: 0;
z-index: 90;
}
.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 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
z-index: 40;
pointer-events: none;
background: var(--mask-bg);
}
.status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper {
background: none;
}
.status-sensitive-media-container svg {
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 svg {
fill: var(--deemphasized-text-color);
background: var(--mask-opaque-bg);
}
</style>
<script>
import Media from './Media.html'
import { store } from '../../_store/store'
export default {
components: {
Media
},
store: () => store,
computed: {
sensitiveShown: ($sensitivesShown, $currentInstance, statusId) => {
return $sensitivesShown && $sensitivesShown[$currentInstance] && $sensitivesShown[$currentInstance][statusId]
},
statusId: (status) => status.id
},
methods: {
onClickSensitiveMediaButton() {
let statusId = this.get('statusId')
let instanceName = this.store.get('currentInstance')
let $sensitivesShown = this.store.get('sensitivesShown') || {}
if (!$sensitivesShown[instanceName]) {
$sensitivesShown[instanceName] = {}
}
$sensitivesShown[instanceName][statusId] = !$sensitivesShown[instanceName][statusId]
this.store.set({'sensitivesShown': $sensitivesShown})
this.fire('recalculateHeight')
},
}
}
</script>

View File

@ -37,32 +37,11 @@
</div> </div>
{{/if}} {{/if}}
{{#if originalMediaAttachments && originalMediaAttachments.length}} {{#if originalMediaAttachments && originalMediaAttachments.length}}
{{#if originalStatus.sensitive}} <MediaAttachments
<div class="status-sensitive-media-container {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}" status="{{originalStatus}}"
> mediaAttachments="{{originalMediaAttachments}}"
<button type="button" class="status-sensitive-media-button" on:recalculateHeight
aria-label="{{sensitiveShown ? 'Hide sensitive media: ' : 'Show sensitive media'}}" />
on:click="onClickSensitiveMediaButton()" >
{{#if !sensitiveShown}}
<div class="status-sensitive-media-warning">
<span>
Sensitive content. Click to show.
</span>
</div>
{{/if}}
<div class="svg-wrapper">
<svg>
<use xlink:href="{{sensitiveShown ? '#fa-eye-slash' : '#fa-eye'}}" />
</svg>
</div>
</button>
{{#if sensitiveShown}}
<Media mediaAttachments="{{originalMediaAttachments}}" sensitive="{{originalStatus.sensitive}}"/>
{{/if}}
</div>
{{else}}
<Media mediaAttachments="{{originalMediaAttachments}}" sensitive="{{originalStatus.sensitive}}"/>
{{/if}}
{{/if}} {{/if}}
<Toolbar :status /> <Toolbar :status />
</article> </article>
@ -192,89 +171,6 @@
margin: 0; margin: 0;
} }
.status-sensitive-media-container {
grid-area: status-media;
margin: 10px 0;
position: relative;
border-radius: 0;
border: none;
background: none;
}
.status-sensitive-media-button {
margin: 0;
padding: 0;
border: none;
background: none;
width: 100%;
height: 100%;
}
.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;
right: 0;
top: 0;
bottom: 0;
z-index: 90;
}
.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 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
z-index: 40;
pointer-events: none;
background: var(--mask-bg);
}
.status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper {
background: none;
}
.status-sensitive-media-container svg {
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 svg {
fill: var(--deemphasized-text-color);
background: var(--mask-opaque-bg);
}
@media (max-width: 767px) { @media (max-width: 767px) {
.status-article { .status-article {
padding: 10px 10px; padding: 10px 10px;
@ -284,7 +180,7 @@
</style> </style>
<script> <script>
import Avatar from './Avatar.html' import Avatar from './Avatar.html'
import Media from './Media.html' import MediaAttachments from './MediaAttachments.html'
import Toolbar from './Toolbar.html' import Toolbar from './Toolbar.html'
import StatusHeader from './StatusHeader.html' import StatusHeader from './StatusHeader.html'
import { mark, stop } from '../../_utils/marks' import { mark, stop } from '../../_utils/marks'
@ -301,7 +197,7 @@
}, },
components: { components: {
Avatar, Avatar,
Media, MediaAttachments,
Toolbar, Toolbar,
ExternalLink, ExternalLink,
StatusHeader StatusHeader
@ -339,8 +235,7 @@
} }
return content return content
}, },
spoilerShown: ($spoilersShown, $currentInstance, statusId) => $spoilersShown && $spoilersShown[$currentInstance] && $spoilersShown[$currentInstance][statusId], spoilerShown: ($spoilersShown, $currentInstance, statusId) => $spoilersShown && $spoilersShown[$currentInstance] && $spoilersShown[$currentInstance][statusId]
sensitiveShown: ($sensitivesShown, $currentInstance, statusId) => $sensitivesShown && $sensitivesShown[$currentInstance] && $sensitivesShown[$currentInstance][statusId],
}, },
methods: { methods: {
onClickSpoilerButton() { onClickSpoilerButton() {
@ -355,17 +250,6 @@
this.hydrateContent() this.hydrateContent()
this.fire('recalculateHeight') this.fire('recalculateHeight')
}, },
onClickSensitiveMediaButton() {
let statusId = this.get('statusId')
let instanceName = this.store.get('currentInstance')
let $sensitivesShown = this.store.get('sensitivesShown') || {}
if (!$sensitivesShown[instanceName]) {
$sensitivesShown[instanceName] = {}
}
$sensitivesShown[instanceName][statusId] = !$sensitivesShown[instanceName][statusId]
this.store.set({'sensitivesShown': $sensitivesShown})
this.fire('recalculateHeight')
},
hydrateContent() { hydrateContent() {
if (!this.refs.contentNode) { if (!this.refs.contentNode) {
return return