add doc capture

.eslintignore

+src/js/vendor/html2canvas.js

src/css/toc.css

@@ -99,3 +99,104 @@
 .sidebar.toc .toc-menu a:hover {
   background: var(--color-blue-10);
 }
+
+.sidebar .capture-btn {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: var(--color-bwg-main);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar .capture-btn:hover {
+  transition: transform 0.2s ease-in-out;
+  background-color: rgba(0, 114, 206, 0.8);
+  transform: scale(1.1);
+}
+
+.sidebar .capture-btn > i {
+  background: url(../img/ico-camera.svg) no-repeat center;
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+}
+
+.capture-modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  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 .close:hover {
+  transform: translateY(-3px);
+  transition: 200ms ease;
+}
+
+.capture-modal .button-container > i {
+  background: url(../img/ico-download.svg) no-repeat center;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 20px;
+}
+
+.capture-modal .button-container > i:hover {
+  transform: translateY(-3px);
+  transition: 200ms ease;
+}
+
+.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 {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 500px;
+  text-align: center;
+}
+
+/* .close:hover,
+.close:focus {
+  color: var(--color-white);
+  text-decoration: none;
+  cursor: pointer;
+} */

src/img/ico-camera.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>
\ No newline at end of file

src/img/ico-download.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
\ No newline at end of file

src/js/08-capture.js

+;(function () {
+  'use strict'
+
+  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 .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 => {
+      screenshotImg.src = canvas.toDataURL()
+      captureModal.style.display = 'block'
+    })
+  })
+
+  closeCaptureModalButton.addEventListener('click', () => {
+    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)
+  })
+})()

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/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/toc.hbs

 <aside class="toc sidebar" data-title="{{{or page.attributes.toctitle 'Contents'}}}" data-levels="{{{or page.attributes.toclevels 2}}}">
   <div class="toc-menu"></div>
+  <div class="capture-btn"><i></i></div>
+  <div class="capture-modal">
+    <div class="button-container">
+      <i id="save-btn"></i>
+      <span class="close">&times;</span>
+    </div>
+    <img id="screenshot" src="" alt="Screenshot">
+  </div>
 </aside>