diff --git a/cigaradvisor/blocks/return-to-top/return-to-top.css b/cigaradvisor/blocks/return-to-top/return-to-top.css new file mode 100644 index 00000000..f86af842 --- /dev/null +++ b/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; + } +} diff --git a/cigaradvisor/blocks/return-to-top/return-to-top.js b/cigaradvisor/blocks/return-to-top/return-to-top.js new file mode 100644 index 00000000..d43d20c9 --- /dev/null +++ b/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); +} diff --git a/cigaradvisor/blocks/return-to-top/return-to-top.webp b/cigaradvisor/blocks/return-to-top/return-to-top.webp new file mode 100644 index 00000000..010f9803 Binary files /dev/null and b/cigaradvisor/blocks/return-to-top/return-to-top.webp differ diff --git a/cigaradvisor/icons/angle-up.svg b/cigaradvisor/icons/angle-up.svg new file mode 100644 index 00000000..6d7d26bc --- /dev/null +++ b/cigaradvisor/icons/angle-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 2c6ef429..deaa8ae2 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/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(); diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 471b8491..78656c33 100644 --- a/cigaradvisor/styles/styles.css +++ b/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%);