turicas · thulioph · Jun 1, 2020 · Jun 1, 2020 · Jun 1, 2020 · Jun 1, 2020
diff --git a/core/templates/base.html b/core/templates/base.html
@@ -6,7 +6,7 @@
     <meta charset="utf-8">
     <!--Import Google Icon Font-->
     <link rel="stylesheet" type="text/css" href="{% static 'css/material_icons.css' %}" >
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="preload" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" as="style">
     <link rel="stylesheet" type="text/css" href="{% static 'css/materialize-social.css' %}" >
 
     <!-- Compiled and minified CSS -->
@@ -17,22 +17,10 @@
     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">
+
     <title>{% block title %}Brasil.IO{% endblock %}</title>
 
-    {% block script %}
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-117698282-1"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'UA-117698282-1');
-    </script>
-    <script src="{% static 'js/jquery.js' %}"></script>
-    <script src="{% static 'js/materialize.min.js' %}"></script>
-    <script src="{% static 'js/application.js' %}"></script>
-    {% endblock %}
     {% endblock %}
-
   </head>
 
   <body>
@@ -124,5 +112,45 @@ <h6 class=" text-center white-text"> Receba nossas novidades! </h6>
       </div>
     </div>
 
+    {% block script %}
+    <script type="text/javascript">
+      // sharing variables and data through pages
+      window.app = {}
+
+      var dataURL = {
+        cities: "{% url 'covid19:cities-cases' %}{% if state %}?state={{ state }}{% endif %}",
+        stateGeoJSON: "{% url 'covid19:states-geo' %}{% if state %}?state={{ state }}{% endif %}",
+        cityGeoJSON: "{% url 'covid19:cities-geo' %}{% if state %}?state={{ state }}{% endif %}",
+        historicalDaily: "{% url 'covid19:historical-daily' %}{% if state %}?state={{ state }}{% endif %}",
+        historicalWeekly: "{% url 'covid19:historical-weekly' %}{% if state %}?state={{ state }}{% endif %}",
+      };
+
+      var selectedStateId = {% if not state_id %}undefined{% else %} "{{ state_id }}"{% endif %};
+      var selectedStateAcronym = {% if not state_id %}undefined{% else %} "{{ state }}"{% endif %};
+      var selectedCitySlug = {% if not city_id %}undefined{% else %} "{{ city_slug }}"{% endif %}
+    </script>
+
+    <script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/jquery.tabletocsv.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/leaflet.js' %}"></script>
+
+    <script type="text/javascript" src="{% static 'js/application.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/covid19-base.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/covid19-table.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/covid19-map.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/covid19-chart.js' %}"></script>
+
+    <script async defer src="https://www.googletagmanager.com/gtag/js?id=UA-117698282-1"></script>
+
+    <script type="text/javascript">
+      window.dataLayer = window.dataLayer || [];
+      function gtag() { dataLayer.push(arguments); }
+      gtag('js', new Date());
+      gtag('config', 'UA-117698282-1');
+    </script>
+    {% endblock %}
   </body>
 </html>
diff --git a/core/templates/contact.html b/core/templates/contact.html
@@ -32,9 +32,9 @@ <h5>
 </div>
 
 <script type="text/javascript">
-  $(document).ready(function() {
+  document.addEventListener('DOMContentLoaded', function () {
     $('#id_name').focus();
-  });
+  })
 </script>
 
 {% endblock %}
diff --git a/core/templates/data-table.html b/core/templates/data-table.html
@@ -33,14 +33,16 @@
 </table>
 
 <script type="text/javascript">
-  $(".download-button").off('click');
-  $(".download-button").click(function (event) {
-      event.preventDefault();
-
-      var $table = $('#' + $(this).attr('data-table-id'));
-      var options = {
-         fileName: $table.attr('data-filename'),
-      };
-      $table.tableToCsv(options);
-  });
+  document.addEventListener('DOMContentLoaded', function () {
+    $(".download-button").off('click');
+    $(".download-button").click(function (event) {
+        event.preventDefault();
+
+        var $table = $('#' + $(this).attr('data-table-id'));
+        var options = {
+           fileName: $table.attr('data-filename'),
+        };
+        $table.tableToCsv(options);
+    });
+  })
 </script>
