1
0
Fork 0
forked from mirror/pixelfed

Update Timeline component

This commit is contained in:
Daniel Supernault 2019-08-04 23:07:41 -06:00
parent b9b7c8c695
commit a73e5abc39
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7

View file

@ -73,13 +73,13 @@
{{status.account.username}} {{status.account.username}}
</a> </a>
<div class="text-right" style="flex-grow:1;"> <div class="text-right" style="flex-grow:1;">
<button class="btn btn-link text-dark no-caret dropdown-toggle py-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options"> <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
<span class="fas fa-ellipsis-v fa-lg text-muted"></span> <span class="fas fa-ellipsis-h text-dark"></span>
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <!-- <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item font-weight-bold" :href="status.url">Go to post</a> <a class="dropdown-item font-weight-bold" :href="status.url">Go to post</a>
<!-- <a class="dropdown-item font-weight-bold" href="#">Share</a> <!-- <a class="dropdown-item font-weight-bold" href="#">Share</a>
<a class="dropdown-item font-weight-bold" href="#">Embed</a> --> <a class="dropdown-item font-weight-bold" href="#">Embed</a> ->
<span v-if="statusOwner(status) == false"> <span v-if="statusOwner(status) == false">
<a class="dropdown-item font-weight-bold" :href="reportUrl(status)">Report</a> <a class="dropdown-item font-weight-bold" :href="reportUrl(status)">Report</a>
<a class="dropdown-item font-weight-bold" v-on:click="muteProfile(status)">Mute Profile</a> <a class="dropdown-item font-weight-bold" v-on:click="muteProfile(status)">Mute Profile</a>
@ -110,7 +110,7 @@
</a> </a>
</span> </span>
</div> </div> -->
</div> </div>
</div> </div>
@ -384,6 +384,57 @@
</div> </div>
</div> </div>
</b-modal> --> </b-modal> -->
<b-modal ref="ctxModal"
id="ctx-modal"
hide-header
hide-footer
centered
rounded
size="sm"
body-class="list-group-flush p-0 rounded">
<div class="list-group text-center">
<div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuReportPost()">Report inappropriate</div>
<div v-if="ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
<div v-if="ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div>
<div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">Go to post</div>
<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
<div class="list-group-item rounded cursor-pointer" @click="ctxMenuShare()">Share</div> -->
<div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
</div>
</b-modal>
<b-modal ref="ctxShareModal"
id="ctx-share-modal"
title="Share"
hide-footer
centered
rounded
size="sm"
body-class="list-group-flush p-0 rounded text-center">
<div class="list-group-item rounded cursor-pointer border-top-0">Email</div>
<div class="list-group-item rounded cursor-pointer">Facebook</div>
<div class="list-group-item rounded cursor-pointer">Mastodon</div>
<div class="list-group-item rounded cursor-pointer">Pinterest</div>
<div class="list-group-item rounded cursor-pointer">Pixelfed</div>
<div class="list-group-item rounded cursor-pointer">Twitter</div>
<div class="list-group-item rounded cursor-pointer">VK</div>
<div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxShareMenu()">Cancel</div>
</b-modal>
<b-modal ref="ctxEmbedModal"
id="ctx-embed-modal"
hide-header
hide-footer
centered
rounded
size="md"
body-class="p-2 rounded">
<div>
<textarea class="form-control disabled" rows="1" style="border: 1px solid #efefef; font-size: 14px; line-height: 17px; min-height: 37px; margin: 0 0 7px; resize: none; white-space: nowrap;" v-model="ctxEmbedPayload"></textarea>
<hr>
<button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
<p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="#">API Terms of Use</a>.</p>
</div>
</b-modal>
<b-modal <b-modal
id="lightbox" id="lightbox"
ref="lightboxModal" ref="lightboxModal"
@ -438,7 +489,7 @@
data() { data() {
return { return {
ids: [], ids: [],
config: {}, config: window.App.config,
page: 2, page: 2,
feed: [], feed: [],
profile: {}, profile: {},
@ -470,13 +521,14 @@
showHashtagPosts: false, showHashtagPosts: false,
hashtagPosts: [], hashtagPosts: [],
hashtagPostsName: '', hashtagPostsName: '',
ctxMenuStatus: false,
ctxMenuRelationship: false,
ctxEmbedPayload: false,
copiedEmbed: false
} }
}, },
beforeMount() { beforeMount() {
axios.get('/api/v2/config')
.then(res => {
this.config = res.data;
this.fetchProfile(); this.fetchProfile();
this.fetchTimelineApi(); this.fetchTimelineApi();
@ -486,7 +538,6 @@
// .html(this.config.announcement.message); // .html(this.config.announcement.message);
// $('body').prepend(msg); // $('body').prepend(msg);
// } // }
});
}, },
mounted() { mounted() {
@ -604,7 +655,8 @@
if (res.data.length && this.loading == false) { if (res.data.length && this.loading == false) {
let data = res.data; let data = res.data;
let self = this; let self = this;
data.forEach(d => { data.forEach((d, index) => {
console.log(index);
if(self.ids.indexOf(d.id) == -1) { if(self.ids.indexOf(d.id) == -1) {
self.feed.push(d); self.feed.push(d);
self.ids.push(d.id); self.ids.push(d.id);
@ -669,13 +721,15 @@
if($('body').hasClass('loggedIn') == false) { if($('body').hasClass('loggedIn') == false) {
return; return;
} }
let count = status.favourites_count;
status.favourited = !status.favourited;
axios.post('/i/like', { axios.post('/i/like', {
item: status.id item: status.id
}).then(res => { }).then(res => {
status.favourites_count = res.data.count; status.favourites_count = res.data.count;
status.favourited = !status.favourited;
}).catch(err => { }).catch(err => {
status.favourited = !status.favourited;
status.favourites_count = count;
swal('Error', 'Something went wrong, please try again later.', 'error'); swal('Error', 'Something went wrong, please try again later.', 'error');
}); });
}, },
@ -1159,7 +1213,97 @@
}) })
}) })
},
ctxMenu(status) {
this.ctxMenuStatus = status;
let payload = '<div class="pixlfed-media" data-id="'+ this.ctxMenuStatus.id + '"></div><script ';
payload += 'src="https://pixelfed.dev/js/embed.js" async><';
payload += '/script>';
this.ctxEmbedPayload = payload;
if(status.account.id == this.profile.id) {
this.$refs.ctxModal.show();
} else {
axios.get('/api/v1/accounts/relationships', {
params: {
'id[]': status.account.id
} }
}).then(res => {
this.ctxMenuRelationship = res.data[0];
this.$refs.ctxModal.show();
});
}
},
closeCtxMenu(truncate) {
this.copiedEmbed = false;
this.ctxMenuStatus = false;
this.ctxMenuRelationship = false;
this.$refs.ctxModal.hide();
},
ctxMenuCopyLink() {
let status = this.ctxMenuStatus;
navigator.clipboard.writeText(status.url);
this.closeCtxMenu();
return;
},
ctxMenuGoToPost() {
let status = this.ctxMenuStatus;
window.location.href = status.url;
this.closeCtxMenu();
return;
},
ctxMenuFollow() {
axios.post('/i/follow', {
item: this.ctxMenuStatus.account.id
}).then(res => {
let username = this.ctxMenuStatus.account.acct;
this.closeCtxMenu();
setTimeout(function() {
swal('Follow successful!', 'You are now following ' + username, 'success');
}, 500);
});
},
ctxMenuUnfollow() {
axios.post('/i/follow', {
item: this.ctxMenuStatus.account.id
}).then(res => {
let username = this.ctxMenuStatus.account.acct;
this.closeCtxMenu();
setTimeout(function() {
swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
}, 500);
});
},
ctxMenuReportPost() {
window.location.href = '/i/report?type=post&id=' + this.ctxMenuStatus.id;
},
ctxMenuEmbed() {
this.$refs.ctxModal.hide();
this.$refs.ctxEmbedModal.show();
},
ctxMenuShare() {
this.$refs.ctxModal.hide();
this.$refs.ctxShareModal.show();
},
closeCtxShareMenu() {
this.$refs.ctxShareModal.hide();
this.$refs.ctxModal.show();
},
ctxCopyEmbed() {
navigator.clipboard.writeText(this.ctxEmbedPayload);
this.$refs.ctxEmbedModal.hide();
}
} }
} }
</script> </script>