181 lines
4.7 KiB
Vue
181 lines
4.7 KiB
Vue
![]() |
<template>
|
||
|
<div class="dark:text-white p-4">
|
||
|
<header class="">
|
||
|
<h2 class="text-2xl">{{ title }}</h2>
|
||
|
</header>
|
||
|
|
||
|
<section class="flex">
|
||
|
<div class="">
|
||
|
<slot></slot>
|
||
|
<o-field :label="inputLabel" label-for="url-text">
|
||
|
<o-input id="url-text" ref="URLInput" :modelValue="url" expanded />
|
||
|
<p class="control">
|
||
|
<o-tooltip
|
||
|
:label="$t('URL copied to clipboard')"
|
||
|
:active="showCopiedTooltip"
|
||
|
always
|
||
|
variant="success"
|
||
|
position="left"
|
||
|
>
|
||
|
<o-button
|
||
|
variant="primary"
|
||
|
icon-right="content-paste"
|
||
|
native-type="button"
|
||
|
@click="copyURL"
|
||
|
@keyup.enter="copyURL"
|
||
|
:title="$t('Copy URL to clipboard')"
|
||
|
/>
|
||
|
</o-tooltip>
|
||
|
</p>
|
||
|
</o-field>
|
||
|
<div class="flex">
|
||
|
<a
|
||
|
:href="twitterShare"
|
||
|
target="_blank"
|
||
|
rel="nofollow noopener"
|
||
|
title="Twitter"
|
||
|
><Twitter :size="48"
|
||
|
/></a>
|
||
|
<a
|
||
|
:href="mastodonShare"
|
||
|
class="mastodon"
|
||
|
target="_blank"
|
||
|
rel="nofollow noopener"
|
||
|
title="Mastodon"
|
||
|
>
|
||
|
<mastodon-logo />
|
||
|
</a>
|
||
|
<a
|
||
|
:href="facebookShare"
|
||
|
target="_blank"
|
||
|
rel="nofollow noopener"
|
||
|
title="Facebook"
|
||
|
><Facebook :size="48"
|
||
|
/></a>
|
||
|
<a
|
||
|
:href="whatsAppShare"
|
||
|
target="_blank"
|
||
|
rel="nofollow noopener"
|
||
|
title="WhatsApp"
|
||
|
><Whatsapp :size="48"
|
||
|
/></a>
|
||
|
<a
|
||
|
:href="telegramShare"
|
||
|
class="telegram"
|
||
|
target="_blank"
|
||
|
rel="nofollow noopener"
|
||
|
title="Telegram"
|
||
|
>
|
||
|
<telegram-logo />
|
||
|
</a>
|
||
|
<a
|
||
|
:href="linkedInShare"
|
||
|
target="_blank"
|
||
|
rel="nofollow noopener"
|
||
|
title="LinkedIn"
|
||
|
><LinkedIn :size="48"
|
||
|
/></a>
|
||
|
<a
|
||
|
:href="diasporaShare"
|
||
|
class="diaspora"
|
||
|
target="_blank"
|
||
|
rel="nofollow noopener"
|
||
|
title="Diaspora"
|
||
|
>
|
||
|
<diaspora-logo />
|
||
|
</a>
|
||
|
<a
|
||
|
:href="emailShare"
|
||
|
target="_blank"
|
||
|
rel="nofollow noopener"
|
||
|
title="Email"
|
||
|
>
|
||
|
<Email :size="48" />
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</section>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts" setup>
|
||
|
import { computed, ref } from "vue";
|
||
|
import DiasporaLogo from "./DiasporaLogo.vue";
|
||
|
import MastodonLogo from "./MastodonLogo.vue";
|
||
|
import TelegramLogo from "./TelegramLogo.vue";
|
||
|
import Email from "vue-material-design-icons/Email.vue";
|
||
|
import LinkedIn from "vue-material-design-icons/Linkedin.vue";
|
||
|
import Whatsapp from "vue-material-design-icons/Whatsapp.vue";
|
||
|
import Facebook from "vue-material-design-icons/Facebook.vue";
|
||
|
import Twitter from "vue-material-design-icons/Twitter.vue";
|
||
|
import {
|
||
|
diasporaShareUrl,
|
||
|
emailShareUrl,
|
||
|
facebookShareUrl,
|
||
|
linkedInShareUrl,
|
||
|
mastodonShareUrl,
|
||
|
telegramShareUrl,
|
||
|
twitterShareUrl,
|
||
|
whatsAppShareUrl,
|
||
|
} from "@/utils/share";
|
||
|
|
||
|
const props = withDefaults(
|
||
|
defineProps<{
|
||
|
title: string;
|
||
|
url: string;
|
||
|
text: string;
|
||
|
inputLabel: string;
|
||
|
}>(),
|
||
|
{}
|
||
|
);
|
||
|
|
||
|
const URLInput = ref<HTMLElement | null>(null);
|
||
|
|
||
|
const showCopiedTooltip = ref(false);
|
||
|
|
||
|
const twitterShare = computed((): string | undefined =>
|
||
|
twitterShareUrl(props.url, props.text)
|
||
|
);
|
||
|
const facebookShare = computed((): string | undefined =>
|
||
|
facebookShareUrl(props.url)
|
||
|
);
|
||
|
const linkedInShare = computed((): string | undefined =>
|
||
|
linkedInShareUrl(props.url, props.text)
|
||
|
);
|
||
|
const whatsAppShare = computed((): string | undefined =>
|
||
|
whatsAppShareUrl(props.url, props.text)
|
||
|
);
|
||
|
const telegramShare = computed((): string | undefined =>
|
||
|
telegramShareUrl(props.url, props.text)
|
||
|
);
|
||
|
const emailShare = computed((): string | undefined =>
|
||
|
emailShareUrl(props.url, props.text)
|
||
|
);
|
||
|
const diasporaShare = computed((): string | undefined =>
|
||
|
diasporaShareUrl(props.url, props.text)
|
||
|
);
|
||
|
const mastodonShare = computed((): string | undefined =>
|
||
|
mastodonShareUrl(props.url, props.text)
|
||
|
);
|
||
|
|
||
|
const copyURL = (): void => {
|
||
|
console.log("URLInput", URLInput.value);
|
||
|
URLInput.value?.$refs.input.select();
|
||
|
document.execCommand("copy");
|
||
|
showCopiedTooltip.value = true;
|
||
|
setTimeout(() => {
|
||
|
showCopiedTooltip.value = false;
|
||
|
}, 2000);
|
||
|
};
|
||
|
</script>
|
||
|
<style lang="scss" scoped>
|
||
|
.diaspora,
|
||
|
.mastodon,
|
||
|
.telegram {
|
||
|
:deep(span svg) {
|
||
|
width: 2.5rem;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
}
|
||
|
</style>
|