diff --git a/core/templates/dataset-detail.html b/core/templates/dataset-detail.html
@@ -201,18 +201,23 @@ <h5>Filtros</h5>
 
 {% block script %}
 {{ block.super }}
-<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
+
 <script type="text/javascript">
-  $(document).ready(function() {
+  document.addEventListener('DOMContentLoaded', function () {
     M.Tabs.init(document.getElementById('tabs'));
+
     $('select').formSelect();
 
-    $('.mdl-data-table').DataTable({
-        "paging":         false,
-        "searching":      false,
-        "ordering":       false,
-        "bInfo":          false,
-    });
-  });
+    var component = $('.mdl-data-table')
+
+    if (component) {
+      component.DataTable({
+        "paging": false,
+        "searching": false,
+        "ordering": false,
+        "bInfo": false,
+      })
+    }
+  })
 </script>
 {% endblock %}
diff --git a/core/templates/menu.html b/core/templates/menu.html
@@ -44,8 +44,4 @@
 
 <li><a href="https://blog.brasil.io/">Blog</a></li>
 <li><a class="btn" href="{% url 'core:donate' %}">APOIE</a></li>
-
-<script>
-  $(".dropdown-trigger").dropdown();
-</script>
 {% endcache %}
diff --git a/core/templates/specials/document-detail.html b/core/templates/specials/document-detail.html
@@ -127,17 +127,15 @@ <h4>Gastos Diretos do Governo Federal</h4>
 
 {% block script %}
 {{ block.super }}
-<script type="text/javascript" language="javascript" src="{% static 'js/jquery.tabletocsv.js' %}"></script>
-<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript">
-$(document).ready(function() {
-  $('.mdl-data-table').DataTable({
-      "scrollY":        "200px",
-      "scrollCollapse": true,
-      "paging":         false,
-      "searching":      false,
-      "bInfo":          false,
-  });
-});
+  document.addEventListener('DOMContentLoaded', function () {
+    $('.mdl-data-table').DataTable({
+        "scrollY":        "200px",
+        "scrollCollapse": true,
+        "paging":         false,
+        "searching":      false,
+        "bInfo":          false,
+    });
+  })
 </script>
 {% endblock %}
diff --git a/covid19/static/js/covid19-chart.js b/covid19/static/js/covid19-chart.js
@@ -163,8 +163,9 @@ class StackedBarChart extends MultiBarChart {
 
 }
 
