cineclub-site/front/components/socials/newsletter.vue

74 lines
2.1 KiB
Vue
Raw Normal View History

2022-08-27 15:05:11 +02:00
<template>
<a class="navbar-item network-item" :href="mailToLink" @click="waitForBlur">
<v-icon scale="1.8" name="ri-mail-fill" />
Newsletter
</a>
<div class="modal" :class="{ 'is-active': showModal }">
<div class="modal-background"></div>
<div class="modal-card">
<div class="modal-card-body content">
<p>
Si aucun mail ne s'est ouvert, alors désolée, il faudra faire
l'inscription manuellement. Une solution plus pratique est en cours de
développement.
</p>
<p>
Il vous faut envoyer à l'adresse
<span
class="copyable-text"
@click="copyClipboard(mailDestination, 'L\'adresse email')"
>
{{ mailDestination }}
</span>
un mail dont l'objet soit
<span
class="copyable-text"
@click="copyClipboard(mailSubject, 'L\'objet du mail')"
>
{{ mailSubject }}
</span>
</p>
<div v-if="copiedItemFr" class="notification is-primary is-light">
{{ copiedItemFr }} a été copié dans votre presse-papier
</div>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="showModal = false"
/>
</div>
</template>
<script lang="ts" setup>
const mailToLink =
"mailto:sympa@lists.ens.psl.eu?subject=SUBSCRIBE%20cineclub-informations&body=Envoyez%20ce%20mail%20pour%20terminer%20de%20vous%20inscrire"
const mailDestination = "sympa@lists.ens.psl.eu"
const mailSubject = "SUBSCRIBE cineclub-informations"
const showModal = ref<boolean>(false)
const copiedItemFr = ref<string>("")
function waitForBlur() {
if (process.server) return
let t
window.addEventListener("blur", () => clearTimeout(t), { once: true })
t = setTimeout(() => (showModal.value = true), 500)
}
function copyClipboard(itemToCopy, itemName) {
if (process.server) return
navigator.clipboard.writeText(itemToCopy)
copiedItemFr.value = itemName
}
</script>
<style lang="sass">
.copyable-text
font-family: monospace
cursor: pointer
&:hover
color: $primary
</style>