geico-design-kit 7.0.0

package/dist/components/Tooltip.js

@@ -0,0 +1,329 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+var _UserAgentService = _interopRequireDefault(require("../../src/services/UserAgentService"));
+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 Tooltip : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "toolTipText",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["string"],
+  errorMessage: ["GDK Tooltip : toolTipText must be set to a string"]
+}, {
+  setting: "toolTipOpen",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK Tooltip : toolTipOpen must be defined and set function"]
+}, {
+  setting: "toolTipClose",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK Tooltip : toolTipClose must be defined and set function"]
+}];
+var Tooltip = /*#__PURE__*/function () {
+  /**
+   * Refer to the design kit section of this component for JS examples and setting details.
+   * @param {string, Object} content
+   *  A reference to the html Tooltip trigger's node
+   *
+   * @param {string} [toolTipText]
+   * Callback function fired once a 'filter-submit' is clicked
+   *
+   * @param {function} [toolTipOpen]
+   * A callback function triggered when a tooltip is displayed
+   *
+   * @param {function} [toolTipClose]
+   * A callback function triggered when a tooltip is closed manually
+   *
+   */
+  function Tooltip(options) {
+    _classCallCheck(this, Tooltip);
+    this._internalVars = {
+      node: null,
+      //used for content item
+      toolTip: null,
+      triggerOffset: null,
+      timeout: null,
+      delay: 300,
+      // delay 0.3 seconds
+      breakpoint: 768,
+      margin: 12,
+      wrapperElementId: "wrapper",
+      toolTiplElementClass: "tooltip",
+      toolTipTriggerElementClass: "tooltip-trigger",
+      toolTipCloseElementClass: "icon-close-20",
+      toolTipActiveClass: "tooltip--active",
+      wrapper: null,
+      closeBtn: null
+    };
+
+    //options with defaults set
+    this._defaults = {
+      toolTipText: null
+    };
+
+    // 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);
+      setEvents.call(this);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * destroy()
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(Tooltip, [{
+    key: "destroy",
+    value: function destroy() {
+      removeEvents.call(this);
+      this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+      this._internalVars.toolTip.parentNode.removeChild(this._internalVars.toolTip);
+      //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;
+  }
+  if (this._options.toolTipText === null) {
+    this._internalVars.toolTip = document.querySelector("#" + this._internalVars.node.getAttribute('data-tooltip-view'));
+    this._internalVars.node.parentNode.insertBefore(this._internalVars.toolTip, this._internalVars.node.nextSibling);
+  } else {
+    buildNewTooltip.call(this);
+  }
+  this._internalVars.wrapper = document.querySelector("#" + this._internalVars.wrapperElementId);
+  this._internalVars.closeBtn = this._internalVars.toolTip.querySelector("." + this._internalVars.toolTipCloseElementClass);
+  this._internalVars.toolTipClass = 'tooltip';
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  if ("ontouchstart" in document.documentElement) {
+    this._internalVars.node.addEventListener(eventName, showToolTip.bind(this));
+    this._internalVars.node.addEventListener("mouseover", showToolTip.bind(this));
+    this._internalVars.closeBtn.addEventListener(eventName, closeBtnClickHandler.bind(this));
+  } else {
+    this._internalVars.node.addEventListener("mouseenter", showToolTip.bind(this));
+    this._internalVars.node.addEventListener(eventName, function (e) {
+      e.preventDefault();
+    });
+    this._internalVars.node.addEventListener("focus", showToolTip.bind(this));
+    this._internalVars.node.addEventListener("keydown", shiftTab.bind(this));
+    this._internalVars.closeBtn.addEventListener(eventName, closeBtnClickHandler.bind(this));
+    this._internalVars.closeBtn.addEventListener("blur", closeBtnClickHandler.bind(this));
+  }
+}
+function shiftTab(e) {
+  if (e.keyCode == '9' && e.shiftKey) {
+    hideToolTip.call(this);
+  }
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  if ("ontouchstart" in document.documentElement) {
+    this._internalVars.node.removeEventListener(eventName, showToolTip.bind(this));
+    this._internalVars.node.removeEventListener("mouseover", showToolTip.bind(this));
+    this._internalVars.closeBtn.removeEventListener(eventName, closeBtnClickHandler.bind(this));
+  } else {
+    this._internalVars.node.removeEventListener("mouseenter", showToolTip.bind(this));
+    this._internalVars.closeBtn.removeEventListener(eventName, closeBtnClickHandler.bind(this));
+    this._internalVars.node.removeEventListener(eventName, function (e) {
+      e.preventDefault();
+    });
+    this._internalVars.node.removeEventListener("focus", showToolTip.bind(this));
+    this._internalVars.node.removeEventListener("keydown", shiftTab.bind(this));
+    this._internalVars.closeBtn.removeEventListener("blur", closeBtnClickHandler.bind(this));
+  }
+}
+
+/**
+ * closeBtnClickHandler()
+ * catches click on close button
+ */
+function closeBtnClickHandler(e) {
+  console.log("closeBtnClickHandler");
+  e.preventDefault();
+  hideToolTip.call(this);
+  if (this._options.toolTipClose) {
+    var tooltip = e.currentTarget.parentNode;
+    this._options.toolTipClose(tooltip);
+  }
+}
+
+/**
+ * buildNewTooltip()
+ * use to dynamically create the tooltip
+ */
+function buildNewTooltip() {
+  var toolTipId = this._internalVars.node.getAttribute('data-tooltip-view');
+  var dynamicToolTip = document.createElement('div');
+  dynamicToolTip.setAttribute('id', toolTipId);
+  dynamicToolTip.classList.add("tooltip");
+  dynamicToolTip.innerHTML = '<div tabindex="0">' + this._options.toolTipText + '</div><button class="icon-close-20" aria-label="Close tooltip"></button>';
+  this._internalVars.node.parentNode.insertBefore(dynamicToolTip, this._internalVars.node.nextSibling);
+  this._internalVars.toolTip = document.querySelector("#" + toolTipId);
+}
+
+/**
+ * showToolTip()
+ * show tooltip on hover
+ */
+function showToolTip(e) {
+  var _this = this;
+  e.preventDefault();
+
+  // prep tooltip
+
+  var toolTipId = this._internalVars.node.getAttribute('data-tooltip-view');
+  var toolTip = document.querySelector("#" + toolTipId);
+  this._internalVars.node.parentNode.insertBefore(toolTip, this._internalVars.node.nextSibling);
+  this._internalVars.toolTip = toolTip;
+  try {
+    hideToolTip.call(this);
+  } catch (err) {
+    // clear existing tt
+  }
+  clearTimeout(this._internalVars.timeout);
+  var self = e.currentTarget;
+  self.classList.add(this._internalVars.toolTipActiveClass);
+  this._internalVars.activationArea = self;
+  self.addEventListener("mouseleave", settimeout.bind(this));
+  this._internalVars.toolTip.addEventListener("mouseleave", settimeout.bind(this));
+  this._internalVars.toolTip.addEventListener("mouseover", cleartimeout.bind(this));
+  this._internalVars.triggerOffset = self.getBoundingClientRect();
+  setTimeout(function () {
+    if (self.classList.contains("tooltip--active")) {
+      _this._internalVars.toolTip.style.display = "block";
+      //position the tooltip after setting to block
+      positionToolTip.call(_this);
+      //set opacity and let css transition fade it in
+      _this._internalVars.toolTip.style.opacity = 1;
+    }
+  }, this._internalVars.delay);
+  if (this._options.toolTipOpen) {
+    var triggerElement = e.currentTarget.parentNode,
+      tooltip = triggerElement.querySelector('.' + this._internalVars.toolTipClass);
+    this._options.toolTipOpen(tooltip);
+  }
+}
+
+/**
+ * cleartimeout()
+ * clears set timeout
+ */
+function cleartimeout(e) {
+  clearTimeout(this._internalVars.timeout);
+}
+
+/**
+ * settimeout()
+ * sets a timeout to hide the tooltip
+ */
+function settimeout(e) {
+  if (document.activeElement != e.currentTarget) {
+    clearTimeout(this._internalVars.timeout);
+    this._internalVars.node.classList.remove(this._internalVars.toolTipActiveClass);
+    this._internalVars.timeout = setTimeout(hideToolTip.bind(this), 200);
+    // this._internalVars.timeout = hideToolTip.call(this);
+  }
+}
+
+/**
+ * hideToolTip()
+ * hides the tooltip
+ */
+function hideToolTip() {
+  var _this2 = this;
+  this._internalVars.toolTip.style.opacity = 0;
+  setTimeout(function () {
+    _this2._internalVars.toolTip.style.display = "none";
+  }, this._internalVars.delay);
+}
+
+/**
+ * positionToolTip()
+ * sets the position for the tooltip depending on trigger position
+ */
+function positionToolTip() {
+  this._internalVars.toolTip.classList.remove("arrow-right");
+  this._internalVars.toolTip.classList.remove("arrow-bottom");
+  var winWidth = document.body.clientWidth;
+  var winHeight = window.innerHeight || document.documentElement.clientHeight;
+  var containerOffset = this._internalVars.wrapper.getBoundingClientRect();
+  var containerOffsetLeft = containerOffset.left;
+  var containerWidth = this._internalVars.wrapper.offsetWidth;
+  var tooltipWidth = this._internalVars.toolTip.offsetWidth;
+  var tooltipHeight = this._internalVars.toolTip.offsetHeight;
+  var xpos = null;
+  var ypos = null;
+  if (winWidth < this._internalVars.breakpoint) {
+    ypos = 25;
+    if (this._internalVars.triggerOffset.left - containerOffsetLeft + tooltipWidth < containerWidth) {
+      xpos = 0;
+    } else {
+      xpos = -(this._internalVars.triggerOffset.left - containerOffsetLeft + tooltipWidth - containerWidth + 10);
+    }
+  } else {
+    xpos = 40;
+    ypos = -15;
+    if (this._internalVars.triggerOffset.left - containerOffsetLeft + tooltipWidth + 50 < containerWidth) {
+      xpos = 40;
+      ypos = -15;
+    } else {
+      xpos = -(tooltipWidth + 5);
+      this._internalVars.toolTip.classList.add("arrow-right");
+    }
+  }
+  this._internalVars.toolTip.style.left = xpos + "px";
+  this._internalVars.toolTip.style.top = ypos + "px";
+}
+var _default = exports["default"] = Tooltip;

package/dist/components/Upsell.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var utils = _interopRequireWildcard(require("../../src/utils"));
+var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 _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); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK UpsellCarousel : Content must be defined and set to a DOM selector or Node"]
+}];
+var UpsellCarousel = /*#__PURE__*/_createClass(function UpsellCarousel(options) {
+  _classCallCheck(this, UpsellCarousel);
+  console.log('UpsellCarousel initialized');
+  this._internalVars = {
+    node: null
+  };
+
+  //options with defaults set
+  this._defaults = {};
+
+  // 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);
+    if (this._internalVars.node) {
+      carouselDefaults.call(this);
+    }
+  }
+}); // Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  window.addEventListener("load", carouselDefaults.bind(this));
+  window.addEventListener("resize", carouselDefaults.bind(this));
+  for (var i = 0; i < this._internalVars.carouselChevronBtn.length; i++) {
+    this._internalVars.carouselChevronBtn[i].addEventListener("click", carouselClick.bind(this, this._internalVars.carouselChevronBtn[i]));
+  }
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  window.removeEventListener("load", carouselDefaults.bind(this));
+  window.removeEventListener("resize", carouselDefaults.bind(this));
+  for (var i = 0; i < this._internalVars.carouselChevronBtn.length; i++) {
+    this._internalVars.carouselChevronBtn[i].removeEventListener("click", carouselClick.bind(this, this._internalVars.carouselChevronBtn[i]));
+  }
+}
+
+/**
+ * toggleView()
+ * instantiate View More/Less
+ */
+function carouselDefaults() {
+  if (window.innerWidth > this._internalVars.carouselIconDisplay) {
+    this._internalVars.carouselIconNumber = 4;
+  } else if (window.innerWidth > this._internalVars.carouselIconSmallDisplay) {
+    this._internalVars.carouselIconNumber = 2;
+  } else {
+    this._internalVars.carouselIconNumber = 1;
+  }
+  this._internalVars.carouselIconWidth = this._internalVars.carouselObject.querySelector(this._internalVars.carouselIconClass).clientWidth;
+  this._internalVars.carouselObject.style.width = (this._internalVars.carouselIconNumber + 2) * this._internalVars.carouselIconWidth + 'px';
+  this._internalVars.carouselItemsLeft = this._internalVars.carouselUpsellNumber - this._internalVars.carouselIconNumber;
+  this._internalVars.carouselLeftVal = 0;
+  this._internalVars.carouselObject.querySelector(this._internalVars.carouselIconWrapperClass).style.left = 0 + 'px';
+  var wrapperWidth = this._internalVars.carouselIconWidth * this._internalVars.carouselIconNumber,
+    containerWidth = this._internalVars.carouselIconWidth * this._internalVars.carouselUpsellNumber;
+  document.querySelector(this._internalVars.carouselWrapperClass).style.width = wrapperWidth + 'px';
+  document.querySelector(this._internalVars.carouselIconWrapperClass).style.width = containerWidth + 'px';
+  chevronState.call(this);
+}
+function carouselClick(e) {
+  if (!e.classList.contains("disabled")) {
+    var itemsLeftWidth = document.querySelector(this._internalVars.carouselIconWrapperClass).style.getPropertyValue("left"),
+      itemsLeftWidthValue = itemsLeftWidth.slice(0, -2),
+      itemsLeftWidthVal = Number(itemsLeftWidthValue.replace(/^-/, "")),
+      itemsRightWidth = this._internalVars.carouselIconWidth * this._internalVars.carouselUpsellNumber - itemsLeftWidthVal - this._internalVars.carouselIconWidth * this._internalVars.carouselIconNumber;
+    var operand = null;
+    var totalScrollValue = null;
+    var movementValue = null;
+    if (e.querySelector("span").classList.contains("icon-chevron-right")) {
+      operand = "-";
+      totalScrollValue = itemsRightWidth;
+    } else {
+      operand = "+";
+      totalScrollValue = itemsLeftWidthVal;
+    }
+    if (this._internalVars.carouselIconWidth * this._internalVars.carouselIconNumber > totalScrollValue) {
+      movementValue = totalScrollValue;
+    } else {
+      movementValue = this._internalVars.carouselIconWidth * this._internalVars.carouselIconNumber;
+    }
+    if (operand === "+") {
+      this._internalVars.carouselObject.querySelector(this._internalVars.carouselIconWrapperClass).style.left = Number(itemsLeftWidthValue) + movementValue + 'px';
+    } else {
+      this._internalVars.carouselObject.querySelector(this._internalVars.carouselIconWrapperClass).style.left = Number(itemsLeftWidthValue) - movementValue + 'px';
+    }
+    chevronState.call(this);
+  }
+}
+function chevronState() {
+  var itemsLeftWidth = document.querySelector(this._internalVars.carouselIconWrapperClass).style.getPropertyValue("left"),
+    itemsLeftWidthValue = itemsLeftWidth.slice(0, -2),
+    itemsLeftWidthVal = Number(itemsLeftWidthValue.replace(/^-/, "")),
+    itemsRightWidth = this._internalVars.carouselIconWidth * this._internalVars.carouselUpsellNumber - itemsLeftWidthVal - this._internalVars.carouselIconWidth * this._internalVars.carouselIconNumber;
+  if (itemsLeftWidthVal === 0) {
+    this._internalVars.carouselChevronBtn[0].classList.add("disabled");
+    this._internalVars.carouselChevronBtn[0].children[0].setAttribute("disabled", "disabled");
+  } else {
+    this._internalVars.carouselChevronBtn[0].classList.remove("disabled");
+    this._internalVars.carouselChevronBtn[0].children[0].removeAttribute("disabled");
+  }
+  if (itemsRightWidth === 0) {
+    this._internalVars.carouselChevronBtn[1].classList.add("disabled");
+    this._internalVars.carouselChevronBtn[1].children[0].setAttribute("disabled", "disabled");
+  } else {
+    this._internalVars.carouselChevronBtn[1].classList.remove("disabled");
+    this._internalVars.carouselChevronBtn[1].children[0].removeAttribute("disabled");
+  }
+}
+
+/**
+ * setLocalVars()
+ * set local vars to the ones passed in options
+ */
+function setLocalVars() {
+  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.carouselIconDisplay = 645;
+  this._internalVars.carouselIconSmallDisplay = 440;
+  this._internalVars.carouselIconNumber = 0;
+  this._internalVars.carouselIconClass = '.carousel-upsell-product';
+  this._internalVars.carouselWrapperClass = '.icon-carousel';
+  this._internalVars.carouselIconWrapperClass = '.icon-carousel-display';
+  this._internalVars.carouselIconChevronClass = '.carousel-upsell-chevron';
+  this._internalVars.carouselObject = this._internalVars.node;
+  this._internalVars.carouselUpsellNumber = this._internalVars.carouselObject.querySelectorAll(this._internalVars.carouselIconClass).length;
+  this._internalVars.carouselChevronBtn = this._internalVars.carouselObject.querySelectorAll(this._internalVars.carouselIconChevronClass);
+}
+var _default = exports["default"] = UpsellCarousel;