tour.js

import { $ } from '../../remakejs/queryjs';

// CONFIG

let tourName = "onboarding-tour";

let tourAudioElem = $(".tour-audio").get(0);

if (tourAudioElem) {
  let tourSelectors = [".tour-step__masthead", ".tour-step__bundle-name", ".tour-step__bundle-price", ".tour-step__bundle-description", ".tour-step__bundle-cover-image", ".tour-step__bundle-cover-image-replace", ".tour-step__bundle-details", ".tour-step__bundle-deliverable", ".tour-step__bundle-timeline", ".tour-step__new-bundle", ".tour-step__new-bundle", ".tour-step__page-avatar", ".tour-step__page-cover-image", ".tour-step__claim", ".tour-step__claim", ".tour__top-of-page-placeholder", ".tour__top-of-page-placeholder", ".tour__top-of-page-placeholder"];
  let tourFallbackElem = $(".tour__top-of-page-placeholder").get(0);
  let tourElements = tourSelectors.map(s => document.querySelector(s) || tourFallbackElem);

  let mastheadDataElem = document.querySelector("[data-o-key-hide-masthead]");
  if (mastheadDataElem) {
    if (mastheadDataElem.getAttribute("data-o-key-hide-masthead").length > 0) {
      tourElements[0] = tourFallbackElem;
    }
  }

  let tourTimeOffsets = [0,5500,16500,21000,23500,26000,31000,37500,43500,50500,55000,60500,65000,70000,75500,81500,85000,91500];
  let tourLastStepDuration = 3000;

  let tourCurrentElementClass = tourName + "--current-element";

  let tourScrollToTopOnEnd = false;

  let timeouts = [];
  function coverImageReplaceCallback () {
    // call at the beginning of the image replace step
    let timeout = setTimeout (function () {
      let bundleCoverElem = $(".bundle__cover").get(0);
      bundleCoverElem.click();
    }, 2000);

    timeouts.push(timeout);
  }

  function coverImageReplaceFinishedCallback () {
    // call at the end of the image replace step
    let timeout = setTimeout (function () {
      let bundleCoverInlineEditElem = $(".form__bundle-cover").get(0);
      bundleCoverInlineEditElem.removeAttribute("data-switched-on");

      let backdropElem = $(".backdrop--static").get(0);
      backdropElem.removeAttribute("data-switched-on");
    }, 4000);

    timeouts.push(timeout);
  }

  function bundleDetailsCallback () {
    // call at the end of the bundle details step
    let timeout = setTimeout (function () {
      let bundleElem = $(".bundle").get(0);
      bundleElem.setAttribute("data-switched-on", "bundleDetails");
    }, 5000);

    timeouts.push(timeout);
  }

  let tourStepCallbacks = [
    undefined, 
    undefined, 
    undefined, 
    undefined, 
    coverImageReplaceCallback, // ".tour-step__bundle-cover-image"
    coverImageReplaceFinishedCallback, // ".tour-step__bundle-cover-image-replace"
    bundleDetailsCallback // ".tour-step__bundle-details"
  ];


  // MAIN LOOP

  let currentIndex = 0;
  let endCallbackCalled = false; // so it's only called once

  tourAudioElem.addEventListener('timeupdate', (event) => {
    let currentTime = tourAudioElem.currentTime * 1000;
    let timeAtCurrentIndex = tourTimeOffsets[currentIndex];

    if (currentTime > timeAtCurrentIndex) {
      if (currentIndex === 0) {
        setBodyClasses({tourName, on: true});
      }

      everyStepCallback({
        stepIndex: currentIndex, 
        stepElem: tourElements[currentIndex], 
        stepCallback: tourStepCallbacks[currentIndex],
        stepTime: timeAtCurrentIndex
      });

      currentIndex += 1;
    }

    if (currentIndex === tourTimeOffsets.length) {
      if (!endCallbackCalled) {

        endCallbackCalled = true;

        setTimeout(function () {
          endCallback();
        }, tourLastStepDuration);

      }
    }
  });
  

  function everyStepCallback ({stepIndex, stepElem, stepCallback, stepTime}) {

    let oldCurrentElement = document.querySelector("." + tourCurrentElementClass);
    if (oldCurrentElement) {
      oldCurrentElement.classList.remove(tourCurrentElementClass);
    }

    stepElem.classList.add(tourCurrentElementClass);

    if (stepCallback) {
      stepCallback({stepIndex, stepElem, stepTime});
    }

    // 1. scroll element into view
    stepElem.querySelector(".tour__position-helper").scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest"
    });

  }

  function endCallback () {
    cancelTour();
  }


  // INIT

  $(".tour__play").on("click", (event) => {
    event.preventDefault();
    tourAudioElem.play();
  });

  $(".tour__cancel").on("click", function (event) {
    event.preventDefault();
    cancelTour();
  });


  // UTILS

  function cancelTour () {
    // clear any in-process timeouts
    timeouts.forEach(t => clearTimeout(t));

    // stop tour audio & reset to 0
    tourAudioElem.pause();
    tourAudioElem.currentTime = 0;

    // remove body classes
    setBodyClasses({tourName: tourName, on: false});

    // remove any active classes
    $("." + tourCurrentElementClass).arr.forEach(el => el.classList.remove(tourCurrentElementClass));

    // possibly scroll to the top of page
    if (tourScrollToTopOnEnd) {
      window.scroll({
        top: 0, 
        left: 0, 
        behavior: 'smooth'
      });
    }

    // reset globals
    currentIndex = 0;
    endCallbackCalled = false;
  }

  function setBodyClasses ({tourName, on}) {
    let defaultBodyClass = "tour--playing";
    let customBodyClass = tourName + "--playing";

    if (on) {
      document.body.classList.add(defaultBodyClass, customBodyClass);
    } else {
      document.body.classList.remove(defaultBodyClass, customBodyClass);
    }
  }
}