https://www.techniques-ingenieur.fr/assets/controllers/intuiti_free_trial_controller-2zIM6X9.js

1import {Controller} from '@hotwired/stimulus';
2
3/**
4 * Ouvre la modale de choix de produit pour lancer un essai gratuit Intuiti et gère la
5 * validation (redirection vers l'URL d'inscription mon-compte du produit sélectionné).
6 *
7 * Posé sur chaque bouton d'ouverture ; la modale partagée vit ailleurs dans le DOM et est
8 * référencée par son id (data-intuiti-free-trial-modal-id-value). Les éléments internes de la
9 * modale (fermeture, validation) sont gérés par délégation car ils sont hors de portée du
10 * contrôleur.
11 */
12/* stimulusFetch: 'lazy' */
13export default class extends Controller {
14    static values = {modalId: String};
15
16    connect() {
17        this.modalEl = document.getElementById(this.modalIdValue);
18
19        this.onKeydown = this.onKeydown.bind(this);
20        this.onModalClick = this.onModalClick.bind(this);
21    }
22
23    disconnect() {
24        this.close();
25    }
26
27    open(event) {
28        event.preventDefault();
29
30        if (!this.modalEl) {
31            return;
32        }
33
34        this.modalEl.classList.add('is-open');
35        this.modalEl.setAttribute('aria-hidden', 'false');
36
37        document.addEventListener('keydown', this.onKeydown);
38        this.modalEl.addEventListener('click', this.onModalClick);
39    }
40
41    close() {
42        if (!this.modalEl) {
43            return;
44        }
45
46        this.modalEl.classList.remove('is-open');
47        this.modalEl.setAttribute('aria-hidden', 'true');
48
49        document.removeEventListener('keydown', this.onKeydown);
50        this.modalEl.removeEventListener('click', this.onModalClick);
51    }
52
53    onModalClick(event) {
54        if (event.target.closest('[data-intuiti-free-trial-validate]')) {
55            this.validate();
56
57            return;
58        }
59
60        const dialog = this.modalEl.querySelector('.intuiti-trial-modal__dialog');
61        const clickedClose = event.target.closest('[data-intuiti-free-trial-close]');
62        const clickedBackdrop = dialog && !dialog.contains(event.target);
63
64        if (clickedClose || clickedBackdrop) {
65            this.close();
66        }
67    }
68
69    onKeydown(event) {
70        if ('Escape' === event.key) {
71            this.close();
72        }
73    }
74
75    validate() {
76        const selected = this.modalEl.querySelector('input[name="intuiti-trial-product"]:checked');
77        const error = this.modalEl.querySelector('.intuiti-trial-modal__error');
78
79        if (!selected) {
80            if (error) {
81                error.hidden = false;
82            }
83
84            return;
85        }
86
87        window.location.href = selected.value;
88    }
89}