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

Update Timeline component

Browse source
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
1 changed files with 165 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>