fediport/pixelfed
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Update presenter components

Browse source
This commit is contained in:
Daniel Supernault 2020-07-21 19:17:24 -06:00
parent f33061642a
commit e12cc6311d
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
View file

@ -7,7 +7,7 @@
</summary>
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb">
<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" :title="img.description">
<img :class="img.filter_class + ' img-fluid'" :src="img.url" :alt="img.description" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
<img :class="img.filter_class + ' img-fluid'" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
</slide>
</carousel>
</details>
@ -15,7 +15,7 @@
<div v-else class="w-100 h-100 p-0">
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description">
<img :class="img.filter_class + ' img-fluid w-100 p-0'" style="" :src="img.url" :alt="img.description" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
<img :class="img.filter_class + ' img-fluid w-100 p-0'" style="" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
</slide>
</carousel>
</div>
@ -52,6 +52,15 @@
this.$refs.carousel.goToPage(0);
},
altText(img) {
let desc = img.description;
if(desc) {
return desc;
}
return 'Photo was not tagged with any alt text.';
},
keypressNavigation(e) {
let ref = this.$refs.carousel;
if (e.keyCode == "37") {

17
resources/assets/js/components/presenter/PhotoPresenter.vue
View file

@ -6,13 +6,13 @@
<p class="font-weight-light">(click to show)</p>
</summary>
<div class="max-hide-overflow" :title="status.media_attachments[0].description">
<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="altText(status)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
</div>
</details>
</div>
<div v-else>
<div :title="status.media_attachments[0].description">
<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="altText(status)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
</div>
</div>
</template>
@ -26,6 +26,17 @@
<script type="text/javascript">
export default {
props: ['status']
props: ['status'],
methods: {
altText(status) {
let desc = status.media_attachments[0].description;
if(desc) {
return desc;
}
return 'Photo was not tagged with any alt text.';
}
}
}
</script>