@qhealth-design-system/core 1.0.38

package/src/components/main_navigation/html/component.hbs

@@ -0,0 +1,87 @@
+<!-- MAIN NAVIGATION -->
+<nav class="qld__main-nav {{site.metadata.mainNavStyle.value}}" id="#mainmenu" aria-label="main">
+    <div class="container-fluid">
+        <div class="qld__main-nav__content {{#ifCond site.metadata.hideMenuDesktop.value '==' 'yes'}}qld__main-nav__no-desktop{{/ifCond}}" id="main-nav">
+            <div class="qld__main-nav__menu
+            {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark'}}qld__main-nav__menu--dark{{/ifCond}}
+            {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark-alt'}}qld__main-nav__menu--dark-alt{{/ifCond}}
+            ">
+                <div class="qld__main-nav__menu-inner">
+                    <div class="qld__main-nav__focus-trap-top"></div>
+                    <div class="qld__main-nav__header">
+                        <h6 class="qld__main-nav__menu-heading">Menu</h6>
+                        <button aria-controls="main-nav" class="qld__main-nav__toggle qld__main-nav__toggle--close">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md "><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__close"></use></svg>
+                            <span class="qld__main-nav__toggle-text">Close</span>
+                        </button>
+                    </div>
+                    <ul class="qld__link-list">
+                        {{#if site.metadata.mainNavHomeIconShow.value}}
+                        <li class="{{#if current.home}}active{{/if}} qld__main-nav__item">
+                            <div class="qld__main-nav__item-title">
+                                <a class="qld__main-nav__item-link" {{#if current.home}}aria-current="page"{{/if}} href="./?a={{site.data.assetid}}">
+                                    <span class="qld__main-nav__item-icon">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md "><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__home"></use></svg>
+                                    </span>
+                                    <span class="qld__main-nav__item-text" data-name="{{asset_short_name}}">Home</span>
+                                </a>
+                            </div>
+                        </li>
+                        {{/if}}
+                        {{#each site.children}}
+                        <li class="qld__main-nav__item {{#ifCond asset_assetid '==' ../current.data.assetid}}active{{/ifCond}}{{#ifCond asset_assetid '==' ../current.top.asset_assetid}}active{{/ifCond}}">
+                            <div class="qld__main-nav__item-title">
+                                <a class="qld__main-nav__item-link" {{#ifCond asset_assetid '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{asset_assetid}}" >
+                                    <span class="qld__main-nav__item-text" data-name="{{asset_short_name}}">{{{asset_short_name}}}</span>
+                                </a>
+                            </div>
+                        </li>
+                        {{/each}}
+                        
+                    </ul>
+                    {{#ifCond site.metadata.mainNavCtaOne.value '||' site.metadata.mainNavCtaTwo.value}}
+                    <div class="qld__main-nav__cta-wrapper">
+                        <ul class="qld__link-list">
+                        {{#if site.metadata.mainNavCtaOne.value}}
+                            <li class="qld__main-nav__item qld__main-nav__item--cta {{#ifCond site.metadata.mainNavCtaOne.value '==' ../current.data.assetid}}active{{/ifCond}}">
+                                <div class="qld__main-nav__item-title">
+                                    <a class="qld__main-nav__item-link" {{#ifCond site.metadata.mainNavCtaOne.value '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{site.metadata.mainNavCtaOne.value}}" >
+                                        {{#if site.metadata.mainNavCtaOneIcon.value}}
+                                        <span class="qld__main-nav__item-icon">
+                                            <i class="{{site.metadata.mainNavCtaOneIcon.value}}"></i>
+                                        </span>
+                                        {{/if}}
+                                        <span class="qld__main-nav__item-text" data-name="{{site.metadata.mainNavCtaOneText.value}}">{{{site.metadata.mainNavCtaOneText.value}}}</span>
+                                    </a>
+                                </div>
+                            </li>
+                            {{/if}}
+                            {{#if site.metadata.mainNavCtaTwo.value}}
+                            <li class="qld__main-nav__item qld__main-nav__item--cta {{#ifCond site.metadata.mainNavCtaTwo.value '==' ../current.data.assetid}}active{{/ifCond}}">
+                                <div class="qld__main-nav__item-title">
+                                    <a class="qld__main-nav__item-link" {{#ifCond site.metadata.mainNavCtaTwo.value '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{site.metadata.mainNavCtaTwo.value}}" >
+                                        {{#if site.metadata.mainNavCtaTwoIcon.value}}
+                                        <span class="qld__main-nav__item-icon">
+                                            <i class="{{site.metadata.mainNavCtaTwoIcon.value}}"></i>
+                                        </span>
+                                        {{/if}}
+                                        <span class="qld__main-nav__item-text" data-name="{{site.metadata.mainNavCtaTwoText.value}}">{{{site.metadata.mainNavCtaTwoText.value}}}</span>
+                                    </a>
+                                </div>
+                            </li>
+                        {{/if}}
+                        </ul>
+                    </div>
+                    {{/ifCond}}
+                    
+                    <div class="qld__main-nav__focus-trap-bottom"></div>
+                </div>
+            </div>
+            <div
+                class="qld__main-nav__overlay"
+                aria-controls="main-nav"
+            ></div>
+        </div>
+    </div>
+</nav>
+<!-- MAIN NAVIGATION END -->

package/src/components/main_navigation/js/global.js

@@ -0,0 +1,373 @@
+/**
+ * The mobile nav module
+ * 
+ * @module mobileNav
+ */
+(function () {
+
+    var mobileNav = {};
+    var mobileNavEvents = {};
+    var mobileNavAnimating = false;
+
+    /**
+     * IE8 compatible function for replacing classes on a DOM node
+     * 
+     * @memberof module:mobileNav
+     * @instance
+     * @private
+     *
+     * @param  {object} element      - The DOM element we want to toggle classes on
+     * @param  {object} state        - The current state of the animation on the element
+     * @param  {string} openingClass - The firstClass you want to toggle on the DOM node
+     * @param  {string} closingClass - The secondClass you want to toggle on the DOM node
+     */
+    function toggleClasses(element, state, openingClass, closingClass) {
+        if (state === 'opening' || state === 'open') {
+            var oldClass = openingClass || 'qld__main-nav__content--closed';
+            var newClass = closingClass || 'qld__main-nav__content--open';
+        } else {
+            var oldClass = closingClass || 'qld__main-nav__content--open';
+            var newClass = openingClass || 'qld__main-nav__content--closed';
+        }
+
+        removeClass(element, oldClass);
+        addClass(element, newClass);
+    }
+
+
+    /**
+     * IE8 compatible function for removing a class
+     * 
+     * @memberof module:mobileNav
+     * @instance
+     * @private
+     *
+     * @param  {object} element   - The DOM element we want to manipulate
+     * @param  {object} className - The name of the class to be removed
+     */
+    function removeClass(element, className) {
+        if (element.classList) {
+            element.classList.remove(className);
+        } else {
+            element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+
+
+    /**
+     * IE8 compatible function for adding a class
+     * 
+     * @memberof module:mobileNav
+     * @instance
+     * @private
+     *
+     * @param  {object} element   - The DOM element we want to manipulate
+     * @param  {object} className - The name of the class to be added
+     */
+    function addClass(element, className) {
+        if (element.classList) {
+            element.classList.add(className);
+        } else {
+            element.className = element.className + ' ' + className;
+        }
+    }
+
+
+    /**
+     * IE8 compatible function for adding an event
+     * https://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser
+     * 
+     * @memberof module:mobileNav
+     * @instance
+     * @private
+     *
+     * @param  {object} element    - The DOM element to add the listener
+     * @param  {object} event      - The event data
+     * @param  {object} rawHandler - The function to run when triggered
+     *
+     * @returns {object}           -  The token for removal of listener
+     */
+    function addEvent(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
+            };
+        }
+    }
+
+
+    /**
+     * IE8 compatible function for removing an event
+     * 
+     * @memberof module:mobileNav
+     * @instance
+     * @private
+     *
+     * @param  {object} token - The token from the add listener function
+     */
+    function removeEvent(token) {
+        if (token.element.removeEventListener) {
+            token.element.removeEventListener(token.event, token.handler);
+        } else {
+            token.element.detachEvent('on' + token.event, token.handler);
+        }
+    }
+
+
+    /**
+     * IE8 compatible function for getting elements style
+     * 
+     * @memberof module:mobileNav
+     * @instance
+     * @private
+     *
+     * @param  {object} element  - element to check style
+     * @param  {object} property - property to return value
+     */
+    function getStyle(element, property) {
+        return (
+            typeof getComputedStyle !== 'undefined' ?
+            getComputedStyle(element, null) :
+            element.currentStyle
+        )[property]; // avoid getPropertyValue altogether
+    }
+
+
+    /**
+     * Toggle a mobileNav element
+     * 
+     * @memberof module:mobileNav
+     *
+     * @param  {string}  element   - The toggle for the main nav
+     * @param  {integer} speed     - The speed in ms for the animation
+     * @param  {object}  callbacks - An object of four optional callbacks: { onOpen, afterOpen, onClose, afterClose }
+     *
+     */
+    mobileNav.Toggle = function (element, speed, callbacks) {
+        // Stop the main nav from being toggled if it is already being toggled
+        if (mobileNavAnimating) {
+            return;
+        }
+
+        mobileNavAnimating = true;
+
+        // stop event propagation
+        try {
+            window.event.cancelBubble = true;
+            event.stopPropagation();
+        } catch (error) {}
+
+
+        // check this once
+        if (typeof callbacks != 'object') {
+            callbacks = {};
+        }
+
+
+        // Elements we modify
+        var targetId = element.getAttribute('aria-controls');
+        var target = document.getElementById(targetId);
+        var menu = target.querySelector('.qld__main-nav__menu');
+        var overlay = target.querySelector('.qld__main-nav__overlay');
+        var closeButton = target.querySelector('.qld__main-nav__toggle--close');
+        var openButton = document.querySelector('.qld__main-nav__toggle--open');
+        var focustrapTop = menu.querySelector('.qld__main-nav__focus-trap-top');
+        var focustrapBottom = menu.querySelector('.qld__main-nav__focus-trap-bottom');
+        var focusContent = menu.querySelectorAll('a, .qld__main-nav__toggle');
+        var closed = target.className.indexOf('qld__main-nav__content--open') === -1;
+        var header = document.querySelector('.qld__header');
+        var body = document.querySelector('.main');
+        var footer = document.querySelector('.qld__footer');
+
+        var menuWidth = menu.offsetWidth;
+        var state = closed ? 'opening' : '';
+
+        overlay.style.display = 'block';
+
+
+        (function (target, speed) {
+            QLD.animate.Toggle({
+                element: menu,
+                property: 'right',
+                openSize: 0,
+                closeSize: -1 * menuWidth,
+                speed: speed || 250,
+                prefunction: function () {
+                    // Set these values immediately for transitions
+                    if (state === 'opening') {
+                        menu.style.display = 'block';
+                        overlay.style.right = 0;
+                        overlay.style.opacity = 0.5;
+
+                        // run when opening
+                        if (typeof callbacks.onOpen === 'function') {
+                            callbacks.onOpen();
+                        }
+                    } else {
+                        overlay.style.opacity = '0';
+
+                        // run when closing
+                        if (typeof callbacks.onClose === 'function') {
+                            callbacks.onClose();
+                        }
+                    }
+                },
+                postfunction: function () {
+                    if (state === 'opening' ) {
+
+                        // Move the focus to the close button
+                        closeButton.focus();
+                        openButton.setAttribute('aria-expanded', true);
+                        closeButton.setAttribute('aria-expanded', true);
+
+                        // Focus trap enabled
+                        focustrapTop.setAttribute('tabindex', 0);
+                        focustrapBottom.setAttribute('tabindex', 0);
+
+                        header.setAttribute('aria-hidden', true);
+                        body.setAttribute('aria-hidden', true);
+                        footer.setAttribute('aria-hidden', true);
+
+                        // Add event listeners
+                        mobileNavEvents.focusTop = addEvent(focustrapTop, 'focus', function () {
+                            focusContent[focusContent.length - 1].focus();
+                        });
+
+                        mobileNavEvents.focusBottom = addEvent(focustrapBottom, 'focus', function () {
+                            focusContent[0].focus();
+                        });
+
+                        // Add key listener
+                        mobileNavEvents.escKey = addEvent(document, 'keyup', function () {
+                            var event = event || window.event;
+                            var overlayOpen = getStyle(overlay, 'display');
+
+                            // Check the menu is open and visible and the escape key is pressed
+                            if (event.keyCode === 27 && overlayOpen === 'block') {
+                                mobileNav.Toggle(element, speed, callbacks);
+                            }
+                        });
+
+
+                        if (typeof callbacks.afterOpen === 'function') {
+                            callbacks.afterOpen();
+                        }
+                    } else {
+                        // Move the focus back to the menu button
+                        openButton.focus();
+                        openButton.setAttribute('aria-expanded', false);
+                        closeButton.setAttribute('aria-expanded', false);
+
+                        // Remove the focus trap
+                        focustrapTop.removeAttribute('tabindex');
+                        focustrapBottom.removeAttribute('tabindex');
+
+                        header.removeAttribute('aria-hidden');
+                        body.removeAttribute('aria-hidden');
+                        footer.removeAttribute('aria-hidden');
+
+
+                        // Remove the event listeners
+                        removeEvent(mobileNavEvents.focusTop);
+                        removeEvent(mobileNavEvents.focusBottom);
+
+
+                        // Remove the event listener for the keypress
+                        removeEvent(mobileNavEvents.escKey);
+
+                        if (typeof callbacks.afterClose === 'function') {
+                            callbacks.afterClose();
+                        }
+                    }
+
+
+                    // Toggle classes
+                    toggleClasses(target, state);
+                    toggleClasses(
+                        document.body,
+                        state,
+                        'qld__main-nav__scroll--unlocked',
+                        'qld__main-nav__scroll--locked'
+                    );
+
+
+                    // Reset inline styles
+                    menu.style.display = '';
+                    menu.style.right = '';
+                    overlay.style.display = '';
+                    overlay.style.right = '';
+                    overlay.style.opacity = '';
+
+                    mobileNavAnimating = false;
+                },
+            });
+        })(target, speed);
+    }
+
+   
+    window.addEventListener('DOMContentLoaded', function () {
+        
+        // Add toggle event to open mobile nav
+        var navToggles = document.querySelectorAll('*[aria-controls="main-nav"]');
+        navToggles.forEach(function (button) {
+            button.addEventListener('click', function () {
+                mobileNav.Toggle(button);
+            });
+        });
+
+         // Add toggle event listeners to accordion buttons
+        var itemToggles = document.querySelectorAll('.qld__main-nav__item-toggle');
+        itemToggles.forEach(function(button) {
+            button.addEventListener('click', function () {
+
+                if(button.className.split(' ').indexOf('qld__accordion--closed')>=0){
+
+                    button.parentNode.querySelector('.qld__main-nav__item-link').classList.add('qld__main-nav__item-link--open');
+                    itemToggles.forEach(function (item) {
+                        if(item.className.split(' ').indexOf('qld__accordion--open')>=0){
+                            item.parentNode.querySelector('.qld__main-nav__item-link').classList.remove('qld__main-nav__item-link--open');
+                            QLD.accordion.Close(item);
+                        }
+                    });
+                }else{
+                    button.parentNode.querySelector('.qld__main-nav__item-link').classList.remove('qld__main-nav__item-link--open');
+                }
+
+
+                QLD.accordion.Toggle(button);
+            });
+        });
+    });
+
+}());

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

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