Add return-to-top block (#103)

* add return-to-top block

* add automatic injection of return-to-top button

cigaradvisor/blocks/return-to-top/return-to-top.css

@@ -0,0 +1,59 @@
+#return-to-top {
+    display: block;
+    position: fixed;
+    top: 50%;
+    right: 10px;
+    z-index: 499;
+    opacity: .5;
+    transition: opacity .2s ease-in-out,visibility .2s linear;
+    cursor: pointer;
+}
+
+#return-to-top.hidden {
+    opacity: 0;
+}
+
+#return-to-top > .icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--tan);
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+
+    --icon-size: 36px;
+}
+
+#return-to-top > .icon-container > .icon {
+    margin-top: 2px;
+    filter: var(--clr-filter-white);
+}
+
+@media print, screen and (max-width: 720px) {
+    #return-to-top {
+        height: 50px;
+        width: 50px;
+        margin-top: -25px;
+    }
+
+    #return-to-top > picture {
+        display: none;
+    }
+}
+
+@media print, screen and (min-width: 720px) {
+    #return-to-top {
+        height: 170px;
+        width: 50px;
+        margin-top: -75px;
+    }
+
+    #return-to-top:hover {
+        opacity: 1;
+    }
+
+    #return-to-top > .icon-container {
+        display: none;
+    }
+}

cigaradvisor/blocks/return-to-top/return-to-top.js

@@ -0,0 +1,48 @@
+import {
+  buildBlock, createOptimizedPicture, decorateBlock, decorateIcons, loadBlock,
+} from '../../scripts/aem.js';
+
+function onScroll() {
+  const link = document.getElementById('return-to-top');
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    link.classList.remove('hidden');
+  } else {
+    link.classList.add('hidden');
+  }
+}
+
+function scrollTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+export default function decorate(block) {
+  const link = document.createElement('a');
+  link.id = 'return-to-top';
+  link.classList.add('hidden');
+  link.onclick = scrollTop;
+  block.appendChild(link);
+
+  // Desktop
+  const picture = createOptimizedPicture('/cigaradvisor/blocks/return-to-top/return-to-top.webp');
+  link.appendChild(picture);
+
+  // Mobile
+  const iconContainer = document.createElement('div');
+  iconContainer.classList.add('icon-container');
+  const icon = document.createElement('span');
+  icon.classList.add('icon', 'icon-angle-up');
+  iconContainer.appendChild(icon);
+  decorateIcons(iconContainer);
+  link.appendChild(iconContainer);
+
+  window.onscroll = onScroll;
+}
+
+export async function loadReturnToTop(main) {
+  const container = document.createElement('aside');
+  main.insertAdjacentElement('afterend', container);
+  const block = buildBlock('return-to-top', '');
+  container.append(block);
+  decorateBlock(block);
+  return loadBlock(block);
+}

cigaradvisor/scripts/scripts.js

@@ -13,6 +13,7 @@ import {
   loadCSS,
   getMetadata,
 } from './aem.js';
+import { loadReturnToTop } from '../blocks/return-to-top/return-to-top.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 const AUTHOR_INDEX_PATH = '/cigaradvisor/author/query-index.json';
@@ -321,6 +322,7 @@ async function loadLazy(doc) {
 
   loadHeader(doc.querySelector('header'));
   loadFooter(doc.querySelector('footer'));
+  loadReturnToTop(main);
 
   loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`);
   loadFonts();

cigaradvisor/styles/styles.css

@@ -39,6 +39,7 @@
   --clr-text: var(--clr-dark-gray);
 
   /* filter colors (https://codepen.io/sosuke/pen/Pjoqqp) */
+  --clr-filter-white: invert(100%);
   --clr-filter-gray: invert(18%) sepia(4%) saturate(304%) hue-rotate(277deg) brightness(98%) contrast(92%);
   --clr-filter-tan: invert(50%) sepia(27%) saturate(408%) hue-rotate(358deg) brightness(93%) contrast(91%);
   --clr-filter-subdued-gold: invert(62%) sepia(55%) saturate(302%) hue-rotate(6deg) brightness(90%) contrast(88%);