mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 08:32:14 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,47 +1,63 @@
|
||||
<template>
|
||||
<div class="flex items-center relative">
|
||||
<input ref="sel" :value="item.data.relationships.shared.data.attributes.link" :id="id" type="text" class="pr-16 py-2 pl-3 text-sm focus-border-theme w-full dark:bg-2x-dark-foreground bg-light-background rounded-lg appearance-none border-transparent font-bold border" readonly>
|
||||
<div class="relative flex items-center">
|
||||
<input
|
||||
ref="sel"
|
||||
:value="item.data.relationships.shared.data.attributes.link"
|
||||
:id="id"
|
||||
type="text"
|
||||
class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background py-2 pr-16 pl-3 text-sm font-bold dark:bg-2x-dark-foreground"
|
||||
readonly
|
||||
/>
|
||||
|
||||
<!--Copy icon-->
|
||||
<div class="flex items-center">
|
||||
<!--Copy icon-->
|
||||
<div class="flex items-center">
|
||||
<div @click="copyUrl" class="absolute right-9 p-1">
|
||||
<copy-icon v-if="! isCopiedLink" size="14" class="cursor-pointer hover-text-theme vue-feather"/>
|
||||
<check-icon v-if="isCopiedLink" size="14" class="cursor-pointer hover-text-theme vue-feather"/>
|
||||
<copy-icon v-if="!isCopiedLink" size="14" class="hover-text-theme vue-feather cursor-pointer" />
|
||||
<check-icon v-if="isCopiedLink" size="14" class="hover-text-theme vue-feather cursor-pointer" />
|
||||
</div>
|
||||
<div @click.stop.prevent="moreOptions" class="absolute right-2.5 p-1">
|
||||
<more-horizontal-icon size="14" class="cursor-pointer hover-text-theme vue-feather" />
|
||||
<more-horizontal-icon size="14" class="hover-text-theme vue-feather cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Hidden options-->
|
||||
<ul v-if="isOpenedMoreOptions" class="shadow-xl rounded-lg absolute top-12 left-0 right-0 z-10 overflow-y-auto overflow-x-hidden select-none">
|
||||
<li @click="getQrCode" class="flex items-center py-2.5 px-5 block cursor-pointer dark:bg-2x-dark-foreground dark:hover:bg-4x-dark-foreground hover:bg-light-background bg-white">
|
||||
<div class="w-8">
|
||||
<camera-icon size="14" />
|
||||
</div>
|
||||
<span class="text-sm font-bold">
|
||||
{{ $t('Get QR Code') }}
|
||||
</span>
|
||||
</li>
|
||||
<li @click="sendViaEmail" class="flex items-center py-2.5 px-5 block cursor-pointer dark:bg-2x-dark-foreground dark:hover:bg-4x-dark-foreground hover:bg-light-background bg-white">
|
||||
<div class="w-8">
|
||||
<send-icon size="14" />
|
||||
</div>
|
||||
<span class="text-sm font-bold">
|
||||
{{ $t('sharelink.share_via_email') }}
|
||||
</span>
|
||||
</li>
|
||||
<li @click="copyIframe" class="flex items-center py-2.5 px-5 block cursor-pointer dark:bg-2x-dark-foreground dark:hover:bg-4x-dark-foreground hover:bg-light-background bg-white">
|
||||
<div class="w-8">
|
||||
<code-icon size="14" />
|
||||
</div>
|
||||
<span class="text-sm font-bold">
|
||||
{{ $t('sharelink.copy_embed') }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!--Hidden options-->
|
||||
<ul v-if="isOpenedMoreOptions" class="absolute top-12 left-0 right-0 z-10 select-none overflow-y-auto overflow-x-hidden rounded-lg shadow-xl">
|
||||
<li
|
||||
@click="getQrCode"
|
||||
class="block flex cursor-pointer items-center bg-white py-2.5 px-5 hover:bg-light-background dark:bg-2x-dark-foreground dark:hover:bg-4x-dark-foreground"
|
||||
>
|
||||
<div class="w-8">
|
||||
<camera-icon size="14" />
|
||||
</div>
|
||||
<span class="text-sm font-bold">
|
||||
{{ $t('Get QR Code') }}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
@click="sendViaEmail"
|
||||
class="block flex cursor-pointer items-center bg-white py-2.5 px-5 hover:bg-light-background dark:bg-2x-dark-foreground dark:hover:bg-4x-dark-foreground"
|
||||
>
|
||||
<div class="w-8">
|
||||
<send-icon size="14" />
|
||||
</div>
|
||||
<span class="text-sm font-bold">
|
||||
{{ $t('sharelink.share_via_email') }}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
@click="copyIframe"
|
||||
class="block flex cursor-pointer items-center bg-white py-2.5 px-5 hover:bg-light-background dark:bg-2x-dark-foreground dark:hover:bg-4x-dark-foreground"
|
||||
>
|
||||
<div class="w-8">
|
||||
<code-icon size="14" />
|
||||
</div>
|
||||
<span class="text-sm font-bold">
|
||||
{{ $t('sharelink.copy_embed') }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<textarea v-model="iframeCode" ref="iframe" class="absolute right-full opacity-0 pointer-events-none"></textarea>
|
||||
<textarea v-model="iframeCode" ref="iframe" class="pointer-events-none absolute right-full opacity-0"></textarea>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -51,67 +67,64 @@ import { events } from '../../../bus'
|
||||
|
||||
export default {
|
||||
name: 'CopyShareLink',
|
||||
props: [
|
||||
'item',
|
||||
],
|
||||
props: ['item'],
|
||||
components: {
|
||||
MoreHorizontalIcon,
|
||||
CameraIcon,
|
||||
MoreHorizontalIcon,
|
||||
CameraIcon,
|
||||
CheckIcon,
|
||||
CopyIcon,
|
||||
CodeIcon,
|
||||
SendIcon
|
||||
CopyIcon,
|
||||
CodeIcon,
|
||||
SendIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: 'link-input-' + Math.floor(Math.random() * 10000000),
|
||||
iframeCode: '',
|
||||
id: 'link-input-' + Math.floor(Math.random() * 10000000),
|
||||
iframeCode: '',
|
||||
isCopiedLink: false,
|
||||
isOpenedMoreOptions: false,
|
||||
isOpenedMoreOptions: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moreOptions() {
|
||||
this.isOpenedMoreOptions = ! this.isOpenedMoreOptions
|
||||
this.isOpenedMoreOptions = !this.isOpenedMoreOptions
|
||||
},
|
||||
getQrCode() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-edit',
|
||||
item: this.item,
|
||||
section: 'qr-code',
|
||||
})
|
||||
getQrCode() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-edit',
|
||||
item: this.item,
|
||||
section: 'qr-code',
|
||||
})
|
||||
|
||||
this.isOpenedMoreOptions = false
|
||||
},
|
||||
sendViaEmail() {
|
||||
this.isOpenedMoreOptions = false
|
||||
},
|
||||
sendViaEmail() {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-edit',
|
||||
item: this.item,
|
||||
section: 'email-sharing',
|
||||
})
|
||||
|
||||
this.isOpenedMoreOptions = false
|
||||
this.isOpenedMoreOptions = false
|
||||
},
|
||||
copyIframe() {
|
||||
// generate iframe
|
||||
this.iframeCode = `<iframe src="${this.item.data.relationships.shared.link}" width="790" height="400" allowfullscreen frameborder="0"></iframe>`
|
||||
copyIframe() {
|
||||
// generate iframe
|
||||
this.iframeCode = `<iframe src="${this.item.data.relationships.shared.link}" width="790" height="400" allowfullscreen frameborder="0"></iframe>`
|
||||
|
||||
let copyText = this.$refs.iframe
|
||||
let copyText = this.$refs.iframe
|
||||
|
||||
copyText.select()
|
||||
copyText.setSelectionRange(0, 99999)
|
||||
copyText.select()
|
||||
copyText.setSelectionRange(0, 99999)
|
||||
|
||||
document.execCommand('copy')
|
||||
document.execCommand('copy')
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your web insert code was copied'),
|
||||
})
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your web insert code was copied'),
|
||||
})
|
||||
|
||||
this.isOpenedMoreOptions = false
|
||||
this.isOpenedMoreOptions = false
|
||||
},
|
||||
copyUrl() {
|
||||
|
||||
// Get input value
|
||||
var copyText = document.getElementById(this.id)
|
||||
|
||||
@@ -129,7 +142,7 @@ export default {
|
||||
setTimeout(() => {
|
||||
this.isCopiedLink = false
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user