Advertisement
Guest User

Untitled

a guest
Dec 3rd, 2019
140
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //PRIMEIRO DEFINIR SE O USUÁRIO ESTÁ NA VERSÃO ONLINE OU OFFLINE
  2. var results_offline =  document.getElementById('results_offline');
  3. var offline = false;
  4. if (typeof(results_offline) != 'undefined' && results_offline != null)
  5. {
  6.     offline = true;
  7.     console.log("Página Offline");
  8.     var results = results_offline;
  9. }else{
  10.     var results = document.getElementById('results');
  11. }
  12.  
  13. //ABRIR JSON E INSERIR VALORES
  14. var ajax = new XMLHttpRequest();
  15.  
  16. ajax.open("GET", "dados.json",true);
  17. ajax.send();
  18.  
  19. ajax.onreadystatechange = function(){
  20.  
  21.     //Verificar se JSON foi baixado com sucesso
  22.     if(ajax.readyState == 4 && ajax.status == 200){
  23.  
  24.         var data = ajax.responseText;
  25.         var data_json = JSON.parse(data);
  26.  
  27.         if(data_json.length == 0){
  28.             results.innerHTML = "<p>Não existem dados para serem exibidos.</p>";
  29.         }else{
  30.  
  31.             //Aqui tudo está OK e o JSON contem dados
  32.             var html = "";
  33.  
  34.             //Renderizando cards
  35.             for(var i=0; i<data_json.length;i++){
  36.                 html += template_card(data_json[i].marca,data_json[i].modelo,data_json[i].ano,data_json[i].img,data_json[i].url,data_json[i].descricao,offline);
  37.             }
  38.  
  39.             results.innerHTML = html;
  40.  
  41.             //Quer dizer que estou online e preciso fazer cache desses novos dados que foram baixados
  42.             if(offline == false){
  43.                 cache_cards(data_json);
  44.             }
  45.         }
  46.  
  47.     }else{
  48.         results.innerHTML = "<p>Ocorreu um erro ao receber dados do servidor</p>";
  49.     }
  50.  
  51. }
  52. //Função Cache - guarda tudo para ser usado no modo offline
  53.  
  54. var cache_cards = function(data_json){
  55.  
  56.     if(data_json.length > 0){
  57.  
  58.         var files = ['dados.json'];
  59.  
  60.         for(var i=0; i<data_json.length;i++){
  61.             files.push(data_json[i].img);
  62.         }
  63.  
  64.     }
  65.     //agora armazeno os arquivos que foram estruturados
  66.     caches.open('carros-cards').then(function(cache){
  67.  
  68.         cache.addAll(files).then(function(){
  69.             console.log("Arquivos dinâmicos armazenados em cache.");
  70.         });
  71.  
  72.     });
  73.  
  74. }
  75.  
  76. //TEMPLATE CARD (Carro)
  77.  
  78. function template_card(marca,modelo,ano,img,url,descricao,online_offline){
  79.  
  80.     //true = Online
  81.     if(online_offline == true){
  82.         var html = '<div class="col-lg-3 col-md-6 col-sm-12 cor"><div class="card"><img src="'+img+'" class="card-img-top img_card"><div class="card-body"><h5 class="card-title">'+marca + ' - '+ modelo + ' | Ano: '+ ano+'</h5><p class="card-text">'+descricao+'</p><a href="'+url+'" target="_blank" class="btn btn-dark">Comprar</a></div></div></div>';
  83.     //false = Offline
  84.     }else{
  85.         var html = '<div class="col-lg-3 col-md-6 col-sm-12 cor"><div class="card"><img src="'+img+'" class="card-img-top img_card"><div class="card-body"><h5 class="card-title">'+marca + ' - '+ modelo + ' | Ano: '+ ano+'</h5><p class="card-text">'+descricao+'</p></div></div></div>';
  86.     }
  87.  
  88.     return html;
  89.  
  90. }
  91.  
  92. //REGRAS DE MENU MOBILE
  93.  
  94. window.onload = function() {
  95.     if (window.jQuery) {
  96.         $(document).ready(function() {
  97.             $(".sidebarNavigation .navbar-collapse").hide().clone().appendTo("body").removeAttr("class").addClass("sideMenu").show();
  98.             $("body").append("<div class='overlay'></div>");
  99.             $(".navbar-toggle, .navbar-toggler").on("click", function() {
  100.                 $(".sideMenu").addClass($(".sidebarNavigation").attr("data-sidebarClass"));
  101.                 $(".sideMenu, .overlay").toggleClass("open");
  102.                 $(".overlay").on("click", function() {
  103.                     $(this).removeClass("open");
  104.                     $(".sideMenu").removeClass("open")
  105.                 })
  106.             });
  107.             $("body").on("click", ".sideMenu.open .nav-item", function() {
  108.                 if (!$(this).hasClass("dropdown")) {
  109.                     $(".sideMenu, .overlay").toggleClass("open")
  110.                 }
  111.             });
  112.             $(window).resize(function() {
  113.                 if ($(".navbar-toggler").is(":hidden")) {
  114.                     $(".sideMenu, .overlay").hide()
  115.                 } else {
  116.                     $(".sideMenu, .overlay").show()
  117.                 }
  118.             })
  119.         })
  120.     } else {
  121.         console.log("sidebarNavigation Requires jQuery")
  122.     }
  123. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement