https://www.direcional.com.br/wp-content/plugins/direcional-contact-bar-plugin/assets/js/script.js

1document.addEventListener('DOMContentLoaded', () => {
2    /**
3     * @type {HTMLButtonElement|null}
4     */
5    const externalButton = document.querySelector("[data-button='external']")
6    /**
7     * @type {HTMLDivElement|null}
8     */
9    const modal = document.querySelector("[data-modal]")
10    /**
11     * @type {HTMLDivElement|null}
12     */
13    const whatsappBar = document.querySelector("[data-whatsapp-bar]")
14    /**
15     * @type {NodeListOf<HTMLButtonElement>}
16     */
17    const buttons = document.querySelectorAll("[data-button]")
18    /**
19     * @type {HTMLButtonElement|null}
20     */
21    const close = document.querySelector("[data-close]")
22
23    buttons.forEach(button => {
24        button.addEventListener('mouseover', (event) => {
25            event.preventDefault()
26
27            externalButton.style.backgroundColor = externalButton.dataset.hover ?? ''
28        })
29
30        button.addEventListener('mouseout', (event) => {
31            event.preventDefault()
32
33            externalButton.style.backgroundColor = externalButton.dataset.bg ?? ''
34        })
35    })
36
37
38    if (!externalButton || !modal || !whatsappBar || !close) return;
39
40    externalButton.addEventListener('click', (event) => {
41        event.preventDefault()
42
43        modal.classList.add('open')
44        whatsappBar.classList.add('hidden')
45    })
46
47    modal.addEventListener('click', (event) => {
48        if (event.currentTarget === event.target) {
49            modal.classList.remove('open')
50            whatsappBar.classList.remove('hidden')
51        }
52    })
53
54    close.addEventListener('click', (event) => {
55        modal.classList.remove('open')
56        whatsappBar.classList.remove('hidden')
57    })
58})