test

gitlab-ci.yml

+image: node:10.14.2-stretch
+stages: [setup, verify, deploy]
+install:
+  stage: setup
+  cache:
+    paths:
+    - .cache/npm
+  script:
+  - &npm_install
+    npm install --quiet --no-progress --cache=.cache/npm
+lint:
+  stage: verify
+  cache: &pull_cache
+    policy: pull
+    paths:
+    - .cache/npm
+  script:
+  - *npm_install
+  - node_modules/.bin/gulp lint
+bundle-stable:
+  stage: deploy
+  only:
+  - master@test/antora-ui-default
+  cache: *pull_cache
+  script:
+  - *npm_install
+  - node_modules/.bin/gulp bundle
+  artifacts:
+    paths:
+    - build/ui-bundle.zip
+bundle-dev:
+  stage: deploy
+  except:
+  - master
+  cache: *pull_cache
+  script:
+  - *npm_install
+  - node_modules/.bin/gulp bundle
+  artifacts:
+    expire_in: 1 day # unless marked as keep from job page
+    paths:
+    - build/ui-bundle.zip
+pages:
+  stage: deploy
+  only:
+  - master@test/antora-ui-default
+  cache: *pull_cache
+  script:
+  - *npm_install
+  - node_modules/.bin/gulp preview:build
+  # FIXME figure out a way to avoid copying these files to preview site
+  - rm -rf public/_/{helpers,layouts,partials}
+  artifacts:
+    paths:
+    - public

src/css/toc.css

@@ -122,9 +122,8 @@
 }
 
 .sidebar .capture-btn > i {
-  margin-top: -3px;
   color: var(--color-white);
-  font-size: 25px;
+  font-size: 23px;
 }
 
 .capture-modal {
@@ -136,7 +135,39 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.capture-modal .button-container {
+  position: absolute;
+  top: 20px;
+  right: 25px;
+  display: flex;
+  align-items: center;
+  color: var(--color-white);
+  cursor: pointer;
+}
+
+.capture-modal .button-container .close {
+  font-size: 40px;
+  font-weight: bold;
+}
+
+.capture-modal .button-container > i {
+  color: var(--color-white);
+  font-size: 20px;
+  margin-right: 20px;
+}
+
+.capture-modal > img {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  opacity: 1;
+  transform: scale(0.8);
+  z-index: 99999;
 }
 
 .capture-modal-content {
@@ -149,16 +180,9 @@
   text-align: center;
 }
 
-.close {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-
-.close:hover,
+/* .close:hover,
 .close:focus {
-  color: black;
+  color: var(--color-white);
   text-decoration: none;
   cursor: pointer;
-}
+} */

src/js/08-capture.js

 ;(function () {
   'use strict'
 
-  var captureBody = document.querySelector('.doc')
+  var captureBody = document.getElementById('capture')
   var captureButton = document.querySelector('.sidebar .capture-btn')
   var captureModal = document.querySelector('.sidebar .capture-modal')
-  var closeCaptureModalButton = document.querySelector('.sidebar .capture-modal .capture-modal-content .close')
+  var closeCaptureModalButton = document.querySelector('.sidebar .capture-modal .close')
   var screenshotImg = document.getElementById('screenshot')
+  var saveButton = document.getElementById('save-btn')
 
   captureButton.addEventListener('click', () => {
-    html2canvas(captureBody).then(canvas => {
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+    const scrollX = window.scrollX
+    const scrollY = window.scrollY
+
+    html2canvas(captureBody, {
+      x: scrollX,
+      y: scrollY,
+      width: viewportWidth,
+      height: viewportHeight,
+      scrollX: 0, // reset scrollX for canvas capturing
+      scrollY: 0, // reset scrollY for canvas capturing
+      scale: 1.3,
+    }).then(canvas => {
       screenshotImg.src = canvas.toDataURL()
       captureModal.style.display = 'block'
     })
@@ -18,9 +32,19 @@
     captureModal.style.display = 'none'
   })
 
-  window.addEventListener('click', (event) => {
-    if (event.target === captureModal) {
-      captureModal.style.display = 'none'
-    }
+  saveButton.addEventListener('click', () => {
+    var link = document.createElement('a')
+
+    link.href = screenshotImg.src
+    link.download = 'screenshot.png'
+    link.click()
+
+    document.removeChild(link)
   })
+
+  // window.addEventListener('click', (event) => {
+  //   if (event.target === captureModal) {
+  //     captureModal.style.display = 'none'
+  //   }
+  // })
 })()

src/layouts/default.hbs

@@ -3,7 +3,7 @@
   <head>
 {{> head defaultPageTitle='Untitled'}}
   </head>
-  <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+  <body id="capture" class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
 {{> header}}
 {{> body}}
 {{!-- {{> footer}} --}}

src/partials/article.hbs

-<article id="capture" class="doc">
+<article class="doc">
 {{> toolbar}}
 {{#with page.title}}
 <h1 class="page">{{{this}}}</h1>

src/partials/footer-scripts.hbs

 <script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/html2canvas.js"></script>
 {{#if env.SITE_SEARCH_PROVIDER}}
 {{> search-scripts}}
 {{/if}}

src/partials/head.hbs

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 {{> head-prelude}}
 {{> head-title}}
 {{> head-info}}

src/partials/nav.hbs

 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
     <div class="panels">
-{{> page-versions}}
+{{!-- {{> page-versions}} --}}
 {{> nav-menu}}
-{{!-- {{> nav-explore}} --}}
+{{> nav-explore}}
     </div>
   </aside>
 </div>

src/partials/toc.hbs

@@ -2,9 +2,10 @@
   <div class="toc-menu"></div>
   <div class="capture-btn"><i class="fas fa-camera"></i></div>
   <div class="capture-modal">
-    <div class="capture-modal-content">
+    <div class="button-container">
+      <i id="save-btn" class="fas fa-download"></i>
       <span class="close">&times;</span>
-      <img id="screenshot" src="" alt="Screenshot">
     </div>
+    <img id="screenshot" src="" alt="Screenshot">
   </div>
 </aside>