From 950fc27773124efaab242e48b55ce9f726862860 Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Mon, 5 Jul 2021 23:42:46 -0600 Subject: [PATCH] Update components --- resources/assets/js/components/Timeline.vue | 517 +----------------- .../js/components/partials/ContextMenu.vue | 44 +- .../js/components/partials/StatusCard.vue | 460 +--------------- 3 files changed, 73 insertions(+), 948 deletions(-) diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue index a266b3a8..d0562adb 100644 --- a/resources/assets/js/components/Timeline.vue +++ b/resources/assets/js/components/Timeline.vue @@ -398,140 +398,6 @@ - - { - status.favourites_count = res.data.count; - }).catch(err => { - status.favourited = !status.favourited; - status.favourites_count = count; - swal('Error', 'Something went wrong, please try again later.', 'error'); - }); - window.navigator.vibrate(200); - if(status.favourited) { - setTimeout(function() { - event.target.classList.add('animate__animated', 'animate__bounce'); - },100); - } - }, - - shareStatus(status, $event) { - if($('body').hasClass('loggedIn') == false) { - return; - } - - this.closeModals(); - - axios.post('/i/share', { - item: status.id - }).then(res => { - status.reblogs_count = res.data.count; - status.reblogged = !status.reblogged; - if(status.reblogged) { - swal('Success', 'You shared this post', 'success'); - } else { - swal('Success', 'You unshared this post', 'success'); - } - }).catch(err => { - swal('Error', 'Something went wrong, please try again later.', 'error'); - }); - }, - - timestampFormat(timestamp) { - let ts = new Date(timestamp); - return ts.toDateString() + ' ' + ts.toLocaleTimeString(); - }, - redirect(url) { window.location.href = url; return; }, - statusOwner(status) { - let sid = status.account.id; - let uid = this.profile.id; - if(sid == uid) { - return true; - } else { - return false; - } - }, - - fetchStatusComments(status, card) { - // axios.get('/api/v2/status/'+status.id+'/replies', - // { - // params: { - // limit: 6 - // } - // }) - // .then(res => { - // let data = res.data.filter(res => { - // return res.sensitive == false; - // }); - // this.replies = _.reverse(data); - // setTimeout(function() { - // document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) { - // i.href = App.util.format.rewriteLinks(i); - // }); - // }, 500); - // }).catch(err => { - // }) - let url = '/api/v2/comments/'+status.account.id+'/status/'+status.id; - axios.get(url) - .then(response => { - let self = this; - // this.results = this.layout == 'metro' ? - // _.reverse(response.data.data) : - // response.data.data; - this.replies = _.reverse(response.data.data); - this.pagination = response.data.meta.pagination; - if(this.replies.length > 0) { - $('.load-more-link').removeClass('d-none'); - } - $('.postCommentsLoader').addClass('d-none'); - $('.postCommentsContainer').removeClass('d-none'); - // setTimeout(function() { - // document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) { - // i.href = App.util.format.rewriteLinks(i); - // }); - // }, 500); - }).catch(error => { - if(!error.response) { - $('.postCommentsLoader .lds-ring') - .attr('style','width:100%') - .addClass('pt-4 font-weight-bold text-muted') - .text('An error occurred, cannot fetch comments. Please try again later.'); - } else { - switch(error.response.status) { - case 401: - $('.postCommentsLoader .lds-ring') - .attr('style','width:100%') - .addClass('pt-4 font-weight-bold text-muted') - .text('Please login to view.'); - break; - - default: - $('.postCommentsLoader .lds-ring') - .attr('style','width:100%') - .addClass('pt-4 font-weight-bold text-muted') - .text('An error occurred, cannot fetch comments. Please try again later.'); - break; - } - } - }); - }, - - followingModal() { - if(this.following.length > 0) { - this.$refs.followingModal.show(); - return; - } - axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', { - params: { - page: this.followingCursor - } - }) - .then(res => { - this.following = res.data; - this.followingCursor++; - }); - if(res.data.length < 10) { - this.followingMore = false; - } - this.$refs.followingModal.show(); - }, - - followersModal() { - if(this.followers.length > 0) { - this.$refs.followerModal.show(); - return; - } - axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', { - params: { - page: this.followerCursor - } - }) - .then(res => { - this.followers = res.data; - this.followerCursor++; - }) - if(res.data.length < 10) { - this.followerMore = false; - } - this.$refs.followerModal.show(); - }, - - followingLoadMore() { - axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', { - params: { - page: this.followingCursor - } - }) - .then(res => { - if(res.data.length > 0) { - this.following.push(...res.data); - this.followingCursor++; - } - if(res.data.length < 10) { - this.followingMore = false; - } - }); - }, - - followersLoadMore() { - axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', { - params: { - page: this.followerCursor - } - }) - .then(res => { - if(res.data.length > 0) { - this.followers.push(...res.data); - this.followerCursor++; - } - if(res.data.length < 10) { - this.followerMore = false; - } - }); - }, - - lightbox(status) { - window.location.href = status.media_attachments[0].url; - return; - this.lightboxMedia = status.media_attachments[0]; - this.$refs.lightboxModal.show(); - }, - - expLc(status) { - if(this.config.ab.lc == false) { - return true; - } - if(this.statusOwner(status) == true) { - return true; - } - return false; - }, - expRec() { //return; @@ -1223,33 +829,6 @@ }); }, - followAction(status) { - let id = status.account.id; - - axios.post('/i/follow', { - item: id - }).then(res => { - this.feed.forEach(s => { - if(s.account.id == id) { - s.account.relationship.following = !s.account.relationship.following; - } - }); - - let username = status.account.acct; - - if(status.account.relationship.following) { - swal('Follow successful!', 'You are now following ' + username, 'success'); - } else { - swal('Unfollow successful!', 'You are no longer following ' + username, 'success'); - } - - }).catch(err => { - if(err.response.data.message) { - swal('Error', err.response.data.message, 'error'); - } - }); - }, - owner(status) { return this.profile.id === status.account.id; }, @@ -1335,80 +914,38 @@ }) }, - ctxCopyEmbed() { - navigator.clipboard.writeText(this.ctxEmbedPayload); - this.ctxEmbedShowCaption = true; - this.ctxEmbedShowLikes = false; - this.ctxEmbedCompactMode = false; - this.$refs.ctxEmbedModal.hide(); - }, + commentFocus(status, $event) { + if(status.comments_disabled) { + return; + } + + // if(this.status && this.status.id == status.id) { + // this.$refs.replyModal.show(); + // return; + // } + + this.status = status; + this.replies = {}; + this.replyStatus = {}; + this.replyText = ''; + this.replyId = status.id; + this.replyStatus = status; + // this.$refs.replyModal.show(); + this.fetchStatusComments(status, ''); + + $('nav').hide(); + $('footer').hide(); + $('.mobile-footer-spacer').attr('style', 'display:none !important'); + $('.mobile-footer').attr('style', 'display:none !important'); + this.currentLayout = 'comments'; + window.history.pushState({}, '', this.statusUrl(status)); + return; + }, formatCount(count) { return App.util.format.count(count); }, - statusUrl(status) { - if(status.local == true) { - return status.url; - } - - return '/i/web/post/_/' + status.account.id + '/' + status.id; - }, - - profileUrl(status) { - if(status.local == true) { - return status.account.url; - } - - return '/i/web/profile/_/' + status.account.id; - }, - - statusCardUsernameFormat(status) { - if(status.account.local == true) { - return status.account.username; - } - - let fmt = window.App.config.username.remote.format; - let txt = window.App.config.username.remote.custom; - let usr = status.account.username; - let dom = document.createElement('a'); - dom.href = status.account.url; - dom = dom.hostname; - - switch(fmt) { - case '@': - return usr + '@' + dom + ''; - break; - - case 'from': - return usr + ' from ' + dom + ''; - break; - - case 'custom': - return usr + ' ' + txt + ' ' + dom + ''; - break; - - default: - return usr + '@' + dom + ''; - break; - } - }, - - previewUrl(status) { - return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url; - }, - - previewBackground(status) { - let preview = this.previewUrl(status); - return 'background-image: url(' + preview + ');'; - }, - - trimCaption(caption, len = 60) { - return _.truncate(caption, { - length: len - }); - }, - hasStory() { axios.get('/api/stories/v0/exists/'+this.profile.id) .then(res => { diff --git a/resources/assets/js/components/partials/ContextMenu.vue b/resources/assets/js/components/partials/ContextMenu.vue index ebca5a7d..f5d966b6 100644 --- a/resources/assets/js/components/partials/ContextMenu.vue +++ b/resources/assets/js/components/partials/ContextMenu.vue @@ -356,7 +356,6 @@ ctxModMenuClose() { this.closeModals(); - this.$refs.ctxModal.show(); }, ctxModOtherMenuClose() { @@ -490,6 +489,7 @@ }).then(res => { swal('Success', 'Successfully added content warning', 'success'); status.sensitive = true; + self.closeModals(); self.ctxModMenuClose(); }).catch(err => { swal( @@ -497,6 +497,7 @@ 'Something went wrong, please try again later.', 'error' ); + self.closeModals(); self.ctxModMenuClose(); }); } @@ -520,6 +521,7 @@ }).then(res => { swal('Success', 'Successfully added content warning', 'success'); status.sensitive = false; + self.closeModals(); self.ctxModMenuClose(); }).catch(err => { swal( @@ -527,6 +529,7 @@ 'Something went wrong, please try again later.', 'error' ); + self.closeModals(); self.ctxModMenuClose(); }); } @@ -552,8 +555,10 @@ return f.id != status.id; }); swal('Success', 'Successfully unlisted post', 'success'); + self.closeModals(); self.ctxModMenuClose(); }).catch(err => { + self.closeModals(); self.ctxModMenuClose(); swal( 'Error', @@ -581,9 +586,10 @@ item_type: 'status' }).then(res => { swal('Success', 'Successfully marked account as spammer', 'success'); + self.closeModals(); self.ctxModMenuClose(); }).catch(err => { - console.log(err); + self.closeModals(); self.ctxModMenuClose(); swal( 'Error', @@ -625,7 +631,39 @@ } return '/i/web/post/_/' + status.account.id + '/' + status.id; - } + }, + + 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.$emit('status-delete', status.id); + this.closeModals(); + }).catch(err => { + swal('Error', 'Something went wrong. Please try again later.', 'error'); + }); + }, + + owner(status) { + return this.profile.id === status.account.id; + }, + + admin() { + return this.profile.is_admin == true; + }, + + ownerOrAdmin(status) { + return this.owner(status) || this.admin(); + }, } } diff --git a/resources/assets/js/components/partials/StatusCard.vue b/resources/assets/js/components/partials/StatusCard.vue index 9f654e6d..6bf7b960 100644 --- a/resources/assets/js/components/partials/StatusCard.vue +++ b/resources/assets/js/components/partials/StatusCard.vue @@ -124,6 +124,7 @@ ref="contextMenu" :status="status" :profile="profile" + v-on:status-delete="statusDeleted" /> @@ -166,49 +167,6 @@ replyText: '', replyNsfw: false, emoji: window.App.util.emoji, - ctxMenuStatus: false, - ctxMenuRelationship: false, - ctxEmbedPayload: false, - copiedEmbed: false, - replySending: false, - ctxEmbedShowCaption: true, - ctxEmbedShowLikes: false, - ctxEmbedCompactMode: false, - confirmModalTitle: 'Are you sure?', - confirmModalIdentifer: null, - confirmModalType: false, - tributeSettings: { - collection: [ - { - trigger: '@', - menuShowMinLength: 2, - values: (function (text, cb) { - let url = '/api/compose/v0/search/mention'; - axios.get(url, { params: { q: text }}) - .then(res => { - cb(res.data); - }) - .catch(err => { - console.log(err); - }) - }) - }, - { - trigger: '#', - menuShowMinLength: 2, - values: (function (text, cb) { - let url = '/api/compose/v0/search/hashtag'; - axios.get(url, { params: { q: text }}) - .then(res => { - cb(res.data); - }) - .catch(err => { - console.log(err); - }) - }) - } - ] - }, } }, @@ -305,65 +263,10 @@ } }, - // ctxMenu() { - // this.$emit('ctx-menu', this.status); - // }, - commentFocus(status, $event) { this.$emit('comment-focus', status); }, - 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.$emit('status-delete', 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; @@ -386,132 +289,6 @@ 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; - } - }, - - followAction(status) { - let id = status.account.id; - - axios.post('/i/follow', { - item: id - }).then(res => { - this.feed.forEach(s => { - if(s.account.id == id) { - s.account.relationship.following = !s.account.relationship.following; - } - }); - - let username = status.account.acct; - - if(status.account.relationship.following) { - swal('Follow successful!', 'You are now following ' + username, 'success'); - } else { - swal('Unfollow successful!', 'You are no longer following ' + username, 'success'); - } - - }).catch(err => { - if(err.response.data.message) { - swal('Error', err.response.data.message, 'error'); - } - }); - }, - owner(status) { return this.profile.id === status.account.id; }, @@ -526,242 +303,15 @@ ctxMenu() { this.$refs.contextMenu.open(); - // let status = this.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; - }, - - 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; - this.ctxEmbedShowLikes = false; - this.ctxEmbedCompactMode = false; - 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); - }, - - 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); }, + + statusDeleted(status) { + this.$emit('status-delete', status); + } } }