Show image description if present

Add a button to expand the image description if applicable
This commit is contained in:
Joel Bradshaw 2022-01-16 20:04:31 -08:00
parent 331f6e8803
commit ea1a7e3092
2 changed files with 50 additions and 4 deletions

View File

@ -255,6 +255,8 @@ export default {
showNextMedia: 'Show next media',
enterPinchZoom: 'Pinch-zoom mode',
exitPinchZoom: 'Exit pinch-zoom mode',
showFullImageDescription: 'Show full image description',
hideFullImageDescription: 'Hide full image description',
showMedia: `Show {index, select,
1 {first}
2 {second}

View File

@ -25,8 +25,24 @@
</li>
{/each}
</ul>
{#if hasDescription }
<div class="media-description-outside {showFullImageDescription ? 'expanded' : ''}">
{mediaItem.description}
</div>
{/if}
<div class="media-controls-outside" on:click="onMediaControlsClick(event)">
{#if canPinchZoom}
{#if hasDescription }
<IconButton
className="media-control-button"
svgClassName="media-control-button-svg"
pressable={hasDescription}
pressed={showFullImageDescription}
pressedLabel="{intl.hideFullImageDescription}"
href="#fa-info-circle"
label="{intl.showFullImageDescription}"
on:click="toggleFullImageDescription()"
/>
{:elseif canPinchZoom }
<IconButton
className="media-control-button media-control-button-dummy-spacer"
svgClassName="media-control-button-svg"
@ -77,16 +93,25 @@
</li>
</ul>
{/if}
{#if canPinchZoom}
{#if canPinchZoom }
<IconButton
className="media-control-button"
svgClassName="media-control-button-svg"
pressable={true}
pressable={canPinchZoom}
pressed={pinchZoomMode}
label="{intl.enterPinchZoom}"
pressedLabel="{intl.exitPinchZoom}"
href="#fa-search"
on:click="togglePinchZoomMode()"
ariaHidden={!canPinchZoom}
/>
{:elseif hasDescription }
<IconButton
className="media-control-button media-control-button-dummy-spacer"
svgClassName="media-control-button-svg"
href="#fa-search"
label=""
ariaHidden={true}
/>
{/if}
</div>
@ -142,6 +167,20 @@
padding: 15px 5px 5px 5px;
}
.media-description-outside {
margin: 5px 15px;
max-height: 1.5em;
text-align: center;
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.media-description-outside.expanded {
max-height: none;
white-space: normal;
}
.media-controls-outside {
display: flex;
justify-content: space-between;
@ -263,12 +302,14 @@
},
store: () => store,
data: () => ({
pinchZoomMode: false
pinchZoomMode: false,
showFullImageDescription: false
}),
computed: {
length: ({ mediaItems }) => mediaItems.length,
dots: ({ length }) => times(length, i => ({ i })),
canPinchZoom: ({ mediaItems }) => !mediaItems.some(media => ['video', 'audio'].includes(media.type)),
hasDescription: ({ mediaItem }) => mediaItem.description,
mediaItem: ({ mediaItems, scrolledItem }) => mediaItems[scrolledItem],
nativeWidth: ({ mediaItem }) => get(mediaItem, ['meta', 'original', 'width'], 300), // TODO: Pleroma placeholder
nativeHeight: ({ mediaItem }) => get(mediaItem, ['meta', 'original', 'height'], 200) // TODO: Pleroma placeholder
@ -355,6 +396,9 @@
togglePinchZoomMode () {
this.set({ pinchZoomMode: !this.get().pinchZoomMode })
},
toggleFullImageDescription () {
this.set({ showFullImageDescription: !this.get().showFullImageDescription })
},
onImageClick (e) {
const { nativeWidth, nativeHeight, pinchZoomMode } = this.get()
if (pinchZoomMode) {