feature-feed-init/lib/index.js

Describe feature-feed-init here

'use strict';

exports.__esModule = true;
exports.closeFeed = undefined;

var _build = require('./build');

var _build2 = _interopRequireDefault(_build);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = '\n.nff-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: rgba(17, 103, 250, 0.5);\n  width: 100%;\n  height: 100%;\n  z-index: 10000;\n  animation: appear 0.1s;\n}\n\n.nff-container {\n  border: none;\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 324px;\n  background: transparent;\n  height: 100vh;\n  z-index: 1001;\n}\n\n@media(min-width: 420px) {\n.nff-container {\n    width: 400px;\n  }\n}\n ';

var openState = false;

var initStyles = function initStyles() {
  var style = document.createElement('style');
  style.innerHTML = styles;
  document.querySelector('head').appendChild(style);
};

var closeFeed = exports.closeFeed = function closeFeed(event) {
  try {
    openState = false;
    var body = document.querySelector('body');
    body.removeChild(document.querySelector('#nff-overlay-id'));
  } catch (exception) {
    console.log(exception);
  }
};

var showNewFeatureFeed = function showNewFeatureFeed(key, base, table, origin) {
  try {
    if (openState === false) {
      var overlay = (0, _build2.default)('div', [{ name: 'class', value: 'nff-overlay' }, { name: 'id', value: 'nff-overlay-id' }]);
      overlay.addEventListener('click', closeFeed);
      var feedContainer = (0, _build2.default)('iframe', [{ name: 'class', value: 'nff-container' }, { name: 'id', value: 'nff-container-id' }, { name: 'src', value: 'https://feature-feed.netlify.com?apiKey=' + key + '&base=' + base + '&table=' + table + '&origin=' + origin }]);
      feedContainer.addEventListener('click', function (event) {
        return event.stopPropagation();
      });
      var body = document.querySelector('body');
      body.append(overlay);
      window.addEventListener('message', function (e) {
        if (e.origin === 'https://feature-feed.netlify.com') {
          var task = e.data['task'];
          if (task = 'close') closeFeed();
        }
      });
      overlay.append(feedContainer);
      openState = true;
    } else {
      closeFeed();
    }
  } catch (exception) {
    console.log(exception);
  }
};

(function initFeed() {
  try {
    var feedButtons = document.getElementsByClassName('nff-init');
    feedButtons = Array.from(feedButtons);
    if (!feedButtons[0]) throw new Error('No ID found: Add the id => nff-init <= to a button');
    var key = feedButtons[0].getAttribute('data-airtable-key');
    var base = feedButtons[0].getAttribute('data-airtable-base');
    var table = feedButtons[0].getAttribute('data-airtable-table');
    var origin = window.location.href;
    if (!key || !base || !table) throw new Error('Please add config data to the script tag');
    initStyles();
    feedButtons.forEach(function (button) {
      button.addEventListener('click', function () {
        showNewFeatureFeed(key, base, table, origin);
      });
    });
  } catch (exception) {
    console.log(exception);
  }
})();