CloudBlend Flare Leggings
{}"
x-data="{
index: +`0`,
hoverValue: '',
offset: +`2`,
...utils.initContentSlider($el, $el.querySelector('fieldset'), undefined, ``, +``, true),
show_all_items: true,
desktop_display_limit: 9999,
mobile_display_limit: 9999,
swatches_at_start: true,
swatches_at_end: false,
swatches_overflow: false,
pageSwatches(swatches, direction) {
const gap = parseFloat(getComputedStyle(swatches).columnGap) || 0;
const swatch = swatches.querySelector('label');
if (!swatch) return;
const size = swatch.getBoundingClientRect().width + gap;
const step = Math.max(1, Math.floor((swatches.clientWidth + gap) / size)) * size;
const page = Math.round(swatches.scrollLeft / step);
swatches.scrollTo({ left: Math.max(0, page + direction) * step, behavior: 'smooth' });
}
}"
x-init="
const swatches = $el.querySelector('fieldset');
const swatchList = [...swatches.querySelectorAll('label')];
const arrows = swatches.closest('[data-swatch-arrows]');
const fitSwatches = () => {
if (!swatchList.length) return 1;
const gap = parseFloat(getComputedStyle(swatches).columnGap) || 0;
const size = swatchList[0].getBoundingClientRect().width + gap;
const space = arrows.parentElement.clientWidth;
const arrowSpace = 2 * (16 + (parseFloat(getComputedStyle(arrows).columnGap) || 0));
const maxPerSet = 5;
if (swatchList.length <= maxPerSet && swatchList.length * size - gap <= space) {
swatches_overflow = false;
swatches.style.maxWidth = '';
return swatchList.length;
}
const half = (size - gap) / 2;
const perSet = Math.max(1, Math.min(maxPerSet, Math.floor((space - arrowSpace - half) / size)));
swatches_overflow = true;
swatches.style.maxWidth = `${perSet * size + half}px`;
return perSet;
};
const perSet = fitSwatches();
const activeIndex = Math.max(0, swatchList.findIndex(swatch => swatch.classList.contains('active')));
if (swatchList.length) {
swatches.scrollLeft = swatchList[Math.floor(activeIndex / perSet) * perSet].offsetLeft;
}
const updateSwatchEnds = () => {
swatches_at_start = swatches.scrollLeft <= 1;
swatches_at_end = swatches.scrollLeft >= swatches.scrollWidth - swatches.clientWidth - 1;
};
swatches.addEventListener('scroll', updateSwatchEnds, { passive: true });
new ResizeObserver(() => {
fitSwatches();
updateSwatchEnds();
}).observe(arrows.parentElement);
$nextTick(updateSwatchEnds);
"
x-defer="intersect">