@qhealth-design-system/core 1.0.38

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

@@ -0,0 +1,305 @@
+/**
+ * Tab module TODO
+ */
+(function (QLD) {
+
+    // For easy reference
+    var keys = {
+        end: 35,
+        home: 36,
+        left: 37,
+        up: 38,
+        right: 39,
+        down: 40,
+        delete: 46
+    };
+
+    // Add or substract depending on key pressed
+    var direction = {
+        37: -1,
+        38: -1,
+        39: 1,
+        40: 1
+    };
+
+    /**
+     * @module tabs
+     */
+    var tabs = {
+
+        // Vars
+        'buttons': null,
+
+        /**
+         * Initialise any tab components on the page
+         * 
+         * @memberof module:tabs
+         */
+        'init': function() {
+            tabs.buttons = QLD.utils.listToArray(document.querySelectorAll('[role="tab"]'));
+
+            // Bind listeners
+            for (var i = 0; i < tabs.buttons.length; i++) {
+                addListeners(i);
+            };
+        }
+    };
+
+    /**
+     * Add event listeners for given tab
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {number} index 
+     */
+    function addListeners(index) {
+        var tab = tabs.buttons[index];
+        tab.addEventListener('click', clickEventListener);
+        tab.addEventListener('keydown', keydownEventListener);
+        tab.addEventListener('keyup', keyupEventListener);
+
+        // Build an array with all tabs (<button>s) in it
+        tab.index = index;
+    };
+
+    /**
+     * When a tab is clicked, activateTab is fired to activate it
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {Document.event} event 
+     */
+    function clickEventListener(event) {
+        var tab = event.target;
+        activateTab(tab, false);
+    };
+
+    /**
+     * Handle keydown on tabs
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {Document.event} event 
+     */
+    function keydownEventListener(event) {
+        var key = event.keyCode;
+        var tab = event.target;
+        var tablist = tab.parentNode;
+        var siblingTabs = QLD.utils.listToArray(tablist.querySelectorAll('[role="tab"]'));
+        var firstTab = siblingTabs[0];
+        var lastTab = siblingTabs[siblingTabs.length - 1];
+
+        switch (key) {
+            case keys.end:
+                event.preventDefault();
+                // Activate last tab
+                activateTab(lastTab);
+                break;
+            case keys.home:
+                event.preventDefault();
+                // Activate first tab
+                activateTab(firstTab);
+                break;
+
+                // Up and down are in keydown
+                // because we need to prevent page scroll >:)
+            case keys.up:
+            case keys.down:
+                determineOrientation(event);
+                break;
+        };
+    };
+
+    /**
+     * Handle keyup on tabs
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {Document.event} event 
+     */
+    function keyupEventListener(event) {
+        var key = event.keyCode;
+
+        switch (key) {
+            case keys.left:
+            case keys.right:
+                determineOrientation(event);
+                break;
+        };
+    };
+
+    /**
+     * When a tablist's aria-orientation is set to vertical,
+     * only up and down arrow should function.
+     * In all other cases only left and right arrow function.
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {Document.event} event 
+     */
+    function determineOrientation(event) {
+        var key = event.keyCode;
+        var tab = event.target;
+        var tablist = tab.parentNode;
+        var vertical = tablist.getAttribute('aria-orientation') == 'vertical';
+        var proceed = false;
+
+        if (vertical) {
+            if (key === keys.up || key === keys.down) {
+                event.preventDefault();
+                proceed = true;
+            };
+        } else {
+            if (key === keys.left || key === keys.right) {
+                proceed = true;
+            };
+        };
+
+        if (proceed) {
+            switchTabOnArrowPress(event);
+        };
+    };
+
+    /**
+     * Either focus the next, previous, first, or last tab
+     * depending on key pressed
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {Document.event} event 
+     */
+    function switchTabOnArrowPress(event) {
+        var pressed = event.keyCode;
+        var tab = event.target;
+        var tablist = tab.parentNode;
+        var siblingTabs = QLD.utils.listToArray(tablist.querySelectorAll('[role="tab"]'));
+        var firstTabIndex = siblingTabs[0].index;
+
+        for (var x = 0; x < siblingTabs.length; x++) {
+            siblingTabs[x].addEventListener('focus', focusEventHandler);
+        };
+
+        if (direction[pressed]) {
+            if (tab.index !== undefined) {
+                var newIndex = tab.index - firstTabIndex + direction[pressed];
+                if (siblingTabs[newIndex]) {
+                    siblingTabs[newIndex].focus();
+                } else if (pressed === keys.left || pressed === keys.up) {
+                    siblingTabs[0].focus()
+                } else if (pressed === keys.right || pressed == keys.down) {
+                    siblingTabs[siblingTabs.length - 1].focus();
+                };
+            };
+        };
+    };
+
+    /**
+     * Activates any given tab panel
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {Node} tab 
+     * @param {boolean} setFocus 
+     */
+    function activateTab(tab, setFocus) {
+        setFocus = setFocus || true;
+        // Deactivate all other tabs
+        deactivatetabs(tab);
+
+        // Remove tabindex attribute
+        tab.removeAttribute('tabindex');
+
+        // Set the tab as selected
+        tab.setAttribute('aria-selected', 'true');
+
+        // Get the value of aria-controls (which is an ID)
+        var controls = tab.getAttribute('aria-controls');
+
+        // Remove hidden attribute from tab panel to make it visible
+        document.getElementById(controls).removeAttribute('hidden');
+
+        // Set focus when required
+        if (setFocus) {
+            tab.focus();
+        };
+    };
+
+    /**
+     * Deactivate all tabs and tab panels
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     */
+    function deactivatetabs(tab) {
+
+        var tablist = tab.parentNode;
+        var siblingTabs = QLD.utils.listToArray(tablist.querySelectorAll('[role="tab"]'));
+
+        for (var t = 0; t < siblingTabs.length; t++) {
+            var tab = siblingTabs[t];
+            tab.setAttribute('tabindex', '-1');
+            tab.setAttribute('aria-selected', 'false');
+            tab.removeEventListener('focus', focusEventHandler);
+
+            var controls = tab.getAttribute('aria-controls');
+            var panel = document.getElementById(controls);
+            panel.setAttribute('hidden', 'hidden');
+        };
+    };
+
+    /**
+     * Handle focus event on tab
+     * 
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {Document.event} event 
+     */
+    function focusEventHandler(event) {
+        var target = event.target;
+        setTimeout(checkTabFocus, 300, target);
+    };
+
+    /**
+     * Check if given tab is currently focused
+     * @memberof module:tabs
+     * @instance
+     * @private
+     * 
+     * @param {Node} target 
+     */
+    function checkTabFocus(target) {
+        var focused = document.activeElement;
+
+        if (target === focused) {
+            activateTab(target, false);
+        };
+    };
+
+    // Add to global QLD module
+    var QLD = QLD ? QLD : {};
+    QLD.tabs = tabs;
+    window.QLD = QLD;
+
+    // Init tabs
+    window.addEventListener('DOMContentLoaded', function () {
+        QLD.tabs.init()
+    });
+
+}(window.QLD));

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

