Revert "test"

This reverts commit a595b309.

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,8 +122,9 @@
 }
 
 .sidebar .capture-btn > i {
+  margin-top: -3px;
   color: var(--color-white);
-  font-size: 23px;
+  font-size: 25px;
 }
 
 .capture-modal {
@@ -135,39 +136,7 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  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;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .capture-modal-content {
@@ -180,9 +149,16 @@
   text-align: center;
 }
 
-/* .close:hover,
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
 .close:focus {
-  color: var(--color-white);
+  color: black;
   text-decoration: none;
   cursor: pointer;
-} */
+}

src/js/08-capture.js

 ;(function () {
   'use strict'
 
-  var captureBody = document.getElementById('capture')
+  var captureBody = document.querySelector('.doc')
   var captureButton = document.querySelector('.sidebar .capture-btn')
   var captureModal = document.querySelector('.sidebar .capture-modal')
-  var closeCaptureModalButton = document.querySelector('.sidebar .capture-modal .close')
+  var closeCaptureModalButton = document.querySelector('.sidebar .capture-modal .capture-modal-content .close')
   var screenshotImg = document.getElementById('screenshot')
-  var saveButton = document.getElementById('save-btn')
 
   captureButton.addEventListener('click', () => {
-    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 => {
+    html2canvas(captureBody).then(canvas => {
       screenshotImg.src = canvas.toDataURL()
       captureModal.style.display = 'block'
     })
@@ -32,19 +18,9 @@
     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'
+    }
   })
-
-  // 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 id="capture" class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+  <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
 {{> header}}
 {{> body}}
 {{!-- {{> footer}} --}}

src/partials/article.hbs

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