https://radiobandeirantescampinas.com.br/assets/js/whatsapp-widget.js

1/**
2 * WhatsApp Widget — lógica do botão flutuante + painel QR Code
3 *
4 * Dependências injetadas pelo PHP em /includes/whatsapp-widget.php:
5 *   WA_NUMBER  — string com DDI+DDD+número (ex: "5511912345678")
6 *   WA_BTN_POS — classe CSS de posição (ex: "bottom-left")
7 */
8(function () {
9    'use strict';
10
11    /* ── Validação do número ─────────────────────────────────── */
12    var number = (typeof WA_NUMBER !== 'undefined') ? String(WA_NUMBER).replace(/\D/g, '') : '';
13    var pos    = (typeof WA_BTN_POS !== 'undefined') ? String(WA_BTN_POS) : 'bottom-left';
14
15    // Posições permitidas — fallback para bottom-left
16    var allowedPos = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
17    if (allowedPos.indexOf(pos) === -1) { pos = 'bottom-left'; }
18
19    if (!number) { return; } // Sem número → não faz nada
20
21    var waLink = 'https://wa.me/' + number;
22
23    /* ── Init após DOM pronto ────────────────────────────────── */
24    function ready(fn) {
25        if (document.readyState !== 'loading') { fn(); }
26        else { document.addEventListener('DOMContentLoaded', fn); }
27    }
28
29    ready(function () {
30        var fab      = document.getElementById('wa-fab');
31        var overlay  = document.getElementById('wa-overlay');
32        var panel    = document.getElementById('wa-panel');
33        var closeBtn = document.getElementById('wa-close-btn');
34        var qrWrap   = document.getElementById('wa-qr-wrap');
35
36        if (!fab || !overlay || !panel) { return; }
37
38        /* Aplica classe de posição */
39        fab.classList.add('wa-btn--' + pos);
40
41        /* Exibe o FAB */
42        fab.style.display = 'flex';
43
44        /* ── Gera o QR Code ──────────────────────────────────── */
45        function generateQR() {
46            if (!qrWrap) { return; }
47            qrWrap.innerHTML = '';
48
49            if (typeof QRCode !== 'undefined') {
50                new QRCode(qrWrap, {
51                    text:         waLink,
52                    width:        200,
53                    height:       200,
54                    colorDark:    '#1a1a1a',
55                    colorLight:   '#ffffff',
56                    correctLevel: QRCode.CorrectLevel.M
57                });
58            } else {
59                /* Fallback: Google Charts */
60                var img = document.createElement('img');
61                img.src = 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl='
62                           + encodeURIComponent(waLink) + '&choe=UTF-8';
63                img.alt    = 'QR Code WhatsApp';
64                img.width  = 200;
65                img.height = 200;
66                qrWrap.appendChild(img);
67            }
68        }
69
70        /* ── Abrir / fechar painel ───────────────────────────── */
71        function openPanel() {
72            overlay.classList.add('wa-open');
73            panel.classList.add('wa-open');
74            document.body.style.overflow = 'hidden';
75        }
76
77        function closePanel() {
78            overlay.classList.remove('wa-open');
79            panel.classList.remove('wa-open');
80            document.body.style.overflow = '';
81        }
82
83        /* ── Eventos ─────────────────────────────────────────── */
84        fab.addEventListener('click',     openPanel);
85        overlay.addEventListener('click', closePanel);
86        if (closeBtn) { closeBtn.addEventListener('click', closePanel); }
87
88        document.addEventListener('keydown', function (e) {
89            if ((e.key === 'Escape' || e.key === 'Esc') &&
90                panel.classList.contains('wa-open')) {
91                closePanel();
92            }
93        });
94
95        generateQR();
96    });
97}());