2022-07-12 10:55:28 +02:00
|
|
|
<template>
|
|
|
|
<div class="dark:text-white p-4">
|
|
|
|
<header class="">
|
|
|
|
<h2 class="text-2xl">{{ title }}</h2>
|
|
|
|
</header>
|
|
|
|
|
|
|
|
<section class="flex">
|
2022-08-26 16:08:58 +02:00
|
|
|
<div class="w-full">
|
2022-07-12 10:55:28 +02:00
|
|
|
<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
|
2022-08-26 16:08:58 +02:00
|
|
|
:label="t('URL copied to clipboard')"
|
2022-07-12 10:55:28 +02:00
|
|
|
:active="showCopiedTooltip"
|
|
|
|
always
|
|
|
|
variant="success"
|
|
|
|
position="left"
|
|
|
|
>
|
|
|
|
<o-button
|
|
|
|
variant="primary"
|
|
|
|
icon-right="content-paste"
|
|
|
|
native-type="button"
|
|
|
|
@click="copyURL"
|
|
|
|
@keyup.enter="copyURL"
|
2022-08-26 16:08:58 +02:00
|
|
|
:title="t('Copy URL to clipboard')"
|
2022-07-12 10:55:28 +02:00
|
|
|
/>
|
|
|
|
</o-tooltip>
|
|
|
|
</p>
|
|
|
|
</o-field>
|
2022-08-12 16:46:44 +02:00
|
|
|
<div class="flex flex-wrap gap-1">
|
2022-07-12 10:55:28 +02:00
|
|
|
<a
|
|
|
|
:href="twitterShare"
|
|
|
|
target="_blank"
|
|
|
|
rel="nofollow noopener"
|
|
|
|
title="Twitter"
|
2022-08-26 16:08:58 +02:00
|
|
|
><Twitter :size="48" class="dark:text-white"
|
2022-07-12 10:55:28 +02:00
|
|
|
/></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"
|
2022-08-26 16:08:58 +02:00
|
|
|
><Facebook :size="48" class="dark:text-white"
|
2022-07-12 10:55:28 +02:00
|
|
|
/></a>
|
|
|
|
<a
|
|
|
|
:href="whatsAppShare"
|
|
|
|
target="_blank"
|
|
|
|
rel="nofollow noopener"
|
|
|
|
title="WhatsApp"
|
2022-08-26 16:08:58 +02:00
|
|
|
><Whatsapp :size="48" class="dark:text-white"
|
2022-07-12 10:55:28 +02:00
|
|
|
/></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"
|
2022-08-26 16:08:58 +02:00
|
|
|
><LinkedIn :size="48" class="dark:text-white"
|
2022-07-12 10:55:28 +02:00
|
|
|
/></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"
|
|
|
|
>
|
2022-08-26 16:08:58 +02:00
|
|
|
<Email :size="48" class="dark:text-white" />
|
2022-07-12 10:55:28 +02:00
|
|
|
</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";
|
2022-08-26 16:08:58 +02:00
|
|
|
import { useI18n } from "vue-i18n";
|
2022-07-12 10:55:28 +02:00
|
|
|
|
|
|
|
const props = withDefaults(
|
|
|
|
defineProps<{
|
|
|
|
title: string;
|
|
|
|
url: string;
|
|
|
|
text: string;
|
|
|
|
inputLabel: string;
|
|
|
|
}>(),
|
|
|
|
{}
|
|
|
|
);
|
|
|
|
|
2022-08-26 16:08:58 +02:00
|
|
|
const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
|
|
const URLInput = ref<{ $refs: { input: HTMLInputElement } } | null>(null);
|
2022-07-12 10:55:28 +02:00
|
|
|
|
|
|
|
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 => {
|
|
|
|
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>
|