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..7c3fa72c --- /dev/null +++ b/cigaradvisor/blocks/return-to-top/return-to-top.js @@ -0,0 +1,37 @@ +import { createOptimizedPicture, decorateIcons } 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; +} 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/styles/styles.css b/cigaradvisor/styles/styles.css index 3e2381f4..287c4559 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -37,6 +37,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%);