<fieldset class="filterButtons xScroll">
<legend class="filterButtons__heading">Filters:</legend>
<div class="filterButtons__list xScroll__items">
<div class="filterButtons__button">
<input type="checkbox" class="filterButtons__input" id="at-school" value="at-school" />
<label class="filterButtons__label" for="at-school"><i class="prependedIcon fa-solid fa-school"></i>At School</label>
</div>
<div class="filterButtons__button">
<input type="checkbox" class="filterButtons__input" id="at-work" value="at-work" />
<label class="filterButtons__label" for="at-work"><i class="prependedIcon fa-solid fa-briefcase"></i>At Work</label>
</div>
<div class="filterButtons__button">
<input type="checkbox" class="filterButtons__input" id="in-your-backyard" value="in-your-backyard" />
<label class="filterButtons__label" for="in-your-backyard"><i class="prependedIcon fa-solid fa-squirrel"></i>In Your Backyard</label>
</div>
<div class="filterButtons__button">
<input type="checkbox" class="filterButtons__input" id="in-you-home" value="in-you-home" checked />
<label class="filterButtons__label" for="in-you-home"><i class="prependedIcon fa-solid fa-house-chimney"></i>In Your Home</label>
</div>
<div class="filterButtons__button">
<input type="checkbox" class="filterButtons__input" id="on-the-road" value="on-the-road" />
<label class="filterButtons__label" for="on-the-road"><i class="prependedIcon fa-solid fa-car"></i>On The Road</label>
</div>
<div class="filterButtons__button">
<input type="checkbox" class="filterButtons__input" id="on-the-water" value="on-the-water" />
<label class="filterButtons__label" for="on-the-water"><i class="prependedIcon fa-solid fa-ship"></i>On The Water</label>
</div>
</div>
</fieldset>
<link media="all" rel="stylesheet" href="/filter-buttons/filter-buttons.css" />
<script src="/filter-buttons/filter-buttons.js"></script>
<link media="all" rel="stylesheet" href="/_x-scroll/x-scroll.css" />
<script src="/_x-scroll/x-scroll.js"></script>
{% render "@filter-buttons" with {containerClass: "xScroll", itemsClass: "xScroll__items"} %}
{% import "_macros.twig" as h %}
{{ h.componentAssets('x-scroll', true) }}
/* No context defined. */
export default function XScroll() {
document.querySelectorAll(".xScroll").forEach((cont) => {
//get the actual, scrollable ul
const list = cont.querySelector(".xScroll__items");
//get the anchor with the active class
let active = list.querySelector("[class*='--active'], input[checked]");
//scroll the list with appropriate offsets to center the active item
if (active)
list.scrollLeft =
active.offsetLeft - (list.clientWidth / 2 - active.clientWidth / 2);
//add an event listener to adjust the opacity of the :before and :after overlay when the scroll is near the start or end
list.addEventListener("scroll", (e) => {
setXScrollOverlay(e.target);
});
//check the opacity on load in case we are pre-scrolled
setXScrollOverlay(list);
});
function normalizeOpacity(val) {
return val > 1 ? 1 : val;
}
function setXScrollOverlay(target) {
const multiplier = 0.04;
const startOpacity = target.scrollLeft * multiplier;
const endOpacity =
(target.scrollWidth - (target.offsetWidth + target.scrollLeft)) *
multiplier;
target.style.setProperty(
"--startFadeOpacity",
normalizeOpacity(startOpacity)
);
target.style.setProperty("--endFadeOpacity", normalizeOpacity(endOpacity));
}
}
import * as xScroll from "./x-scroll-util";
import "./x-scroll.scss";
export default function XScroll() {
xScroll.default();
}
@use "../panel/panel";
@use "../_layout/lists";
@use "../_layout/mixins";
.xScroll {
background: none;
padding: 0;
border: 0;
position: relative;
}
.xScroll__above {
position: relative;
z-index: calc(var(--z) * 11);
}
.xScroll__items {
--startFadeOpacity: 0;
--endFadeOpacity: 1;
--maskColor: var(--white);
//box-sizing: content-box; //not sure why it was added in the first place, but removing it seems to have no negative consequences
overflow-x: auto;
overflow-y: hidden;
display: flex;
list-style: none;
margin: 1em 0 0;
padding: 0;
width: 100%;
gap: var(--gap, 0);
&:before {
left: -1px;
background: linear-gradient(
90deg,
var(--maskColor, #fff),
hsla(0, 0%, 100%, 0)
);
opacity: var(--startFadeOpacity);
}
&:after {
right: -1px;
background: linear-gradient(
270deg,
var(--maskColor, #fff),
hsla(0, 0%, 100%, 0)
);
opacity: var(--endFadeOpacity);
}
&:before,
&:after {
content: "";
width: var(--xScrollMaskWidth, 1em);
bottom: 0;
top: 0;
position: absolute;
z-index: calc(var(--z) * 10);
pointer-events: none;
}
& > * {
flex: 0 0 auto;
}
}
No notes defined.