geico-design-kit 7.0.0

package/dist/components/Timeline.js

@@ -0,0 +1,498 @@
+"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); } //Module Imports
+var interactjs = require('interact.js');
+var validateSettings = [{
+  setting: "content",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string", "object"],
+  errorMessage: ["GDK Time Input : Time Input must be defined and set to a DOM selector or Node"]
+}, {
+  setting: "segmentedControlVar",
+  isRequired: true,
+  validate: "type",
+  possibleValues: ["string"],
+  errorMessage: ["GDK Time Input : segmentedControlVar must be defined as a string"]
+}, {
+  setting: "callBackOnTimeChange",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["function"],
+  errorMessage: ["GDK Time Input : callBackOnTimeChange must be a defined and set function"]
+}, {
+  setting: "setInitialTime",
+  isRequired: false,
+  validate: "type",
+  possibleValues: ["string"],
+  errorMessage: ["GDK Time Input : setInitialTime must be defined as a string"]
+}];
+
+/**
+ * TimeInput Class
+ */
+var TimeInput = /*#__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 time input component node
+   *
+   *
+   * @param {string} segmentedControlVar
+   * A name for the segmented control GDK Object
+   *
+   *
+   * @param {function} [callBackOnTimeChange]
+   * A callback function triggered when the time has changed
+   *
+   * @param {string} [setInitialTime]
+   * A string that will populate the time input field and adjust the segmented control if necessary
+   *
+   *
+   */
+  function TimeInput(options) {
+    _classCallCheck(this, TimeInput);
+    this._internalVars = {};
+
+    //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);
+      initSegmentedControl.call(this);
+      setEvents.call(this);
+      setValue.call(this);
+      initMask.call(this);
+    }
+  }
+
+  //Public Methods
+
+  /**
+   * returns the time entered in a 24hr format
+   * @return {{time: (string)}}
+   */
+  return _createClass(TimeInput, [{
+    key: "getTime",
+    value: function getTime() {
+      this._internalVars.publicMethodUsed = true;
+      getValue.call(this);
+      return this._internalVars.timeInputFieldValue;
+    }
+
+    /**
+     * sets the time value
+     * @param {string} time String containing the 24hr time format
+     */
+  }, {
+    key: "setTime",
+    value: function setTime(time) {
+      this._internalVars.publicMethodUsed = true;
+      getCurrentValue.call(this);
+      setValue.call(this, time);
+      getValue.call(this);
+    }
+
+    /**
+     * 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 _this = this;
+  this._internalVars.timeInputField.addEventListener('focus', getCurrentValue.bind(this));
+  this._internalVars.timeInputField.addEventListener('keyup', checkKey.bind(this));
+  this._internalVars.timeInputField.addEventListener('blur', getValue.bind(this));
+  var eventName = _UserAgentService["default"]._clickEventName();
+  Array.prototype.forEach.call(this._internalVars.dropZoneObject, function (element) {
+    element.addEventListener(eventName, setSegmentValue.bind(_this));
+    interactjs(element).dropzone({
+      ondrop: segmentChange.bind(_this)
+    });
+  });
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+  var _this2 = this;
+  this._internalVars.timeInputField.removeEventListener('focus', getCurrentValue.bind(this));
+  this._internalVars.timeInputField.removeEventListener('keyup', checkKey.bind(this));
+  this._internalVars.timeInputField.removeEventListener('blur', getValue.bind(this));
+  var eventName = _UserAgentService["default"]._clickEventName();
+  Array.prototype.forEach.call(this._internalVars.dropZoneObject, function (element) {
+    element.removeEventListener(eventName, setSegmentValue.bind(_this2));
+  });
+}
+
+/**
+ * initMask()
+ * instantiates the input field mask
+ */
+function initMask() {
+  $(this._internalVars.timeInputField).mask("99:99", {});
+}
+
+/**
+ * initSegmentedControl()
+ * instantiates the segmented control component
+ */
+function initSegmentedControl() {
+  this[this._options.segmentedControlVar] = new GDK.SegmentedControl({
+    "content": this._internalVars.segmentedControlObject
+  });
+}
+
+/**
+ * setValue()
+ * populates the input field value and calls a function to adjust the segmented control
+ */
+function setValue(time) {
+  var entry;
+  if (time) {
+    entry = time;
+  } else if (this._options.setInitialTime) {
+    entry = this._options.setInitialTime;
+  } else {
+    entry = ':';
+  }
+  if (entry.indexOf(":") > 0) {
+    var minutes = entry.substring(entry.indexOf(":") + 1),
+      hour = entry.substring(0, entry.indexOf(":"));
+    if (minutes.length == 2 && hour.length < 3 && hour.length > 0) {
+      if (hour < 24 && minutes < 60) {
+        var numHour = parseInt(hour),
+          userEntry = false,
+          segmentVars = setChangeSegmentVars(numHour, userEntry);
+        updatePeriod.call(this, segmentVars.period, segmentVars.changeSegment);
+        var convertedTime = convertTo12hrFormat.call(this, numHour, minutes, segmentVars.changeSegment);
+        if (entry === time) {
+          $(this._internalVars.timeInputField).mask("", {});
+          this._internalVars.timeInputField.setAttribute('value', convertedTime);
+          this._internalVars.timeInputField.value = convertedTime;
+          $(this._internalVars.timeInputField).mask("99:99", {});
+        } else {
+          this._internalVars.timeInputField.setAttribute('value', convertedTime);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * setChangeSegmentVars(numHour, userEntry)
+ * @param numHour
+ * @param userEntry
+ * @returns {{period: string, changeSegment: boolean}}
+ * returns an object storing the time period and boolean indicating if the segmented control should be changed
+ */
+function setChangeSegmentVars(numHour, userEntry) {
+  if (numHour > 12 && numHour < 24) {
+    return {
+      "period": "PM",
+      "changeSegment": true
+    };
+  } else if (numHour < 1) {
+    return {
+      "period": "AM",
+      "changeSegment": true
+    };
+  } else {
+    if (userEntry === false) {
+      return {
+        "period": "AM",
+        "changeSegment": true
+      };
+    } else {
+      return {
+        "period": "AM",
+        "changeSegment": false
+      };
+    }
+  }
+}
+
+/**
+ * convertTo12hrFormat(numHour, minutes)
+ * @param numHour
+ * @param minutes
+ * @returns {string}
+ * returns a string converting a 24hr time format to a 12hr format
+ */
+function convertTo12hrFormat(numHour, minutes) {
+  if (numHour > 12) {
+    numHour = numHour - 12;
+  } else if (numHour < 1) {
+    numHour = numHour + 12;
+  }
+  var newHour = numHour.toString();
+  if (newHour.length < 2) {
+    newHour = "0" + newHour;
+  }
+  return newHour + minutes;
+}
+
+/**
+ * convertTo24hrFormat(activeSegment, hour, minutes)
+ * @param activeSegment
+ * @param hour
+ * @param minutes
+ * @returns {string}
+ * returns a string converting a 12hr time format to a 24hr format
+ */
+function convertTo24hrFormat(activeSegment, hour, minutes) {
+  var newHour = parseInt(hour);
+  if (activeSegment === 'PM') {
+    hour = newHour + 12;
+    if (hour === 24) {
+      hour = hour - 12;
+    }
+  } else {
+    if (newHour === 12) {
+      hour = newHour - 12 + "0";
+    }
+  }
+  return hour + ":" + minutes;
+}
+
+/**
+ * parseInputValue()
+ * Takes the time value and returns hours, minutes and the current segment
+ * @returns {{hours: string, minutes: string, segment: string}}
+ */
+function parseInputValue() {
+  this._internalVars.timeInputSegmentSelection = this._internalVars.timeInputObject.querySelector('.' + this._internalVars.activeClass);
+  var activeElementText = this._internalVars.timeInputSegmentSelection.innerHTML,
+    minutes = this._internalVars.timeInputField.value.slice(-2),
+    hours = this._internalVars.timeInputField.value.substring(0, 2);
+  return {
+    "hours": hours,
+    "minutes": minutes,
+    "segment": activeElementText
+  };
+}
+
+/**
+ * getCurrentValue()
+ * Set a local variable and stores the current time
+ */
+function getCurrentValue() {
+  var timeEntry = parseInputValue.call(this);
+  if (timeEntry.hours.length !== 0 && timeEntry.minutes.length !== 0) {
+    this._internalVars.timeInputFieldCurrentValue = convertTo24hrFormat.call(this, timeEntry.segment, timeEntry.hours, timeEntry.minutes);
+  } else {
+    this._internalVars.timeInputFieldCurrentValue = '__:__';
+  }
+  this._internalVars.timeInputCompare = true;
+}
+
+/**
+ * setSegmentValue()
+ * Sets a new value for the segmented control when the user changes the segment manually
+ */
+function setSegmentValue() {
+  var timeEntry = parseInputValue.call(this);
+  if (timeEntry.hours.length !== 0 && timeEntry.minutes.length !== 0) {
+    if (timeEntry.segment === "AM") {
+      timeEntry.segment = "PM";
+    } else {
+      timeEntry.segment = "AM";
+    }
+    this._internalVars.timeInputFieldCurrentValue = convertTo24hrFormat.call(this, timeEntry.segment, timeEntry.hours, timeEntry.minutes);
+    this._internalVars.timeInputCompare = true;
+    getValue.call(this);
+  }
+}
+
+/**
+ * checkKey(event)
+ * @param event
+ * check if numbers or backspace was pressed
+ */
+function checkKey(event) {
+  //Check the key pressed to trigger function (keys 0-9 and 'backspace')
+
+  if (event.which > 47 && event.which < 58 || event.which === 8 || event.which > 95 && event.which < 106 || event.which == 229) {
+    setTimePeriodVar.call(this);
+  }
+}
+
+/**
+ * setTimePeriodVar()
+ * set an AM or PM variable and evaluate if the segment should change
+ */
+function setTimePeriodVar() {
+  var hour,
+    userEntry = true;
+
+  //Desktops/iOS recognize the input mask as a value when checking the length, Android does not
+  if (this._internalVars.timeInputField.value.length > 3) {
+    hour = this._internalVars.timeInputField.value.substring(2, 0);
+  }
+  if (this._internalVars.timeInputField.value.length === 3) {
+    hour = this._internalVars.timeInputField.value.substring(1, 0);
+  }
+  var segmentVars = setChangeSegmentVars(hour, userEntry);
+  updatePeriod.call(this, segmentVars.period, segmentVars.changeSegment);
+}
+
+/**
+ * updatePeriod(period, changeSegment)
+ * @param period
+ * @param changeSegment
+ * changes the segmented control to AM or PM
+ */
+function updatePeriod(period, changeSegment) {
+  var activeIndex;
+  if (period === 'AM') {
+    activeIndex = 0;
+  } else {
+    activeIndex = 1;
+  }
+  this._internalVars.timeInputSegmentSelection = this._internalVars.timeInputObject.querySelector('.' + this._internalVars.activeClass);
+  if (period !== this._internalVars.timeInputSegmentSelection.innerHTML && changeSegment === true) {
+    var delay = setTimeout(setNewSegmentValue.bind(this), 350);
+    if (this._internalVars.timeInputSegmentSelection) {
+      this._internalVars.timeInputSegmentSelection.classList.remove(this._internalVars.activeClass);
+      this._internalVars.timeInputSegmentSelection.setAttribute('aria-checked', 'false');
+    }
+    this._internalVars.dropZoneObject[activeIndex].classList.add(this._internalVars.activeClass);
+    this._internalVars.dropZoneObject[activeIndex].setAttribute('aria-checked', 'true');
+    this._internalVars.draggableObject.classList.add(this._internalVars.animateClass);
+    this._internalVars.draggableObject.classList.add(this._internalVars.activeDragClass);
+    this._internalVars.draggableObject.innerText = '';
+    this._internalVars.draggableObject.style.zIndex = 1;
+    this._internalVars.timeInputSegmentSelection = this._internalVars.timeInputObject.querySelector('.' + this._internalVars.activeClass);
+    var activeElementLeft = this._internalVars.timeInputSegmentSelection.offsetLeft;
+    this._internalVars.draggableObject.style.left = activeElementLeft + 'px';
+    this._internalVars.draggableObject.setAttribute('data-x', activeElementLeft);
+    this._internalVars.timeInputSegmentChangeOnly = true;
+  }
+}
+
+/**
+ * setNewSegmentValue()
+ * sets values of element after animation
+ */
+function setNewSegmentValue() {
+  this._internalVars.timeInputSegmentSelection = this._internalVars.timeInputObject.querySelector('.' + this._internalVars.activeClass);
+  var activeElementContent = this._internalVars.timeInputSegmentSelection.innerHTML;
+  this._internalVars.draggableObject.innerHTML = activeElementContent;
+  this._internalVars.draggableObject.style.zIndex = 2;
+  this._internalVars.draggableObject.classList.remove(this._internalVars.animateClass);
+  this._internalVars.draggableObject.classList.remove(this._internalVars.activeDragClass);
+}
+
+/**
+ * segmentChange(event)
+ * @param event
+ * updates the segment visually when the user drops the segment selector
+ */
+function segmentChange(event) {
+  var period = event.target.innerHTML,
+    changeSegment = true,
+    timeEntry = parseInputValue.call(this);
+  updatePeriod.call(this, period, changeSegment);
+  if (timeEntry.hours.length !== 0 && timeEntry.minutes.length !== 0) {
+    getValue.call(this);
+  }
+}
+
+/**
+ * getValue()
+ * gets the value of the input field and segmented control selection
+ */
+function getValue() {
+  var timeEntry = parseInputValue.call(this);
+  if (timeEntry.hours < 24 && timeEntry.minutes < 60) {
+    if (timeEntry.hours < 13) {
+      this._internalVars.timeInputFieldValue = convertTo24hrFormat.call(this, timeEntry.segment, timeEntry.hours, timeEntry.minutes);
+    } else {
+      this._internalVars.timeInputFieldValue = timeEntry.hours + ":" + timeEntry.minutes;
+    }
+  } else if (timeEntry.hours >= 24 || timeEntry.minutes >= 60) {
+    this._internalVars.timeInputFieldValue = timeEntry.hours + ":" + timeEntry.minutes;
+  } else {
+    this._internalVars.timeInputFieldValue = "";
+  }
+  if (this._options.callBackOnTimeChange && this._internalVars.publicMethodUsed === false) {
+    if (this._internalVars.timeInputFieldCurrentValue === '__:__' || this._internalVars.timeInputFieldValue !== this._internalVars.timeInputFieldCurrentValue && this._internalVars.timeInputCompare === true) {
+      this._options.callBackOnTimeChange(this._internalVars.timeInputFieldValue);
+      this._internalVars.timeInputCompare = false;
+    } else if (this._internalVars.timeInputSegmentChangeOnly === true) {
+      this._options.callBackOnTimeChange(this._internalVars.timeInputFieldValue);
+      this._internalVars.timeInputSegmentChangeOnly = false;
+    }
+  }
+  this._internalVars.publicMethodUsed = false;
+}
+
+/**
+ * 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.timeInputObject = this._internalVars.node;
+  this._internalVars.timeInputFieldClass = 'time-input';
+  this._internalVars.segmentedControlClass = 'segmented-control-component';
+  this._internalVars.activeClass = 'active';
+  this._internalVars.dropZoneClass = '.dropzone';
+  this._internalVars.draggableClass = '.sc-draggable';
+  this._internalVars.activeDragClass = 'active-drag';
+  this._internalVars.animateClass = 'animate-drop';
+  this._internalVars.segmentedControlObject = this._internalVars.timeInputObject.querySelector('.' + this._internalVars.segmentedControlClass);
+  this._internalVars.timeInputField = this._internalVars.timeInputObject.querySelector('.' + this._internalVars.timeInputFieldClass);
+  this._internalVars.dropZoneObject = this._internalVars.timeInputObject.querySelectorAll(this._internalVars.dropZoneClass);
+  this._internalVars.draggableObject = this._internalVars.timeInputObject.querySelector(this._internalVars.draggableClass);
+  this._internalVars.timeInputFieldValue = this._internalVars.timeInputField.value;
+  this._internalVars.timeInputFieldCurrentValue = null;
+  this._internalVars.timeInputSegmentSelection = null;
+  this._internalVars.timeInputCompare = false;
+  this._internalVars.timeInputSegmentChangeOnly = null;
+  this._internalVars.publicMethodUsed = false;
+}
+var _default = exports["default"] = TimeInput;