-jQuery(document).ready(function(){
+function startCovid19Chart() {
   var graphSource, titleAppend;
+
   if (placeType() == "country") {
     graphSource = "Fonte: Secretarias Estaduais de Saúde/Consolidação por Brasil.IO";
     titleAppend = " (Brasil)";
@@ -173,15 +174,17 @@ jQuery(document).ready(function(){
     graphSource = `Fonte: SES-${selectedStateAcronym}/Consolidação por Brasil.IO`;
     titleAppend = ` (${selectedStateAcronym})`;
   }
+
   var deathsTitle = `Causas de óbitos por semana epidemiológica${titleAppend}`;
   var deathsCompareTitle = `Óbitos novos por semana epidemiológica 2019 vs 2020${titleAppend}`;
   var deathsSourceLink = 'Fonte: <a href="https://transparencia.registrocivil.org.br/registral-covid">Registro Civil</a>.';
   var deathsSourceNote = " *Nota: as últimas 2 semanas não estão representadas pois os dados estão em processamento pelos cartórios.";
   var deathsSource = deathsSourceLink + deathsSourceNote;
   var deathsGroupSource = deathsSourceLink + " Grupos: COVID-19 (suspeita ou confirmação por COVID-19), Outras respiratórias (pneumonia + insuf. resp. + SRAG), Outras (septicemia + indeterminada + outras causas naturais não externas)." + deathsSourceNote;
   var deathsExcessSource = deathsSourceLink + " Excesso por semana = novos óbitos totais na semana em 2020 - novos óbitos totais na semana em 2019." + deathsSourceNote;
-
+  
   graphSource += ". *Nota: dados sendo consolidados para os últimos dias.";
+
   jQuery.getJSON(dataURL.historicalDaily, function (data) {
     caseDailyTotalChart = new MultiLineChart({
       colors: [dataConfig.confirmed.color],
@@ -220,7 +223,7 @@ jQuery(document).ready(function(){
       source: graphSource,
     }).draw();
   });
-
+  
   jQuery.getJSON(dataURL.historicalWeekly, function (data) {
     deathWeeklyChart = new MultiLineChart({
       colors: ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#C0C0C0"],
@@ -265,7 +268,7 @@ jQuery(document).ready(function(){
         "Óbitos na semana (2020)",
       ],
     }).draw();
-
+  
     deathWeeklyExcessChart = new StackedBarChart({
       colors: [
         [
@@ -320,6 +323,13 @@ jQuery(document).ready(function(){
       showYLabels: false,
       source: deathsExcessSource,
     }).draw();
-
+  
   });
-});
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  var url = window.location.href.split('/')[3]
+  if (url === 'covid19') {
+    startCovid19Chart()
+  }
+});
diff --git a/covid19/static/js/covid19-map.js b/covid19/static/js/covid19-map.js
@@ -99,10 +99,10 @@ function updateVarControl() {
   });
 }
 
-function createMap() {
+function createMap(container) {
   var minZoom = placeType() == "country" ? 4.5 : 6;
   var maxZoom = placeType() == "country" ? 8 : 12;
-  map = L.map("map", {
+  map = L.map(container, {
     zoomSnap: 0.25,
     zoomDelta: 0.25,
     minZoom: minZoom,
@@ -235,9 +235,13 @@ function retrieveData() {
   );
 }
 
-jQuery(document).ready(function() {
-  createMap();
-  retrieveData();
+function startCovid19Map() {
+  var mapElement = document.querySelector('#map')
+
+  if (mapElement) {
+    createMap(mapElement);
+    retrieveData();
+  }
 
   jQuery(window).resize(function() {
     if (jQuery(window).width() > 1840) {
@@ -248,7 +252,16 @@ jQuery(document).ready(function() {
       jQuery("#table-col").removeClass("xl6").addClass("xl12");
       jQuery("#map-col").removeClass("xl6").addClass("xl12");
     }
-    dt.columns.adjust();
+
+    if (window.app.dt) window.app.dt.columns.adjust();
   });
+
   window.dispatchEvent(new Event("resize"));
-});
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  var url = window.location.href.split('/')[3]
+  if (url === 'covid19') {
+    startCovid19Map();
+  }
+})
diff --git a/covid19/static/js/covid19-table.js b/covid19/static/js/covid19-table.js
@@ -1,41 +1,48 @@
-var dt;
-
-jQuery(document).ready(function() {
+function startCovid19Table() {
+  var dt;
+  
   if (selectedStateId === undefined) {
     var columns = [
-      { "width": "18%" },
-      { "width": "18%" },
-      { "width": "14%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" }
+      { width: "18%" },
+      { width: "18%" },
+      { width: "14%" },
+      { width: "10%" },
+      { width: "10%" },
+      { width: "10%" },
+      { width: "10%" },
+      { width: "10%" },
     ];
-  }
-  else {
+  } else {
     var columns = [
-      { "width": "25%" },
-      { "width": "25%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" }
+      { width: "25%" },
+      { width: "25%" },
+      { width: "10%" },
+      { width: "10%" },
+      { width: "10%" },
+      { width: "10%" },
+      { width: "10%" },
     ];
   }
-  dt = jQuery('.mdl-data-table').DataTable({
-    "autoWidth": false,
-    "columns": columns,
-    "scrollY":        "600px",
-    "scrollCollapse": true,
-    "paging":         false,
-    "searching":      true,
-    "bInfo":          false,
-    "order": [3, "desc"],
-    "language": {
+
+  window.app.dt = jQuery(".mdl-data-table").DataTable({
+    autoWidth: false,
+    columns: columns,
+    scrollY: "600px",
+    scrollCollapse: true,
+    paging: false,
+    searching: true,
+    bInfo: false,
+    order: [3, "desc"],
+    language: {
       search: "Buscar:",
       searchPlaceholder: "Digite seu município aqui",
     },
   });
-});
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  var url = window.location.href.split('/')[3]
+  if (url === 'covid19') {
+    startCovid19Table();
+  }
+})