From 858f3f9e0cd6e10c0fefd372a00372df2191e7ee Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Mon, 28 Jun 2021 22:51:51 -0600 Subject: [PATCH] Update Timeline component, abstracted reusable partials --- resources/assets/js/components/Timeline.vue | 1044 +------------------ 1 file changed, 32 insertions(+), 1012 deletions(-) diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue index 15e190477..e1970e899 100644 --- a/resources/assets/js/components/Timeline.vue +++ b/resources/assets/js/components/Timeline.vue @@ -7,23 +7,7 @@

-
-
-

  {{scope == 'local' ? 'Public' : 'Home'}} Timeline

-

- - - - -

-

- - New Post - -

-
-
-
+
@@ -119,167 +103,11 @@
-
-
- - -
- avatar -
-
- - - Loading... - - - - - - - -
- {{status.place.name}}, {{status.place.country}} -
-
-
- -
-
- -
- -
-
-
-

-
-
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
-

Error: Problem rendering preview.

-
- -
- -
-

- - - For information about COVID-19, {{config.features.label.covid.org}} - - - - -

-
- -
-
-

- -

- - - - - - - - Avatar - - - - -
- - -
-

- - {{status.account.username}} - - -

-
- -
-

- - - -

-
-
- - - - -
+
@@ -444,145 +272,8 @@
-
-
- - -
- avatar -
-
- - - Loading... - - - - - - - -
- {{status.place.name}}, {{status.place.country}} -
-
-
- -
-
- -
- -
-
-
-

-
-
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
-

Error: Problem rendering preview.

-
- -
- -
-

- - - For information about COVID-19, {{config.features.label.covid.org}} - - - - -

-
- -
-
-

- - {{status.account.username}} - - -

-
- -
-

- - - - · - Based on popular and trending content -

-
-
- - - - -
+ -
@@ -706,7 +397,7 @@
-
+

@@ -799,7 +489,6 @@ -

@@ -840,198 +529,16 @@

- + --> + +
- -
- -
View Post
- -
Share
-
Moderation Tools
-
Report
-
Delete
-
Cancel
-
- - -
-

-

Moderation Tools
-
Select one of the following options
-

-
Unlist from Timelines
-
Remove Content Warning
-
Add Content Warning
- -
Cancel
-
- - -
-

-

Moderation Tools
-
Select one of the following options
-

-
Unlist Posts
-
Moderation Log
-
Cancel
-
- - -
{{ctxMenuStatus.reblogged ? 'Unshare' : 'Share'}} to Followers
-
Copy Link
-
Embed
- -
Cancel
- - -
-
- -
-
-
- - -
-
- - -
-
- - -
-
-
- -

By using this embed, you agree to our Terms of Use

-
- - -

-

Report
-
Select one of the following options
-

-
-
Spam
-
Sensitive Content
-
Abusive or Harmful
-
Other
- -
Cancel
-
- - -

-

Report
-
Select one of the following options
-

