From 7e6d73c6b70f0860a71f03373cfdc5954b168c9d Mon Sep 17 00:00:00 2001 From: asifamingov Date: Wed, 24 Nov 2021 14:38:43 +1000 Subject: [PATCH 1/2] QOL-7980 Transfer qg print from Matrix Assets to SWE4 --- .../_blocks/components/print/qg-print.js | 109 +++ .../_blocks/components/print/qg-print.scss | 7 + .../_blocks/components/qg-components.js | 5 + .../_project/_blocks/layout/_print.scss | 9 +- src/assets/_project/_blocks/qg-main.scss | 1 + src/docs/components.html | 1 + src/docs/components/print.html | 166 ++++ src/docs/examples/cut-in.html | 8 - src/docs/examples/guide-page.html | 733 ++++++++++++++++++ src/docs/examples/index.html | 3 +- 10 files changed, 1025 insertions(+), 17 deletions(-) create mode 100644 src/assets/_project/_blocks/components/print/qg-print.js create mode 100644 src/assets/_project/_blocks/components/print/qg-print.scss create mode 100644 src/docs/components/print.html create mode 100644 src/docs/examples/guide-page.html diff --git a/src/assets/_project/_blocks/components/print/qg-print.js b/src/assets/_project/_blocks/components/print/qg-print.js new file mode 100644 index 000000000..ec9857305 --- /dev/null +++ b/src/assets/_project/_blocks/components/print/qg-print.js @@ -0,0 +1,109 @@ +/* +FAQ - +Q1 Where this class in use and what it do ? +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 += '
' + $(data).find('#qg-primary-content').html() + '
'; + self.new_content += '
'; + }, + dataType: 'html', + async: false, + }); + } +} diff --git a/src/assets/_project/_blocks/components/print/qg-print.scss b/src/assets/_project/_blocks/components/print/qg-print.scss new file mode 100644 index 000000000..971aca800 --- /dev/null +++ b/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; +} diff --git a/src/assets/_project/_blocks/components/qg-components.js b/src/assets/_project/_blocks/components/qg-components.js index 2e5c17efc..6fa18b261 100644 --- a/src/assets/_project/_blocks/components/qg-components.js +++ b/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(); diff --git a/src/assets/_project/_blocks/layout/_print.scss b/src/assets/_project/_blocks/layout/_print.scss index fb65e066e..99829b865 100644 --- a/src/assets/_project/_blocks/layout/_print.scss +++ b/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, diff --git a/src/assets/_project/_blocks/qg-main.scss b/src/assets/_project/_blocks/qg-main.scss index 08eec9d6b..98b9773de 100644 --- a/src/assets/_project/_blocks/qg-main.scss +++ b/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"; diff --git a/src/docs/components.html b/src/docs/components.html index e301a60ed..15182d29f 100644 --- a/src/docs/components.html +++ b/src/docs/components.html @@ -92,6 +92,7 @@

Components

  • Call out box
  • QG Cards
  • QG Banner Blurb
    • +
  • QG Print
  • Carousel
  • Gallery
  • Downloadable document link
    • diff --git a/src/docs/components/print.html b/src/docs/components/print.html new file mode 100644 index 000000000..a98d3595e --- /dev/null +++ b/src/docs/components/print.html @@ -0,0 +1,166 @@ + + + + + + + + + Print + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    + +
    + Print +

    Print

    +

    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.

    + +
    +

    Guide page

    +
      +
    1. First page +
      2. +
    2. Second + Page
      3. +
    3. Third + page
      4. +
    +
    +

    Print entire guide

    + +
    + +

    HTML

    + + 
    
+   <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>
+
    + +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + diff --git a/src/docs/examples/cut-in.html b/src/docs/examples/cut-in.html index 25a973393..31837e9c3 100644 --- a/src/docs/examples/cut-in.html +++ b/src/docs/examples/cut-in.html @@ -1,11 +1,3 @@ - - - - - - - - diff --git a/src/docs/examples/guide-page.html b/src/docs/examples/guide-page.html new file mode 100644 index 000000000..ad2cd238c --- /dev/null +++ b/src/docs/examples/guide-page.html @@ -0,0 +1,733 @@ + + + + + + + + + + + + + + + Planning a lesson | Transport and motoring | Queensland Government + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + +
    + + + + + +
    + + + + + + +
    +
    + + + + +
    +
    + + + + + + +
    +
    +
    + + +
    + + + + + + + + + + + + +
    +
    +
    +
    + Print +

    Lorem ipsum dolor sit amet

    +

    Lorem ipsum dolor sit amet

    +
    +

    Guide page

    +
    1. Preparing to be a supervisor
    2. Planning a lesson
    3. Gaining experience and avoiding hazards
    +
    + +

    Print entire guide

    + +
      + + +
    + + +
    + + +
    +
    +
    +
    Last updated:
    +
    15 April 2019
    +
    +
    + +
    +
    + Share this page: + +
    +
    + +
    + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/docs/examples/index.html b/src/docs/examples/index.html index 1bc79ce2a..a9b0365d4 100644 --- a/src/docs/examples/index.html +++ b/src/docs/examples/index.html @@ -232,7 +232,7 @@

    Related services

    -