javascript Live Reload

Posted 2021-05-03

/*=================================================================
 Live Reload Script to inject live .inc files during concepting
=================================================================*/

function liveINC() {
  var all, i, item, file, xhttp;
  all = document.getElementsByTagName("*");
  for (i = 0; i < all.length; i++) {
      item = all[i];
      file = item.getAttribute("live-file");
      if (file) {
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function () {
              if (this.readyState == 4) {
                  item.innerHTML = this.responseText;
                  item.removeAttribute("live-file");
                  liveINC();
              } 
          }
          xhttp.open("GET", file, true);
          xhttp.send();
          
          return;
      }
  }
  console.log("Running live reload script....");
}

/*=====================================================================
 Remove Reload when not doing active development
 Also allows for browser-sync to inject changes during dev process
======================================================================*/

if(location.hostname != "localhost") {
  console.log("Not Live Reloading File... :(");
  document.getElementById("inc").removeAttribute("live-file");
} else {
  console.log("Live Reloading! :)")
  setTimeout(function() {
      $('head').append('<link href="http://localhost:3000/css/master.css" rel="stylesheet" type="text/css" />')
      $('head').append('<link href="../../global/CSS/global.css" rel="stylesheet" type="text/css" />')
      $('link[href*="/sitefiles/2590/css/master.css"]').remove();
  })
}