-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
QOL-7980 Transfer qg print from Matrix Assets to SWE4 (#376)
* QOL-7980 Transfer qg print from Matrix Assets to SWE4 * updated FAQ
- Loading branch information
Showing
14 changed files
with
1,031 additions
and
23 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
src/assets/_project/_blocks/components/forms/qg-address-autocomplete.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
109 changes: 109 additions & 0 deletions
109
src/assets/_project/_blocks/components/print/qg-print.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| /* | ||
| FAQ - | ||
| Q1 Where is this class in use, and what it does ? | ||
| A1 Print button in the content section and the guide pages, there is an option in the Matrix Metadata to enable this on a page. Functions are triggered if a particular ID and a class is present on a page. | ||
| Example - https://www.qld.gov.au/recreation/activities/areas-facilities/centres/sunshine-coast-recreation-centre | ||
| */ | ||
|
|
||
| export class QgPrint { | ||
| constructor () { | ||
| this.$pageLinks = $('#toc.qg-print-guide ol li a'); | ||
| this.$contentContainer = $('#qg-content'); | ||
| this.$printContentLink = $('.print-content-link'); | ||
| this.$printguideLink = $('#printguide'); | ||
| this.$content = this.$contentContainer.find('#qg-primary-content'); | ||
| this.new_content = ''; | ||
| this.current_content = ''; | ||
|
|
||
| if (this.$printguideLink.length > 0 || this.$printContentLink.length > 0){ | ||
| this.onClickContentBtn(); | ||
| this.onClickGuidePageBtn(); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * onClickContent function register a event to print content using a button with the 'print-content-link' class | ||
| * @return {undefined} | ||
| **/ | ||
| onClickContentBtn() { | ||
| let self = this; | ||
| if (self.$printContentLink.length > 0) { | ||
| self.$printContentLink.on('click', function (e) { | ||
| e.preventDefault(); | ||
| window.print(); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| onClickGuidePageBtn function register a event to print guide page content using a button with the 'printguide' id. | ||
| * @return {undefined} | ||
| **/ | ||
| onClickGuidePageBtn () { | ||
| let self = this; | ||
| let numImagesLoaded = 0; | ||
|
|
||
| // store content present inside the 'qg-primary-content' container | ||
| self.current_content = self.$content.html(); | ||
|
|
||
| // attach a event on the print guide link/button | ||
| $('body').on('click', '#printguide', function(event) { | ||
| event.preventDefault(); | ||
| var pageList = []; | ||
| // grab all the links in the guide page list | ||
| pageList = self.$pageLinks.map(function() { | ||
| return this.href; | ||
| }).get(); | ||
| // grab the content using Ajax of all the links | ||
| $.each(pageList, function (index, pageContent) { | ||
| self.getRemotePages(pageContent); | ||
| }); | ||
| // replace the content in the current content with the ajax fetched content | ||
| self.$content.append(self.new_content); | ||
| // check all images are there on the page or not (large images takes more time to load also depends on the network connection speed) | ||
| const imageList = self.$content.find('img'); | ||
| let totalImages = imageList.length; | ||
| // filter out the content and make it ready for print | ||
| self.$content.find('h1').not(':first').remove(); | ||
| self.$content.find('.qg-print-guide p:contains("In this guide")').parent().remove(); | ||
| self.$content.find('ul.pagination').remove(); | ||
| self.$content.find('.qg-content-footer').remove(); | ||
| if (totalImages === 0){ | ||
| window.print(); | ||
| self.$content.empty().append(self.current_content); | ||
| } else { | ||
| imageList.map(function() { | ||
| let tempSrc = this.src; | ||
| this.onload = function () { | ||
| numImagesLoaded++; | ||
| if (numImagesLoaded >= totalImages) { | ||
| window.print(); // if all images loaded then print the page | ||
| self.$content.empty().append(self.current_content); | ||
| } | ||
| }; | ||
| this.src = tempSrc; | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * getRemotePages -> clicking quick exit button a page | ||
| * @param {string} pageContent - site to replace on initiating the 'quick exit' ('Esc' key or clicking 'Close this site' button) function | ||
| * @return {undefined} | ||
| **/ | ||
| getRemotePages (pageContent) { | ||
| let self = this; | ||
| $.ajax({ | ||
| url: pageContent, | ||
| data: {}, | ||
| success: function (data) { | ||
| // Add the content and asides divs of each page to what will be printed | ||
| self.new_content += '<div id="qg-primary-content" class="d-none d-print-block">' + $(data).find('#qg-primary-content').html() + '</div>'; | ||
| self.new_content += '<hr />'; | ||
| }, | ||
| dataType: 'html', | ||
| async: false, | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| // print button styles | ||
| .print-content-link{ | ||
| position: absolute; | ||
| right: 35px; | ||
| z-index:1; | ||
| top: -28px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
src/assets/_project/_blocks/components/quick-exit/qg-quick-exit.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <html lang="en"> | ||
|
|
||
| <head> | ||
|
|
||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
|
|
||
| <title>Print</title> | ||
|
|
||
| <meta | ||
| name="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" | ||
| content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!"> | ||
| <meta name="keywords" content="KEYWORDS"> | ||
|
|
||
| <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/"> | ||
| <link rel="schema.AGLSTERMS" href="http://www.agls.gov.au/agls/terms/"> | ||
|
|
||
| <meta name="DCTERMS.creator" scheme="AGLSTERMS.GOLD" | ||
| content="c=AU; o=The State of Queensland; ou=DEPARTMENT NAME; ou=UNIT NAME"> | ||
| <meta name="DCTERMS.publisher" scheme="AGLSTERMS.AglsAgent" | ||
| content="corporateName=The State of Queensland; jurisdiction=Queensland"> | ||
| <meta name="DCTERMS.created" content="2010-11-04"> | ||
| <meta name="DCTERMS.modified" content="2011-03-05"> | ||
| <meta name="DCTERMS.title" content="Add your heading"> | ||
| <meta name="DCTERMS.alternative" content="Add your heading"> | ||
| <meta | ||
| name="DCTERMS.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" | ||
| content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!"> | ||
| <meta name="DCTERMS.subject" scheme="AGLSTERMS.APAIS" content="SUBJECT"> | ||
| <meta name="AGLSTERMS.function" scheme="AGLSTERMS.AGIFT" content="FUNCTION"> | ||
| <meta name="DCTERMS.type" scheme="DCTERMS.DCMIType" content="Text"> | ||
| <meta name="AGLSTERMS.documentType" scheme="AGLSTERMS.agls-document" content="guidelines"> | ||
| <meta name="DCTERMS.audience" scheme="AGLSTERMS.agls-audience" content=""> | ||
| <meta name="DCTERMS.jurisdiction" scheme="AGLSTERMS.AglsJuri" content="Queensland"> | ||
|
|
||
| <!-- Open graph --> | ||
| <meta property="og:title" content="Queensland Government"> | ||
| <meta | ||
| property="og:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" | ||
| content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!"> | ||
| <meta property="og:image" content="/assets/v4/latest/images/coat-of-arms/coa-thumbnail.png"> | ||
| <meta property="og:url" content=""> | ||
| <meta property="og:type" content="article"/> | ||
|
|
||
| <!-- Twitter --> | ||
| <meta name="twitter:card" content="summary"/> | ||
| <meta name="twitter:title" content="Queensland Government"/> | ||
| <meta | ||
| name="twitter:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!" | ||
| content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate eius facere hic molestiae quasi sapiente. Accusantium beatae consectetur cumque, eaque fugit labore officia quisquam quod reprehenderit suscipit! Consectetur, magni!"/> | ||
| <meta name="twitter:image" content="/assets/v4/latest/images/coat-of-arms/coa-thumbnail.png"/> | ||
|
|
||
| <!--#include virtual="/assets/includes-local/head-assets.html"--> | ||
|
|
||
| </head> | ||
|
|
||
| <body data-qg-accessibility="true"> | ||
| <!--#include virtual="/assets/includes-local/analytics.html"--> | ||
| <!--#include virtual="/assets/includes-local/header/access.html"--> | ||
|
|
||
|
|
||
| <!--#include virtual="/assets/includes-local/header/header.html"--> | ||
| <div class="qg-global-breadcrumb qg-breadcrumb"> | ||
| <div class="container-fluid qg-site-width"> | ||
| <nav id="qg-breadcrumb" aria-label="breadcrumb" class="qg-breadcrumb-nav row"> | ||
| <ol class="qg-breadcrumb-list"> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="/" class="qg-breadcrumb-list-item__link"> | ||
| Home | ||
| </a> | ||
| </li> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="../" class="qg-breadcrumb-list-item__link"> | ||
| Web Template Documentation | ||
| </a> | ||
| </li> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="../components.html" class="qg-breadcrumb-list-item__link"> | ||
| Components | ||
| </a> | ||
| </li> | ||
| <li class="qg-breadcrumb-list-item"> | ||
| <a href="#" class="qg-breadcrumb-list-item__link"> | ||
| </a> | ||
| </li> | ||
| </ol> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| <div class="container-fluid qg-site-width"> | ||
| <div id="qg-content"> | ||
| <div id="qg-one-col" class="row wide"> | ||
|
|
||
| <div id="qg-primary-content" role="main"> | ||
| <a class="print-content-link" href="#"><span class="fa fa-print"></span> Print</a> | ||
| <h1 id="qg-print" class="category">Print</h1> | ||
| <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci at dolores enim | ||
| exercitationem expedita fugiat iste iure laudantium magnam mollitia nihil, officiis | ||
| perferendis quia quod ratione repudiandae totam, veniam voluptas. </p> | ||
|
|
||
| <section class="qg-print-guide" id="toc"> | ||
| <p>Guide page</p> | ||
| <ol> | ||
| <li class=""><a href="http://localhost:8086/docs/examples/cut-in.html">First page</a> | ||
| </li> | ||
| <li class="active"><a href="http://localhost:8086/docs/examples/breadcrumb.html">Second | ||
| Page</a></li> | ||
| <li class=""><a href="http://localhost:8086/docs/examples/search-page.html">Third | ||
| page</a></li> | ||
| </ol> | ||
| <br> | ||
| <p><a id="printguide" | ||
| href="https://www.qld.gov.au/_qgdesigns/content/guide-printing?root=60580"><span | ||
| class="fa fa-print"></span> Print entire guide</a></p> | ||
|
|
||
| </section> | ||
|
|
||
| <h3>HTML</h3> | ||
|
|
||
| <pre><code class="language-markup"> | ||
| <div class="qg-image-gallery"> | ||
| <ul> | ||
| <li><a title="caption 1" data-fancybox="gallery-92732" data-caption="caption 1" | ||
| href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a> | ||
| </li> | ||
| <li><a title="caption 2" data-fancybox="gallery-92732" data-caption="caption 2" | ||
| href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a> | ||
| </li> | ||
| <li><a title="caption 3" data-fancybox="gallery-92732" data-caption="caption 3" | ||
| href="https://via.placeholder.com/450g"><img alt="" src="https://via.placeholder.com/150"></a> | ||
| </li> | ||
| <li><a title="caption 4" data-fancybox="gallery-92732" data-caption="caption 4" | ||
| href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a> | ||
| </li> | ||
| <li><a title="caption 5" data-fancybox="gallery-92732" data-caption="caption 5" | ||
| href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a> | ||
| </li> | ||
| <li><a title="caption 6" data-fancybox="gallery-92732" data-caption="caption 6" | ||
| href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a></li> | ||
| </ul> | ||
| </div> | ||
| </code></pre> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <br/> | ||
| <br/> | ||
| <br/> | ||
| <!--#include virtual="/assets/includes-local/footer/footer.html"--> | ||
|
|
||
| <script> | ||
| var qg = qg || {}; | ||
| qg.swe = qg.swe || {}; | ||
| // Used by the feedback form. | ||
| qg.swe.franchiseTitle = 'Franchise Title'; | ||
| </script> | ||
|
|
||
| <!--#include virtual="/assets/includes-local/footer/footer-scripts.html"--> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,3 @@ | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| <!DOCTYPE html> | ||
|
|
||
| <html lang="en"> | ||
|
|
||
Oops, something went wrong.