@qhealth-design-system/core 1.0.38

package/src/components/_global/js/global.js

@@ -0,0 +1,302 @@
+(function(QLD) {
+    "use strict";
+    
+    /**
+     * The main namespace for all QLDDS functions and variables
+     * @module _global
+     */
+    var QLD = QLD ? QLD : {};
+    QLD.utils = {
+        /**
+         * Add 'js' body class if JS is enabled on the page
+         * 
+         * @memberof module:_global
+         */
+        'browserJS': function() {
+            document.querySelector("html").classList.remove("no-js");
+            document.querySelector("html").classList.add("js");
+        },
+        
+        /**
+        * Returns a function, that, as long as it continues to be invoked, will not 
+        * be triggered. The function will be called after it stops being called for 
+        * N milliseconds. If `immediate` is passed, trigger the function on the 
+        * leading edge, instead of the trailing.
+        * https://davidwalsh.name/javascript-debounce-function
+        * 
+        * @memberof module:_global
+        * 
+        * @param {function} func 
+        * @param {number} wait 
+        * @param {boolean} immediate 
+        * 
+        * @returns {function}
+        */
+        'debounce': function (func, wait, immediate) {
+            var timeout;
+            return function () {
+                var context = this,
+                    args = arguments;
+                var later = function () {
+                    timeout = null;
+                    if (!immediate) func.apply(context, args);
+                };
+                var callNow = immediate && !timeout;
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+                if (callNow) func.apply(context, args);
+            };
+        },
+
+        /**
+         * Convert nodeList to Array (for IE11)
+         * 
+         * @memberof module:_global
+         * 
+         * @param {*} node_list 
+         * 
+         * @returns {Node[]}
+         */
+        'listToArray': function(node_list) {
+            return Array.prototype.slice.call(node_list);
+        },
+
+        /**
+         * Set browser cookie
+         * 
+         * @memberof module:_global
+         * 
+         * @param {string} cookie_name 
+         * @param {string} cookie_value 
+         */
+        'setCookie': function(cookie_name, cookie_value) {
+            var cookie_entry = cookie_name + '=' + encodeURIComponent(cookie_value) + ';';
+            document.cookie = cookie_entry + '; path=/;';
+        },
+        /**
+         * Get browser cookie
+         * 
+         * @memberof module:_global
+         * 
+         * @param {string} cookie_name 
+         * 
+         * @returns {c_value}
+         */
+        'getCookie': function(cookie_name) {
+            var c_value = " " + document.cookie;
+            var c_start = c_value.indexOf(" " + cookie_name + "=");
+            if (c_start == -1) {
+                c_value = null;
+            }
+            else {
+                c_start = c_value.indexOf("=", c_start) + 1;
+                var c_end = c_value.indexOf(";", c_start);
+                if (c_end == -1) {
+                    c_end = c_value.length;
+                }
+                c_value = unescape(c_value.substring(c_start,c_end));
+            }
+            return c_value;
+        },
+        /**
+         * Set browser local storage
+         * 
+         * @memberof module:_global
+         * 
+         * @param {string} storage_key
+         * @param {string} storage_value 
+         */
+        'setLocalStorage': function(storage_key, storage_value) {
+            if (typeof(storage_value) !== 'string') {
+                storage_value = JSON.stringify(storage_value);
+            }
+        
+            localStorage.setItem(storage_key, storage_value);
+        },
+        /**
+         * Get browser local storage from key
+         * 
+         * @memberof module:_global
+         * 
+         * @param {string} storage_key 
+         * 
+         * @returns {localStorage.getItem(storage_key)}
+         */
+        'getLocalStorage': function(storage_key) {
+            return localStorage.getItem(storage_key);
+        },
+        /**
+         * Remove browser local storage item by key
+         * 
+         * @memberof module:_global
+         * 
+         * @param {string} storage_key 
+         */
+        'removeLocalStorage': function(storage_key) {
+            localStorage.removeItem(storage_key);
+        },
+        /**
+         * Determine the location of the user using HTML5 geolocation
+         * 
+         * @memberof module:_global
+         * 
+         * @param {Boolean} override
+         * @param {function} errorCallback
+         */
+        'geolocateUser': function(override, errorCallback) {
+            
+            var userLocationStorage = QLD.utils.getLocalStorage('qld_user_location');
+            if(userLocationStorage !== null && !override) {
+                return JSON.parse(userLocationStorage);
+            }
+
+            if (navigator.geolocation) {
+
+                QLD.utils.setLoadingState(true);
+                navigator.geolocation.getCurrentPosition(function(position) {
+                    var location = {
+                        "latitude": position.coords.latitude,
+                        "longitude": position.coords.longitude,
+                        "isGeolocated": true,
+                        "location": ''
+                    };
+
+                    QLD.utils.setUserLocation(location);
+                    QLD.utils.removeLocalStorage('deny-location');
+                    return `${position.coords.latitude},${position.coords.longitude}`;
+                }, function(error) {
+                    console.log(error);
+                    QLD.utils.setLoadingState(false);
+                    if (errorCallback) {
+                        errorCallback();
+                    }
+                    return false;
+                }, { timeout: 10000 });
+
+            } else {
+                console.log('Unable to locate');
+                if (errorCallback) {
+                        errorCallback();
+                    }
+                return false;
+            }
+        },
+
+        /**
+         * Set the user location, including the HHS
+         * 
+         * @memberof module:_global
+         * 
+         * @param {object} location 
+         */
+        'setUserLocation': function(location, refresh = true) {
+            // If there is a site-wide HHS configured
+            var hhsDiv = document.getElementById('qld__hhs');
+
+            if (hhsDiv !== null && typeof(serviceFinderData) !== 'undefined') {
+                var hhsId = hhsDiv.getAttribute('data-hhs');
+                serviceFinderData.collection('hhs').doc(hhsId).get().then((response) => {
+                    location.hhs_id = hhsId;
+                    location.hhs_name = response.name;
+
+                    QLD.utils.setUserLocationInStorage(location, refresh);
+                });
+                
+            } else {
+                QLD.utils.setUserLocationInStorage(location, refresh);
+            }
+        },
+
+        /**
+         * Set the 'qld_user_location' cookie based on a provided location object
+         * 
+         * @memberof module:_global
+         * 
+         */
+        'setUserLocationInStorage': function(newLocation, refresh) {
+            QLD.utils.setLocalStorage('qld_user_location', JSON.stringify(newLocation));
+
+            if(refresh) {
+                QLD.utils.setLoadingState(true);
+                
+                setTimeout(function() {
+                    window.location.reload(false);
+                }, 300);
+            }
+        },
+        /**
+         * Check the 'qld_user_location' cookie to determine
+         * whether the user is geolocated
+         * 
+         * @memberof module:_global
+         * 
+         * @return {boolean}
+         * 
+         */
+        'isGeolocated': function() {
+            var userLocationStorage = QLD.utils.getLocalStorage('qld_user_location');
+            var userLocationData = {};
+
+            if(userLocationStorage !== null) {
+                userLocationData = JSON.parse(userLocationStorage);
+            }
+
+            if(Object.keys(userLocationData).length > 0) {
+
+                return userLocationData.isGeolocated;
+            }
+
+            return false;
+        },
+        /**
+         * Set the loading state of the page. If 'true',
+         * this will show a loader animation overlay over
+         * the entire page. Use 'false' to remove this
+         * same animation
+         * 
+         * @memberof module:_global
+         * 
+         * @param {Boolean} isLoading 
+         */
+        'setLoadingState': function(isLoading) {
+            var loader = document.querySelector('.loader');
+            
+            if (loader === null) {
+                loader = document.createElement('div');
+                loader.classList.add('loader');
+                var parentNode = document.querySelector('.main');
+                parentNode.insertBefore(loader, parentNode.firstChild);
+            }
+
+            if (isLoading) {
+                loader.parentNode.classList.add('loading');
+            } else {
+                document.querySelector('.loading').classList.remove('loading');
+            }
+        },
+        /**
+         * Get Paramater from URL by name
+         * 
+         * @memberof module:_global
+         * 
+         * @param {*} name
+         */
+        'getParamaterByName': function(name){
+            name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+            var regexS = "[\\?&]"+name+"=([^&#]*)";
+            var regex = new RegExp( regexS );
+            var results = regex.exec( window.location.href );
+            if( results == null )
+              return "";
+            else
+              return decodeURIComponent(results[1].replace(/\+/g, " "));
+          }
+    };
+
+    // Make QLD variable available to the console for debugging
+    window.QLD = QLD;
+
+    QLD.utils.browserJS();
+    
+
+})(window.QLD);

