NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name Fanatical bundles carousel enhancer
// @version 2024.7.18
// @namespace Jakub Marcinkowski
// @description In all Fanatical Build Your Own bundles, adds "Add to bundle" button to the carousel - like in game bundles. It is handy to have arrows, to browse products, and button to add to cart close by. In bundles with tiers, adds tier info to the carousel. All bundles: move carousel on top and use mouse wheel horizontal scroll to switch next/prev product.
// @author Jakub Marcinkowski <kuba.marcinkowski on g mail>
// @copyright 2023, Jakub Marcinkowski <kuba.marcinkowski on g mail>
// @license Zlib
// @homepageURL https://gist.github.com/JakubMarcinkowski
// @homepageURL https://github.com/JakubMarcinkowski
// @updateURL https://openuserjs.org/meta/JakubMarcinkowski/Fanatical_bundles_carousel_enhancer.meta.js
// @downloadURL https://openuserjs.org/install/JakubMarcinkowski/Fanatical_bundles_carousel_enhancer.user.js
// @match https://*.fanatical.com/*
// @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii01MCAtNTAgMTAwIDEwMCIgY2xpcC1wYXRoPSJjaXJjbGUoMTAwJSkiPjxjaXJjbGUgcj0iNTAiIGZpbGw9IiNmOTAiLz48cGF0aCBkPSJNLTUwLC0yNUgyOUwyMywtOUgtNTBNMjAsLTNILTE5VjM2TDAsMTJIMTMiIGZpbGw9IiNmZmYiLz48L3N2Zz4
// @run-at document-body
// ==/UserScript==
(function()
{
'use strict';
let listening = new Set();
let carousel, tileCard, tileTarget, carouselTarget, button, buttonDummy, tilesTitles, carouselTitle, observerAddRem;
const observerInitial = new MutationObserver
(
function()
{
const contentElem = document.getElementsByClassName('content')[0];
if (!contentElem) return;
if (contentElem.parentElement.parentElement.id !== 'root') return;
observerInitial.disconnect();
observePageChange(contentElem);
}
);
observerInitial.observe(document.body, {childList: true, subtree: true});
function observePageChange(elem)
{
const observerPage = new MutationObserver
(
function(mutationsList)
{
const addedBundle = mutationsList.find
(
mutation => [...mutation.addedNodes].find(checkIfBundle)
);
if (addedBundle)
{
carousel = document.querySelector('section.bundle-carousel');
if (carousel)
{
carouselOnTop();
carousel.addEventListener('wheel', wheelSwitch, {passive: false});
carouselTitle = carousel.querySelector('.product-name').firstChild; // text node
carouselTarget = document.querySelector('h4.mb-3'); // On top of right pane in carousel
if (document.querySelector('main.bundle-page')
&& document.getElementsByClassName('tier-title')[0]
) // Not a BYOB
{
tilesTitles = [...document.querySelectorAll('h3.card-product-name')];
addTier();
}
if (document.querySelector('main.PickAndMixProductPage')
&& !document.querySelector('.bundle-carousel .pnm-add-btn') // Add buttons exists in game bundles by default
)
{
tilesTitles = [...document.querySelectorAll('h2.card-product-name')];
addButton();
}
}
return;
}
const removedBundle = mutationsList.find
(
mutation => [...mutation.removedNodes].find(checkIfBundle)
);
if (removedBundle)
{
if (observerAddRem) observerAddRem.disconnect();
if (tileCard) removeListeners(tileCard);
}
}
);
observerPage.observe(elem, {childList: true});
}
function checkIfBundle(node)
{
return node.tagName && node.tagName === 'MAIN'
&& (node.classList.contains('PickAndMixProductPage') || node.classList.contains('bundle-page'))
}
function carouselOnTop()
{
unwrap(carousel);
unwrap(carousel.parentElement);
const bgContrast = document.querySelector('[class$="backgroundContrast"]');
if (bgContrast) carousel.parentElement.before(bgContrast);
}
function unwrap(relElem)
{
while (relElem.previousElementSibling)
{
carousel.after(relElem.previousElementSibling);
}
}
function addButton()
{
moveTheButton();
const observerTitle = new MutationObserver(moveTheButton);
observerTitle.observe(carouselTitle, {characterData: true});
observerAddRem = new MutationObserver
(
function(mutationsList)
{
if (mutationsList[0].target
&& mutationsList[0].target.tagName === 'A'
|| !buttonDummy) return;
mutationsList.forEach
(
mutation =>
{
if (mutation.target.tagName !== 'BUTTON') return;
const buttonDummy2 = button.cloneNode(true);
buttonDummy.replaceWith(buttonDummy2);
buttonDummy = buttonDummy2;
}
);
}
);
observerAddRem.observe(
document.querySelector('div.PickAndMixProductPage__content.container > section')
, {subtree: true, attributeFilter: ["class"]}
);
}
function moveTheButton()
{
if (tileCard) // Not on first run
{
moveToTile();
removeListeners(tileCard);
}
tileCard = tilesTitles
.find(x => x.textContent === carouselTitle.nodeValue)
.closest('article');
tileTarget = tileCard.querySelector('.PickAndMixCard__addToBundle > div');
button = tileTarget.querySelector('button');
moveToCarousel();
addListeners(tileCard);
}
function moveToTile(event)
{
tileTarget.append(button);
if (buttonDummy) buttonDummy.remove();
buttonDummy = button.cloneNode(true);
carouselTarget.prepend(buttonDummy);
}
function moveToCarousel(event)
{
carouselTarget.prepend(button);
if (buttonDummy) buttonDummy.remove();
if (!event) buttonDummy = button.cloneNode(true);
tileTarget.append(buttonDummy);
}
function removeListeners(node)
{
listening.delete(node);
node.removeEventListener('mouseenter', moveToTile);
node.removeEventListener('mouseleave', moveToCarousel);
}
function addListeners(node)
{
listening.add(node);
node.addEventListener('mouseenter', moveToTile);
node.addEventListener('mouseleave', moveToCarousel);
}
function addTier()
{
const container = document.createElement('div');
container.className = 'tierInfo';
carouselTarget.prepend(container);
carouselTarget = container;
copyTierInfo();
const observerTitle = new MutationObserver(copyTierInfo);
observerTitle.observe(carouselTitle, {characterData: true});
}
function copyTierInfo()
{
const tierElem = tilesTitles
.find(x => x.textContent === carouselTitle.nodeValue)
.closest('.tier');
let string = [...tierElem.children[0].childNodes]
.reduce((str, node) => {return str += node.nodeType === Node.TEXT_NODE ? node.textContent : ''}, '') // Get all text nodes
carouselTarget.textContent = string + tierElem.children[0].firstElementChild.textContent;
}
function wheelSwitch(e)
{
if (!e.cancelable || e.deltaY !== 0) return;
if (e.deltaX > 0)
{
document.querySelector('button.carousel-button[aria-label="Next"]').click();
}
else if (e.deltaX < 0)
{
document.querySelector('button.carousel-button[aria-label="Previous"]').click();
}
}
const styleSheet = document.head.appendChild(document.createElement('style')).sheet;
function addStyleRules(rules)
{
rules.forEach(rule => styleSheet.insertRule(rule));
}
addStyleRules
([
`h4.mb-3 > button {
float: right;
padding: 6px;
margin-left: 0.3rem;
margin-bottom: 1rem;
}`
,`h4.mb-3 > div.tierInfo {
margin-bottom: 1rem;
}`
,`h4.mb-3 + .overview-container {
clear: both;
}`
,`section.bundle-carousel {
padding-top: 1px;
}`
,`#carousel-content {
padding: 1rem;
}`
,`.PickAndMixProductPage__content {
padding-top: 0 !important;
}`
,`article.left-column > div.product-details {
word-break: break-word;
}` // Fix. BYO Fantasy Game Assets Bundle had Pixelart Fonts Asset packs. Description contained "supported characters", which swelled container.
,`:root {
margin-left: -1.1rem;
}` // Fix. Sometimes fanatical have unnecesary horizontal scrollbar
]);
/* Tested:
https://www.fanatical.com/en/pick-and-mix/essential-game-music-build-your-own-bundle - audio
https://www.fanatical.com/en/pick-and-mix/ultimate-machine-learning-and-ai-build-your-own-bundle - ebook
https://www.fanatical.com/en/pick-and-mix/build-your-own-tabletop-wargame-bundle - games, already has Add
https://www.fanatical.com/en/pick-and-mix/new-skills-new-you-build-your-own-bundle - elearning
https://www.fanatical.com/en/pick-and-mix/build-your-own-fantasy-game-assets-bundle - mixed audio + graphics
*/
})();