nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 11:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

generate iframe from shared link

Browse Source
This commit is contained in:
Peter Papp
2021-08-18 18:50:22 +02:00
parent 63b4aa0e1d
commit 0c7a416cb5
7 changed files with 186 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Others/Forms/CopyShareLink.vue
+116 -14
View File
@@ -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 {
resources/js/components/Others/Forms/SelectInput.vue
+6 -2
View File
@@ -7,8 +7,8 @@
<!--If is selected-->
<div class="selected" v-if="selected">
<div class="option-icon" v-if="selected.icon">
<user-icon v-if="selected.icon === 'user'" size="14" />
<edit2-icon v-if="selected.icon === 'user-edit'" size="14" />
<user-icon v-if="selected.icon === 'user'" size="14" class="text-theme dark-text-theme" />
<edit2-icon v-if="selected.icon === 'user-edit'" size="14" class="text-theme dark-text-theme" />
</div>
<span class="option-value">{{ selected.label }}</span>
</div>
@@ -211,6 +211,10 @@
svg {
margin-top: -4px;
vertical-align: middle;
line, path, circle {
color: inherit;
}
}
}
resources/js/components/Others/ShareCreatePopup.vue
+5 -5
View File
@@ -25,7 +25,7 @@
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
<small class="input-help">{{ $t('Protect your item by your custom password.') }}</small>
<small class="input-help">{{ $t('popup.share.password_description') }}</small>
</div>
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0" />
</div>
@@ -43,8 +43,8 @@
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">{{ $t('Expiration') }}:</label>
<small class="input-help">{{ $t('Your link expire after exact period of time.') }}</small>
<label class="input-label">{{ $t('expiration') }}:</label>
<small class="input-help">{{ $t('popup.share.expiration_description') }}</small>
</div>
<SwitchInput v-model="isExpiration" class="switch" :state="0" />
</div>
@@ -61,8 +61,8 @@
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">{{ $t('Send on Emails') }}:</label>
<small class="input-help">{{ $t('Send your share link via email to many recipients.') }}</small>
<label class="input-label">{{ $t('popup.share.email_send') }}:</label>
<small class="input-help">{{ $t('popup.share.email_description') }}</small>
</div>
<SwitchInput v-model="isEmailSharing" class="switch" :state="0" />
</div>
resources/js/components/Others/ShareEditPopup.vue
+4 -15
View File
@@ -38,7 +38,7 @@
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
<small class="input-help">{{ $t('Protect your item by your custom password.') }}</small>
<small class="input-help">{{ $t('popup.share.password_description') }}</small>
</div>
<SwitchInput v-model="shareOptions.isProtected" class="switch" :state="shareOptions.isProtected" />
</div>
@@ -60,8 +60,8 @@
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">{{ $t('Expiration') }}:</label>
<small class="input-help">{{ $t('Your link expire after exact period of time.') }}</small>
<label class="input-label">{{ $t('expiration') }}:</label>
<small class="input-help">{{ $t('popup.share.expiration_description') }}</small>
</div>
<SwitchInput v-model="shareOptions.expiration" class="switch" :state="shareOptions.expiration ? 1 : 0" />
</div>
@@ -180,7 +180,6 @@
},
data() {
return {
isExpiration: false,
sendToRecipientsMenu: false,
isConfirmedDestroy: false,
canChangePassword: false,
@@ -304,12 +303,7 @@
},
},
mounted() {
this.sendToRecipientsMenu = false
events.$on('emailsInputValues', (emails) => {
this.emails = emails
})
events.$on('emailsInputValues', emails => this.emails = emails)
// Show popup
events.$on('popup:open', args => {
@@ -329,9 +323,6 @@
password: undefined,
}
if (args.item.shared.expire_in)
this.isExpiration = true
if (args.sentToEmail)
this.sendToRecipientsMenu = true
this.isEmailSended = false
@@ -339,7 +330,6 @@
this.canChangePassword = args.item.shared.is_protected
})
// Close popup
events.$on('popup:close', () => {
// Restore data
@@ -350,7 +340,6 @@
this.shareOptions = undefined
this.pickedItem = undefined
this.isEmailSended = false
this.isExpiration = false
}, 150)
})
}