.js

(function(){

  var reviewsLoaded = false

  var PLUGIN_HOST = 'https://s3.amazonaws.com/plugin-dev.innovareviews.com'
  var DATA_HOST = 'http://localhost:8000'

  function forEach(array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
      callback.call(scope, i, array[i]);
    }
  };

  function createFragment(htmlStr) {
    var frag = document.createDocumentFragment(),
      temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    frag.appendChild(temp.firstChild);
    return frag;
  }

  function supportsTemplate() {
    return 'content' in document.createElement('template');
  }

  function openTab(innovaEl, innovaId) {
    var tab = document.getElementById('innova-tab');
    tab.classList.toggle('innova-tab--open');

    if (reviewsLoaded) return;

    // Get client's summary data
    var xhr = new XMLHttpRequest();
    xhr.open('GET', DATA_HOST + '/plugin/' + innovaId + '/api/reviews', true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;
      if (this.status !== 200) return;
      data = JSON.parse(this.responseText)
      if (supportsTemplate()) {
        forEach(Object.keys(data), function(i) {
          var review = data[i];
          var t = document.querySelector('#innova-review');
          t.content.querySelector('.innova-review__name').textContent = review.name;
          t.content.querySelector('.innova-review__score').textContent = review.rating;
          t.content.querySelector('.innova-review__title').textContent = review.title;
          t.content.querySelector('.innova-review__message').textContent = review.content;
          t.content.querySelector('.innova-stars__star').setAttribute('class', 'innova-stars__star innova-stars__star--' + review.rating.toString().replace('.','-'));
          var clone = document.importNode(t.content, true);
          document.getElementById('innova-reviews').appendChild(clone);
        });
      } else {
        // Use old templating techniques or libraries.
      }
      reviewsLoaded = true;
    };
    xhr.send();
  }

  function sheetLoaded() {
    var innovaEl = document.getElementById("innova");
    innovaEl.removeAttribute("style")
  }

  function htmlLoaded(innovaContent, innovaId) {
    innovaEl = document.getElementById('innova');
    var fragment = createFragment(innovaContent);
    innovaEl.appendChild(fragment);

    var tabHead = document.getElementById('innova-tab-header');
    tabHead.onclick = function() {
      openTab(innovaEl, innovaId);
    };

    // Get client's summary data
    var xhr = new XMLHttpRequest();
    xhr.open('GET', DATA_HOST + '/plugin/' + innovaId + '/api/summary', true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;
      if (this.status !== 200) return;
      data = JSON.parse(this.responseText)

      // Apply theme and position classes
      var tab = innovaEl.querySelector('#innova-tab'),
        tabContainer = innovaEl.querySelector("#innova-container");

      tab.classList.add('innova-tab--' + data.plugin_theme);

      writeReviewEl = document.getElementById('innova-write-review')
      writeReviewEl.href = DATA_HOST + '/review/' + innovaId

      if(data.plugin_position == "bottom_left") {
        tabContainer.classList.add("tab-is-left");
      } else if (data.plugin_position == "bottom_right") {
        tabContainer.classList.add("tab-is-right");
      }

      starsEl = document.getElementById('innova-stars');
      var rounded = Math.round(data.rating*2) / 2,
        formatted = rounded.toString().replace('.','-');
      starsEl.classList.add('innova-stars__star--' +  formatted);
      countEls = document.querySelectorAll('.js-innova-total-reviews');
      forEach(countEls, function(i) {
        countEls[i].innerHTML = data.reviews;
      });

      stickyEl = document.getElementById('innova-tab');
      stickyEl.classList.add('innova-tab--loaded');
    };
    xhr.send();
  }

  function addStuff() {
    // Inject HTML placeholder for sticky button - hidden initally
    var htmlFragment = createFragment('<div id="innova" style="display: none;"></div>');
    document.body.insertBefore(htmlFragment, document.body.childNodes[0]);
    // Inject CSS stylesheet - unhiding HTML placeholder when loaded
    // TODO Check if supported properly
    var headFragment = createFragment('<link rel="stylesheet" type="text/css" href="' + PLUGIN_HOST + '/plugin.css" onLoad=sheetLoaded()>')
    document.head.insertBefore(headFragment, document.head.childNodes[0]);

    // Fetch data from server for sticky button
    // TODO Set ID on script tag instead and get by id
    var innovaScript = document.querySelector('[data-innova-id]');
    innovaId = innovaScript.dataset.innovaId;

    // Load HTML for sticky button and inject into HTML placeholder
    var xhr = new XMLHttpRequest();
    xhr.open('GET', PLUGIN_HOST + '/plugin.html', true);
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;
      if (this.status !== 200) return;
      htmlLoaded(this.responseText, innovaId);
    };
    xhr.send();
  }

  window.onload = addStuff;
})();