diff --git a/src/assets/_project/_blocks/utils/qg-load-google-api.js b/src/assets/_project/_blocks/utils/qg-load-google-api.js index 3943dde30..250d45dcb 100644 --- a/src/assets/_project/_blocks/utils/qg-load-google-api.js +++ b/src/assets/_project/_blocks/utils/qg-load-google-api.js @@ -9,6 +9,7 @@ import keys from '../data/qg-google-keys'; export class QgLoadGoogleApi { constructor() { this.firstFolderPath = location.pathname.split('/')[1]; + this._staticMaps(); } /** @@ -26,14 +27,6 @@ export class QgLoadGoogleApi { _checkEnvAndSetKey () { let googleApiKey; let self = this; - // check if a particular franchise key is required by checking the folder path in the URL - if (self.firstFolderPath) { - keys.franchises.forEach(function (e) { - if (self.firstFolderPath === e.name) { - googleApiKey = e.apiKey; - } - }); - } // if no franchise name identified then use the default key according to the environment if (window.location.hostname.search(/\bgithub\b/) !== -1) { googleApiKey = keys.defGoogle.docs; @@ -42,9 +35,46 @@ export class QgLoadGoogleApi { } else { googleApiKey = keys.defGoogle.prod; } + // check if a particular franchise key is required by checking the folder path in the URL + if (self.firstFolderPath) { + keys.franchises.forEach(function (e) { + if (self.firstFolderPath === e.name) { + googleApiKey = e.apiKey; + } + }); + } return googleApiKey; } + /** + * TODO trasnfer to Matrix plateform as this is only valid with Matrix Map component + * _staticMaps -> static maps on description pages + * @return {undefined} + **/ + _staticMaps () { + let googleApiKey = this._checkEnvAndSetKey(); + var $mapImg = $('.qg-static-map'); + function generateStaticMapImg (ele) { + let lat = ele.attr('data-lat') || -27.4673; + let lon = ele.attr('data-long') || 153.0233; + let zoom = ele.attr('data-zoom') || 17; + let height = ele.attr('data-height') || 189; + return 'https://maps.googleapis.com/maps/api/staticmap?size=373x' + height + '&maptype=roadmap&markers=' + lat + '%2C' + lon + '&key=' + googleApiKey + '&sensor=false&zoom=' + zoom; + } + // append static image on the maps description page + if ($mapImg.length > 0) { + var htmlInsert = $('
'); + $mapImg.each(function () { + let $this = $(this); + $this.find('img').attr('src', generateStaticMapImg($this.find('img'))); + htmlInsert.append($this); + }); + $('aside').prepend(htmlInsert); + $('a.qg-static-map').wrap("
"); + $('.st-map-static').eq(0).prepend("

Maps

"); + } + } + /** * onbtnClick -> clicking quick exit button a page * @param {function} callback - execute after successful loading of a key diff --git a/src/docs/examples/accordion-swe2.html b/src/docs/examples/accordion-swe2.html deleted file mode 100644 index a9b7e3adb..000000000 --- a/src/docs/examples/accordion-swe2.html +++ /dev/null @@ -1,893 +0,0 @@ - - - - - - - - - - Accordion v1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - -
- - - - - -
- - - - - - - -
-
- - -
-
- - - - -
-
- Your location is - - -
- -
- -
-
-
- -
-
- -
-
-
-
-
- -
-
- -
    -
  1. - - -
    2. - -
  2. - - -
    3. - -
  3. - - -
    4. - -
  4. - - -
    5. - -
  5. -
    - - Address - -
      -
    1. - - -
      2. -
    2. - - -
      3. -
    3. - - -
      4. -
    4. -
        -
      1. - - -
        2. -
      2. - - -
        3. -
      3. - - -
        4. -
      -
      5. -
    -
    -
    6. - -
  6. - - -
    7. - -
  7. -
    - - Priority level - * - -
      -
      2. -
      3. -
      4. -
      5. -
    -
    -
    8. - -
  8. -
    - - Was this issue reported after hours - * - - What is after hours? - -
      -
    1. - -
      2. -
    2. - -
      3. -
    -
    -
    9. - -
  9. -
    - - After hours contractor / Building and Asset Services - supervisor - (If you chose 'Yes' above) - -
      -
    1. - - -
      2. -
    2. - - -
      3. -
    3. - - -
      4. -
    -
    -
    10. - -
  10. -
    - - Is there a requirement for Building and Asset services to be - contacted? - * - For all 'immediate' or 'urgent  after 3.30pm)' - requests - -
      -
    1. -
      2. -
      3. -
    -
    -
    11. - -
  11. -
    - - Building and Asset Services information - -
      -
    1. - - -
      2. -
    2. - - -
      3. -
    -
    -
    12. - -
  12. -
    - - Lodgement details - -
      -
    1. -
        -
      1. - - -
        2. -
      2. - - -
        3. -
      -
      2. -
    2. - - -
      3. -
    -
    -
    13. - -
  13. -
      -
      • -
    - - - - - -
    14. -
-
-

Accordion

-
-

Accordions display collapsible content panels for presenting information in a limited amount of space. Accordions help users see only the content they need, while everything else is easily accessible.

-

Usage considerations

-
    -
  • Try to limit the number of panels in an accordion by categorising information into smaller, digestible chucks. This will assist your users in scanning and comprehending the content.
    • -
  • Remember to structure textual content correctly in accordions, for example use heading tags where appropriate.
    • -
- -
-
- - | - -
-
- - - -
-
- - - -
-
- -
-
- - | - -
-
- - - -
-
- - - -
-
- - - -

HTML

- - 

-                <section class="qg-accordion qg-dark-accordion" aria-label="Accordion Label">
-                    <input type="radio" name="control" id="collapse" class="controls collapse" value="collapse" role="radio">
-                    <label for="collapse" class="controls">Collapse all</label>
-                    <span class="controls">|</span>
-                    <input type="radio" name="control" id="expand" class="controls expand" value="expand" role="radio">
-                    <label for="expand" class="controls">Expand all</label>
-
-                    <article>
-                        <input id="without-icon" type="checkbox" name="tabs" tabindex="-1" aria-controls="id-panel-content-1" aria-expanded="false" role="checkbox">
-                        <h3 class="acc-heading"><label for="without-icon"><span class="title">Without icon</span> <span class="subtitle">Subtitle can go here (optional)</span><span class="arrow"> <i></i></span></label></h3>
-                        <div class="collapsing-section"  aria-hidden="true" id="id-panel-content-1">
-                            <p> Content related to header. </p>
-                            <ul>
-                                <li>If dot points are available</li>
-                                <li>Can go here</li>
-                            </ul>
-                            <p>Or provide any semantic html structure</p>
-                        </div>
-                    </article>
-                </section>
-
-

Fontawesome icon can also be used instead of image. To use the default theme remove qg-dark-accordion class.

-

Accordion without icons or images is advised best practice.

- 

-                <i class="fa fa-car" aria-hidden="true"></i>
-                or
-                <img src="{{path of the image}}" alt="">
-
-
- -
-
-
-
-
-
-
- - - - - - - - - diff --git a/src/docs/examples/breadcrumb.html b/src/docs/examples/breadcrumb.html new file mode 100644 index 000000000..88d6bb26f --- /dev/null +++ b/src/docs/examples/breadcrumb.html @@ -0,0 +1,900 @@ + + + + + + + + + + + + + + + lorem ipsum + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +

lorem ipsum

+ + +
+
+

Unite against lorem ipsum. Learn more.

+
+
+
+ + + + + + + + + + + +
+
+
+ + + + + +
+ + + + + +
+ + + + + + +
+
+ + + + +
+
+ + + + + + +
+
+
+ + +
+ + + + + + + + + + + + +
+
+ + +
+ + + + + + + + +
+ + + + + + +

lorem ipsum (lorem ipsum)

+ + + + + + + + + + + + + +
+
+

+ + + lorem ipsum in government arranged accommodation + +

+ + +

Overseas and interstate hotspot arrivals will be directed to lorem ipsum in government arranged accommodation.

+
+
+

+ + + Home lorem ipsum + +

+ + + + +

Information about home lorem ipsum, commonly used for close contacts of lorem ipsum cases.

+
+
+

+ + + lorem ipsum fees and payment + +

+ + + + +

lorem ipsum costs, payment options and waivers.

+
+
+

+ + + lorem ipsum Fee Waiver Portal + +

+ + + + +

Access the fee waiver portal to apply for a fee waiver or log in to check the status of your application.

+
+
+

+ + + Planning for your lorem ipsum stay when arriving from overseas + +

+ + + + +

This information will help you plan for your stay in government arranged lorem ipsum in Queensland.

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + +
+ + + + + + + + + + +
+
+ Share this page: + +
+
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/docs/examples/cut-in.html b/src/docs/examples/cut-in.html new file mode 100644 index 000000000..25a973393 --- /dev/null +++ b/src/docs/examples/cut-in.html @@ -0,0 +1,1156 @@ + + + + + + + + + + + + + + + lorem + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +

COVID-19

+ + +
+
+

Unite against COVID-19. Learn more.

+
+
+
+ + + + + + + + + + + +
+
+
+ + + + + +
+ + + + + +
+ + + + + + +
+
+ + + + +
+
+ + + + + + +
+
+
+ + +
+ + + + + + + + + + + + +
+
+ + +
+ + + + + + + + +
+ + + Print + + + + +

Releasing balloons

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
Burst balloons resemble jellyfish—a natural food source for many animals +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur + distinctio dolores et ipsum natus, nisi pariatur porro quo quod sapiente sequi sit sunt + unde voluptate? Natus nostrum provident quibusdam.

+
+
+ + + + + + + + + + + + +
+ + + + + + + + + + + +
+ + +
+ + + + + + +
+
Last updated:
+
20 February 2018
+
+ + +
+ + + + + + + + + + +
+
+ Share this page: + +
+
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ + + +
+ + + + + + + +
+
+ + Refresh + Performance + Edit + + Admin view + + + + + + + + + + + + Live + + + + + +
+
+
+

+ + Asif Amin [asif.amin] + Log out +

+
+ +

+ + + + Standard Page + + + (# + 63894 + ) + + + + + + + + +

+
+ + + + + + +
+
Created:
+
+ 17 Oct 2018 +
+ +
Created by:
+
+ Root User +
+
+
+
Updated:
+
+ 05 Jan 2021 +
+ +
Updated by:
+
+ Kylie Wiemers-Wingett +
+
+
+
Published:
+
+ + 05 Jan 2021 + +
+ + + +
Published by:
Kylie Wiemers-Wingett
+ + +
+
+

Page settings

+
+
Page Type:
+
standard
+
+ + + + + + + + + + + +
Asides:
[61313]

+ + + +
Design:
+
+ qld.gov.au - Global - Customisation [118372] +
+
+
Paint Layout:
+
+ qld.gov.au - Global [118405] +
+
+ +
+

+ Metadata +

+
+ 
+
+
+<!-- Global - Site Schema //-->
+
+<!-- SEO (required) //-->
+<meta name="description" content="Releasing balloons cause great harm to our environment and wildlife, it is also classed as littering and penalties apply." />
+
+<!-- SEO //-->
+<meta name="keywords" content="Balloon; balloons; littering; releasing; release; escape; mylar; latex; environment; wildlife; turtles; litter; birds; string; tangle; ingest; death; law; penalties; burst; jelly; fish; jellyfish;" />
+<meta name="DCTERMS.subject" content="" />
+<meta name="DCTERMS.audience" content="all" scheme="AGLSTERMS.agls-audience" />
+<meta name="DCTERMS.license" scheme="DCTERMS.URI" content="https://creativecommons.org/licenses/by/4.0/">
+
+<!-- Open Graph //-->
+<meta property="og:title" content="Releasing balloons" />
+<meta name="twitter:title" content="Releasing balloons" />
+<meta property="og:description" content="Releasing balloons cause great harm to our environment and wildlife, it is also classed as littering and penalties apply." />
+<meta name="twitter:description" content="Releasing balloons cause great harm to our environment and wildlife, it is also classed as littering and penalties apply." />
+<meta property="og:image" content="https://www.qld.gov.au/__data/assets/image/0012/110460/Opengraph-default-thumbnail.png">
+<meta name="twitter:image:src" content="https://www.qld.gov.au/__data/assets/image/0012/110460/Opengraph-default-thumbnail.png" />
+<meta property="og:url" content="https://www.qld.gov.au/environment/pollution/management/waste/litter-illegal-dumping/balloons" />
+<meta property="og:type" content="article" />
+
+<!-- Personalisation //-->
+<meta name="page.tags" content="" />
+
+<!-- News Schema //-->
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/docs/examples/index.html b/src/docs/examples/index.html new file mode 100644 index 000000000..1bc79ce2a --- /dev/null +++ b/src/docs/examples/index.html @@ -0,0 +1,603 @@ + + + + + + + + + + Examples + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+ + + + + +
+ + + + + + + +
+
+ + +
+
+ + + + + + +
+
+
+ + +
+
+
+ +
+ + + + +

Examples

+

These are some examples of components on live pages (copied from qld.gov.au)

+ +
    +
  1. Cut In
    2. +
  2. Breadcrumb
    3. +
  3. Recaptcha version 2
    4. +
  4. Service finder
    5. +
  5. Search page
    6. +
  6. Without location template
    7. +
+ +

+ + + + + + + + +
+ + + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + diff --git a/src/docs/examples/matrix-docs/floating-image.html b/src/docs/examples/matrix-docs/floating-image.html new file mode 100644 index 000000000..935de3e6c --- /dev/null +++ b/src/docs/examples/matrix-docs/floating-image.html @@ -0,0 +1,1199 @@ + + + + + + + + + + + + + + +Floating image | Global resources | Queensland Government + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +

COVID-19

+ + +
+
+

Unite against COVID-19. Learn more.

+
+
+
+ + + + + + + + + + + +
+
+
+ + + + + +
+ + + + + +
+ + + + + + +
+
+ + + + +
+
+ + + + + + +
+
+
+ + +
+ + + + + + + + + + + + +
+
+
+ + + + + + + + +
+ + Print + + + + +

Floating image

+ + + + + + + + + + + + + +

This component allows the text after the image to wrap around the image.

Example

+ + + +
Caption for this image +
+ View image in full screen +
+
+

Text following floating image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Instructions

  1. Create a Standard page asset
  2. In the Edit content screen, Insert content type container Template = Floating image.
  3. Click on Set Properties
    1. Screenshot displaying the Edit Content Container where the floating image has been selected as the template.
  4. From the configuration options, select:
    • Alignment: to float image to left or right.
    • Large Image link: option to view a image in full screen
  5. Fill the content
    • Image: Select the image asset from the resources image folder.
    • Credits: A note acknowledging the source of a published photograph.
    • Caption: Some text used to explain the image.

Resources

+ + + + + + + + + + +
+ + +
+ + + + + + +
+
Last updated:
+
9 April 2020
+
+ + +
+ + + + + + + + + + + + +
+
+ Share this page: + +
+
+ +
+ + + + + + + + + + + + + + + + +
+
+
+ + + + +
+ + + + + + + +
+
+ + Refresh + Performance + Edit + + Admin view + + + + + + + + + + + + Safe Editing Pending Approval + + + + + +
+
+
+

+ + Asif Amin [asif.amin] + Log out +

+
+ +

+ + + + Standard Page + + + (# + 87184 + ) + + + + + + + + +

+
+ + + + + + +
+
Created:
+
+ 02 Nov 2018 +
+ +
Created by:
+
+ Maureen Walshe +
+
+
+
Updated:
+
+ 23 Dec 2020 +
+ +
Updated by:
+
+ Asif Amin +
+
+
+
Published:
+
+ + 17 Jun 2020 + +
+ + + +
Published by:
Nicole Callow
+ + +
+
+

Page settings

+
+
Page Type:
+
standard_no-asides
+
+ + + + + + + + + + + + + +
Design:
+
+ qld.gov.au - Global - Customisation [118372] +
+
+
Paint Layout:
+
+ qld.gov.au - Global [118405] +
+
+ +
Workflow Step:
+ +
+

+ Metadata +

+
+ 
+                
+                    
+<!-- Global - Site Schema //-->
+
+<!-- SEO (required) //-->
+<meta name="description" content="A floating image allows the text to wrap around the image." />
+
+<!-- SEO //-->
+<meta name="keywords" content="" />
+<meta name="DCTERMS.subject" content="" />
+<meta name="DCTERMS.audience" content="all" scheme="AGLSTERMS.agls-audience" />
+<meta name="DCTERMS.license" scheme="DCTERMS.URI" content="https://creativecommons.org/licenses/by/4.0/">
+
+<!-- Open Graph //-->
+<meta property="og:title" content="Floating image" />
+<meta name="twitter:title" content="Floating image" />
+<meta property="og:description" content="A floating image allows the text to wrap around the image." />
+<meta name="twitter:description" content="A floating image allows the text to wrap around the image." />
+<meta property="og:image" content="https://www.qld.gov.au/__data/assets/image/0012/110460/Opengraph-default-thumbnail.png">
+<meta name="twitter:image:src" content="https://www.qld.gov.au/__data/assets/image/0012/110460/Opengraph-default-thumbnail.png" />
+<meta property="og:url" content="https://www.qld.gov.au/_resources/matrix-documentation/components/floating-image" />
+<meta property="og:type" content="article" />
+
+<!-- Personalisation //-->
+<meta name="page.tags" content="" />
+
+<!-- News Schema //-->
+
+
+                
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/docs/examples/recaptcha2.html b/src/docs/examples/recaptcha2.html index 12f57606d..d21c9b0f6 100644 --- a/src/docs/examples/recaptcha2.html +++ b/src/docs/examples/recaptcha2.html @@ -12,7 +12,7 @@ - Responsive maintenance request | Queensland Government + lorem @@ -541,7 +541,6 @@
    @@ -556,7 +555,7 @@
  1. @@ -575,7 +574,7 @@
  2. @@ -816,7 +815,7 @@