supportive_changelog.js

supportive_changelog.js

if (typeof SUPPORTIVE_config !== 'undefined') {
  var siteId = SUPPORTIVE_config['account']
  // console.log(siteId);
  var baseUrl = "//s3.us-east-2.amazonaws.com/supportive"
  var apiUrl = baseUrl + "/changelogs/" + siteId + "/changelog.json"
  var changelogKey;
  var changelogIds = [];

      fetch(apiUrl)
        .then(
          function(response) {
            if (response.status !== 200) {
              console.log('Status Code: ' + response.statuses);
              return;
            }
            response.json().then(function(data) {
              changelogKey = "SUPPORTIVE_seenChangelogs[" + siteId + "]"
              changelogIds = data.map(item => item.id)

              if (changelogIds.length > 0) {
                var counter = changelogIds.length
              } else {
                var counter = ""
              }

              if (typeof(Storage) !== "undefined") {
                if (localStorage.getItem(changelogKey) === null) {
                  // new user
                  // display active badge
                  this.buildActiveWidget(counter);
                } else {
                  // returning visitor
                  // check if new items to read
                  // if yes, display active badge
                  this.buildWidget();
                }
              } else {
                // Sorry! No Web Storage support..
              }
            });
          }
        )
        .catch(function(err) {
          console.log(err);
        })

      var buildActiveWidget = function(content) {
        var c = document.createElement("span");
        c.id             = "supportive-badge"
        c.style.cursor   = "pointer";
        c.style.borderRadius = "10rem";
        c.style.padding = ".25em .6em";
        c.style.fontSize = "11px";
        c.style.fontWeight = "700";
        c.style.lineHeight = "1";
        c.style.background = "#dc3545";
        c.style.color = "#fff";
        c.style.textAlign = "center";
        c.style.whiteSpace = "nowrap";
        c.style.verticalAlign = "baseline";
        c.textContent      = content;
        c.onclick = toggleWidgetAndMarkAsRead;
        document.getElementById("changelog-selector").appendChild(c);
      }

      var buildWidget = function() {
        var c = document.createElement("span");
        c.id             = "supportive-badge"
        c.style.display = "inline-block";
        c.style.width = "16px";
        c.style.height = "16px";
        c.style.borderRadius = "50%";
        c.style.verticalAlign = "baseline";
        c.style.background = "#d4d4d4";
        c.style.cursor = "pointer";
        c.onclick = toggleWidget;
        document.getElementById("changelog-selector").appendChild(c);
      }

      var toggleWidget = function() {
        saveReadItems();
        showChangelogs();
      }

      var toggleWidgetAndMarkAsRead = function() {
        var badge = document.getElementById("supportive-badge");
        badge.outerHTML = "";
        delete badge;
        buildWidget();
        saveReadItems();
        showChangelogs();
      }

      var saveReadItems = function() {
        localStorage.setItem(changelogKey, changelogIds);
      }

      var showChangelogs = function() {
        // To be implemented
      }
    } else {
      console.log("SUPPORTIVE_config is not set. Please check installation instructions");
}