geico-design-kit 7.0.0

package/dist/components/VIN.js

@@ -0,0 +1,271 @@
+"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 VINCountdown : Content must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "countdownMax",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["number"],
+  errorMessage: ["GDK VINCountdown : countdownMax must be a number"]
+}, {
+  setting: "onCharacterType",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK VINCountdown : Content must be defined and set to a function"]
+}];
+var VINCountdown = /*#__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 textarea container node
+   *
+   * @param {number} [countdownMax=1000]
+   * The number of characters allowed in the textarea
+   *
+   */
+  function VINCountdown(options) {
+    _classCallCheck(this, VINCountdown);
+    this._internalVars = {
+      node: null,
+      //used for content item
+      geicoVINCountdownContainerClass: "vin-countdown-container",
+      geicoVINCountdownClass: "vin-area-countdown",
+      geicoTextAreaGoodClass: "vin-countdown--good",
+      geicoTextAreaCloseClass: "vin-countdown--close",
+      geicoTextAreaOverClass: "vin-countdown--over",
+      geicoVINCountdownInfoClass: "vin-countdown-info",
+      geicoVINCountdownInfoTextClass: "vin-countdown-info-text",
+      geicoVINCountdownInfoCounterClass: "vin-countdown-info-counter",
+      geicoTextGoodCopy: "Characters Remaining:  ",
+      geicoTextCloseCopy: "Characters Remaining:  ",
+      geicoTextOverCopy: "Over by:  ",
+      closeNum: 10,
+      geicoVINCountdownData: null,
+      count: null
+    };
+
+    //options with defaults set
+    this._defaults = {
+      countdownMax: 17
+    };
+
+    // 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);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * destroy()
+   * removes the node from the dom and any events attached
+   */
+  return _createClass(VINCountdown, [{
+    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];
+        }
+      }
+    }
+
+    /**
+     * setVINLength(newLength)
+     * @param newLength
+     * sets the length of the VIN and updates the corresponding countdown number
+     */
+  }, {
+    key: "setVINLength",
+    value: function setVINLength(newLength) {
+      if (typeof newLength === "number") {
+        updateVINLength.call(this, newLength);
+      }
+    }
+  }]);
+}(); // Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+  this._internalVars.textArea.addEventListener("change", this._internalVars.handler);
+  this._internalVars.textArea.addEventListener("keyup", this._internalVars.handler);
+  this._internalVars.textArea.addEventListener("keydown", this._internalVars.handler);
+  this._internalVars.textArea.addEventListener("blur", this._internalVars.handler);
+  this._internalVars.textArea.addEventListener("paste", pasteHandler);
+  this._internalVars.textArea.addEventListener("keypress", this._internalVars.checkInputHandler);
+  this._internalVars.textArea.addEventListener("input", this._internalVars.replaceCharactersHandler);
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  this._internalVars.textArea.removeEventListener("change", this._internalVars.handler);
+  this._internalVars.textArea.removeEventListener("keyup", this._internalVars.handler);
+  this._internalVars.textArea.removeEventListener("keydown", this._internalVars.handler);
+  this._internalVars.textArea.removeEventListener("blur", this._internalVars.handler);
+  this._internalVars.textArea.removeEventListener("paste", pasteHandler);
+  this._internalVars.textArea.removeEventListener("keypress", this._internalVars.checkInputHandler);
+  this._internalVars.textArea.removeEventListener("input", this._internalVars.replaceCharactersHandler);
+}
+function checkInputValue(evt) {
+  if (this._options.onCharacterType) {
+    this._options.onCharacterType();
+  }
+}
+function updateVINLength(newLength) {
+  this._options.countdownMax = newLength;
+  this._internalVars.countdownInfoCounter.innerHTML = newLength - this._internalVars.textArea.value.length;
+  this._internalVars.textArea.setAttribute("maxlength", newLength);
+}
+
+/**
+ * pasteHandler()
+ * triggers a keydown event on paste
+ */
+function pasteHandler(evt) {
+  var _this = evt.currentTarget;
+  setTimeout(function () {
+    var event = document.createEvent('HTMLEvents');
+    event.initEvent('keydown', true, false);
+    _this.dispatchEvent(event);
+  }, 10);
+}
+
+/**
+ * updateCountdown()
+ * updates the countdown text and counter
+ */
+function updateCountdown(evt) {
+  var _this = evt.currentTarget;
+  var container = _this.parentNode;
+  var text = _this.value;
+  var remaining = this._options.countdownMax - text.length;
+  if (remaining < 0) {
+    this._internalVars.countdownInfoText.textContent = this._internalVars.geicoTextOverCopy;
+    this._internalVars.countdownInfoTextCurrent = this._internalVars.geicoTextOverCopy;
+    container.classList.remove(this._internalVars.geicoTextAreaCloseClass);
+    container.classList.add(this._internalVars.geicoTextAreaOverClass);
+  } else if (remaining < 10) {
+    this._internalVars.countdownInfoText.textContent = this._internalVars.geicoTextCloseCopy;
+    this._internalVars.countdownInfoTextCurrent = this._internalVars.geicoTextCloseCopy;
+    container.classList.remove(this._internalVars.geicoTextAreaGoodClass);
+    container.classList.remove(this._internalVars.geicoTextAreaOverClass);
+    container.classList.add(this._internalVars.geicoTextAreaCloseClass);
+  } else if (this._internalVars.countdownInfoTextCurrent === this._internalVars.geicoTextCloseCopy || this._internalVars.countdownInfoTextCurrent === this._internalVars.geicoTextOverCopy) {
+    this._internalVars.countdownInfoText.textContent = this._internalVars.geicoTextGoodCopy;
+    this._internalVars.countdownInfoTextCurrent = this._internalVars.geicoTextGoodCopy;
+    container.classList.remove(this._internalVars.geicoTextAreaCloseClass);
+    container.classList.remove(this._internalVars.geicoTextAreaOverClass);
+    container.classList.add(this._internalVars.geicoTextAreaGoodClass);
+  }
+  updateRemaining.call(this, remaining, text.length, this._options.countdownMax, this._internalVars.countdownInfoCounter);
+}
+
+/**
+ * updateRemaining()
+ * updates the remaining characters left
+ */
+function updateRemaining(remaining, tl, countdown, countdownInfoCounter) {
+  var val = remaining;
+  if (remaining === 0) val = 0;else if (remaining < 0) val = tl - countdown;
+  countdownInfoCounter.textContent = val;
+}
+
+/**
+ * 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;
+  }
+
+  //node to hold status text
+  var infoText = document.createElement("SPAN");
+  infoText.classList.add(this._internalVars.geicoVINCountdownInfoTextClass);
+
+  //node to hold count of characters left
+  var infoCounter = document.createElement("SPAN");
+  infoCounter.classList.add(this._internalVars.geicoVINCountdownInfoCounterClass);
+
+  //node to hold count of characters left
+  var countdownInfo = document.createElement("DIV");
+  countdownInfo.classList.add(this._internalVars.geicoVINCountdownInfoClass);
+  countdownInfo.setAttribute('aria-live', 'polite');
+  countdownInfo.setAttribute('aria-atomic', 'true');
+
+  //add the text and counter to the container
+  countdownInfo.appendChild(infoText);
+  countdownInfo.appendChild(infoCounter);
+
+  //append the container to the node
+  this._internalVars.node.appendChild(countdownInfo);
+  //set initial class for container
+  this._internalVars.node.classList.add(this._internalVars.geicoTextAreaGoodClass);
+
+  //get access to the textarea, counter and counter info for future reference
+  this._internalVars.textArea = this._internalVars.node.querySelector("." + this._internalVars.geicoVINCountdownClass);
+  this._internalVars.countdownInfoText = this._internalVars.node.querySelector("." + this._internalVars.geicoVINCountdownInfoTextClass);
+  this._internalVars.countdownInfoCounter = this._internalVars.node.querySelector("." + this._internalVars.geicoVINCountdownInfoCounterClass);
+  this._internalVars.countdownInfoTextCurrent = this._internalVars.geicoTextGoodCopy;
+  this._internalVars.countdownInfoCounter.textContent = this._options.countdownMax;
+  this._internalVars.countdownInfoText.textContent = this._internalVars.countdownInfoTextCurrent;
+  this._internalVars.handler = updateCountdown.bind(this);
+  this._internalVars.replaceCharactersHandler = replaceCharacters.bind(this);
+  this._internalVars.checkInputHandler = checkInputValue.bind(this);
+}
+function replaceCharacters() {
+  var entryArray = this._internalVars.textArea.value.split('');
+  var convertedArray = [];
+  Array.prototype.forEach.call(entryArray, function (el) {
+    if (el === 'i' || el === 'I') {
+      convertedArray.push('1');
+    } else if (el === 'o' || el === 'O') {
+      convertedArray.push('0');
+    } else if (el === 'q' || el === 'Q') {
+      convertedArray.push('0');
+    } else {
+      convertedArray.push(el);
+    }
+  });
+  var entry = convertedArray.join('');
+  this._internalVars.textArea.value = entry;
+}
+var _default = exports["default"] = VINCountdown;