package/src/components/_global/js/manifest.json

@@ -0,0 +1,11 @@
+{
+	"component": {
+		"name": "Global",
+		"description": "",
+		"version": "1.0",
+		"status": "Released",
+		"type":"design"
+	},
+	"data": {
+	}
+}

package/src/components/_global/js/modal/global.js

@@ -0,0 +1,236 @@
+/**
+ * Modal module
+ */
+ (function (QLD) {
+
+    /**
+     * @module Modal
+     */
+    var Modal = {
+
+        // Vars
+        'events': {},
+        'callbackFns': {},
+
+        /**
+         * Initialise a specific modal
+         * 
+         * @memberof module:Modal
+         * 
+         * @param {Node} modalBtn The modal button element
+         */
+        'init': function(modalBtn) {
+
+            // Init single modal btn
+            if (typeof(modalBtn) !== 'undefined') {
+                modalBtn.addEventListener('click', Modal.open);
+
+            // Else init all modal buttons on the page
+            } else {
+                var modalBtns = document.querySelectorAll('.qld__open-modal');
+                modalBtns.forEach((modalBtn) => {
+                    modalBtn.addEventListener('click', Modal.open);
+                });
+            }
+        },
+
+        /**
+         * Open the modal
+         * 
+         * @memberof module:Modal
+         * 
+         * @param {Document.event} e 
+         */
+        'open': function(e) {
+            let modalOpenBtn = e.currentTarget ? e.currentTarget : null;
+
+            if(modalOpenBtn !== null) {
+                var modalTarget = modalOpenBtn.getAttribute('data-modaltarget');
+                var modalEl = document.querySelector(`#${modalTarget}`);
+                var modalCloseBtns = modalEl.querySelectorAll('button[data-action="close"]');
+                var modalUnderlay = modalEl.querySelector('.qld__modal__underlay');
+            } else {
+                var modalEl = e.get(0);
+                var modalCloseBtns = modalEl.querySelectorAll('button[data-action="close"], button[data-action="deny-location"]');
+                var modalUnderlay = modalEl.querySelector('.qld__modal__underlay');
+            }
+
+            
+
+            // trap focus
+            // add all the elements inside modal that are focusable
+            let focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+            let firstFocusableElement = modalEl.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
+            let focusableContent = modalEl.querySelectorAll(focusableElements);
+            let lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
+
+            // Add keydown listener
+            Modal.events.keydown = Modal.addEvent(document, 'keydown', function(e) {
+                // ESC
+                if (e.keyCode === 27) {
+                    modalOpenBtn.focus();
+                    Modal.close(e);
+                    return;
+                }
+
+                let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+                if (!isTabPressed) {
+                    return;
+                }
+
+                if (e.shiftKey) { // if shift key pressed for shift + tab combination
+                    if (document.activeElement === firstFocusableElement || document.activeElement === modalEl) {
+                        lastFocusableElement.focus(); // add focus for the last focusable element
+                        e.preventDefault();
+                    }
+                } else { // if tab key is pressed
+                    if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab
+                        firstFocusableElement.focus(); // add focus for the first focusable element
+                        e.preventDefault();
+                    }
+                }
+            });
+            
+            // Open modal
+            modalEl.classList.add('active');
+            modalEl.focus();
+
+            // Close button click listener
+            modalCloseBtns.forEach(function(button, index) {
+                Modal.events['close-' + index] = Modal.addEvent(button, 'click', function(e) {
+                    modalOpenBtn !== null ? modalOpenBtn.focus() : null;
+                    Modal.close(e);
+                });
+            });
+
+            // Modal underlay listener
+            if(modalUnderlay) {
+                Modal.events.underlay = Modal.addEvent(modalUnderlay, 'click', Modal.close);
+            }
+
+            // Add callback events
+            for (var key in Modal.callbackFns) {
+                var button = modalEl.querySelector('button[data-callback="' + key + '"]');
+                
+                if (button !== null) {
+                    Modal.events['callback-' + key] = Modal.addEvent(button, 'click', function(e) {
+                        Modal.close(e);
+                        var callbackKey = e.target.getAttribute('data-callback');
+                        Modal.callbackFns[callbackKey](e);
+                    });
+                }
+            }
+
+        },
+
+        /**
+         * Close the modal
+         * 
+         * @memberof module:Modal
+         * 
+         * @param {Document.event} e 
+         */
+        'close': function(e) {
+            console.log('close');
+            var modalEl = e.target.closest('.qld__modal');
+            modalEl.classList.remove('active');
+
+            for (var i in Modal.events) {
+                var event = Modal.events[i];
+                Modal.removeEvent(event);
+            }
+        },
+
+        /**
+         * Object representing an event listener
+         * 
+         * @typedef {Object} event
+         * @property {Node} element             Element the event is attached to
+         * @property {function} handler         Event handler function
+         * @property {document#event} event     DOM event to listen for
+         */
+
+        /**
+         * Add event listener
+         * 
+         * @memberof module:Modal
+         * @instance
+         * @private
+         * 
+         * @param {Node} element            DOM element to add event to
+         * @param {document#event} event    The event to listen for
+         * @param {function} rawHandler     The raw handler function
+         * @return {event}
+         */
+        'addEvent': function(element, event, rawHandler) {
+            // Using local functions instead of anonymous for event handler
+            function listenHandler(event) {
+                var handler = rawHandler.apply(this, arguments);
+                if (handler === false) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                return (handler);
+            }
+
+            // Make sure attachHandler is also going to work
+            function attachHandler() {
+                var handler = rawHandler.call(element, window.event);
+                if (handler === false) {
+                    window.event.returnValue = false;
+                    window.event.cancelBubble = true;
+                }
+                return (handler);
+            }
+
+            // Return the token and add the correct listener
+            if (element.addEventListener) {
+                element.addEventListener(event, listenHandler, false);
+                return {
+                    element: element,
+                    handler: listenHandler,
+                    event: event
+                };
+            } else {
+                element.attachEvent('on' + event, attachHandler);
+                return {
+                    element: element,
+                    handler: attachHandler,
+                    event: event
+                };
+            }
+        },
+
+
+        /**
+         * Remove event listener
+         * 
+         * @memberof module:Modal
+         * @instance
+         * @private
+         * 
+         * @param {event} token     The event to remove
+         */
+        'removeEvent': function(token) {
+            if (token.element.removeEventListener) {
+                token.element.removeEventListener(token.event, token.handler);
+            } else {
+                token.element.detachEvent('on' + token.event, token.handler);
+            }
+        }
+    };
+
+
+    // Add to global QLD module
+    var QLD = QLD ? QLD : {};
+    QLD.Modal = Modal;
+    window.QLD = QLD;
+
+    window.addEventListener('DOMContentLoaded', function () {
+        if (document.querySelector('.qld__open-modal') !== null) {
+            QLD.Modal.init();
+        }
+    });
+
+}(window.QLD));

