geico-design-kit 7.0.0

package/src/components/MoreInfoButton.js

@@ -0,0 +1,243 @@
+import * as utils from '../../src/utils';
+import baseComponent from '../../src/baseComponent';
+import UserAgentService from '../../src/services/UserAgentService';
+
+const validateSettings = [
+    {
+        setting: "content",
+        isRequired: true,
+        validate: "type",
+        possibleValues: ["string", "object"],
+        errorMessage: ["GDK MoreInfoButton : Content must be defined and set to a DOM selector or Node"]
+    }
+];
+
+class MoreInfoButton {
+    /**
+     * 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 More Info Button node
+     */
+    constructor(options) {
+
+        console.log('MoreInfoButton initialized');
+
+        this._internalVars = {
+            node: null, //used for current node
+            button : null,
+            ul : null,
+            wrapperElementId : "wrapper",
+            wrapper : null
+        };
+
+        //options with defaults set
+        this._defaults = {};
+
+        // Create options by extending defaults with the passed in arugments
+        if (options && typeof options === "object") {
+            this._options = baseComponent.extendDefaults(this._defaults, options);
+        }
+
+
+        //if the required options are valid set up the environment
+        if( baseComponent.validateSettings(this._options, validateSettings) ){
+            this._internalVars.contentType = baseComponent.getContentType(this);
+            setLocalVars.call(this);
+            setEvents.call(this);
+
+            this._internalVars.button.setAttribute('aria-expanded', 'false');
+            this._internalVars.button.setAttribute('role', 'button');
+        }
+    }
+
+
+    /**
+    * destroy()
+    * removes the node from the dom and any events attached
+    */
+    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() {
+    const eventName = UserAgentService._clickEventName();
+
+    this._internalVars.node.addEventListener('mouseleave', this._internalVars.menuHandler);
+    this._internalVars.button.addEventListener("pointerdown", this._internalVars.checkTouchHandler);
+    this._internalVars.button.addEventListener(eventName, this._internalVars.toggleHandler);
+    this._internalVars.button.addEventListener("keydown", this._internalVars.keyHandler);
+}
+
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+    const eventName = UserAgentService._clickEventName();
+
+    this._internalVars.node.removeEventListener('mouseleave', this._internalVars.menuHandler);
+    this._internalVars.button.removeEventListener("pointerdown", this._internalVars.checkTouchHandler);
+    this._internalVars.button.removeEventListener(eventName, this._internalVars.toggleHandler);
+    this._internalVars.button.removeEventListener("keydown", this._internalVars.keyHandler);
+}
+
+function closeMenu(){
+        this._internalVars.ul.classList.remove("options-in");
+        this._internalVars.ul.classList.add("options-out");
+        this._internalVars.button.setAttribute('aria-expanded', 'false');
+        setTimeout( ()=> {
+            this._internalVars.ul.style.display = "none";
+        }, 300);
+
+}
+
+function checkForTouch(el){
+    console.log(el.pointerType);
+    if(el.pointerType=='touch'){
+        this._internalVars.node.removeEventListener('mouseleave', this._internalVars.menuHandler);
+    }else{
+        this._internalVars.node.addEventListener('mouseleave', this._internalVars.menuHandler);
+    }
+}
+
+/**
+ * toggleOptions()
+ * toggles the options view
+ */
+function toggleOptions() {
+
+    if(utils.hasClass(this._internalVars.ul, "options-in")){
+        this._internalVars.ul.classList.remove("options-in");
+        this._internalVars.ul.classList.add("options-out");
+        this._internalVars.button.setAttribute('aria-expanded', 'false');
+        setTimeout( ()=> {
+            this._internalVars.ul.style.display = "none";
+        }, 300);
+    }else{
+        this._internalVars.ul.style.display = "block";
+        this._internalVars.ul.classList.remove("options-out");
+        this._internalVars.ul.classList.add("options-in");
+        this._internalVars.button.setAttribute('aria-expanded', 'true');
+
+        checkUlPosistion.call(this);
+    }
+
+    
+}
+
+function keyOptions(e) {
+    if((e.type == 'keydown' || e.type == 'keypress') && ((e.keyCode || e.which) != 13))
+    {
+        return;
+    }else{
+        if(utils.hasClass(this._internalVars.ul, "options-out")){
+            this._internalVars.ul.style.display = "block";
+            this._internalVars.ul.classList.remove("options-out");
+            this._internalVars.ul.classList.add("options-in");
+            this._internalVars.button.setAttribute('aria-expanded', 'true');
+            let allA = this._internalVars.ul.querySelectorAll('a');
+            allA[0].focus();
+
+            checkUlPosistion.call(this);
+        }
+    }
+
+}
+
+/**
+ * toggleOptions()
+ * detect if there is enough space to see the whole menu when opened
+ * if not we need to scroll the body so there is enough space
+ */
+function checkUlPosistion() {
+
+    if((this._internalVars.ul.getBoundingClientRect().top + this._internalVars.ul.offsetHeight) > window.innerHeight){
+
+        let windowHeight = window.innerHeight;
+        let moreInfoHeight = (this._internalVars.ul.getBoundingClientRect().top + this._internalVars.ul.offsetHeight);
+        let neededSpace = moreInfoHeight - windowHeight;
+        
+        let currentScrollOffset = window.scrollY || window.pageYOffset;
+        let newScrollOffset = Math.round(currentScrollOffset + neededSpace);
+
+        scrollTo(newScrollOffset, 200); 
+    }
+}
+
+
+/**
+ * scrollTo()
+ * Scrolls to a specific point
+ * @param to
+ * @param duration
+ */
+function scrollTo(to, duration) {
+    var start = document.documentElement.scrollTop || document.body.scrollTop,
+        change = to - start,
+        currentTime = 0,
+        increment = 20;
+        
+    var animateScroll = function(){        
+        currentTime += increment;
+        var val = easeInOutQuad(currentTime, start, change, duration);
+        document.documentElement.scrollTop = val;
+        document.body.scrollTop = val;
+                                           
+        if(currentTime < duration) {
+            setTimeout(animateScroll, increment);
+        }
+    };
+    animateScroll();
+}
+
+/**
+* easeInQuad()
+* Quadratic easing
+*/
+function easeInOutQuad(t, b, c, d) {
+    t /= d/2;
+    if (t < 1) return c/2*t*t + b;
+    t--;
+    return -c/2 * (t*(t-2) - 1) + b;
+}
+
+
+
+/**
+ * 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.button = this._internalVars.node.querySelector(".more-info-button");
+    this._internalVars.ul = this._internalVars.node.querySelector("ul");
+    this._internalVars.wrapper = document.querySelector("#" + this._internalVars.wrapperElementId);
+
+    this._internalVars.menuHandler = closeMenu.bind(this);
+    this._internalVars.toggleHandler = toggleOptions.bind(this);
+    this._internalVars.keyHandler = keyOptions.bind(this);
+    this._internalVars.checkTouchHandler = checkForTouch.bind(this);
+}
+
+export default MoreInfoButton;

package/src/components/MultipleSelectBox.js

@@ -0,0 +1,211 @@
+import baseComponent from '../../src/baseComponent';
+
+const validateSettings = [
+  {
+    setting: "content",
+    isRequired: true,
+    validate: "type",
+    possibleValues: ["string", "object"],
+    errorMessage: ["GDK MultipleSelectBox : Content must be defined and set to a DOM selector or Node"]
+  },
+  {
+    setting: "config",
+    isRequired: false,
+    validate: "type",
+    possibleValues: ["object"],
+    errorMessage: ["GDK MultipleSelectBox : config may be defined and set as an object"]
+  },
+  {
+    setting: "initialOptions",
+    isRequired: false,
+    validate: "type",
+    possibleValues: ["object", "string"],
+    errorMessage: ["GDK MultipleSelectBox : initialOptions may be defined and set as an array"]
+  },
+  {
+    setting: "multiSelectChange",
+    isRequired: false,
+    validate: "type",
+    possibleValues: ["function"],
+    errorMessage: ["GDK MultipleSelectBox : multiSelectChange may be defined and set as a function"]
+  }
+
+];
+
+/**
+ * MultipleSelectBox class
+ */
+class MultipleSelectBox {
+
+  /**
+   * 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 multiple select box node
+   *
+   *  @param {Object} [initialOptions]
+   *  An array containing strings corresponding to 'value' attributes or numbers referencing the index of the select options
+   *
+   *  @param {function} [multiSelectChange]
+   *  A callback function that is triggered when an option is added or removed from the Multi-Select Box
+   */
+  constructor(options) {
+
+    this._internalVars = {
+      node: null,//used for current node
+      closeBtn: null
+    };
+
+    //options with defaults set
+    this._defaults = {
+      autoShow: false,
+      overlayShouldCloseModal: true,
+      hideCloseButton: false,
+      config: {
+        '.chosen-select': {},
+        '.chosen-select-deselect': {allow_single_deselect: true},
+        '.chosen-select-no-single': {disable_search_threshold: 10},
+        '.chosen-select-no-results': {no_results_text: 'Oops, nothing found!'},
+        '.chosen-select-width': {width: "auto"}
+      }
+    };
+
+    // Create options by extending defaults with the passed in arugments
+    if (options && typeof options === "object") {
+      this._options = baseComponent.extendDefaults(this._defaults, options);
+    }
+
+    //if the required options are valid set up the environment
+    if (baseComponent.validateSettings(this._options, validateSettings)) {
+      this._internalVars.contentType = baseComponent.getContentType(this);
+      setLocalVars.call(this);
+      init.call(this);
+      setEvents.call(this);
+    }
+
+  }
+
+  //Public Methods
+
+  /**
+   * sets the initial selected options
+   * @param {Object} array Array containing the index or option text of the items to be pre-selected
+   */
+  setInitialSelectionOptions(array) {
+    setInitialSelections.call(this, array);
+  }
+
+  /**
+   * Returns the current selected options
+   * @returns {Array} containing the selected options
+   */
+  activeSelections() {
+    return this._internalVars.selectedItems;
+  }
+
+  /**
+   * removes the node from the dom and any events attached
+   */
+  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];
+      }
+    }
+  }
+
+}
+
+function init() {
+  if (this._options.initialOptions) {
+    let array = this._options.initialOptions;
+
+    setInitialSelections.call(this, array);
+  }
+
+  for (let selector in this._options.config) {
+    $(selector).chosen(this._options.config[selector]);
+  }
+}
+
+function setEvents() {
+  $('#'+this._internalVars.node.id).chosen().on('change', updateValues.bind(this));
+}
+
+
+/**
+ * Sets the initial values pragmatically
+ * @param {array} array Array containing numbers or strings referencing options to be set by default
+ */
+function setInitialSelections(array) {
+
+  let initialValues = [];
+
+  Array.prototype.forEach.call(array, (item)=>{
+    if (typeof item === "string") {
+      Array.prototype.forEach.call(this._internalVars.node.options, (ele)=>{
+        if (item === ele.value) {
+          initialValues.push(item);
+        }
+      });
+    } else if (typeof item === "number") {
+      if (item >= 0 && item <= this._internalVars.node.options.length) {
+        if (item - Math.floor(item) === 0) {
+          let value = this._internalVars.node.options[item].value;
+          initialValues.push(value);
+        }
+      }
+    }
+  });
+
+  $('#'+this._internalVars.node.id).val(initialValues).trigger('chosen:updated');
+
+  updateValues.call(this);
+}
+
+/**
+ * creates an array of the chosen values
+ */
+function updateValues() {
+
+  let selectBox = $('#'+this._internalVars.node.id),
+      empty;
+
+  this._internalVars.selectedItems = [];
+
+  if (selectBox.val() !== null) {
+    Array.prototype.forEach.call(selectBox.val(), (element)=>{
+      Array.prototype.forEach.call(this._internalVars.node.options, (el)=>{
+        if (element === el.value) {
+          this._internalVars.selectedItems.push(el);
+        }
+      });
+    });
+    empty = false;
+  } else {
+    empty = true;
+  }
+
+  if(this._options.multiSelectChange) {
+    this._options.multiSelectChange(this._internalVars.selectedItems, empty);
+  }
+}
+
+/**
+ * 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.nodeParent = this._internalVars.node.parentNode;
+}
+
+export default MultipleSelectBox;

package/src/components/NavigationalBox.js

@@ -0,0 +1,163 @@
+import appState from '../../src/appState';
+
+import baseComponent from '../../src/baseComponent';
+import UserAgentService from '../../src/services/UserAgentService';
+
+const validateSettings = [
+    {
+        setting                 :   "content",
+        isRequired              :   true,
+        validate                :   "type",
+        possibleValues          :   ["string","object"],
+        errorMessage            :   ["GDK NavigationalBox : Content must be defined and set to a DOM selector or Node"]
+    },
+    {
+        setting                 :   "urlSetting",
+        isRequired              :   true,
+        validate                :   "type",
+        possibleValues          :   ["string"],
+        errorMessage            :   ["GDK NavigationalBox : urlSetting must be defined and set to a URL string"]
+    },
+    {
+        setting                 :   "targetSetting",
+        isRequired              :   false,
+        validate                :   "value",
+        possibleValues          :   ["_self","_blank"],
+        errorMessage            :   ["GDK NavigationalBox : targetSetting must be defined and set to '_self' or '_blank'"]
+    }
+];
+
+class NavigationalBox{
+
+    /**
+     * Refer to the design kit section of this component for JS examples and setting details.
+     * @param {string, Object} content
+     * A reference to the navigational box
+     *
+     * @param {string} urlSetting
+     * Used to set the initial URL for the navigational box
+     *
+     * @param {string} [targetSetting="_self"]
+     * Used to set URL target to open in same page or in a new window/tab
+     */
+    constructor(options) {
+
+        this._internalVars = {
+            node: null//used for content item
+        };
+
+        //options with defaults set
+        this._defaults = {
+            targetSetting : "_self"
+        };
+
+        // Create options by extending defaults with the passed in arugments
+        if (options && typeof options === "object") {
+            this._options = baseComponent.extendDefaults(this._defaults, options);
+        }
+
+        //if the required options are valid set up the environment
+        if( baseComponent.validateSettings(this._options, validateSettings) ){
+            this._internalVars.contentType = baseComponent.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', 'link');
+        }
+    }
+
+    //Public Methods
+    /**
+     * @param {string} [url]
+     * url is new URL string to set to component
+     */
+    setURL(url){
+        this._options.urlSetting = url;
+    }
+
+    /**
+     * @param {string} [target="_self"]
+     * target is new target string to set to component with '_self' or '_blank'
+     */
+    setTarget(target){
+        this._options.targetSetting = target;
+    }
+
+    /**
+     * destroy()
+     * removes the node from the dom and any events attached
+     */
+    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() {
+    const eventName = UserAgentService._clickEventName();
+
+    if(appState.mode == 'mobile' && appState.isTouchDevice === true && screen.width <= 480){
+        this._internalVars.node.addEventListener("click", this._internalVars.handler);
+    }else{
+        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() {
+    const eventName = UserAgentService._clickEventName();
+
+    this._internalVars.node.removeEventListener(eventName, this._internalVars.handler);
+    this._internalVars.node.removeEventListener("keyup", this._internalVars.handler);
+}
+
+/**
+ * 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.handler = redirectionToURL.bind(this);
+}
+
+function redirectionToURL(el){
+    if(el.type == 'keypress' || el.type == 'keyup' && ((el.keyCode || el.which) != 13)){
+        return;
+    }
+    if(appState.mode == 'desktop'){
+        window.open(this._options.urlSetting, this._options.targetSetting);
+    }else if(appState.mode == 'mobile'){
+        window.open(this._options.urlSetting, '_self');
+    }
+}
+
+
+export default NavigationalBox;