Update Timeline component
This commit is contained in:
Daniel Supernault
parent
b9b7c8c695
commit
a73e5abc39
|
|
@ -73,13 +73,13 @@
|
|||
{{status.account.username}}
|
||||
</a>
|
||||
<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">
|
||||
<span class="fas fa-ellipsis-v fa-lg text-muted"></span>
|
||||
<button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
|
||||
<span class="fas fa-ellipsis-h text-dark"></span>
|
||||
</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="#">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">
|
||||
<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>
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
</a>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -384,6 +384,57 @@
|
|||
</div>
|
||||
</div>
|
||||
</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
|
||||
id="lightbox"
|
||||
ref="lightboxModal"
|
||||
|
|
@ -438,7 +489,7 @@
|
|||
data() {
|
||||
return {
|
||||
ids: [],
|
||||
config: {},
|
||||
config: window.App.config,
|
||||
page: 2,
|
||||
feed: [],
|
||||
profile: {},
|
||||
|
|
@ -470,23 +521,23 @@
|
|||
showHashtagPosts: false,
|
||||
hashtagPosts: [],
|
||||
hashtagPostsName: '',
|
||||
ctxMenuStatus: false,
|
||||
ctxMenuRelationship: false,
|
||||
ctxEmbedPayload: false,
|
||||
copiedEmbed: false
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
axios.get('/api/v2/config')
|
||||
.then(res => {
|
||||
this.config = res.data;
|
||||
this.fetchProfile();
|
||||
this.fetchTimelineApi();
|
||||
this.fetchProfile();
|
||||
this.fetchTimelineApi();
|
||||
|
||||
// if(this.config.announcement.enabled == true) {
|
||||
// let msg = $('<div>')
|
||||
// .addClass('alert alert-warning mb-0 rounded-0 text-center font-weight-bold')
|
||||
// .html(this.config.announcement.message);
|
||||
// $('body').prepend(msg);
|
||||
// }
|
||||
});
|
||||
// if(this.config.announcement.enabled == true) {
|
||||
// let msg = $('<div>')
|
||||
// .addClass('alert alert-warning mb-0 rounded-0 text-center font-weight-bold')
|
||||
// .html(this.config.announcement.message);
|
||||
// $('body').prepend(msg);
|
||||
// }
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
@ -604,7 +655,8 @@
|
|||
if (res.data.length && this.loading == false) {
|
||||
let data = res.data;
|
||||
let self = this;
|
||||
data.forEach(d => {
|
||||
data.forEach((d, index) => {
|
||||
console.log(index);
|
||||
if(self.ids.indexOf(d.id) == -1) {
|
||||
self.feed.push(d);
|
||||
self.ids.push(d.id);
|
||||
|
|
@ -669,13 +721,15 @@
|
|||
if($('body').hasClass('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
let count = status.favourites_count;
|
||||
status.favourited = !status.favourited;
|
||||
axios.post('/i/like', {
|
||||
item: status.id
|
||||
}).then(res => {
|
||||
status.favourites_count = res.data.count;
|
||||
status.favourited = !status.favourited;
|
||||
}).catch(err => {
|
||||
status.favourited = !status.favourited;
|
||||
status.favourites_count = count;
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue