geico-design-kit 7.0.0

package/src/components/Accordion.js

@@ -0,0 +1,336 @@
+import baseComponent from '../../src/baseComponent';
+import UserAgentService from '../../src/services/UserAgentService';
+
+const validateSettings = [
+    {
+        setting                 :   "content",
+        isRequired              :   true,
+        validate                :   "type",
+        possibleValues          :   ["string","object"],
+        errorMessage            :   ["GDK Accordion : Content must be defined and set to a DOM selector or Node"]
+    },
+    {
+        setting                 :   "initiallyOpenedElement",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["string","object"],
+        errorMessage            :   ["GDK Accordion : Content must be defined and set to a DOM selector or Node"]
+    },
+    {
+        setting                 :   "shouldCloseOthers",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["boolean"],
+        errorMessage            :   ["GDK Accordion : shouldCloseOthers must be set to a boolean"]
+    },
+/**
+ * Design Kit DEVELOPERS USE ONLY:
+ *
+ * forceOpenSingleAccordionElement is to be used only when there is a single, forced opened element of the accordion
+ * Case Study: Mobile Navigation when there is a single Tier 1 element, which is forcefully opened in the mobile view,
+ * so it won't require additional click to open when user use the navigation.
+ *
+ * NOTE: The force-open element DO NOT have accordion functionality to retract and stays expanded at all times.
+ */
+    {
+        setting                 :   "forceOpenSingleAccordionElement",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["boolean"],
+        errorMessage            :   ["GDK Accordion : forceOpenSingleAccordionElement must be set as a boolean"]
+    },
+    {
+        setting                 : "accordionOpenClicked",
+        isRequired              : false,
+        validate                : "type",
+        possibleValues          : ["function"],
+        errorMessage            : ["GDK Accordion : accordionOpenClicked must be a function"]
+    },
+    {
+        setting                 : "accordionCloseClicked",
+        isRequired              : false,
+        validate                : "type",
+        possibleValues          : ["function"],
+        errorMessage            : ["GDK Accordion : accordionCloseClicked must be a function"]
+    }
+];
+
+class Accordion{
+
+    /**
+     * 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 accordion node
+     *
+     * @param {string|Object} initiallyOpenedElement
+     * A reference to the html accordion li tag element that should be opened on start
+     *
+     * @param {boolean} [shouldCloseOthers="true"]
+     * Used to set URL target to open in same page or in a new window/tab
+     *
+     * @param {function} [accordionOpenClicked]
+     * A callback function that gets fired when an accordion tab opens up. Param currentNode is optional and refers to the target clicked.
+     *
+     * @param {function} [accordionCloseClicked]
+     *  A callback function that gets fired when an accordion tab closes. Param currentNode is optional and refers to the target clicked.
+     */
+    constructor(options) {
+
+        this._internalVars = {
+            node: null,//used for content item
+            headline:null,
+            contentContainer:null,
+            content:null
+        };
+
+        //options with defaults set
+        this._defaults = {
+            shouldCloseOthers : true,
+            forceOpenSingleAccordionElement : false
+        };
+
+        // 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._options.initiallyOpenedElement) {
+                openInitialElements.call(this);
+            }
+            let allAccordionHeadlines = this._internalVars.node.querySelectorAll('.accordion-headline');
+            Array.prototype.forEach.call(allAccordionHeadlines, function(el, i){
+                if(!el.getAttribute('tabindex'))
+                    el.setAttribute('tabindex', '0');
+
+                el.setAttribute('role', 'button');
+            });
+        }
+
+        window.addEventListener('resize', () => {
+            //handleResize.call(this);
+        });
+    }
+
+    //Public Methods
+
+    /**
+     * 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
+/**
+ * openInitialElement()
+ * a private method which is only invoked when the initiallyOpenedElement property is set.
+ */
+function openInitialElements() {
+    let element;
+    if(typeof this._options.initiallyOpenedElement === 'string') {
+        element = this._internalVars.node.querySelector(this._options.initiallyOpenedElement);
+        openAccordionElement.call(this, element);
+    } else if(typeof this._options.initiallyOpenedElement === 'object') {
+        element = this._options.initiallyOpenedElement;
+        openAccordionElement.call(this, element);
+    }
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+
+    if (this._internalVars.node.childElementCount == 1 && this._options.forceOpenSingleAccordionElement) {
+        console.log("The single element will be forced opened");
+        forceOpenAccordion(this._internalVars.node.children[0]);
+    } else {
+        const eventName = UserAgentService._clickEventName();
+
+        Array.prototype.forEach.call(this._internalVars.headline, (el, i)=>{
+            el.addEventListener(eventName,this._internalVars.handler);
+            el.addEventListener("keyup", this._internalVars.handler);
+            el.addEventListener('keyup', function(e){
+                if(e.shiftKey && e.keyCode == 9 || e.keyCode == 9){
+                    el.classList.add('keyboard-focus');
+                }
+
+            });
+            el.addEventListener('blur', function(e){
+                    el.classList.remove('keyboard-focus');
+
+
+            });
+        });
+    }
+}
+
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+    const eventName = UserAgentService._clickEventName();
+
+    Array.prototype.forEach.call(this._internalVars.headline, (el, i)=>{
+        el.removeEventListener(eventName,this._internalVars.handler);
+    });
+}
+
+/**
+ * toggleAccordion()
+ * opens or closes an accordions content
+ *
+ * @param  {Object} node    DOM node that was clicked
+ */
+function toggleAccordion(el) {
+    if(el.type == 'keypress' || el.type == 'keyup' && ((el.keyCode || el.which) != 13)){
+        return;
+    }
+
+    let currentNode = el.currentTarget;
+    let parentNode = currentNode.parentNode;
+    let contentContainer = parentNode.querySelector(".accordion-content-container");
+    let content = contentContainer.querySelector(".accordion-content");
+
+    if(!contentContainer.parentNode.classList.contains('open')){
+        if (this._options.accordionOpenClicked)
+        if(this._options.accordionOpenClicked(currentNode)===false) return false;
+        if(this._options.shouldCloseOthers){
+            closeAccordions.call(this);
+        }
+
+        parentNode.classList.add("open");
+        $(contentContainer).slideDown();
+        currentNode.setAttribute('aria-expanded', 'true');
+        contentContainer.setAttribute('aria-hidden', 'false');
+    } else {
+        if (this._options.accordionCloseClicked)
+        if(this._options.accordionCloseClicked(currentNode)===false) return false;
+        parentNode.classList.remove("open");
+        $(contentContainer).slideUp();
+        currentNode.setAttribute('aria-expanded', 'false');
+        contentContainer.setAttribute('aria-hidden', 'true');
+    }
+
+}
+
+/**
+ * openAccordionElement(element)
+ * @param element
+ * @returns {boolean}
+ *
+ * private method to simply open the element that have been passed as parameter (no events)
+ */
+function openAccordionElement(element) {
+    let contentContainer = element.querySelector(".accordion-content-container");
+    let nodeHeadline = element.querySelector('.accordion-headline');
+    let content = contentContainer.querySelector(".accordion-content");
+
+    if(!contentContainer.parentNode.classList.contains('open')){
+        if (this._options.accordionOpenClicked)
+            if(this._options.accordionOpenClicked(nodeHeadline)===false) return false;
+        if(this._options.shouldCloseOthers){
+            closeAccordions.call(this);
+        }
+
+        $(contentContainer).slideDown();
+        element.classList.add("open");
+        nodeHeadline.setAttribute('aria-expanded', 'true');
+        contentContainer.setAttribute('aria-hidden', 'false');
+    } else {
+        if (this._options.accordionCloseClicked)
+            if(this._options.accordionCloseClicked(nodeHeadline)===false) return false;
+        element.classList.remove("open");
+        $(contentContainer).slideUp();
+        nodeHeadline.setAttribute('aria-expanded', 'false');
+        contentContainer.setAttribute('aria-hidden', 'true');
+    }
+}
+
+function forceOpenAccordion(el) {
+    el.classList.add('force-open');
+}
+
+/**
+ * closeAccordions()
+ * closes all open accordains
+ */
+function closeAccordions() {
+
+    let openAccordians = this._internalVars.node.parentNode.querySelectorAll(".accordion > li.open");
+    Array.prototype.forEach.call(openAccordians, (el, i)=>{
+        el.classList.remove("open");
+        let contentContainer = el.querySelector(".accordion-content-container");
+        el.querySelector('.accordion-headline').setAttribute('aria-expanded', 'false');
+        contentContainer.setAttribute('aria-hidden', 'true');
+        $(contentContainer).slideUp();
+    });
+
+}
+
+/**
+ * setLocalVars()
+ * recalulates the max height when you resize the browser
+ */
+function handleResize() {
+    if(this._internalVars.node.parentNode){
+    let openAccordions = this._internalVars.node.parentNode.querySelectorAll(".accordion > li.open");
+    Array.prototype.forEach.call(openAccordions, (el, i)=>{
+
+        let contentContainer = el.querySelector(".accordion-content-container");
+        let content = contentContainer.querySelector(".accordion-content");
+
+
+
+    });}
+}
+
+/**
+ * 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.headline = this._internalVars.node.querySelectorAll(".accordion-headline");
+    let allLIAccordions = this._internalVars.node.parentNode.querySelectorAll(".accordion > li");
+
+    Array.prototype.forEach.call(allLIAccordions, (el, i)=>{
+        if(el.classList.contains('open')){
+            el.querySelector('.accordion-headline').setAttribute('aria-expanded', 'true');
+            el.querySelector('.accordion-content-container').setAttribute('aria-hidden', 'false');
+        }else{
+            el.querySelector('.accordion-headline').setAttribute('aria-expanded', 'false');
+            el.querySelector('.accordion-content-container').setAttribute('aria-hidden', 'true');
+        }
+    });
+
+    this._internalVars.handler = toggleAccordion.bind(this);
+}
+
+
+export default Accordion;

package/src/components/AddressAutoComplete.js

@@ -0,0 +1,236 @@
+//Require static assets
+
+/*
+ Problems:
+ 1)      Requiring a specific ID – The code as-is requires a specific ID for the search field (code: let input = document.querySelector('#address-search-field');).  This requires that we only use 1 instance of this address autocomplete on the screen at one time and forces us to use specific IDs. I’ve complained about this pattern repeatedly over the last couple years and it still seems to be the go to solution for the design team implementations of things. (NOTE: it also requires specific IDs for each and every field of the address that directly match data coming back from google’s apis.)
+ 2)      The implementation doesn’t seem to keep in mind anything related to single-page application design (regardless of technology):
+ a.       The implementation requires a global javascript function to be present at page load time.
+ b.      It presumes to know what the IDs and types of all the input fields are and auto-populates them with no ability to notify client code when this has occurred.  This screws up any kind of data binding technology (angular, knockout, etc)
+ 3)      It does not seem to include Zip +4 (which it looks like the Google APIs don’t return)
+ 4)      It hard codes English text (code:  message.innerHTML = 'No Results Found';)
+ 5)      It watches the entire document body for changes to see if a DOM node is inserted. (code:  document.body.addEventListener('DOMNodeInserted', function (event)…).  That can’t possibly be necessary.
+
+ Questions:
+ 1)      Is this supposed to be the new way all addresses are entered in the system, or just an optional component for teams to use? (did you talk to multiple teams to gather requirements or was this just implemented at the request of one team?)
+ */
+ import baseComponent from '../../src/baseComponent';
+ import UserAgentService from '../../src/services/UserAgentService';
+ 
+ 
+ const validateSettings = [
+   {
+     setting: "content",
+     isRequired: true,
+     validate: "type",
+     possibleValues: ["string", "object"],
+     errorMessage: ["GDK AddressAutoComplete : Content must be defined and set to a DOM selector or Node"]
+   }
+ ];
+ 
+ const ieVersion = UserAgentService._detectIE();
+ 
+ let ValueSelected = false;
+ let selector;
+ let event;
+ 
+ if(ieVersion) {
+   //set event for IE
+   console.log('This is the Windows IE Setup: ' + ieVersion);
+   event = document.createEvent('HTMLEvents');
+   event.initEvent('gdk-address-updated', true, true);
+ } else {
+   //set event for non IE
+   event = new Event('gdk-address-updated');
+ }
+ 
+ 
+ 
+ class AddressAutoComplete {
+ 
+ 
+   constructor(options) {
+ 
+     this._internalVars = {
+       node: null//used for content item
+     };
+ 
+     //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)) {
+       if (document.querySelector(this._options.content)) {
+         selector = this._options.content;
+         this._internalVars.contentType = baseComponent.getContentType(this);
+         setLocalVars.call(this);
+         setEvents.call(this);
+         init.call(this);
+       }
+     }
+ 
+ 
+   }
+ 
+   //Public Methods
+ 
+   // Bias the autocomplete object to the user's geographical location,
+   // as supplied by the browser's 'navigator.geolocation' object.
+   geolocate() {
+     if (navigator.geolocation) {
+       navigator.geolocation.getCurrentPosition(function (position) {
+         let geolocation = {
+           lat: position.coords.latitude,
+           lng: position.coords.longitude
+         };
+         let circle = new google.maps.Circle({
+           center: geolocation,
+           radius: position.coords.accuracy
+         });
+         this.autoComplete.setBounds(circle.getBounds());
+       });
+     }
+   }
+ 
+   getAddressObject() {
+     let formattedAddress = {
+       formatted_address: this._internalVars.placesObject.formatted_address,
+       address_components: this._internalVars.placesObject.address_components,
+       geolocation: this._internalVars.placesObject.geometry.location
+     };
+     return formattedAddress;
+   }
+ }
+ 
+ 
+ /**
+  * 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.addressSearchField = this._internalVars.node.querySelector('.address-search-field');
+   this._internalVars.searchClearBtn = this._internalVars.node.querySelector('.btn--search-clear');
+ 
+   // Create the autocomplete object, restricting the search to geographical
+   // location types.
+   this.autoComplete = new google.maps.places.Autocomplete(
+     /** @type {!HTMLInputElement} */(this._internalVars.addressSearchField), {types: ['geocode']});
+   this._internalVars.componentForm = {
+     street_number: 'short_name',
+     route: 'long_name',
+     locality: 'long_name',
+     administrative_area_level_1: 'short_name',
+     country: 'long_name',
+     postal_code: 'short_name'
+   };
+   this._internalVars.placesObject = {};
+ }
+ 
+ /**
+  * setEvents()
+  * Sets all the events needed for the component
+  */
+ function setEvents() {
+   this._internalVars.searchClearBtn.addEventListener('click', clearSearch.bind(this));
+   this._internalVars.addressSearchField.addEventListener('input', toggleClearButton.bind(this));
+ }
+ 
+ function clearSearch() {
+   this._internalVars.addressSearchField.value = '';
+   toggleClearButton.call(this);
+ }
+ 
+ function toggleClearButton() {
+ 
+   if(this._internalVars.addressSearchField.value !== '') {
+     this._internalVars.searchClearBtn.classList.remove('hidden');
+   } else {
+     this._internalVars.searchClearBtn.classList.add('hidden');
+   }
+ 
+ }
+ 
+ function init() {
+   console.log('stop here');
+   // Hide the search close button
+   if(this._internalVars.addressSearchField.value === '' && !this._internalVars.searchClearBtn.classList.contains('hidden')) {
+     this._internalVars.searchClearBtn.classList.add('hidden');
+   }
+ 
+   // When the user selects an address from the dropdown, populate the address
+   // fields in the form.
+   this.autoComplete.addListener('place_changed', fillInAddress.bind(this));
+ 
+   let styleInitialized = false;
+ 
+   if (document.querySelector(selector).querySelector('.address-search-field') !== null) {
+     document.querySelector(selector).querySelector('.address-search-field').addEventListener('blur', function (event) {
+       if (document.querySelector('.pac-container') && document.querySelector('.pac-container').children.length === 0 && event.target.value.length !== 0 && document.querySelector('.address_1').value.length === 0) {
+         document.querySelector('.address_1').value = event.target.value;
+         event.target.value = '';
+       }
+     });
+   }
+ 
+ }
+ 
+ 
+ function fillInAddress() {
+ 
+   console.log('new results :) ');
+ 
+   ValueSelected = true;
+ 
+   // Get the place details from the autocomplete object.
+   let place = this.autoComplete.getPlace();
+   this._internalVars.placesObject = place;
+ 
+   document.dispatchEvent(event);
+ 
+   // Reset All Fields
+   let address1Element = this._internalVars.node.querySelector('.address_1');
+   address1Element.value = '';
+   address1Element.disabled = false;
+   for (let component in this._internalVars.componentForm) {
+     if (component !== 'street_number' && component !== 'route' && this._internalVars.node.querySelector('.' + component) !== null) {
+       let element = this._internalVars.node.querySelector('.' + component);
+       element.value = '';
+       element.disabled = false;
+     }
+   }
+ 
+   // Get each component of the address from the place details
+   // and fill the corresponding field on the form.
+   for (let i = 0; i < place.address_components.length; i++) {
+     let addressType = place.address_components[i].types[0];
+     if (this._internalVars.componentForm[addressType]) {
+       let val = place.address_components[i][this._internalVars.componentForm[addressType]];
+       if (addressType === 'street_number') {
+         address1Element.value = val + ' ';
+       } else if (addressType === 'route') {
+         address1Element.value = address1Element.value + val;
+       } else {
+         if (this._internalVars.node.querySelector('.' + addressType)) {
+           this._internalVars.node.querySelector('.' + addressType).value = val;
+         }
+       }
+     }
+   }
+ 
+   clearSearch.call(this);
+ 
+   // document.querySelector(selector).value = '';
+ }
+ 
+ export default AddressAutoComplete;
+