package/src/components/_global/js/slick/global.js

@@ -0,0 +1,153 @@
+
+(function(QLD) {
+    "use strict";
+
+    /**
+     * @module carouselSlick
+     */
+     var carouselSlick = {};
+
+    /**
+     * Initialise the location finder
+     * 
+     * @memberof module:carouselSlick
+     */
+    carouselSlick.init = function() {
+        var $slick = $(`[data-action="slick-slider"]`);
+
+        var breakpoint = {
+            "Lg": 991,
+            "Md": 698,
+            "Sm": 399
+        };
+        var slickSettingsMobileOnly = {
+            slidesToShow: 1.3,
+            slidesToScroll: 1,
+            mobileFirst: true,
+            infinite: false,
+            centerMode: false,
+            arrows: true,
+            prevArrow: '<button class="qld__slick-prev"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></button>',
+            nextArrow: '<button class="qld__slick-next"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></button>',
+            responsive: [
+                {
+                    breakpoint: breakpoint.Md,
+                    settings: 'unslick'
+                }
+            ]
+        };
+
+        var slickSettingsThree = {
+            slidesToShow: 1.4,
+            slidesToScroll: 1,
+            mobileFirst: true,
+            infinite: false,
+            centerMode: false,
+            arrows: true,
+            dots: false,
+            appendArrows: '',
+            appendArrows: '',
+            prevArrow: '<button class="qld__slick-prev"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></button>',
+            nextArrow: '<button class="qld__slick-next"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></button>',
+            responsive: [
+                {
+                    breakpoint: breakpoint.Lg,
+                    settings: {
+                      slidesToShow: 3,
+                      slidesToScroll: 3
+                    }
+                },
+                {
+                    breakpoint: breakpoint.Md,
+                    settings: {
+                      slidesToShow: 2,
+                      slidesToScroll: 2
+                    }
+                }
+            ]
+        }
+
+        var slickSettingsFour = {
+            slidesToShow: 1.4,
+            slidesToScroll: 1,
+            mobileFirst: true,
+            infinite: false,
+            centerMode: false,
+            arrows: true,
+            dots: false,
+            appendArrows: '',
+            appendDots: '',
+            prevArrow: '<button class="qld__slick-prev"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></button>',
+            nextArrow: '<button class="qld__slick-next"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></button>',
+            responsive: [
+                {
+                    breakpoint: breakpoint.Lg,
+                    settings: {
+                      dots: true,
+                      slidesToShow: 4,
+                      slidesToScroll: 4
+                    }
+                },
+                {
+                    breakpoint: breakpoint.Md,
+                    settings: {
+                      slidesToShow: 2,
+                      slidesToScroll: 2
+                    }
+                }
+            ]
+        }
+
+        if($slick.length) {
+            $slick.each(function() {
+                var $this = $(this);
+                if ($this.attr('data-type') == 'mobile-only' && $this.children('li').length > 1) {
+                    slickSettingsMobileOnly.appendArrows = $this.next().find('.qld__slick-controls');
+                    $this.slick(slickSettingsMobileOnly);
+                } else if ($this.attr('data-type') == 'one'){
+                    slickSettingsMobileOnly.appendArrows = $this.next().find('.qld__slick-controls');
+                    slickSettingsMobileOnly.appendDots = $this.next().find('.qld__slick-controls');
+                    $this.slick(slickSettingsMobileOnly);
+                }
+                else if ($this.attr('data-type') == 'two'){
+                    slickSettingsMobileOnly.appendArrows = $this.next().find('.qld__slick-controls');
+                    slickSettingsMobileOnly.appendDots = $this.next().find('.qld__slick-controls');
+                    $this.slick(slickSettingsMobileOnly);
+                }
+                 else if ($this.attr('data-type') == 'four'){
+                    slickSettingsFour.appendArrows = $this.next().find('.qld__slick-controls');
+                    slickSettingsFour.appendDots = $this.next().find('.qld__slick-controls');
+                    $this.slick(slickSettingsFour);
+                } else if ($this.attr('data-type') == 'three'){
+                    slickSettingsThree.appendArrows = $this.next().find('.qld__slick-controls');
+                    slickSettingsThree.appendDots = $this.next().find('.qld__slick-controls');
+                    $this.slick(slickSettingsThree);
+                }
+            });
+
+            $(window).on("resize", function () {
+                if ($(window).width() > breakpoint.Md) {
+                    return;
+                }
+
+                $slick.each(function() {
+                    var $this = $(this);
+
+                    if (!$this.hasClass("slick-initialized") && $this.attr('data-type') == 'mobile-only' && $this.children('li').length > 1) {
+                        $this.slick(slickSettingsMobileOnly);
+                    }
+                });
+            });
+        }
+    }
+
+    var QLD = QLD ? QLD : {};
+    QLD.carouselSlick = carouselSlick;
+    window.QLD = QLD;
+
+    document.addEventListener("DOMContentLoaded", function(event) {
+        if ($(`[data-action="slick-slider"]`).length > 0) {
+            QLD.carouselSlick.init();
+        }
+    });
+}(window.QLD));