@@ -0,0 +1,116 @@
+
+(function(QLD) {
+    "use strict";
+    
+    /**
+     * @module userLocationFinder
+     */
+    var userLocationFinder = {};
+
+    /**
+     * Initialise the location finder
+     * 
+     * @memberof module:userLocationFinder
+     */
+     userLocationFinder.init = function() {
+
+
+        // Need to move this stuff into a central location as it's also used for BSQ location finder
+        var $ = require('jquery');
+        var ausPostUrl = typeof site !== 'undefined' ? site.metadata.ausPostUrl.value : ``;
+        var Bloodhound = require('corejs-typeahead/dist/bloodhound.js');
+        var datumLocationData;
+        require('corejs-typeahead/dist/typeahead.jquery.js');
+
+        console.log(ausPostUrl);
+
+        var addressPacket = new Bloodhound({
+            datumTokenizer: function(d) {
+                var locationTokens = Bloodhound.tokenizers.whitespace(d.location);
+                var postcodeTokens = Bloodhound.tokenizers.whitespace(d.postcode);
+
+                return locationTokens.concat(postcodeTokens);
+            },
+            queryTokenizer: Bloodhound.tokenizers.whitespace,
+            limit: 20,
+            remote: {
+              url: ausPostUrl,
+              prepare: function (query, settings) {
+                settings.url = encodeURI(settings.url + '?query=' + query);
+                return settings;
+              }
+            }
+        });
+
+        
+        var $updateLocationInput =  $(".qld__update-location-input");
+
+        $updateLocationInput.typeahead('destroy');
+
+        $updateLocationInput.typeahead(null, {
+            name: 'addresses',
+            minLength: 3,
+            display: 'location',
+            limit: 10,
+            source: addressPacket,
+            templates: {
+                suggestion: function(data) {
+                    return `<p><strong>${data.location}</strong>, ${data.postcode}</p>`;
+                }
+            }
+        }).on('typeahead:select', function (obj, datum, name) {
+            if(datum.latitude && datum.longitude) {
+                datumLocationData = datum;
+            }
+        });
+
+        $(document).on('click', '[data-action="set-location"]', function(e) {
+            let $this = $(this);
+            let $form = $this.closest('form');
+
+            if($form[0].checkValidity()) {
+                e.preventDefault();
+
+                if(datumLocationData) {
+                    var location = {
+                        "latitude": datumLocationData.latitude,
+                        "longitude": datumLocationData.longitude,
+                        "isGeolocated": false,
+                        "location": datumLocationData.location
+                    }
+                    QLD.utils.setUserLocation(location);
+                } else {
+                    console.log('Location not found in search field.');
+                }
+            } else {
+                $form[0].reportValidity();
+            }
+        });
+
+        var $setCurrentLocationBtn = $('[data-action="set-current-location"]');
+
+        if($setCurrentLocationBtn.length > 0) {
+            if(QLD.utils.isGeolocated()) {
+                $setCurrentLocationBtn.addClass('active').attr('disabled', true);
+            }
+
+            $setCurrentLocationBtn.on('click', function() {
+                var errorCallback = function() {
+                    $setCurrentLocationBtn.replaceWith('<p class="qld__input--error">Unable to locate</p>');
+                }
+                QLD.utils.geolocateUser(true, errorCallback);
+            });
+        }
+    }
+
+    var QLD = QLD ? QLD : {};
+    QLD.userLocationFinder = userLocationFinder;
+    window.QLD = QLD;
+
+    document.addEventListener("DOMContentLoaded", function(event) {
+        if ($(".qld__update-location-input").length > 0) {
+            QLD.userLocationFinder.init();
+        }
+    });
+
+}(window.QLD));

