Update Timeline component

resources/assets/js/components/Timeline.vue

@@ -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">
+								<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>
-								<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')
+			this.fetchProfile();
-			.then(res => {
+			this.fetchTimelineApi();
-				this.config = res.data;
-				this.fetchProfile();
-				this.fetchTimelineApi();
 
-				// if(this.config.announcement.enabled == true) {
+			// if(this.config.announcement.enabled == true) {
-				// 	let msg = $('<div>')
+			// 	let msg = $('<div>')
-				// 	.addClass('alert alert-warning mb-0 rounded-0 text-center font-weight-bold')
+			// 	.addClass('alert alert-warning mb-0 rounded-0 text-center font-weight-bold')
-				// 	.html(this.config.announcement.message);
+			// 	.html(this.config.announcement.message);
-				// 	$('body').prepend(msg);
+			// 	$('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>