geico-design-kit 7.0.0

package/dist/components/InPageNavigation.js

@@ -0,0 +1,360 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK InPageNavigation : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "onClicked",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK InPageNavigation : onClicked must be a function"]
+}, {
+  setting: "startingPos",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["number"],
+  errorMessage: ["GDK InPageNavigation : startingPos must be set to a number"]
+}, {
+  setting: "autoHide",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["boolean"],
+  errorMessage: ["GDK InPageNavigation : autoHide must be set to be boolean. Default value is False."]
+}];
+var InPageNavigation = /*#__PURE__*/function () {
+  /**
+   * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+   * @param {string|Object} content
+   * A reference to the html 'in page navigation' node
+   *
+   * @param {function} [onClicked]
+   *  Callback function fired once a 'in-page-item' is clicked
+   *
+   * @param {number} [startingPos=1]
+   * The number of the navigation item to display on initialization
+   */
+
+  function InPageNavigation(options) {
+    _classCallCheck(this, InPageNavigation);
+    this._internalVars = {
+      node: null,
+      //used for content item
+      navItem: null,
+      marker: null
+    };
+
+    //options with defaults set
+    this._defaults = {
+      startingPos: 1,
+      autoHide: false
+    };
+
+    // Create options by extending defaults with the passed in arguments
+    if (options && _typeof(options) === "object") {
+      this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
+    }
+
+    //if the required options are valid set up the environment
+    if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
+      this._internalVars.contentType = _baseComponent["default"].getContentType(this);
+      setLocalVars.call(this);
+      setEvents.call(this);
+      setStartPosition.call(this);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * @param {number} [newIndex]
+   * newIndex is the number of the navigation item to go to first on initialization
+   */
+  return _createClass(InPageNavigation, [{
+    key: "goTo",
+    value: function goTo(newIndex) {
+      var _this = this;
+      var index = newIndex - 1;
+      Array.prototype.map.call(this._internalVars.navItem, function (e, rank) {
+        if (rank === index) {
+          e.classList.add("in-page-item--selected");
+          var topPosition = e.offsetTop;
+          var nodeHeight = e.offsetHeight;
+
+          // set marker to correct position
+          _this._internalVars.marker.style.top = topPosition + "px";
+          _this._internalVars.marker.style.height = nodeHeight + "px";
+        } else {
+          e.classList.remove("in-page-item--selected");
+        }
+      });
+    }
+
+    /**
+     * destroy()
+     * removes the node from the dom and any events attached
+     */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      removeEvents.call(this);
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+      //a little garbage collection
+      for (var variableKey in this) {
+        if (this.hasOwnProperty(variableKey)) {
+          delete this[variableKey];
+        }
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+  //determine the type of content passed in
+  if (this._internalVars.contentType === 'string') {
+    this._internalVars.node = document.querySelector(this._options.content);
+  } else if (this._internalVars.contentType === 'domNode') {
+    this._internalVars.node = this._options.content;
+  }
+  this._internalVars.node.insertAdjacentHTML('beforeend', "<li class=\"in-page-marker\"></li>");
+  this._internalVars.navItem = this._internalVars.node.querySelectorAll(".in-page-item");
+  this._internalVars.marker = this._internalVars.node.querySelector(".in-page-marker");
+  this._internalVars.navId = this._internalVars.node.id;
+  this._internalVars.backgroundItems = [];
+  this._internalVars.backgroundItemsTop = [];
+  this._internalVars.backgroundItemsBottom = [];
+  this._internalVars.backgroundItemsDefined = false;
+  this._internalVars.handler = inPageItemClickHandler.bind(this);
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  var _this2 = this;
+  var eventName = "click";
+
+  //set click events
+  Array.prototype.forEach.call(this._internalVars.navItem, function (el, i) {
+    el.addEventListener(eventName, _this2._internalVars.handler);
+  });
+  window.addEventListener('scroll', scrollPosition.bind(this));
+  window.addEventListener('scroll', checkNode.bind(this));
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var _this3 = this;
+  var eventName = "click";
+
+  //remove click events
+  Array.prototype.forEach.call(this._internalVars.navItem, function (el, i) {
+    el.removeEventListener(eventName, _this3._internalVars.handler);
+  });
+}
+
+/**
+ * if In Page Navigation Node exists, run processes
+ */
+function checkNode() {
+  if (document.getElementById(this._internalVars.navId)) {
+    defineBackgroundItems.call(this);
+  }
+}
+
+/**
+ * Create array of all items with a bg or gradient background spanning the full width of the page
+ */
+function defineBackgroundItems() {
+  var _this4 = this;
+  if (this._internalVars.backgroundItemsDefined === false) {
+    var gradientItems = document.querySelectorAll('.bg-gradient'),
+      coloredItems = document.querySelectorAll('.bg-color'),
+      crossSellItems = document.querySelectorAll('.cross-sell-image');
+    Array.prototype.forEach.call(gradientItems, function (el) {
+      if (el.clientWidth === document.body.scrollWidth) {
+        _this4._internalVars.backgroundItems.push(el);
+      }
+    });
+    Array.prototype.forEach.call(coloredItems, function (el) {
+      if (el.clientWidth === document.body.scrollWidth) {
+        _this4._internalVars.backgroundItems.push(el);
+      }
+    });
+    Array.prototype.forEach.call(crossSellItems, function (el) {
+      if (el.clientWidth === document.body.scrollWidth) {
+        _this4._internalVars.backgroundItems.push(el);
+      }
+    });
+    this._internalVars.backgroundItemsDefined = true;
+  }
+  checkBackgroundItems.call(this);
+}
+function checkBackgroundItems() {
+  var _this5 = this;
+  this._internalVars.backgroundItemsTop = [];
+  this._internalVars.backgroundItemsBottom = [];
+  Array.prototype.forEach.call(this._internalVars.backgroundItems, function (el) {
+    var top = $(el).offset().top - window.pageYOffset,
+      bottom = top + el.clientHeight;
+    if (top > 0 && top < window.innerHeight) {
+      addBackgroundItemsToArray.call(_this5, el);
+    } else if (bottom > 0 && bottom < window.innerHeight) {
+      addBackgroundItemsToArray.call(_this5, el);
+    }
+  });
+  changeNavItemColor.call(this);
+}
+function addBackgroundItemsToArray(el) {
+  var crossSellHeight = el.clientHeight / 2;
+  if (el.classList.contains('cross-sell-image')) {
+    this._internalVars.backgroundItemsTop.push($(el).offset().top + crossSellHeight);
+    this._internalVars.backgroundItemsBottom.push($(el).offset().top + el.clientHeight);
+  } else {
+    this._internalVars.backgroundItemsTop.push($(el).offset().top);
+    this._internalVars.backgroundItemsBottom.push($(el).offset().top + el.clientHeight);
+  }
+}
+function changeNavItemColor() {
+  var _this6 = this;
+  Array.prototype.forEach.call(this._internalVars.navItem, function (el) {
+    var top = $(el).offset().top - window.pageYOffset,
+      height = el.clientHeight,
+      changePoint = top + height / 2,
+      changeColor = true;
+    Array.prototype.forEach.call(_this6._internalVars.backgroundItems, function (ele, ind) {
+      if (changeColor === true) {
+        if (changePoint + window.pageYOffset > _this6._internalVars.backgroundItemsTop[ind] && changePoint + window.pageYOffset < _this6._internalVars.backgroundItemsBottom[ind]) {
+          el.classList.add('changeFontColor');
+          changeColor = false;
+        } else {
+          if (el.classList.contains('changeFontColor')) {
+            el.classList.remove('changeFontColor');
+          }
+        }
+      }
+    });
+  });
+  var component = document.getElementById(this._internalVars.navId),
+    navMarker = component.querySelector('.in-page-marker'),
+    selected = component.querySelector('.in-page-item--selected');
+  if (selected.classList.contains('changeFontColor')) {
+    navMarker.classList.add('changeFontColor');
+  } else {
+    if (navMarker.classList.contains('changeFontColor')) {
+      navMarker.classList.remove('changeFontColor');
+    }
+  }
+}
+
+/**
+ * inPageItemClickHandler()
+ * Opens tab content for clicked tab and hides the rest
+ */
+function inPageItemClickHandler(el) {
+  var _this7 = this;
+  el.preventDefault();
+  var currentNode = el.currentTarget;
+
+  // get position and height of currentNode
+  var topPosition = currentNode.offsetTop;
+  var nodeHeight = currentNode.offsetHeight;
+
+  // add selected class
+  Array.prototype.map.call(this._internalVars.navItem, function (e, rank) {
+    if (e === currentNode) {
+      e.classList.add("in-page-item--selected");
+    } else {
+      e.classList.remove("in-page-item--selected");
+    }
+  });
+
+  // set marker to correct position
+  this._internalVars.marker.style.top = topPosition + "px";
+  this._internalVars.marker.style.height = nodeHeight + "px";
+  var currentNodeSection = currentNode.getElementsByTagName("a");
+  if (currentNodeSection[0].hasAttribute('data-link')) {
+    var getDataLink = currentNodeSection[0].getAttribute("data-link");
+    var section = document.getElementById(getDataLink);
+    if (section) {
+      //start will adjusting this number to a negative and go from there.  Will adjust position of a.
+      var top = -40;
+      var sectionTop = section.offsetTop + top;
+      window.scrollTo(0, sectionTop);
+    }
+  }
+
+  // fire onClicked Callback if there is one
+  setTimeout(function () {
+    if (_this7._options.onClicked) _this7._options.onClicked(currentNode);
+  }, 10);
+}
+
+/**
+ * setStartPosition()
+ * Set starting link
+ */
+function setStartPosition() {
+  var _this8 = this;
+  var linkIndex = this._options.startingPos - 1;
+  if (this._options.autoHide) {
+    if (!this._internalVars.node.classList.contains('hidden')) {
+      toggleComponent.call(this);
+    }
+  }
+  Array.prototype.map.call(this._internalVars.navItem, function (e, rank) {
+    if (rank === linkIndex) {
+      e.classList.add("in-page-item--selected");
+      var topPosition = e.offsetTop;
+      var nodeHeight = e.offsetHeight;
+      _this8._internalVars.marker.style.top = topPosition + "px";
+      _this8._internalVars.marker.style.height = nodeHeight + "px";
+    }
+  });
+}
+
+/**
+ * Toggle Component Function
+ * Displays and hides the component
+ */
+function toggleComponent() {
+  if (this._internalVars.node.classList.contains('hidden')) {
+    this._internalVars.node.classList.remove('hidden');
+  } else {
+    this._internalVars.node.classList.add('hidden');
+  }
+}
+function scrollPosition() {
+  var inPageNav = this._internalVars.node;
+  if (inPageNav.parentNode.parentNode.getBoundingClientRect().top - 65 < 0) {
+    inPageNav.style.position = "fixed";
+    inPageNav.style.top = window.innerHeight / 2 - inPageNav.offsetHeight + "px";
+  } else {
+    inPageNav.style.position = "absolute";
+    inPageNav.style.top = "";
+  }
+}
+var _default = exports["default"] = InPageNavigation;

package/dist/components/Loader.js

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK Loader : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "type",
+  isRequired: false,
+  validate: "value",
+  possibleValues: ["inline", "section", "inline--xsmall"],
+  errorMessage: ["GDK Loader : Type must be defined and set to inline or section"]
+}, {
+  setting: "autoShow",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["boolean"],
+  errorMessage: ["GDK Loader : autoShow must be a boolean"]
+}];
+var loaderLargeSVG = "\n    <svg class=\"circle-loader\" width=\"62\" height=\"62\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"31\" cy=\"31\" r=\"29\">\n    </svg>\n    <span class=\"geico-icon icon-loader-g\" style=\"width: 60px; height: 60px; line-height: 60px; font-size: 30px;\"></span>\n";
+var loaderSmallSVG = "\n    <svg class=\"circle-loader\" width=\"32\" height=\"32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"16\" cy=\"16\" r=\"15\">\n    </svg>\n";
+var loaderXSmallSVG = "\n    <svg class=\"circle-loader\" width=\"20\" height=\"20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"10\" cy=\"10\" r=\"9\">\n    </svg>\n";
+var Loader = /*#__PURE__*/function () {
+  /**
+   * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+   * @param {string|Object} content
+   * A reference to the loader. If the loader type is a section loader this should be a reference to the loader-container. If the loader type is a inline loader this should be a reference to the loader itself.
+   *
+   * @param {string} type
+   * Used to determine the type of loader. Options: "inline" || "section"
+   *
+   * @param {boolean} [autoShow=false]
+   * Use if you want to set loader to auto show when instantiated
+   *
+   */
+  function Loader(options) {
+    _classCallCheck(this, Loader);
+    this._internalVars = {
+      node: null,
+      //used for current node
+      loaderDom: null,
+      //stores reference to the loader when using a section loader
+      tick: 0,
+      loaderShouldPlay: false,
+      loaderSVG: null,
+      loaderG: null
+    };
+
+    //options with defaults set
+    this._defaults = {
+      autoShow: false
+    };
+
+    // Create options by extending defaults with the passed in arugments
+    if (options && _typeof(options) === "object") {
+      this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
+    }
+
+    //if the required options are valid set up the environment
+    if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
+      this._internalVars.contentType = _baseComponent["default"].getContentType(this);
+      setLocalVars.call(this);
+      buildLoader.call(this);
+      if (this._options.autoShow) {
+        this.show();
+      }
+    }
+  }
+
+  //Public Methods
+
+  /**
+  * show()
+  * plays and animates loader
+  */
+  return _createClass(Loader, [{
+    key: "show",
+    value: function show() {
+      var _this = this;
+      this._internalVars.node.style.display = "block";
+      setTimeout(function () {
+        if (_this._options.type === "section") {
+          _this._internalVars.node.classList.add("section-loader--show");
+          _this._internalVars.loaderDom.classList.add("loader--play");
+        } else {
+          _this._internalVars.node.classList.add("inline-loader--show");
+          _this._internalVars.node.classList.add("loader--play");
+        }
+        _this._internalVars.loaderShouldPlay = true;
+        loaderAnim.call(_this);
+      }, 10);
+    }
+
+    /**
+    * hide()
+    * hides and stops the loader
+    */
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this2 = this;
+      if (this._options.type === "section") {
+        this._internalVars.node.classList.remove("section-loader--show");
+      } else {
+        this._internalVars.node.classList.remove("inline-loader--show");
+      }
+      setTimeout(function () {
+        _this2._internalVars.node.style.display = "none";
+        if (_this2._options.type === "section") {
+          _this2._internalVars.loaderDom.classList.remove("loader--play");
+        } else {
+          _this2._internalVars.node.classList.remove("loader--play");
+        }
+        _this2._internalVars.loaderShouldPlay = false;
+      }, 500);
+    }
+
+    /**
+    * destroy()
+    * removes the node from the dom and any events attached
+    */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+      //a little garbage collection
+      for (var variableKey in this) {
+        if (this.hasOwnProperty(variableKey)) {
+          delete this[variableKey];
+        }
+      }
+    }
+  }]);
+}();
+/**
+* setLocalVars()
+* set all the local vars to passed in options
+*/
+function setLocalVars() {
+  //determine the type of content passed in
+  if (this._internalVars.contentType === 'string') {
+    this._internalVars.node = document.querySelector(this._options.content);
+  } else if (this._internalVars.contentType === 'domNode') {
+    this._internalVars.node = this._options.content;
+  }
+
+  //if its a section loader find the loader
+  if (this._options.type === "section") {
+    this._internalVars.loaderDom = this._internalVars.node.querySelector(".loader");
+    this._internalVars.loaderDom.style.width = "60px";
+    this._internalVars.loaderDom.style.height = "60px";
+    this._internalVars.loaderDom.style.lineHeight = "60px";
+    this._internalVars.loaderDom.style.fontSize = "60px";
+  }
+}
+
+/**
+* buildLoader()
+* Adds markup and classes this component
+*/
+function buildLoader() {
+  if (this._options.type === "section") {
+    this._internalVars.loaderDom.classList.add("loader--large");
+    this._internalVars.loaderDom.insertAdjacentHTML('afterBegin', loaderLargeSVG);
+    this._internalVars.dashOffsetEnd = 180;
+    this._internalVars.dashArrayComplete = 183;
+    this._internalVars.dashArrayEnd = 153;
+    this._internalVars.tickSpeed = 1;
+  } else if (this._options.type === "inline") {
+    this._internalVars.node.classList.add("loader--small");
+    this._internalVars.node.insertAdjacentHTML('afterBegin', loaderSmallSVG);
+    this._internalVars.dashOffsetEnd = 92;
+    this._internalVars.dashArrayComplete = 95;
+    this._internalVars.dashArrayEnd = 153;
+    this._internalVars.tickSpeed = 1.5;
+  } else if (this._options.type === "inline--xsmall") {
+    this._internalVars.node.classList.add("loader--small");
+    this._internalVars.node.insertAdjacentHTML('afterBegin', loaderXSmallSVG);
+    this._internalVars.dashOffsetEnd = 62;
+    this._internalVars.dashArrayComplete = 65;
+    this._internalVars.dashArrayEnd = 153;
+    this._internalVars.tickSpeed = 1.5;
+  }
+  this._internalVars.loaderSVG = this._internalVars.node.querySelector(".circle-loader");
+}
+function loaderAnim() {
+  this._internalVars.tick += this._internalVars.tickSpeed;
+  if (this._internalVars.tick > 100) {
+    this._internalVars.tick = 0;
+  }
+  var t = this._internalVars.tick / 100;
+  var offsetStrokeDashOffset = easeInCubic(t, 0, -this._internalVars.dashOffsetEnd, 1);
+  var offsetStrokeDasharray = easeInCubic(t, 0, this._internalVars.dashArrayEnd, 1);
+  this._internalVars.loaderSVG.style.strokeDashoffset = offsetStrokeDashOffset;
+  this._internalVars.loaderSVG.style.strokeDasharray = "".concat(offsetStrokeDasharray, " , ").concat(this._internalVars.dashArrayComplete);
+  if (this._internalVars.loaderShouldPlay) {
+    requestAnimationFrame(loaderAnim.bind(this));
+  }
+}
+
+/**
+* easeInQuad()
+* Quadratic easing
+*/
+function easeInQuad(t, b, c, d) {
+  var ts = (t /= d) * t;
+  return b + c * ts;
+}
+/**
+* easeInCubic()
+* Cubic easing
+*/
+function easeInCubic(t, b, c, d) {
+  var ts = (t /= d) * t * t;
+  return b + c * ts;
+}
+var _default = exports["default"] = Loader;