// AVOID RIGHT CLICK MENU ON IMGS & VIDEOS
window.oncontextmenu = function (e) { if (e.target.tagName === 'IMG' || e.target.tagName === 'VIDEO') return false };
// BODY FADE CLICK
document.body.onclick = function (e) {
if (!e.target.classList.contains('body_fade')) return;
var opens = document.querySelectorAll('[open]');
opens.forEach(function (open) { open.removeAttribute('open'); })
document.body.classList.remove('body_fade');
document.body.classList.remove('header_fade');
};
window._iaq = window._iaq || [];
window.theme.utils.EMAIL_REGEX = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
window.theme.utils.handleize = (text) => text.toLowerCase().replace(/ /g, '-').replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
window.theme.utils.serializeForm = (form) => {
const obj = {};
const formData = new FormData(form);
const keys = formData.keys();
for (const key of keys) {
obj[key] = formData.get(key);
}
return JSON.stringify(obj);
};
window.theme.getDimension = (value) => {
const dimension = window.theme.dimensions[value]
if (dimension) return ` (${dimension})`
else return '';
}
window.theme.utils.Timer = function (fn, t = 500) {
let timerObj;
this.stop = () => {
if (timerObj) {
clearInterval(timerObj);
timerObj = null;
}
return this;
};
this.start = () => {
if (!timerObj) {
this.stop();
timerObj = setInterval(fn, t);
}
return this;
};
};
window.theme.utils.iterable = (param, data, type = 'identify') => {
const dataFields = data;
if (type === 'identify')
dataFields["accepts_marketing"] = true;
window._iaq.push([type, param, dataFields]);
};
window.theme.utils.klaviyo = (email, data, type = 'identify') => {
const dataFields = { ...data, '$email': email }
window.klaviyo = window.klaviyo || []
window.klaviyo.push([type, dataFields]);
};
window.theme.utils.gif = (el, images, t = 1000) => {
if (!el || !images)
return;
let position = 0;
let img;
let mediaMobile;
let mediaDesktop;
if (el.tagName === 'PICTURE') {
img = el.querySelector('img');
mediaMobile = el.querySelector('source[media="(max-width:989px)"]');
mediaDesktop = el.querySelector('source[media="(min-width:990px)"]');
}
setInterval(function () {
if (el.tagName === 'IMG')
el.src = images[position];
else {
img.src = images[position].desktop;
mediaMobile.srcset = images[position].mobile;
mediaDesktop.srcset = images[position].desktop;
}
position++;
if (position === images.length)
position = 0;
}, t);
};
window.theme.utils.swipe = (el, callback) => {
const touchsurface = el, threshold = 50, restraint = 100, allowedTime = 300, handleswipe = callback || function (swipedir) { };
let swipedir, startX, startY, distX, distY, dist, elapsedTime, startTime;
touchsurface.addEventListener("touchstart", function (e) {
const touchobj = e.changedTouches[0];
swipedir = "none";
dist = 0;
startX = touchobj.pageX;
startY = touchobj.pageY;
startTime = new Date().getTime();
}, { passive: true });
touchsurface.addEventListener("touchend", function (e) {
const touchobj = e.changedTouches[0];
distX = touchobj.pageX - startX;
distY = touchobj.pageY - startY;
elapsedTime = new Date().getTime() - startTime;
if (elapsedTime <= allowedTime) {
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)
swipedir = distX < 0 ? "left" : "right";
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint)
swipedir = distY < 0 ? "up" : "down";
}
handleswipe(swipedir);
}, { passive: true });
};
window.theme.fetchConfig = (type = 'json') => {
return {
method: "POST",
headers: {
"Content-Type": "application/json",
"Cache-Control": "no-cache",
Accept: `application/${type}`,
},
};
};
class SliderComponent extends HTMLElement {
slidesWrapper;
slides;
slidesLength;
prev;
next;
dots;
checking;
threshold;
quantity;
allowClick;
multiple;
centered;
position;
initialPosition;
finalPosition;
disabled;
slide;
step;
initial;
final;
x1;
y1;
x2;
y2;
constructor() {
super();
this.slidesWrapper = this.querySelector(".slider-slides");
this.slides = this.querySelectorAll(".slider-slide");
this.slidesLength = this.slides.length;
this.prev = this.querySelector(".slider-prev");
this.next = this.querySelector(".slider-next");
this.dots = this.querySelector(".slider-dots");
this.checking = false;
this.threshold = 50;
this.quantity = parseInt(this.dataset.quantity);
this.thumbnailsWrapper = this.querySelector('.slider-thumbnails');
this.allowClick = true;
this.init();
}
init() {
if (this.dataset.status === "disabled")
return;
this.resizeVariables();
this.createClones();
this.setThumbnails()
if (this.prev)
this.prev.addEventListener("click", (() => {
this.changeSlide("prev");
}).bind(this));
if (this.next)
this.next.addEventListener("click", (() => {
this.changeSlide("next");
}).bind(this));
if (this.dots)
this.dots.addEventListener("click", ((e) => {
const target = e.target;
const index = target.dataset.index;
if (!index || target.hasAttribute("active"))
return;
this.changeSlide(parseInt(index));
}).bind(this));
this.slidesWrapper.addEventListener("click", this.clickAction.bind(this));
this.slidesWrapper.addEventListener("transitionend", this.checkSlide.bind(this));
this.slidesWrapper.addEventListener("mousedown", this.dragStart.bind(this));
this.slidesWrapper.addEventListener("touchstart", this.dragStart.bind(this), { passive: true });
this.slidesWrapper.addEventListener("touchend", this.dragEnd.bind(this), {
passive: true,
});
this.slidesWrapper.addEventListener("touchmove", this.dragAction.bind(this), { passive: true });
}
createClones() {
const firstClone = this.slides[0].cloneNode(true);
const lastClone = this.slides[this.slidesLength - 1].cloneNode(true);
firstClone.classList.add("slide-clone");
lastClone.classList.add("slide-clone");
this.slidesWrapper.appendChild(firstClone);
this.slidesWrapper.insertBefore(lastClone, this.slides[0]);
if (this.multiple || this.centered) {
const firstClone1 = this.slides[1].cloneNode(true);
const lastClone1 = this.slides[this.slidesLength - 2].cloneNode(true);
firstClone1.classList.add("slide-clone");
lastClone1.classList.add("slide-clone");
this.slidesWrapper.appendChild(firstClone1);
this.slidesWrapper.insertBefore(lastClone1, lastClone);
if (this.quantity > 2 && !this.centered && this.slides[2] && this.slides[this.slidesLength - 3]) {
const firstClone2 = this.slides[2].cloneNode(true);
const lastClone2 = this.slides[this.slidesLength - 3].cloneNode(true);
firstClone2.classList.add("slide-clone");
lastClone2.classList.add("slide-clone");
this.slidesWrapper.appendChild(firstClone2);
this.slidesWrapper.insertBefore(lastClone2, lastClone1);
}
}
this.position = this.initialPosition;
this.slidesWrapper.style.transform = `translateX(-${this.position}%)`;
this.dataset.status = "on";
this.slides = this.querySelectorAll(".slider-slide");
}
changeSlide(dir) {
if (this.checking || this.disabled || (dir === this.slide))
return;
this.dataset.status = "transition";
if (dir === "next") {
this.position = this.position + this.step;
this.slide = this.slide + 1;
}
else if (dir === "prev") {
this.position = this.position - this.step;
this.slide = this.slide - 1;
}
else if (typeof dir === "number") {
this.position = this.centered
? this.initialPosition + this.step * dir
: dir * this.step;
this.slide = dir;
}
this.slidesWrapper.style.transform = `translateX(-${this.position}%)`;
this.checking = true;
}
checkSlide() {
this.dataset.status = "on";
if (this.position < 1 || (this.centered && this.position < 78)) {
this.slide = this.slidesLength;
this.position = this.finalPosition;
this.slidesWrapper.style.transform = `translateX(-${this.position}%)`;
}
else if (this.slide > this.slidesLength) {
this.slide = 1;
this.position = this.initialPosition;
this.slidesWrapper.style.transform = `translateX(-${this.position}%)`;
}
this.updateDots();
this.checking = false;
}
dragStart(e) {
if (this.disabled || (window.innerWidth > 989 && !this.classList.contains("slider-desktop-drag")))
return;
const width = this.slidesWrapper.getBoundingClientRect().width;
this.initial = this.centered
? width * 0.77 + width * 0.85 * this.slide
: width * this.slide;
this.slidesWrapper.style.transform = `translateX(-${this.initial}px)`;
if (e.type == "touchstart") {
this.x1 = e.touches[0].clientX;
this.y1 = e.touches[0].clientY;
}
else {
e.preventDefault();
this.x1 = e.clientX;
this.y1 = e.clientY;
document.onmouseup = this.dragEnd.bind(this);
document.onmousemove = this.dragAction.bind(this);
}
}
dragAction(e) {
const position = this.getPosition();
const clientY = e.type == "touchmove" ? e.touches[0].clientY : e.clientY;
const clientX = e.type == "touchmove" ? e.touches[0].clientX : e.clientX;
this.allowClick = false;
this.y2 = this.y1 - clientY;
this.x2 = this.x1 - clientX;
this.x1 = clientX;
if (Math.abs(this.x2) > Math.abs(this.y2))
this.slidesWrapper.style.transform = `translateX(-${position + this.x2}px)`;
}
dragEnd() {
this.final = this.getPosition();
if (this.final - this.initial < -this.threshold)
this.changeSlide("prev");
else if (this.final - this.initial > this.threshold)
this.changeSlide("next");
else {
this.dataset.status = "transition";
this.slidesWrapper.style.transform = `translateX(-${this.position}%)`;
}
document.onmouseup = null;
document.onmousemove = null;
setTimeout((() => {
this.allowClick = true;
}).bind(this), 0);
}
clickAction(e) {
if (!this.allowClick)
e.preventDefault();
}
getPosition() {
let position = this.slidesWrapper.style.transform
.replace("translateX(-", "")
.replace("px)", "");
return parseInt(position);
}
resizeVariables() {
this.centered =
window.innerWidth < 990 && this.classList.contains("slider-centered");
this.disabled =
window.innerWidth > 989 && this.classList.contains("slider-no-desktop");
this.multiple = window.innerWidth > 989 && this.quantity > 1;
this.dataset.status = "on";
this.slide = 1;
this.initialPosition = this.centered ? 162 : 100;
this.step = this.centered ? 85 : this.multiple ? 33.33 : 100;
this.finalPosition = this.centered
? 77 + this.step * this.slidesLength
: this.step * this.slidesLength;
this.position = this.initialPosition;
this.slidesWrapper.style.transform = `translateX(-${this.position}%)`;
this.updateDots();
}
updateDots() {
if (this.dots) {
this.dots.querySelector("[active]").removeAttribute("active");
this.dots
.querySelector('[data-index="' + this.slide + '"]')
.setAttribute("active", "");
}
}
update(arr, video) {
if (!arr || arr.length === 0)
return;
this.slidesWrapper.style.minHeight =
this.slidesWrapper.getBoundingClientRect().height + "px";
this.slidesWrapper.innerHTML = "";
this.slide = 1;
this.position = this.initialPosition;
this.slidesWrapper.style.transform = `translateX(-${this.position}%)`;
let html = "";
let html2 = "";
if (video) {
html += `
`;
html2 += `
`;
}
arr.forEach(function (el, i) {
const n = i + 1;
html += `
`;
html2 += `
`;
});
this.slidesWrapper.innerHTML = html;
this.slides = this.querySelectorAll(".slider-slide");
this.slidesLength = this.slides.length;
this.createClones();
this.updateDots();
this.slidesWrapper.style.minHeight = "";
this.setThumbnails(html2)
}
setThumbnails(html) {
if (!this.thumbnailsWrapper) return
if (html) this.thumbnailsWrapper.innerHTML = html;
[...this.thumbnailsWrapper.children].forEach(function (thumbnail) {
thumbnail.addEventListener('click', function () {
this.changeSlide(Number(thumbnail.dataset.index))
}.bind(this))
}.bind(this))
}
updateThumbnails() {
if (!this.thumbnailsWrapper) return
}
}
customElements.define("slider-component", SliderComponent);
class AccordionComponent extends HTMLElement {
buttons;
constructor() {
super();
this.buttons = this.querySelectorAll("button");
this.addEventListener("click", this.handleClick.bind(this));
}
handleClick(e) {
const el = e.target;
if (el.tagName !== "BUTTON")
return;
else if (el.getAttribute("aria-expanded") === "true") {
el.setAttribute("aria-expanded", "false");
return;
}
else if (this.buttons.length === 1) {
el.setAttribute("aria-expanded", "true");
return;
}
this.buttons.forEach((button) => {
if (button === el)
button.setAttribute("aria-expanded", "true");
else
button.setAttribute("aria-expanded", "false");
});
}
}
customElements.define("accordion-component", AccordionComponent);
class FaqComponent extends HTMLElement {
questions;
constructor() {
super();
this.questions = this.querySelectorAll("dt");
this.addEventListener("click", this.handleDropdown.bind(this));
}
handleDropdown(e) {
let selected;
if (e.target.tagName === "H3")
selected = e.target.closest("dt");
else if (e.target.tagName === "DT")
selected = e.target;
else
return;
if (selected.getAttribute("aria-expanded") === "true") {
selected.setAttribute("aria-expanded", "false");
return;
}
else if (this.questions.length === 1) {
selected.setAttribute("aria-expanded", "true");
return;
}
this.questions.forEach((question) => {
if (question === selected)
selected.setAttribute("aria-expanded", "true");
else
question.setAttribute("aria-expanded", "false");
});
}
}
customElements.define("faq-component", FaqComponent);
class NewsletterForm extends HTMLElement {
form;
email;
constructor() {
super();
this.form = this.querySelector("form");
this.email = this.form.querySelector('[type="email"]');
this.form.addEventListener("submit", this.newsletter.bind(this));
}
newsletter(e) {
e.preventDefault();
const email = this.email.value;
if (window.theme.utils.EMAIL_REGEX.test(email))
this.handleData(email);
}
getProductName(product, variant) {
const option1 = product.options[0] && product.options[0].includes("Weight")
? variant.options[0] + "lbs"
: variant.options[0] || '';
const option2 = product.options[1] && product.options[1].includes("Weight")
? variant.options[1] + "lbs"
: variant.options[1] || '';
const formName = [product.title, option1, option2].join(" ");
return formName;
}
handleData(email) {
let data = {};
if (this.dataset.type === "product" && "product" in window.theme) {
const formName = this.getProductName(window.theme.product, window.theme.product.currentVariant);
data['weightList'] = formName;
}
else if (this.dataset.type === "collection") {
const collectionShop = this.closest(".collection-shop");
const inputId = collectionShop.querySelector('[name="id"]');
const id = parseInt(inputId.value);
const handle = collectionShop.dataset.product;
const variant = window.theme.collectionProducts[handle].find((variant) => variant.id === id);
const formName = this.getProductName(window.theme.collectionProducts[handle], variant);
data['weightList'] = formName;
}
else {
const tag = this.querySelector('[name="contact[tags]"').value;
data[tag] = true;
}
window.theme.utils.klaviyo(email, data);
this.setAttribute("success", "");
}
}
customElements.define("newsletter-form", NewsletterForm);
(function triggersFn() {
const modalTriggers = document.querySelectorAll("[data-modal-trigger]");
modalTriggers.forEach((trigger) => {
trigger.addEventListener("click", () => {
const modal = document.getElementById(trigger.dataset.modalTrigger);
if (modal.hasAttribute("open"))
modal.removeAttribute("open");
else
modal.setAttribute("open", "");
document.body.classList.toggle("body_fade");
document.body.classList.toggle("header_fade");
});
});
const drawerTriggers = document.querySelectorAll("[data-drawer-trigger]");
drawerTriggers.forEach((trigger) => {
trigger.addEventListener("click", () => {
const drawer = document.getElementById(trigger.dataset.drawerTrigger);
if (drawer.hasAttribute("open")) {
drawer.removeAttribute("open");
document.body.classList.remove("body_fade");
document.body.classList.remove("header_fade");
}
else {
drawer.setAttribute("open", "");
if (trigger.dataset.drawerTrigger === "menu-drawer") {
document.body.classList.add("body_fade");
}
else {
document.body.classList.add("body_fade");
document.body.classList.add("header_fade");
}
}
});
});
})();
(function scrollUpFn() {
const scrollUp = document.querySelector(".scrollup");
if (!scrollUp) return;
scrollUp.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
window.addEventListener("scroll", function () {
if (window.scrollY > 50)
scrollUp.style.opacity = "1";
else
scrollUp.style.opacity = "0";
});
})();
(function atcForms() {
const forms = document.querySelectorAll('form.atc-form')
if (!forms) return;
[...forms].forEach(form => {
form.addEventListener('submit', function (e) {
e.preventDefault();
const submitButton = form.querySelector('[type="submit"]');
if (submitButton) {
submitButton.setAttribute('disabled', 'true');
submitButton.classList.add('loading');
}
const body = JSON.stringify({
...JSON.parse(window.theme.utils.serializeForm(form))
});
fetch('/cart/add', { ...window.theme.fetchConfig(), ...{ body } })
.then((response) => {
window.theme.cart.render(true);
})
.catch((err) => {
console.error('CART ERROR: ', err);
form.submit();
})
.finally(() => {
if (submitButton) {
submitButton.classList.remove('loading');
submitButton.removeAttribute('disabled');
}
const close = document.querySelector(".close");
if (close) close.click();
});
})
})
})();
Quick Add
Quick Add
