Cacher is the code snippet organizer for pro developers

/* AjaxLoadNav. Prefetch and load your main content via ajax. Animated change of content*/
(function () {
'use strict';

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var Ajaxload = function () {
  function Ajaxload(link, wrapper, options) {
    classCallCheck(this, Ajaxload);

    this.link = document.querySelectorAll(link);
    this.wrapper = document.querySelector(wrapper);
    this.config = {
      ajaxContent: '.js-content',
      animationOut: 200,
      animationIn: 200,
      prefetch: false,
      gsap: false,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    };
    Object.assign(this.config, options);
    this.init();
  }

  createClass(Ajaxload, [{
    key: 'init',
    value: function init() {
      var _this = this;

      Array.from(this.link).forEach(function (link) {
        link.addEventListener('mouseover', function (e) {
          return _this.fetchData(e);
        });
        link.addEventListener('click', function (e) {
          return _this.isSessionReady(e);
        });
      });
      window.addEventListener('popstate', function () {
        var initPageJSON = sessionStorage.getItem('initPage');
        var initPage = JSON.parse(initPageJSON);
        event.state === null ? _this.switchContent(initPage.title, initPage.content) : _this.changeState();
      });
      document.addEventListener('DOMContentLoaded', function () {
        sessionStorage.setItem('initPage', JSON.stringify({
          content: _this.wrapper.innerHTML,
          title: document.title
        }));
      });
    }
  }, {
    key: 'fetchData',
    value: function fetchData(e) {
      if (e.target.dataset.ajaxnavprefetch === 'disabled' || !this.config.prefetch === true) return false;
      var url = e.target.href;
      if (sessionStorage.getItem(url) === null) {
        fetch(url, {
          headers: new Headers(this.config.headers)
        }).then(function (response) {
          if (!response.ok) {
            throw Error(response.statusText);
          }
          return response;
        }).then(function (response) {
          return response.text();
        }).then(function (content) {
          return sessionStorage.setItem(url, JSON.stringify(content));
        }).catch(function (error) {
          return console.log(error);
        });
      }
    }
  }, {
    key: 'isSessionReady',
    value: function isSessionReady(e) {
      e.preventDefault();
      if (e.target.href === document.location.href) return false;
      var source = e.target.href;
      var content = sessionStorage.getItem(source);
      sessionStorage[source] ? this.prepareContent(e, content) : this.refetchData(e, source);
    }
  }, {
    key: 'prepareContent',
    value: function prepareContent(e, content) {
      var _this2 = this;

      var newDiv = void 0;
      this.isJson(content) ? newDiv = JSON.parse(content) : newDiv = content;
      if (this.config.gsap === false) {
        return new Promise(function (resolve, reject) {
          _this2.fadeOut(_this2.wrapper, _this2.config.animationOut, function () {
            return resolve();
          });
        }).then(function () {
          _this2.wrapper.firstChild.remove();
          _this2.wrapper.innerHTML = newDiv;
          _this2.setTitle();
          _this2.setHistory(e, newDiv);
        }).then(function () {
          return _this2.fadeIn(_this2.wrapper, _this2.config.animationIn);
        }).catch(function (error) {
          return console.warn(error);
        });
      } else {
        console.log('gsap');
      }
    }
  }, {
    key: 'refetchData',
    value: function refetchData(e, source) {
      var _this3 = this;

      fetch(source, {
        headers: new Headers(this.config.headers)
      }).then(function (response) {
        if (!response.ok) {
          throw Error(response.statusText);
        }
        return response;
      }).then(function (response) {
        return response.text();
      }).then(function (content) {
        return _this3.prepareContent(e, content);
      }).then(function () {
        return console.log('loaded fresh');
      }).catch(function (error) {
        return console.log(error);
      });
    }
  }, {
    key: 'setHistory',
    value: function setHistory(e, newDiv) {
      var stateObj = {
        content: {
          content: newDiv,
          title: document.title
        },
        url: e.target.href
      };
      window.history.pushState(stateObj.content, '', stateObj.url);
    }
  }, {
    key: 'changeState',
    value: function changeState() {
      if (event.state) {
        var state = {
          content: event.state.content,
          title: event.state.title
        };
        this.switchContent(state.title, state.content);
      }
    }
  }, {
    key: 'switchContent',
    value: function switchContent(title, content) {
      var _this4 = this;

      if (this.config.gsap === false) {
        return new Promise(function (resolve, reject) {
          _this4.fadeOut(_this4.wrapper, _this4.config.animationOut, function () {
            return resolve();
          });
        }).then(function () {
          _this4.wrapper.firstChild.remove();
          _this4.wrapper.innerHTML = content;
          document.title = title;
        }).then(function () {
          return _this4.fadeIn(_this4.wrapper, _this4.config.animationIn);
        });
      } else {
        console.log('gsap');
      }
    }
    //Helper

  }, {
    key: 'fadeOut',
    value: function fadeOut(el, duration, cb) {
      var s = el.style;
      var step = 25 / (duration || 300);
      s.opacity = s.opacity || 1;

      (function fade() {
        if ((s.opacity -= step) < 0) {
          s.display = "block";
          return cb();
        }
        return setTimeout(fade, 25);
      })();
    }
  }, {
    key: 'fadeIn',
    value: function fadeIn(el, duration, display) {
      var s = el.style,
          step = 25 / (duration || 300);
      s.opacity = s.opacity || 0;
      s.display = display || "block";
      (function fade() {
        (s.opacity = parseFloat(s.opacity) + step) > 1 ? s.opacity = 1 : setTimeout(fade, 25);
      })();
    }
  }, {
    key: 'setTitle',
    value: function setTitle() {
      if (document.querySelector(this.config.ajaxContent) === null) {
        throw Error('Please check your ajaxContent Class');
        return false;
      }
      var title = document.querySelector(this.config.ajaxContent).dataset.ajaxnavtitle;
      document.title = title;
    }
  }, {
    key: 'isJson',
    value: function isJson(str) {
      try {
        JSON.parse(str);
      } catch (e) {
        return false;
      }
      return true;
    }
  }]);
  return Ajaxload;
}();

}());
/* visit me on webgestaltung.net */
//# sourceMappingURL=ajaxLoadNav.js.map