Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
12 kB
7
Indexable
Never
#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);
  }
})();