geico-design-kit 7.0.0

package/dist/components/BackgroundPatternPortfolio.js

@@ -0,0 +1,242 @@
+"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 Trianglify = require('trianglify');
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK BackgroundPatternPortfolioPage : Content must be defined and set to a DOM selector or Node"]
+}];
+var BackgroundPatternPortfolioPage = /*#__PURE__*/function () {
+  function BackgroundPatternPortfolioPage(options) {
+    _classCallCheck(this, BackgroundPatternPortfolioPage);
+    console.log('BackgroundPatternPortfolioPage initialized');
+
+    //SM=75 MED=125 LG=175
+
+    this._internalVars = {
+      node: null //used for current node
+    };
+
+    //options with defaults set
+    this._defaults = {};
+
+    // 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);
+      init.call(this);
+    }
+  }
+
+  /**
+   * destroy()
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(BackgroundPatternPortfolioPage, [{
+    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];
+        }
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * init()
+ * Initializes the Trianglify pattern
+ */
+function init() {
+  if (this._internalVars.alertVerificationItems.length === 0) {
+    alertHeight.call(this);
+  } else {
+    initialAlertDisplay.call(this);
+  }
+}
+function trianglify() {
+  console.log(this._internalVars.canvasHeight);
+  var pattern = Trianglify({
+    variance: "0.7",
+    cell_size: 175,
+    x_colors: ["#ffffff", "#dcdcdc", "#e6e6e6", "#ffffff", "e8e8e8", "f0f0f0", "#dcdcdc", "#ffffff", "#f5f5f5", "e8e8e8", "#ffffff", "#e6e6e6", "#f5f5f5", "#fafafa", "#ffffff"],
+    width: 3000,
+    height: this._internalVars.canvasHeight
+  });
+  this._internalVars.node.appendChild(pattern.canvas());
+  var canvas = document.getElementsByTagName('canvas');
+  console.log(canvas);
+  canvas[0].setAttribute('id', 'portfolioBackground');
+  if (canvas[1]) {
+    canvas[1].parentElement.removeChild(canvas[1]);
+  }
+}
+function setCanvasHeight() {
+  if (this._internalVars.alertVerificationItems.length === 0) {
+    this._internalVars.canvasHeight = 220;
+  }
+  if (document.getElementById(this._internalVars.canvasID) === null) {} else {
+    document.getElementById(this._internalVars.canvasID).parentNode.removeChild(document.getElementById(this._internalVars.canvasID));
+  }
+  this._internalVars.backgroundPatternHeightObject.style.height = this._internalVars.canvasHeight + "px";
+  trianglify.call(this);
+}
+function initialAlertDisplay() {
+  this._internalVars.alertActive = 0;
+  this._internalVars.alertItems[this._internalVars.alertActive].classList.add('alert-active');
+  if (this._internalVars.alertItems.length > 1) {
+    this._internalVars.alertTotalObject.innerHTML = this._internalVars.alertItems.length;
+    currentAlertState.call(this);
+  } else {
+    //hide carousel
+    this._internalVars.carouselObject.style.display = 'none';
+  }
+  alertHeight.call(this);
+  chevronState.call(this);
+}
+function chevronState() {
+  var currentAlert = this._internalVars.alertActive + 1;
+  if (currentAlert === 1) {
+    //disable left arrow
+    this._internalVars.arrowLeft.setAttribute('disabled', 'disabled');
+    this._internalVars.arrowLeft.parentNode.classList.add('disabled');
+    if (this._internalVars.alertItems.length === 2) {
+      this._internalVars.arrowRight.removeAttribute('disabled');
+      this._internalVars.arrowRight.parentNode.classList.remove('disabled');
+    }
+  } else if (currentAlert === this._internalVars.alertItems.length) {
+    //disable right arrow
+    if (this._internalVars.alertItems.length === 2) {
+      this._internalVars.arrowLeft.removeAttribute('disabled');
+      this._internalVars.arrowLeft.parentNode.classList.remove('disabled');
+    }
+    this._internalVars.arrowRight.setAttribute('disabled', 'disabled');
+    this._internalVars.arrowRight.parentNode.classList.add('disabled');
+  } else {
+    //remove disabled classes/attributes
+    this._internalVars.arrowLeft.removeAttribute('disabled');
+    this._internalVars.arrowLeft.parentNode.classList.remove('disabled');
+    this._internalVars.arrowRight.removeAttribute('disabled');
+    this._internalVars.arrowRight.parentNode.classList.remove('disabled');
+  }
+}
+function currentAlertState() {
+  this._internalVars.alertCurrentObject.innerHTML = this._internalVars.alertActive + 1;
+}
+function alertHeight() {
+  this._internalVars.canvasHeight = this._internalVars.backgroundPatternHeightObject.querySelector('.container').clientHeight;
+  setCanvasHeight.call(this);
+}
+function setEvents() {
+  this._internalVars.arrowRight.addEventListener("click", carouselSelection.bind(this));
+  this._internalVars.arrowLeft.addEventListener("click", carouselSelection.bind(this));
+  for (var i = 0; i < this._internalVars.closeButtonObject.length; i++) {
+    this._internalVars.closeButtonObject[i].addEventListener("click", closeButton.bind(this, this._internalVars.closeButtonObject[i]));
+  }
+  window.addEventListener('resize', alertHeight.bind(this));
+}
+function closeButton() {
+  var nextAlert = null,
+    currentAlert = this._internalVars.alertActive + 1;
+  if (currentAlert === this._internalVars.alertItems.length) {
+    nextAlert = this._internalVars.alertActive - 1;
+  } else {
+    nextAlert = this._internalVars.alertActive;
+  }
+  this._internalVars.alertItems[this._internalVars.alertActive].classList.remove('alert-active');
+  this._internalVars.alertItems[this._internalVars.alertActive].classList.remove('alert-importance');
+  this._internalVars.alertItems = document.querySelectorAll('.' + this._internalVars.alertItemsClass);
+  if (this._internalVars.alertItems.length > 0) {
+    this._internalVars.alertItems[nextAlert].classList.add('alert-active');
+    this._internalVars.alertActive = [].indexOf.call(this._internalVars.alertItems, document.querySelector('.' + this._internalVars.currentAlertClass));
+    if (this._internalVars.alertItems.length === 1) {
+      this._internalVars.carouselObject.style.display = 'none';
+    } else {
+      this._internalVars.alertTotalObject.innerHTML = this._internalVars.alertItems.length;
+      chevronState.call(this);
+      currentAlertState.call(this);
+    }
+  } else {
+    this._internalVars.alertVerificationItems[0].classList.remove('portfolio-alerts');
+  }
+  alertHeight.call(this);
+}
+function carouselSelection(e) {
+  e.preventDefault();
+  var nextAlert = null;
+  this._internalVars.alertItems[this._internalVars.alertActive].classList.remove('alert-active');
+  if (e.target.id === 'arrow-right') {
+    nextAlert = this._internalVars.alertActive + 1;
+    this._internalVars.alertActive = nextAlert;
+  } else {
+    nextAlert = this._internalVars.alertActive - 1;
+    this._internalVars.alertActive = nextAlert;
+  }
+  this._internalVars.alertItems[this._internalVars.alertActive].classList.add('alert-active');
+  alertHeight.call(this);
+  chevronState.call(this);
+  currentAlertState.call(this);
+}
+
+/**
+ * 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.alertVerificationClass = 'portfolio-alerts';
+  this._internalVars.alertVerificationItems = document.getElementsByClassName(this._internalVars.alertVerificationClass);
+  this._internalVars.backgroundPatternHeightID = "background-pattern-portfolio-page";
+  this._internalVars.backgroundPatternHeightObject = document.getElementById(this._internalVars.backgroundPatternHeightID);
+  this._internalVars.canvasHeight = null;
+  this._internalVars.alertContainerID = 'portfolio-alert-container';
+  this._internalVars.alertContainerObject = document.getElementById(this._internalVars.alertContainerID);
+  this._internalVars.alertItemsClass = 'alert-importance';
+  this._internalVars.alertItems = document.querySelectorAll('.' + this._internalVars.alertItemsClass);
+  this._internalVars.currentAlertClass = 'alert-active';
+  this._internalVars.currentAlertObject = document.querySelector('.' + this._internalVars.currentAlertClass);
+  this._internalVars.alertActive = null;
+  this._internalVars.alertCurrentID = 'alert-current';
+  this._internalVars.alertTotalID = 'alert-total';
+  this._internalVars.alertCurrentObject = document.getElementById(this._internalVars.alertCurrentID);
+  this._internalVars.alertTotalObject = document.getElementById(this._internalVars.alertTotalID);
+  this._internalVars.arrowRightID = 'arrow-right';
+  this._internalVars.arrowRight = document.getElementById(this._internalVars.arrowRightID);
+  this._internalVars.arrowLeftID = 'arrow-left';
+  this._internalVars.arrowLeft = document.getElementById(this._internalVars.arrowLeftID);
+  this._internalVars.carouselClass = 'carousel';
+  this._internalVars.carouselObject = document.querySelector('.' + this._internalVars.carouselClass);
+  this._internalVars.closeButtonClass = 'icon-close-20';
+  this._internalVars.alertContainerID = 'portfolio-alert-container';
+  this._internalVars.alertContainerObject = document.getElementById(this._internalVars.alertContainerID);
+  this._internalVars.closeButtonObject = this._internalVars.alertContainerObject.querySelectorAll('.' + this._internalVars.closeButtonClass);
+  this._internalVars.canvasID = 'portfolioBackground';
+}
+var _default = exports["default"] = BackgroundPatternPortfolioPage;

package/dist/components/ButtonSwitch.js

@@ -0,0 +1,236 @@
+"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 ButtonSwitch : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "initialActiveSide",
+  isRequired: false,
+  validate: "value",
+  possibleValues: ["left", "right"],
+  errorMessage: ["GDK ButtonSwitch : initialActiveSide must be set to left or right"]
+}, {
+  setting: "leftSideClicked",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK ButtonSwitch : leftSideClicked must be a function"]
+}, {
+  setting: "rightSideClicked",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK ButtonSwitch : rightSideClicked must be a function"]
+}];
+var ButtonSwitch = /*#__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 button node to switch
+   *
+   * @param {string} [initialActiveSide="left"]
+   * Used to designate which side of the button is initially active. Options: "left" || "right"
+   *
+   * @param {function} [leftSideClicked]
+   * A callback function that gets fired when the left side of the button is clicked
+   *
+   * @param {function} [rightSideClicked]
+   * A callback function that gets fired when the left side of the button is clicked
+   */
+
+  function ButtonSwitch(options) {
+    _classCallCheck(this, ButtonSwitch);
+    this._internalVars = {
+      node: null,
+      //used for content item
+      left: null,
+      //clickable node on the left side of the button
+      right: null,
+      //clickable node on the right side of the button
+      sideOptions: ["left", "right"],
+      side: null
+    };
+
+    //options with defaults set
+    this._defaults = {
+      initialActiveSide: this._internalVars.sideOptions[0]
+    };
+
+    // 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);
+      if (!this._internalVars.node.getAttribute('tabindex')) this._internalVars.node.setAttribute('tabindex', '0');
+      this._internalVars.node.setAttribute('role', 'checkbox');
+    }
+  }
+
+  //Public Methods
+  /**
+   * currentSide()
+   * returns the side the switch button is currently on
+   * @returns {string} "left" | "right"
+   */
+  return _createClass(ButtonSwitch, [{
+    key: "currentSide",
+    value: function currentSide() {
+      return this._internalVars.side;
+    }
+
+    /**
+     * slideLeft()
+     * invokes a click on the left side of the switch button
+     */
+  }, {
+    key: "slideLeft",
+    value: function slideLeft() {
+      if (this._internalVars.node.classList.contains("button-switch--slide-right")) {
+        this._internalVars.node.classList.remove("button-switch--slide-right");
+        switchLeft.call(this);
+      } else if (this._internalVars.node.classList.contains("button-switch--start-right") && !this._internalVars.node.classList.contains("button-switch--slide-right") && !this._internalVars.node.classList.contains("button-switch--slide-left")) {
+        switchLeft.call(this);
+      }
+    }
+
+    /**
+     * slideRight()
+     * invokes a click on the right side of the switch button
+     */
+  }, {
+    key: "slideRight",
+    value: function slideRight() {
+      if (this._internalVars.node.classList.contains("button-switch--slide-left")) {
+        this._internalVars.node.classList.remove("button-switch--slide-left");
+        switchRight.call(this);
+      } else if (this._internalVars.node.classList.contains("button-switch--start-left") && !this._internalVars.node.classList.contains("button-switch--slide-right") && !this._internalVars.node.classList.contains("button-switch--slide-left")) {
+        switchRight.call(this);
+      }
+    }
+
+    /**
+     * 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
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  this._internalVars.node.addEventListener(eventName, this._internalVars.handler);
+  this._internalVars.node.addEventListener("keyup", this._internalVars.handler);
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var eventName = _UserAgentService["default"]._clickEventName();
+  this._internalVars.node.removeEventListener(eventName, this._internalVars.handler);
+}
+
+/**
+ * switchClick()
+ * if you click on button it will switch
+ */
+function switchClick(e) {
+  if (e.type == 'keypress' || e.type == 'keyup' && (e.keyCode || e.which) != 13) {
+    return;
+  }
+  if (this._internalVars.node.classList.contains('disabled')) {
+    return;
+  }
+  if (this._internalVars.node.classList.contains("button-switch--slide-right")) {
+    this._internalVars.node.classList.remove("button-switch--slide-right");
+    switchLeft.call(this);
+  } else if (this._internalVars.node.classList.contains("button-switch--slide-left")) {
+    this._internalVars.node.classList.remove("button-switch--slide-left");
+    switchRight.call(this);
+  }
+  if (this._internalVars.node.classList.contains("button-switch--start-left") && !this._internalVars.node.classList.contains("button-switch--slide-right") && !this._internalVars.node.classList.contains("button-switch--slide-left")) {
+    switchRight.call(this);
+  } else if (this._internalVars.node.classList.contains("button-switch--start-right") && !this._internalVars.node.classList.contains("button-switch--slide-right") && !this._internalVars.node.classList.contains("button-switch--slide-left")) {
+    switchLeft.call(this);
+  }
+}
+function switchLeft() {
+  this._internalVars.node.classList.add("button-switch--slide-left");
+  this._internalVars.side = this._internalVars.sideOptions[0];
+  this._internalVars.node.setAttribute('aria-checked', 'false');
+  if (this._options.leftSideClicked) this._options.leftSideClicked();
+}
+function switchRight() {
+  this._internalVars.node.classList.add("button-switch--slide-right");
+  this._internalVars.side = this._internalVars.sideOptions[1];
+  this._internalVars.node.setAttribute('aria-checked', 'true');
+  if (this._options.rightSideClicked) this._options.rightSideClicked();
+}
+
+/**
+ * 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;
+  }
+
+  //get the child spans to add click events too
+  var spans = this._internalVars.node.querySelectorAll("span");
+  this._internalVars.left = spans[0];
+  this._internalVars.right = spans[1];
+
+  //init the current side and add the class
+  this._internalVars.side = this._options.initialActiveSide.toLowerCase();
+  //check for right else use the default left
+  if (this._internalVars.side === this._internalVars.sideOptions[1]) {
+    this._internalVars.node.classList.add("button-switch--start-right");
+    this._internalVars.node.setAttribute('aria-checked', 'true');
+  } else {
+    this._internalVars.node.classList.add("button-switch--start-left");
+    this._internalVars.node.setAttribute('aria-checked', 'false');
+  }
+  this._internalVars.handler = switchClick.bind(this);
+}
+var _default = exports["default"] = ButtonSwitch;