Merge pull request #1876 from pixelfed/staging

Staging

resources/assets/js/app.js

@@ -99,8 +99,8 @@ window.App.util = {
 			return '<iframe src="'+u+'" class="pixelfed__embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script async defer src="'+window.location.origin +'/embed.js"><\/script>';
 		}),
 		profile: (function(url) {
-			// placeholder
+			let u = url + '/embed';
-			console.error('This method is not supported yet');
+			return '<iframe src="'+u+'" class="pixelfed__embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script async defer src="'+window.location.origin +'/embed.js"><\/script>';
 		})
 	}
 

resources/assets/js/components/Profile.vue

@@ -422,6 +422,9 @@
 			<div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
 				Copy Link
 			</div>
+			<div v-if="profile.locked == false" class="list-group-item cursor-pointer text-center rounded text-dark" @click="showEmbedProfileModal">
+				Embed
+			</div>
 			<div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
 				Follow
 			</div>
@@ -471,6 +474,21 @@
 			</p>
 		</div>
 	</b-modal>
+	<b-modal ref="embedModal"
+	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: 12px; 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="/site/terms">Terms of Use</a></p>
+	</div>
+</b-modal>
 </div>
 </template>
 <style type="text/css" scoped>
@@ -545,7 +563,9 @@
 				bookmarksPage: 2,
 				collections: [],
 				collectionsPage: 2,
-				isMobile: false
+				isMobile: false,
+				ctxEmbedPayload: null,
+				copiedEmbed: false
 			}
 		},
 		beforeMount() {
@@ -1083,6 +1103,8 @@
 			},
 
 			statusUrl(status) {
+				return status.url;
+
 				if(status.local == true) {
 					return status.url;
 				}
@@ -1091,12 +1113,25 @@
 			},
 
 			profileUrl(status) {
+				return status.url;
+
 				if(status.local == true) {
 					return status.account.url;
 				}
 
 				return '/i/web/profile/_/' + status.account.id;
-			}
+			},
+
+			showEmbedProfileModal() {
+				this.ctxEmbedPayload = window.App.util.embed.profile(this.profile.url)
+				this.$refs.embedModal.show();
+			},
+
+			ctxCopyEmbed() {
+				navigator.clipboard.writeText(this.ctxEmbedPayload);
+				this.$refs.embedModal.hide();
+				this.$refs.visitorContextMenu.hide();
+			},
 		}
 	}
 </script>