https://www.meteorologia.gov.py/wp-content/themes/dmh/assets/js/alerts.js?ver=201811281615

1(function($){
2    'use strict';
3
4    function launchAlert(_data) {
5        if ( localStorage.getItem('alertaMeteorologica') === _data.numero_aviso ) return;
6
7        var _numero_aviso = _data.numero_aviso,
8                _departamentos_afectados = _data.departamentos_afectados,
9                _counter = 30,
10
11                _alert = $(`<div class="forecast-alert">
12                    <div class="container">
13                        <div class="col-center">
14                            <svg class="alerta"><use xlink:href="#icon-alert"></use></svg>
15                            <div class="h2">AVISO METEOROLÓGICO VIGENTE</div>
16                            <div class="locations">Para los ${_departamentos_afectados}</div>
17                            <div class="actions">
18                                <div>
19                                    <a href="#" class="close-alert"><svg><use xlink:href="#icon-circle-close"></use></svg></a>
20                                </div>
21                                <div>
22                                    <a href="/avisos" class="read-more">
23                                        <svg><use xlink:href="#icon-circle-cloud"></use></svg>
24                                        <span>VER<br>AVISO</span>
25                                    </a>
26                                </div>
27                            </div>
28                            <footer>
29                                <div class="close-alert">Este mensaje se cerrará en <span class="countdown">${_counter}</span> segundos</div>
30                                <button class="btn btn-link btn-sm">
31                                    <i class="fa fa-window-close"></i>
32                                    <span>DEJAR DE VER ESTE MENSAJE</span>
33                                </button>
34                            </footer>
35                        </div>
36                    </div>
37                </div>`),
38
39
40        // COUNTDOWN
41        _interval = setInterval(function(){
42            _counter = _counter-1;
43            _alert.find('footer .close-alert .countdown').text(_counter);
44            // console.log(_counter);
45            if(_counter == 0) {
46                closeAlert();
47                clearInterval(_interval);
48            }
49        }, 1000);
50
51        _alert.find('.close-alert').on('click', function(e){
52            e.preventDefault();
53            closeAlert();
54        });
55
56        _alert.find('footer .btn').on('click', function(e){
57            closeAlert();
58            localStorage.setItem('alertaMeteorologica', _numero_aviso);
59        });
60
61        // _alert.find('.read-more').on('click', function(e){
62        //  e.preventDefault();
63        // });
64
65        function closeAlert(){
66            _alert.fadeOut(400, function(){
67                _alert.detach();
68            });
69        }
70
71        $('body').append(_alert);
72    }
73
74    function checkAlert() {
75        $.getJSON(window.dmh_avisos.ajax_url, { action: 'dmh_avisos' }, function(response) {
76            if (response.data.numero_aviso === '' ) {
77                return;
78            } else {
79                launchAlert(response.data);
80            }
81        });
82    }
83
84    checkAlert();
85    setInterval(checkAlert, 5*60*1000);
86
87})(jQuery)