QOL-7980 Transfer qg print from Matrix Assets to SWE4

src/assets/_project/_blocks/components/forms/qg-address-autocomplete.js

@@ -1,6 +1,6 @@
 /*
 FAQ -
-Q1 Where this class in use ?
+Q1 Where is this class in use, and what it does ?
 A1 On Maps Autocomplete
 - https://www.qld.gov.au/transport/contacts/centres/_nocache
 - https://www.qld.gov.au/law/legal-mediation-and-justice-of-the-peace/about-justice-of-the-peace/search-for-your-nearest-jp-or-cdec

src/assets/_project/_blocks/components/misc/qg-license.js

@@ -1,7 +1,7 @@
 /*
 FAQ -
-Q1 Where this function in use and what it do ?
-A1 This function checks meta tag [name="DCTERMS.license] and then insert markup on the bottom of the content section, function is in use where license field is set to true on Matrix metadata.
+Q1 Where is this class in use, and what it does ?
+A1 This function checks meta tag [name="DCTERMS.license] and then insert markup on the bottom of the content section. There is an option to enable this using Matrix metadata.
 - https://www.qld.gov.au/transport/contacts/centres
  */
 

src/assets/_project/_blocks/components/print/qg-print.js

@@ -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,
+    });
+  }
+}

src/assets/_project/_blocks/components/print/qg-print.scss

@@ -0,0 +1,7 @@
+// print button styles
+.print-content-link{
+  position: absolute;
+  right: 35px;
+  z-index:1;
+  top: -28px;
+}

src/assets/_project/_blocks/components/qg-components.js

@@ -5,6 +5,7 @@ import '../layout/location/qg-location';
 import './misc/qg-license';
 import './carousel/qg-carousel';
 import { QgQuickExit } from './quick-exit/qg-quick-exit';
+import { QgPrint } from './print/qg-print';
 import { QgAddressAutocomplete } from './forms/qg-address-autocomplete';
 import './tables';
 import './accordion/qg-accordion';
@@ -25,3 +26,7 @@ quickExit.init();
 // autocomplete
 // eslint-disable-next-line no-unused-vars
 const qgAddressAutocomplete = new QgAddressAutocomplete();
+
+// print
+// eslint-disable-next-line no-unused-vars
+const qgPrint = new QgPrint();

src/assets/_project/_blocks/components/quick-exit/qg-quick-exit.js

@@ -1,7 +1,7 @@
 /*
 FAQ -
-Q1 Where this class in use and what it do ?
-A1 Quick exit function to exit from a page on 'Esc' key or clicking 'Close this site' button
+Q1 Where is this class in use, and what it does ?
+A1 Quick exit function to exit from a page on 'Esc' key or 'Close this site' button click
 - https://www.qld.gov.au/law/crime-and-police/abuse-family-matters-and-protection-orders/apply-for-a-protection-order
  */
 

src/assets/_project/_blocks/layout/_print.scss

