generate iframe from shared link

resources/js/components/Others/Forms/CopyShareLink.vue

@@ -1,42 +1,89 @@
 <template>
-    <div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
+    <div class="inline-wrapper icon-append copy-input" :class="size">
         <input ref="sel" :value="item.shared.link" id="link-input" type="text" class="input-text" readonly>
         <div class="multi-icon">
-            <div class="icon-item group hover-bg-theme-100">
+            <div @click="copyUrl" class="icon-item group hover-bg-theme-100">
                 <link-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
                 <check-icon v-if="isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
             </div>
-            <div class="icon-item group hover-bg-theme-100" @click.stop.prevent="menuForEmail">
-                <send-icon size="14" class="group-hover-text-theme hover-text-theme" />
+            <div @click.stop.prevent="moreOptions" class="icon-item group hover-bg-theme-100">
+                <more-horizontal-icon size="14" class="group-hover-text-theme hover-text-theme" />
             </div>
         </div>
+
+		<ul v-if="isOpenedMoreOptions" class="input-options">
+			<li class="option-item" @click="sendOnEmail">
+				<div class="option-icon">
+					<send-icon size="14" />
+				</div>
+				<span class="option-value">{{ $t('sharelink.share_via_email') }}</span>
+			</li>
+			<li class="option-item" @click="copyIframe">
+				<div class="option-icon">
+					<code-icon size="14" />
+				</div>
+				<span class="option-value">{{ $t('sharelink.copy_embed') }}</span>
+			</li>
+		</ul>
+
+		<textarea v-model="iframeCode" ref="iframe" class="iframe-output"></textarea>
     </div>
 </template>
 
 <script>
-import { LinkIcon, CheckIcon, SendIcon } from 'vue-feather-icons'
+import { LinkIcon, CheckIcon, SendIcon, MoreHorizontalIcon, CodeIcon } from 'vue-feather-icons'
 import { events } from '/resources/js/bus'
 
 export default {
     name: 'CopyShareLink',
-    props: ['size', 'item'],
+    props: [
+		'size',
+		'item',
+	],
     components: {
+		MoreHorizontalIcon,
         CheckIcon,
+		CodeIcon,
         LinkIcon,
         SendIcon
     },
     data() {
         return {
-            isCopiedLink: false
+			iframeCode: '',
+            isCopiedLink: false,
+			isOpenedMoreOptions: false,
         }
     },
     methods: {
-        menuForEmail() {
+        moreOptions() {
+            this.isOpenedMoreOptions = ! this.isOpenedMoreOptions
+        },
+		sendOnEmail() {
             events.$emit('popup:open', {
                 name: 'share-edit',
                 item: this.item,
                 sentToEmail: true,
             })
+
+			this.isOpenedMoreOptions = false
+        },
+		copyIframe() {
+        	// generate iframe
+        	this.iframeCode = `<iframe src="${this.item.shared.link}" width="790" height="400" allowfullscreen frameborder="0"></iframe>`
+
+			let copyText = this.$refs.iframe
+
+			copyText.select()
+			copyText.setSelectionRange(0, 99999)
+
+			document.execCommand('copy')
+
+			events.$emit('toaster', {
+				type: 'success',
+				message: this.$t('Your web insert code was copied'),
+			})
+
+			this.isOpenedMoreOptions = false
         },
         copyUrl() {
 
@@ -68,6 +115,57 @@ export default {
 @import "resources/sass/vuefilemanager/_inapp-forms.scss";
 @import "resources/sass/vuefilemanager/_forms.scss";
 
+.input-options {
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
+	background: white;
+	border-radius: 8px;
+	position: absolute;
+	overflow: hidden;
+	top: 45px;
+	left: 0;
+	right: 0;
+	z-index: 9;
+	max-height: 295px;
+	overflow-y: auto;
+
+	.option-item {
+		padding: 13px 20px;
+		display: block;
+		cursor: pointer;
+
+		&:hover {
+			color: $theme;
+			background: $light_background;
+		}
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+
+	.option-icon {
+		width: 20px;
+		display: inline-block;
+		@include font-size(10);
+
+		svg {
+			margin-top: -4px;
+			vertical-align: middle;
+		}
+	}
+
+	.option-value {
+		@include font-size(14);
+		font-weight: 700;
+		width: 100%;
+		vertical-align: middle;
+
+		&.placehoder {
+			color: rgba($text, 0.5);
+		}
+	}
+}
+
 .multi-icon {
     display: flex;
     align-items: center;
@@ -77,7 +175,8 @@ export default {
 
     line,
     path,
-    polygon {
+    polygon,
+	circle{
         color: $text;
     }
 
@@ -93,6 +192,7 @@ export default {
             line,
             polyline,
             path,
+            circle,
             polygon {
                 color: inherit;
             }
@@ -107,12 +207,10 @@ export default {
             border-top-right-radius: 8px;
         }
     }
-
-
 }
 
-// Single page
 .copy-input {
+	position: relative;
     border: 1px solid $light_mode_border_darken;
     border-radius: 8px;
 
@@ -146,6 +244,11 @@ export default {
     }
 }
 
+.iframe-output {
+	position: absolute;
+	right: -9999px;
+}
+
 .dark-mode {
 
     .copy-input {
@@ -158,6 +261,7 @@ export default {
 
         line,
         path,
+        circle,
         polygon {
             color: inherit !important;
         }
@@ -165,8 +269,6 @@ export default {
         .icon-item {
             border-color: #333333;
         }
-
-
     }
 
     .copy-input {