Untitled
unknown
plain_text
2 years ago
12 kB
11
Indexable
#MainContent>.shopify-section:nth-child(11) .section__header {
margin-bottom: 14px !important;
}
#MainContent>.shopify-section:nth-child(11) .section__heading {
font-family: Montserrat, sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 33px;
letter-spacing: 0em;
text-align: center;
color: #ffffff;
text-transform: uppercase;
}
#eg-para {
font-size: 14px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0em;
text-align: center;
color: #ffffff;
margin-bottom: 0;
}
.eg-links-container {
display: flex;
justify-content: center;
margin-bottom: 18px;
margin-right: 20px;
}
.eg-link {
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
font-weight: 700;
line-height: 15px;
letter-spacing: 0em;
border-bottom: 1px solid transparent;
width: 117px;
height: 28px;
padding-top: 4px;
}
.eg-link:hover,
.eg-link.eg-active-link {
color: rgba(255, 255, 255, 1);
border-color: #ffffff;
}
.eg-option-container {
padding: 0 30px 33px;
flex-wrap: wrap;
display: flex;
justify-content: center;
row-gap: 8px;
column-gap: 8px;
}
.eg-option-container button {
padding: 7px 18px;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 20.5px;
font-size: 12px;
font-weight: 500;
line-height: 15px;
letter-spacing: 0em;
text-align: center;
text-transform: uppercase;
}
.eg-option-container .tab-button:hover,
.eg-option-container .tab-button.eg-active-button {
color: #000000;
background-color: #ffffff
}
#MainContent>.shopify-section:nth-child(11) .column__item__content {
position: absolute;
top: -14px;
background-color: #2B718B;
padding: 8px 20px 2px;
border-radius: 5px;
order: -1;
left: 50%;
transform: translateX(-50%);
width: max-content;
}
#MainContent>.shopify-section:nth-child(11) .column__item__image-wrapper {
width: 100%;
}
#MainContent>.shopify-section:nth-child(11) .column__item__content h3 {
font-family: Montserrat;
font-size: 12px;
font-weight: 500;
line-height: 15px;
letter-spacing: 0em;
text-align: center;
}
@media screen and (max-width: 1024px) {
#MainContent>.shopify-section:nth-child(11) {
padding-bottom: 0 !important;
}
}
@media screen and (max-width: 767px) {
#MainContent>.shopify-section:nth-child(11) .section__heading {
max-width: 385px !important;
margin: auto;
font-size: 30px;
}
#MainContent>.shopify-section:nth-child(11) .column__item {
max-width: 375px;
}
#eg-para {
font-size: 16px !important;
margin-top: 7px !important;
margin-bottom: 30px !important;
}
#MainContent>.shopify-section:nth-child(11)>div {
padding-top: 50px;
}
#MainContent>.shopify-section:nth-child(11)>div {
max-height: 1015px;
}
.eg-option-container {
padding: 0 5px 20px;
}
#MainContent>.shopify-section:nth-child(11) .column__item__inner {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#MainContent>.shopify-section:nth-child(11) .section-columns__slider {
padding-top: 15px;
}
#MainContent>.shopify-section:nth-child(11) .column__item__content {
position: absolute;
top: -15px;
background-color: #2B718B;
padding: 8px 20px 2px;
border-radius: 5px;
order: -1;
z-index: 1;
left: 50%;
transform: translateX(-50%);
}
#MainContent>.shopify-section:nth-child(11) .column__item__image-wrapper {
width: 100%;
}
}
@media screen and (max-width: 650px) {
.eg-option-container {
padding: 0 0 10px;
}
#MainContent>.shopify-section:nth-child(11)>div {
max-height: 985px;
}
}
@media only screen and (max-width:380px) {
#MainContent>.shopify-section:nth-child(11) .section__heading {
font-family: Montserrat, sans-serif;
font-size: 26px;
}
#MainContent>.shopify-section:nth-child(11) .column__item {
max-width: 338px !important;
min-width: 338px !important;
}
}
(function () {
try {
var debug = 0;
var variation_name = "";
var testData = {
"options": {
"options1": [
"BICEPS CURL",
"SQUAT",
"DÉVELOPPÉ COUCHÉ",
"TRICEPS KICKBACK",
"TIRAGE BUSTE PENCHÉ",
"ÉLÉVATION LATÉRALE",
"TIRAGE",
"FACE PULL",
"SOULEVÉ DE TERRE",
"OVERHEAD PRESS",
"FRONT SQUAT",
"FENTES",
"TIRAGE MENTON",
"DONKEY KICK",
"TIRAGE POULIE",
"PULL OVER",
"EXTENSION TRICEPS",
"CRUNCH RAMEUR",
"CRUNCH POULIE HAUTE",
"MOUNTAIN CLIMBERS",
"FLEXION LATÉRALE"
],
"options2": [
"BICEPS CURL",
"DÉVELOPPÉ COUCHÉ",
"TRICEPS KICKBACK",
"TIRAGE BUSTE PENCHÉ",
"ÉLÉVATION LATÉRALE",
"TIRAGE",
"FACE PULL",
"OVERHEAD PRESS",
"TIRAGE MENTON",
"TIRAGE POULIE",
"PULL OVER",
"EXTENSION TRICEPS",
"CRUNCH RAMEUR",
"CRUNCH POULIE HAUTE",
"MOUNTAIN CLIMBERS",
"FLEXION LATÉRALE"
],
"options3": [
"SQUAT",
"SOULEVÉ DE TERRE",
"FRONT SQUAT",
"FENTES",
"DONKEY KICK"
]
}
}
var live = function (selector, event, callback, context) {
var addEvent = function (el, type, handler) {
if (el.attachEvent) el.attachEvent("on" + type, handler);
else el.addEventListener(type, handler);
}
this.Element &&
(function (ElementPrototype) {
ElementPrototype.matches =
ElementPrototype.matches ||
ElementPrototype.matchesSelector ||
ElementPrototype.webkitMatchesSelector ||
ElementPrototype.msMatchesSelector ||
function (selector) {
var node = this,
nodes = (node.parentNode || node.document).querySelectorAll(selector),
i = -1;
while (nodes[++i] && nodes[i] != node);
return !!nodes[i];
};
})(Element.prototype);
var live = function (selector, event, callback, context) {
addEvent(context || document, event, function (e) {
var found,
el = e.target || e.srcElement;
while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
if (el && found) callback.call(el, e);
});
}
live(selector, event, callback, context);
}
var waitForElement = function (selector, trigger, delayInterval, delayTimeout) {
var interval = setInterval(function () {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function () {
clearInterval(interval);
}, delayTimeout);
}
var previousFoundElIndex = -1;
var init = function () {
var sectionHeading = document.querySelector('#MainContent > .shopify-section:nth-child(11) .section__heading');
sectionHeading.innerText = 'Une infinité d’exercices possible';
var paraHTML = '<p id="eg-para">Offrez-vous une séance complète n’importe où!</p>';
sectionHeading.parentElement.insertAdjacentHTML("beforeend", paraHTML);
var sectionHeader = document.querySelector('#MainContent > div:nth-child(11) > div > div > div:first-child');
var linkContainer = '' +
' <div class="eg-links-container">' +
' <button id="eg-link1" class="eg-link eg-active-link" data-accessKey = "options1">Tous</button>' +
' <button id="eg-link2" class="eg-link" data-accessKey = "options2">Haut du corps</button>' +
' <button id="eg-link3" class="eg-link" data-accessKey = "options3">Bas du corps</button>' +
' </div>' +
' <div class="eg-option-container"></div>';
sectionHeader.insertAdjacentHTML("afterend", linkContainer);
// showing first div content by default on load
createOptionsDiv("options1");
live(".eg-link", "click", function () {
var prevActiveLink = this.parentElement.querySelector(".eg-active-link");
if (prevActiveLink && prevActiveLink !== this) prevActiveLink.classList.remove("eg-active-link");
this.classList.add("eg-active-link");
var accessKey = this.getAttribute("data-accessKey");
createOptionsDiv(accessKey);
});
// carousel
waitForElement("#MainContent > div:nth-child(11) > div div .column__item:last-child .column__item__heading", function () {
var videosHeading = [...document.querySelectorAll("#MainContent > div:nth-child(11) > div div .column__item .column__item__heading")];
live('.tab-button', 'click', function () {
const prevActiveButton = this.parentElement.querySelector(".eg-active-button");
if (prevActiveButton && prevActiveButton !== this) prevActiveButton.classList.remove("eg-active-button");
this.classList.add("eg-active-button");
var innerText = this.innerText.trim().toUpperCase();
var data = searchForVideo(videosHeading, innerText);
var foundEl = data.element;
if (foundEl) {
if (window.innerWidth < 767) {
scrollTocenter(foundEl);
scrollTocenter(document.querySelector(".eg-links-container"));
} else {
var foundElIdx = data.position + 1;
if (previousFoundElIndex !== foundElIdx) {
var direction = "frwd";
if (foundElIdx < previousFoundElIndex) {
direction = "bckwrd";
}
var clickNum = -1;
var itemsShowing = 4;
if (foundElIdx % 4 === 0) {
clickNum = (foundElIdx / itemsShowing) - 1;
} else {
clickNum = parseInt(foundElIdx / itemsShowing);
}
// if found el is not in view port
if (!foundEl.classList.contains("is-selected")) {
simulateClick(clickNum, foundEl);
}
// after scrolling to that video very last
previousFoundElIndex = foundElIdx;
}
}
}
});
}, 1000, 15000);
}
var scrollTocenter = function (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
var searchForVideo = function (videosHeading, text) {
var found = false;
var foundEl;
var position = -1; // Initialize the position
videosHeading.forEach(function (textEl, index) {
if (textEl && textEl.innerText.trim().toUpperCase() === text && !found) {
foundEl = textEl.closest(".column__item");
found = true;
position = index; // Update the position if a match is found
}
});
return { element: foundEl, position: position };
}
var simulateClick = function (clickNum, foundEl) {
var prevButton = document.querySelector("#MainContent > div:nth-child(11) > div div .previous");
var nextButton = document.querySelector("#MainContent > div:nth-child(11) > div div .next");
for (var restore = 1; restore <= 50; restore++) {
prevButton.click();
}
for (var clikTimes = 1; clikTimes <= clickNum; clikTimes++) {
nextButton.click();
}
// console.log(foundEl);
}
var createOptionsDiv = function (accessKey) {
var options = testData.options[accessKey];
var optionsHTML = options.reduce(function (t, crr) {
return t += '<button class="tab-button">' + crr + '</button>';
}, "");
document.querySelector(".eg-option-container").innerHTML = optionsHTML;
}
waitForElement('#MainContent > .shopify-section:nth-child(11) .section__heading', init, 50, 15000);
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();
Editor is loading...