UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-10 00:34:50 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add photo lightbox on timelines

Browse source
This commit is contained in:
Daniel Supernault 2019-03-09 22:26:29 -07:00
parent 8ee415d66b
commit 5e40cd1d97
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
2 changed files with 63 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
resources/assets/js/components/Timeline.vue
View file

@ -58,7 +58,7 @@
<div class="postPresenterContainer"> <div class="postPresenterContainer">
<div v-if="status.pf_type === 'photo'" class="w-100"> <div v-if="status.pf_type === 'photo'" class="w-100">
<photo-presenter :status="status"></photo-presenter> <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
</div> </div>
<div v-else-if="status.pf_type === 'video'" class="w-100"> <div v-else-if="status.pf_type === 'video'" class="w-100">
@ -355,6 +355,19 @@
</div> </div>
</div> </div>
</b-modal> </b-modal>
<b-modal
id="lightbox"
ref="lightboxModal"
hide-header="true"
hide-footer="true"
centered
size="lg"
body-class="p-0"
>
<div v-if="lightboxMedia" :class="lightboxMedia.filter_class">
<img :src="lightboxMedia.url" class="img-fluid">
</div>
</b-modal>
</div> </div>
</template> </template>
@ -374,12 +387,12 @@
<script type="text/javascript"> <script type="text/javascript">
export default { export default {
props: ['scope'],
data() { data() {
return { return {
page: 2, page: 2,
feed: [], feed: [],
profile: {}, profile: {},
scope: window.location.pathname == '/' ? 'home' : 'local',
min_id: 0, min_id: 0,
max_id: 0, max_id: 0,
notifications: {}, notifications: {},
@ -401,7 +414,8 @@
followerMore: true, followerMore: true,
following: [], following: [],
followingCursor: 1, followingCursor: 1,
followingMore: true followingMore: true,
lightboxMedia: false
} }
}, },
@ -437,12 +451,23 @@
}, },
fetchTimelineApi() { fetchTimelineApi() {
let homeTimeline = '/api/v1/timelines/home'; let apiUrl = false;
let localTimeline = '/api/v1/timelines/public'; switch(this.scope) {
let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline; case 'home':
apiUrl = '/api/v1/timelines/home';
break;
case 'local':
apiUrl = '/api/v1/timelines/public';
break;
case 'network':
apiUrl = '/api/v1/timelines/network';
break;
}
axios.get(apiUrl, { axios.get(apiUrl, {
params: { params: {
max_id: 0, max_id: this.max_id,
limit: 4 limit: 4
} }
}).then(res => { }).then(res => {
@ -459,9 +484,20 @@
}, },
infiniteTimeline($state) { infiniteTimeline($state) {
let homeTimeline = '/api/v1/timelines/home'; let apiUrl = false;
let localTimeline = '/api/v1/timelines/public'; switch(this.scope) {
let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline; case 'home':
apiUrl = '/api/v1/timelines/home';
break;
case 'local':
apiUrl = '/api/v1/timelines/public';
break;
case 'network':
apiUrl = '/api/v1/timelines/network';
break;
}
axios.get(apiUrl, { axios.get(apiUrl, {
params: { params: {
max_id: this.max_id, max_id: this.max_id,
@ -894,7 +930,7 @@
this.following = res.data; this.following = res.data;
this.followingCursor++; this.followingCursor++;
}); });
if(res.data.length < 10) { if(res.data.length < 10) {
this.followingMore = false; this.followingMore = false;
} }
this.$refs.followingModal.show(); this.$refs.followingModal.show();
@ -914,7 +950,7 @@
this.followers = res.data; this.followers = res.data;
this.followerCursor++; this.followerCursor++;
}) })
if(res.data.length < 10) { if(res.data.length < 10) {
this.followerMore = false; this.followerMore = false;
} }
this.$refs.followerModal.show(); this.$refs.followerModal.show();
@ -931,13 +967,12 @@
this.following.push(...res.data); this.following.push(...res.data);
this.followingCursor++; this.followingCursor++;
} }
if(res.data.length < 10) { if(res.data.length < 10) {
this.followingMore = false; this.followingMore = false;
} }
}); });
}, },
followersLoadMore() { followersLoadMore() {
axios.get('/api/v1/accounts/'+this.profile.id+'/followers', { axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
params: { params: {
@ -949,10 +984,15 @@
this.followers.push(...res.data); this.followers.push(...res.data);
this.followerCursor++; this.followerCursor++;
} }
if(res.data.length < 10) { if(res.data.length < 10) {
this.followerMore = false; this.followerMore = false;
} }
}); });
},
lightbox(src) {
this.lightboxMedia = src;
this.$refs.lightboxModal.show();
} }
} }
} }

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

@ -11,7 +11,7 @@
</details> </details>
</div> </div>
<div v-else> <div v-else>
<div :class="status.media_attachments[0].filter_class"> <div :class="status.media_attachments[0].filter_class" v-on:click="showLightbox(status.media_attachments[0])">
<img class="card-img-top" :src="status.media_attachments[0].url" :alt="status.media_attachments[0].description" :title="status.media_attachments[0].description"> <img class="card-img-top" :src="status.media_attachments[0].url" :alt="status.media_attachments[0].description" :title="status.media_attachments[0].description">
</div> </div>
</div> </div>
@ -19,6 +19,12 @@
<script type="text/javascript"> <script type="text/javascript">
export default { export default {
props: ['status'] props: ['status'],
methods: {
showLightbox(src) {
this.$emit('lightbox', src);
}
}
} }
</script> </script>