Rep the brand that builds the most badass panels in the industry! Browse our selection of tees, hats, koozies, and more.
Read More


Read Less

const isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
},
any: function () {
return (
isMobile.Android() ||
isMobile.BlackBerry() ||
isMobile.iOS() ||
isMobile.Opera() ||
isMobile.Windows());
}
};

document.addEventListener(“DOMContentLoaded”, function () {

const tocContent = document.querySelector(“.post-content”);
const tocTitles = tocContent.querySelectorAll(“.category-title”);
const tabsMenu = document.querySelector(‘.toc-menu’);
const scrollToLinks = tocContent.querySelectorAll(“.scroll-to”);

tocTitles.forEach(function (heading, i) { // runs a function for all h2 elements inside your rich text element
let str = heading.innerHTML; // adds section titles to slugs
str = str.replace(/\s+/g, ‘-‘).replace(/[°&\/\\#,+()$~%.'”:;*?{}]/g, “”).toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs
heading.setAttribute(“id”, str); // gives each heading a unique id
const item = document.createElement(“a”); // creates an anchor element called “item” for each h2
item.innerHTML = heading.innerHTML // gives each item the text of the corresponding heading
item.setAttribute(“class”, “toc__item”); // gives each item the correct class
item.setAttribute(“href”, “#” + str); // gives each item the correct anchor link
document.querySelector(“#toc”).appendChild(item); // places each item inside the Table of Contents div
});

const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
document.querySelectorAll(‘.toc__item’).forEach((link) => {
let id = link.getAttribute(‘href’).replace(‘#’, ”);

if (id === entry.target.id) {
link.classList.add(‘toc__item_active’);
setTimeout(() => {
centerActiveItem();
}, “300”);
} else {
link.classList.remove(‘toc__item_active’);
}
});
}
});
}, {
threshold: 0.1
});

tocTitles.forEach(section => {
observer.observe(section)
});

const buttons = document.querySelectorAll(“.toc__item”);

const scrollIntoViewWithOffset = (selector, offset) => {
/*if (isMobile.any()) {
offset = offset * 1.2;
}
console.log(offset);*/
window.scrollTo({
behavior: ‘smooth’,
top: document.querySelector(selector).getBoundingClientRect().top –
document.body.getBoundingClientRect().top –
offset,
})
}

//TOC menu items
buttons.forEach((button) => {
button.addEventListener(‘click’, function (e) {
e.preventDefault();
e.stopPropagation();
scrollIntoViewWithOffset(e.target.hash, 80);

setTimeout(() => {
centerActiveItem();
}, “300”);
});
});

//Other links
scrollToLinks.forEach((button) => {
button.addEventListener(‘click’, function (e) {
e.preventDefault();
e.stopPropagation();
scrollIntoViewWithOffset(e.target.hash, 50);
});
});

const centerActiveItem = () => {
const activeItem = tabsMenu.querySelector(“.toc__item_active”);
if (activeItem) {
const activeItemBounding = activeItem.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const offset = activeItemBounding.left + activeItemBounding.width / 2 – viewportWidth / 2;
const currentScrollLeft = tabsMenu.scrollLeft;
const targetScrollLeft = currentScrollLeft + offset;
const duration = 300;
const startTime = performance.now();

const animateScroll = (timestamp) => {
const elapsed = timestamp – startTime;

if (elapsed < duration) {
const scrollAmount = offset * (elapsed / duration);
tabsMenu.scrollLeft = currentScrollLeft + scrollAmount;
requestAnimationFrame(animateScroll);
} else {
tabsMenu.scrollLeft = targetScrollLeft;
}
};

requestAnimationFrame(animateScroll);
}
};

// Show / hide read more
const readBtn = document.querySelector('.general-info-read-btn');
const readMoreText = document.querySelector('.general-info-read-more');
const hideBtn = document.querySelector('.general-info-hide-btn');
const gradientText = document.querySelector('.general-info-gradient');

// Function to show the additional text
function showAdditionalText() {
readMoreText.style.display = 'inline';
hideBtn.style.display = 'inline';
gradientText.classList.remove('general-info-gradient');
readBtn.style.display = 'none';
}

// Function to hide the additional text
function hideAdditionalText() {
readMoreText.style.display = 'none';
hideBtn.style.display = 'none';
gradientText.classList.add('general-info-gradient');
readBtn.style.display = 'inline';
}

// Add click event listeners
readBtn.addEventListener('click', showAdditionalText);
hideBtn.addEventListener('click', hideAdditionalText);

});