-
-
Underage Account
-
Copyright Infringement
-
Impersonation
-
Scam or Fraud
- - - -
Cancel
-
- - -
-
{{ this.confirmModalTitle }}
-
-
- - -
- - -
- lightbox media -
- import VueTribute from 'vue-tribute' + import StatusCard from './partials/StatusCard.vue'; + import CommentCard from './partials/CommentCard.vue'; export default { props: ['scope', 'layout'], components: { - VueTribute + VueTribute, + StatusCard, + CommentCard }, data() { @@ -1144,16 +655,10 @@ showHashtagPosts: false, hashtagPosts: [], hashtagPostsName: '', - ctxMenuStatus: false, - ctxMenuRelationship: false, - ctxEmbedPayload: false, copiedEmbed: false, showTips: true, userStory: false, replySending: false, - ctxEmbedShowCaption: true, - ctxEmbedShowLikes: false, - ctxEmbedCompactMode: false, morePostsAvailable: false, mpCount: 0, mpData: false, @@ -1206,31 +711,6 @@ } }, - watch: { - ctxEmbedShowCaption: function (n,o) { - if(n == true) { - this.ctxEmbedCompactMode = false; - } - let mode = this.ctxEmbedCompactMode ? 'compact' : 'full'; - this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode); - }, - ctxEmbedShowLikes: function (n,o) { - if(n == true) { - this.ctxEmbedCompactMode = false; - } - let mode = this.ctxEmbedCompactMode ? 'compact' : 'full'; - this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode); - }, - ctxEmbedCompactMode: function (n,o) { - if(n == true) { - this.ctxEmbedShowCaption = false; - this.ctxEmbedShowLikes = false; - } - let mode = this.ctxEmbedCompactMode ? 'compact' : 'full'; - this.ctxEmbedPayload = window.App.util.embed.post(this.ctxMenuStatus.url, this.ctxEmbedShowCaption, this.ctxEmbedShowLikes, mode); - } - }, - beforeMount() { let avop = window.localStorage.getItem('pf.feed:avop') === 'always'; let u = new URLSearchParams(window.location.search); @@ -1475,7 +955,7 @@ $('.mobile-footer-spacer').attr('style', 'display:none !important'); $('.mobile-footer').attr('style', 'display:none !important'); this.currentLayout = 'comments'; - window.history.pushState({}, '', status.url); + window.history.pushState({}, '', this.statusUrl(status)); return; }, @@ -1485,11 +965,6 @@ $('.mobile-footer-spacer').attr('style', 'display:block'); $('.mobile-footer').attr('style', 'display:block'); this.currentLayout = 'feed'; - setTimeout(function() { - $([document.documentElement, document.body]).animate({ - scrollTop: $(`div[data-status-id="${id}"]`).offset().top - }, 1000); - }, 500); let path = this.scope == 'home' ? '/' : '/timeline/public'; window.history.pushState({}, '', path); @@ -1624,180 +1099,6 @@ }); }, - muteProfile(status) { - if($('body').hasClass('loggedIn') == false) { - return; - } - axios.post('/i/mute', { - type: 'user', - item: status.account.id - }).then(res => { - this.feed = this.feed.filter(s => s.account.id !== status.account.id); - swal('Success', 'You have successfully muted ' + status.account.acct, 'success'); - }).catch(err => { - swal('Error', 'Something went wrong. Please try again later.', 'error'); - }); - }, - - blockProfile(status) { - if($('body').hasClass('loggedIn') == false) { - return; - } - - axios.post('/i/block', { - type: 'user', - item: status.account.id - }).then(res => { - this.feed = this.feed.filter(s => s.account.id !== status.account.id); - swal('Success', 'You have successfully blocked ' + status.account.acct, 'success'); - }).catch(err => { - swal('Error', 'Something went wrong. Please try again later.', 'error'); - }); - }, - - deletePost(status) { - if($('body').hasClass('loggedIn') == false || this.ownerOrAdmin(status) == false) { - return; - } - - if(window.confirm('Are you sure you want to delete this post?') == false) { - return; - } - - axios.post('/i/delete', { - type: 'status', - item: status.id - }).then(res => { - this.feed = this.feed.filter(s => { - return s.id != status.id; - }); - this.closeModals(); - }).catch(err => { - swal('Error', 'Something went wrong. Please try again later.', 'error'); - }); - }, - - commentSubmit(status, $event) { - this.replySending = true; - let id = status.id; - let comment = this.replyText; - let limit = this.config.uploader.max_caption_length; - if(comment.length > limit) { - this.replySending = false; - swal('Comment Too Long', 'Please make sure your comment is '+limit+' characters or less.', 'error'); - return; - } - axios.post('/i/comment', { - item: id, - comment: comment, - sensitive: this.replyNsfw - }).then(res => { - this.replyText = ''; - this.replies.push(res.data.entity); - this.$refs.replyModal.hide(); - }); - this.replySending = false; - }, - - moderatePost(status, action, $event) { - let username = status.account.username; - let msg = ''; - let self = this; - switch(action) { - case 'addcw': - msg = 'Are you sure you want to add a content warning to this post?'; - swal({ - title: 'Confirm', - text: msg, - icon: 'warning', - buttons: true, - dangerMode: true - }).then(res => { - if(res) { - axios.post('/api/v2/moderator/action', { - action: action, - item_id: status.id, - item_type: 'status' - }).then(res => { - swal('Success', 'Successfully added content warning', 'success'); - status.sensitive = true; - self.ctxModMenuClose(); - }).catch(err => { - swal( - 'Error', - 'Something went wrong, please try again later.', - 'error' - ); - self.ctxModMenuClose(); - }); - } - }); - break; - - case 'remcw': - msg = 'Are you sure you want to remove the content warning on this post?'; - swal({ - title: 'Confirm', - text: msg, - icon: 'warning', - buttons: true, - dangerMode: true - }).then(res => { - if(res) { - axios.post('/api/v2/moderator/action', { - action: action, - item_id: status.id, - item_type: 'status' - }).then(res => { - swal('Success', 'Successfully added content warning', 'success'); - status.sensitive = false; - self.ctxModMenuClose(); - }).catch(err => { - swal( - 'Error', - 'Something went wrong, please try again later.', - 'error' - ); - self.ctxModMenuClose(); - }); - } - }); - break; - - case 'unlist': - msg = 'Are you sure you want to unlist this post?'; - swal({ - title: 'Confirm', - text: msg, - icon: 'warning', - buttons: true, - dangerMode: true - }).then(res => { - if(res) { - axios.post('/api/v2/moderator/action', { - action: action, - item_id: status.id, - item_type: 'status' - }).then(res => { - this.feed = this.feed.filter(f => { - return f.id != status.id; - }); - swal('Success', 'Successfully unlisted post', 'success'); - self.ctxModMenuClose(); - }).catch(err => { - self.ctxModMenuClose(); - swal( - 'Error', - 'Something went wrong, please try again later.', - 'error' - ); - }); - } - }); - break; - } - }, - followingModal() { if(this.following.length > 0) { this.$refs.followingModal.show(); @@ -2031,101 +1332,6 @@ }) }, - ctxMenu(status) { - this.ctxMenuStatus = status; - this.ctxEmbedPayload = window.App.util.embed.post(status.url); - if(status.account.id == this.profile.id) { - this.ctxMenuRelationship = false; - this.$refs.ctxModal.show(); - } else { - axios.get('/api/pixelfed/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(); - this.$refs.ctxReport.hide(); - this.$refs.ctxReportOther.hide(); - this.closeModals(); - }, - - ctxMenuCopyLink() { - let status = this.ctxMenuStatus; - navigator.clipboard.writeText(status.url); - this.closeModals(); - return; - }, - - ctxMenuGoToPost() { - let status = this.ctxMenuStatus; - window.location.href = this.statusUrl(status); - this.closeCtxMenu(); - return; - }, - - ctxMenuFollow() { - let id = this.ctxMenuStatus.account.id; - axios.post('/i/follow', { - item: id - }).then(res => { - let username = this.ctxMenuStatus.account.acct; - this.closeCtxMenu(); - setTimeout(function() { - swal('Follow successful!', 'You are now following ' + username, 'success'); - }, 500); - }); - }, - - ctxMenuUnfollow() { - let id = this.ctxMenuStatus.account.id; - axios.post('/i/follow', { - item: id - }).then(res => { - let username = this.ctxMenuStatus.account.acct; - if(this.scope == 'home') { - this.feed = this.feed.filter(s => { - return s.account.id != this.ctxMenuStatus.account.id; - }); - } - this.closeCtxMenu(); - setTimeout(function() { - swal('Unfollow successful!', 'You are no longer following ' + username, 'success'); - }, 500); - }); - }, - - ctxMenuReportPost() { - this.$refs.ctxModal.hide(); - this.$refs.ctxReport.show(); - return; - // window.location.href = '/i/report?type=post&id=' + this.ctxMenuStatus.id; - }, - - ctxMenuEmbed() { - this.closeModals(); - 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.ctxEmbedShowCaption = true; @@ -2134,31 +1340,6 @@ this.$refs.ctxEmbedModal.hide(); }, - ctxModMenuShow() { - this.$refs.ctxModal.hide(); - this.$refs.ctxModModal.show(); - }, - - ctxModOtherMenuShow() { - this.$refs.ctxModal.hide(); - this.$refs.ctxModModal.hide(); - this.$refs.ctxModOtherModal.show(); - }, - - ctxModMenu() { - this.$refs.ctxModal.hide(); - }, - - ctxModMenuClose() { - this.closeModals(); - this.$refs.ctxModal.show(); - }, - - ctxModOtherMenuClose() { - this.closeModals(); - this.$refs.ctxModModal.show(); - }, - formatCount(count) { return App.util.format.count(count); }, @@ -2290,126 +1471,6 @@ this.mpData = null; }, - switchFeedLayout(toggle) { - this.loading = true; - this.layout = toggle; - let self = this; - setTimeout(function() { - self.loading = false; - }, 500); - }, - - labelRedirect(type) { - let url = '/i/redirect?url=' + encodeURI(this.config.features.label.covid.url); - window.location.href = url; - }, - - openCtxReportOtherMenu() { - let s = this.ctxMenuStatus; - this.closeCtxMenu(); - this.ctxMenuStatus = s; - this.$refs.ctxReportOther.show(); - }, - - ctxReportMenuGoBack() { - this.$refs.ctxReportOther.hide(); - this.$refs.ctxReport.hide(); - this.$refs.ctxModal.show(); - }, - - ctxReportOtherMenuGoBack() { - this.$refs.ctxReportOther.hide(); - this.$refs.ctxModal.hide(); - this.$refs.ctxReport.show(); - }, - - sendReport(type) { - let id = this.ctxMenuStatus.id; - - swal({ - 'title': 'Confirm Report', - 'text': 'Are you sure you want to report this post?', - 'icon': 'warning', - 'buttons': true, - 'dangerMode': true - }).then((res) => { - if(res) { - axios.post('/i/report/', { - 'report': type, - 'type': 'post', - 'id': id, - }).then(res => { - this.closeCtxMenu(); - swal('Report Sent!', 'We have successfully received your report.', 'success'); - }).catch(err => { - swal('Oops!', 'There was an issue reporting this post.', 'error'); - }) - } else { - this.closeCtxMenu(); - } - }); - }, - - closeModals() { - this.$refs.ctxModal.hide(); - this.$refs.ctxModModal.hide(); - this.$refs.ctxModOtherModal.hide(); - this.$refs.ctxShareModal.hide(); - this.$refs.ctxEmbedModal.hide(); - this.$refs.ctxReport.hide(); - this.$refs.ctxReportOther.hide(); - this.$refs.ctxConfirm.hide(); - this.$refs.lightboxModal.hide(); - this.$refs.replyModal.hide(); - this.$refs.ctxStatusModal.hide(); - }, - - openCtxStatusModal() { - this.closeModals(); - this.$refs.ctxStatusModal.show(); - }, - - openConfirmModal() { - this.closeModals(); - this.$refs.ctxConfirm.show(); - }, - - closeConfirmModal() { - this.closeModals(); - this.confirmModalTitle = 'Are you sure?'; - this.confirmModalType = false; - this.confirmModalIdentifer = null; - }, - - confirmModalConfirm() { - switch(this.confirmModalType) { - case 'post.delete': - axios.post('/i/delete', { - type: 'status', - item: this.confirmModalIdentifer - }).then(res => { - this.feed = this.feed.filter(s => { - return s.id != this.confirmModalIdentifer; - }); - this.closeConfirmModal(); - }).catch(err => { - this.closeConfirmModal(); - swal('Error', 'Something went wrong. Please try again later.', 'error'); - }); - break; - } - - this.closeConfirmModal(); - }, - - confirmModalCancel() { - this.closeConfirmModal(); - }, - - timeAgo(ts) { - return App.util.format.timeAgo(ts); - }, - toggleReplies(reply) { if(reply.thread) { reply.thread = false; @@ -2427,26 +1488,6 @@ } }, - likeReply(status, $event) { - if($('body').hasClass('loggedIn') == false) { - swal('Login', 'Please login to perform this action.', 'info'); - return; - } - - axios.post('/i/like', { - item: status.id - }).then(res => { - status.favourites_count = res.data.count; - if(status.favourited == true) { - status.favourited = false; - } else { - status.favourited = true; - } - }).catch(err => { - swal('Error', 'Something went wrong, please try again later.', 'error'); - }); - }, - replyFocus(e, index, prependUsername = false) { if($('body').hasClass('loggedIn') == false) { this.redirect('/login?next=' + encodeURIComponent(window.location.pathname)); @@ -2471,31 +1512,20 @@ }, 500); }, - loadMoreComments() { - if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) { - $('.load-more-link').addClass('d-none'); - return; - } - $('.load-more-link').addClass('d-none'); - $('.postCommentsLoader').removeClass('d-none'); - let next = this.pagination.links.next; - axios.get(next) - .then(response => { - let self = this; - let res = response.data.data; - $('.postCommentsLoader').addClass('d-none'); - for(let i=0; i < res.length; i++) { - this.replies.unshift(res[i]); - } - this.pagination = response.data.meta.pagination; - $('.load-more-link').removeClass('d-none'); - }); - }, - alwaysViewOlderPosts() { // Set Feed:Always View Older Posts window.localStorage.setItem('pf.feed:avop', 'always'); window.location.href = '/'; + }, + + setCurrentLayout(layout) { + this.currentLayout = layout; + }, + + deleteStatus(status) { + this.feed = this.feed.filter(s => { + return s.id != status; + }); } }, @@ -2526,16 +1556,6 @@ font-size: 13px; border-radius: 0 3px 3px 0; }*/ - .emoji-reactions .nav-item { - font-size: 1.2rem; - padding: 9px; - cursor: pointer; - } - .emoji-reactions::-webkit-scrollbar { - width: 0px; - height: 0px; - background: transparent; - } .reply-btn[disabled] { opacity: .3; color: #3897f0;