73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<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>
|