@@ -1,10 +1,3 @@
-// print button styles
-.print-content-link{
-  position: absolute;
-  right: 35px;
-  z-index:1;
-  top: -28px;
-}
 // print styles
 @media print {
   * {
@@ -147,7 +140,7 @@
   #qg-banner,
   #tools,
   #qg-site-nav,
-  #qg-section-nav, 
+  #qg-section-nav,
   .qg-section-nav,
   #qg-site-map,
   .qg-options,

src/assets/_project/_blocks/qg-main.scss

@@ -47,6 +47,7 @@
 @import "components/tables/tables";
 @import "components/misc/qg-visually-hidden";
 @import "components/gallery/qg-gallery";
+@import "components/print/qg-print";
 @import "components/misc/qg-dropdowns"; // Extends bootstrap dropdowns
 @import "components/misc/qg-navs"; // Extends bootstrap navs
 @import "components/misc/qg-images";

src/assets/_project/_blocks/utils/qg-load-google-api.js

@@ -1,6 +1,6 @@
 /*
 FAQ -
-Q1 What this class do ?
+Q1 Where is this class in use, and what it does ?
 A1 This class determine the franchise (if available) and the environment using the hostname and then loads Google Maps API using that key
   - Key is loaded using the qg-google-keys.json file
  */

src/docs/components.html

@@ -92,6 +92,7 @@ <h1>Components</h1>
           <li><a href="./components/call-out-box.html">Call out box</a></li>
           <li><a href="./components/cards.html">QG Cards</a></li>
           <li><a href="./components/banner-blurb.html">QG Banner Blurb</a></li>
+          <li><a href="./components/print.html">QG Print</a></li>
           <li><a href="./components/carousel.html">Carousel</a></li>
           <li><a href="./components/gallery.html">Gallery</a></li>
           <li><a href="./components/document-link.html">Downloadable document link</a></li>

src/docs/components/print.html

@@ -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">
+            Print
+          </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">
+   &#x3C;div class=&#x22;qg-image-gallery&#x22;&#x3E;
+       &#x3C;ul&#x3E;
+            &#x3C;li&#x3E;&#x3C;a title=&#x22;caption 1&#x22; data-fancybox=&#x22;gallery-92732&#x22; data-caption=&#x22;caption 1&#x22;
+                   href=&#x22;https://via.placeholder.com/450&#x22;&#x3E;&#x3C;img alt=&#x22;&#x22; src=&#x22;https://via.placeholder.com/150&#x22;&#x3E;&#x3C;/a&#x3E;
+            &#x3C;/li&#x3E;
+            &#x3C;li&#x3E;&#x3C;a title=&#x22;caption 2&#x22; data-fancybox=&#x22;gallery-92732&#x22; data-caption=&#x22;caption 2&#x22;
+                   href=&#x22;https://via.placeholder.com/450&#x22;&#x3E;&#x3C;img alt=&#x22;&#x22; src=&#x22;https://via.placeholder.com/150&#x22;&#x3E;&#x3C;/a&#x3E;
+            &#x3C;/li&#x3E;
+            &#x3C;li&#x3E;&#x3C;a title=&#x22;caption 3&#x22; data-fancybox=&#x22;gallery-92732&#x22; data-caption=&#x22;caption 3&#x22;
+                   href=&#x22;https://via.placeholder.com/450g&#x22;&#x3E;&#x3C;img alt=&#x22;&#x22; src=&#x22;https://via.placeholder.com/150&#x22;&#x3E;&#x3C;/a&#x3E;
+            &#x3C;/li&#x3E;
+            &#x3C;li&#x3E;&#x3C;a title=&#x22;caption 4&#x22; data-fancybox=&#x22;gallery-92732&#x22; data-caption=&#x22;caption 4&#x22;
+                   href=&#x22;https://via.placeholder.com/450&#x22;&#x3E;&#x3C;img alt=&#x22;&#x22; src=&#x22;https://via.placeholder.com/150&#x22;&#x3E;&#x3C;/a&#x3E;
+            &#x3C;/li&#x3E;
+            &#x3C;li&#x3E;&#x3C;a title=&#x22;caption 5&#x22; data-fancybox=&#x22;gallery-92732&#x22; data-caption=&#x22;caption 5&#x22;
+                   href=&#x22;https://via.placeholder.com/450&#x22;&#x3E;&#x3C;img alt=&#x22;&#x22; src=&#x22;https://via.placeholder.com/150&#x22;&#x3E;&#x3C;/a&#x3E;
+            &#x3C;/li&#x3E;
+            &#x3C;li&#x3E;&#x3C;a title=&#x22;caption 6&#x22; data-fancybox=&#x22;gallery-92732&#x22; data-caption=&#x22;caption 6&#x22;
+                   href=&#x22;https://via.placeholder.com/450&#x22;&#x3E;&#x3C;img alt=&#x22;&#x22; src=&#x22;https://via.placeholder.com/150&#x22;&#x3E;&#x3C;/a&#x3E;&#x3C;/li&#x3E;
+       &#x3C;/ul&#x3E;
+   &#x3C;/div&#x3E;
+  </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>

src/docs/examples/cut-in.html

@@ -1,11 +1,3 @@
-
-
-
-
-
-
-
-
 <!DOCTYPE html>
 
 <html lang="en">