package/src/components/_template/css/component.scss

@@ -0,0 +1,22 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// {{component_name}}
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__[component_name] {
+
+    //Alternate theme
+    &--alt{
+
+    }
+
+    //Dark theme
+    &--dark{
+
+    }
+
+    //Dark theme
+    &--dark-alt{
+
+    }
+	
+}

package/src/components/_template/html/component-page.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!--[if lt IE 8]>
+        <html class="no-js lt-ie8 lt-ie9" lang="en">
+    <![endif]-->
+<!--[if IE 8]>
+        <html class="no-js lt-ie9 ie8" lang="en">
+    <![endif]-->
+<!--[if IE 9]>
+        <html class="no-js ie9" lang="en">
+    <![endif]-->
+<!--[if !(IE)]><!-->
+<html class="no-js" lang="en">
+    <!--<![endif]-->
+
+    <head>
+        <title>Queensland Design System</title>
+        
+        ${require('../components/_global/html/head.html')}
+    </head>
+
+    <body class="qld__grid">
+        <!--noindex-->
+        ${require('../components/header/html/component.hbs')({
+            "site":require('/src/data/site.json')
+        })}
+        <!--endnoindex-->
+        ${require('../components/mega_main_navigation/html/component.hbs')({
+            "site":require('/src/data/site.json')
+        })}
+        <!-- MAIN BODY -->
+        <main class="main" role="main">
+            <section class="qld__body qld__body--breadcrumb">
+                <div class="container-fluid">
+                    ${require('../components/breadcrumbs/html/component.hbs')({
+                        "site":require('/src/data/site.json'),
+                        "current":require('/src/data/current.json'),
+                    })}
+                </div>
+            </section>
+            <!--CONTENT-->
+            <div class="qld__body">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-xs-12 col-md-4 col-lg-3">
+                            <!-- INTERNAL NAVIGATION -->
+                            ${require('../components/internal_navigation/html/component.hbs')({
+                                "site":require('/src/data/site.json'),
+                                "current":require('/src/data/current.json')
+                            })}
+                        </div>
+                        <div class="col-xs-12 col-md-8 col-lg-9" id="content">
+                            
+                            ${require('../components/_global/html/component.hbs')({
+                                "manifest":require('../components/[component_name]/js/manifest.json'),
+                                "component":require('!url-loader!../components/[component_name]/html/component.hbs'),
+                                "component_output":require('../components/[component_name]/html/component.hbs')({
+                                    "component":require('../components/[component_name]/js/manifest.json').component,
+                                    "site":require('/src/data/site.json'),
+                                    "current":require('/src/data/current.json'),
+                                    "content":"Lorem Ipsum"
+                                })
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </div>  
+        </main>
+        <!-- END MAIN BODY -->
+
+        <!-- WIDGETS -->
+        ${require('../components/widgets/html/component.hbs')({
+            "site":require('/src/data/site.json'),
+            "current":require('/src/data/current.json')
+        })}
+        
+        <!-- FOOTER-->
+        ${require('../components/footer/html/component.hbs')({
+            "site":require('/src/data/site.json')
+        })}
+
+        <div class="footer-scripts" id="footer_js" style="display: none !important;">
+            ${require('../components/_global/html/scripts.html')}
+        </div>
+    </body>
+</html>

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

@@ -0,0 +1,4 @@
+<div class="qld__[component_name]">
+    <span>Hello, [component_name]!</span>
+    <p>{{component.data.metadata.field1.value}}</p>
+</div>

package/src/components/_template/js/global.js

@@ -0,0 +1,6 @@
+(function () {
+    'use strict';
+
+
+    
+}());

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

@@ -0,0 +1,40 @@
+{
+	"component": {
+		"name": "[component_name]",
+		"description": "",
+		"version": "1.0",
+		"status": "In Development",
+		"data": {
+			"assetid": "[component_name]-123",
+			"metadata": {
+				"field1": {
+					"type": "metadata_field_text",
+					"description": "A text field",
+					"friendly_name": "Field 1",
+					"value": "Example text",
+					"required": false,
+					"editable": true
+				},
+				"root_node": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Parent asset (populates 'children' and 'childrenThumbnails')",
+					"value": "123",
+					"required": false,
+					"editable": true
+				},
+				"asset_select": {
+					"type": "metadata_field_related_asset",
+					"description": "",
+					"friendly_name": "Assets to link to (populates 'assets')",
+					"value": "1; 2; 3",
+					"required": false,
+					"editable": true
+				}
+			}
+		},
+		"children": [],
+		"childrenThumbnails": [],
+		"assets": []
+	}
+}

package/src/components/abstract/css/component.scss

@@ -0,0 +1,91 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Abstract
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__abstract,
+.qld__abstract > p,
+p.qld__abstract {
+    @include QLD-space(font-size, 1.25unit);
+    line-height: 28px;
+    @include QLD-media(lg) {
+        @include QLD-fontgrid(lg, h3);
+    }
+    form & {
+        margin-top: 0;
+        @include QLD-space(margin-bottom, 2unit);
+    }
+    
+}
+* + .qld__abstract {
+    @include QLD-space(margin-top, 1unit);
+    @include QLD-space(margin-bottom, 1unit);
+}
+
+.qld__version + .qld__abstract {
+    margin-top: 0;
+}
+
+.qld__body h1 ~ .qld__abstract {
+    @include QLD-space(margin-top, 1unit);
+}
+
+
+.qld__body.qld__abstract--wrapper{
+    + .qld__body,
+    + data + .qld__body{ 
+        @include QLD-space(margin-top, -.5unit );
+
+        @include QLD-media(lg) {
+            @include QLD-space(margin-top, -1unit );
+        }
+        // #content & {
+        //     @include QLD-space(margin-top, 0 );
+        // }
+        &.qld__body--alt,
+        &.qld__body--dark,
+        &.qld__body--dark-alt,
+        &.qld__card--wrapper-bg-pattern,
+        &.qld__card--wrapper-bg-image{
+            @include QLD-space(margin-top, 0unit);
+        }
+    }
+    &.qld__body--alt{
+        + .qld__body,
+        + data + .qld__body{
+            @include QLD-space(margin-top, -.5unit );
+        
+            &.qld__body--alt{
+                @include QLD-space(margin-top, -.5unit );
+                @include QLD-media(lg) {
+                    @include QLD-space(margin-top, -1unit );
+                }
+            }
+        }
+    }
+    &.qld__body--dark{
+        + .qld__body,
+        + data + .qld__body{
+            @include QLD-space(margin-top, -.5unit );
+        
+            &.qld__body--dark{
+                @include QLD-space(margin-top, -.5unit );
+                @include QLD-media(lg) {
+                    @include QLD-space(margin-top, -1unit );
+                }
+            }
+        }
+    }
+    &.qld__body--dark-alt{
+        + .qld__body,
+        + data + .qld__body{
+            @include QLD-space(margin-top, -.5unit );
+        
+            &.qld__body--dark-alt{
+                @include QLD-space(margin-top, -.5unit );
+                @include QLD-media(lg) {
+                    @include QLD-space(margin-top, -1unit );
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+
+<section class="qld__body qld__abstract--wrapper" id="{{#if component.data.metadata.id_field.value}}{{{component.data.metadata.id_field.value}}}{{else}}abstract-{{{component.data.assetid}}}{{/if}}">
+    <div class="container-fluid">
+        <div class="qld__abstract">
+            {{{component.data.metadata.content.value}}}
+        </div>
+    </div>
+</section>
+