Pearson Coachmark Script

gistfile1.txt

(function (win,doc) {
  doc.addEventListener("DOMContentLoaded", function() {
    var el = document.querySelector('div.navPusher');

// create wrapper container
    var wrapper = document.createElement('main');
    wrapper.id = "main"
// insert wrapper before el in the DOM tree
    el.parentNode.insertBefore(wrapper, el);

// move el into wrapper
    wrapper.appendChild(el);
    const trigger = doc.querySelector('#openTop'),
      infoTrigger = doc.querySelector('#info'),
      genericTrigger = doc.querySelector('#generic'),
      defaultTrigger = doc.querySelector('#openDefault'),
      specialTrigger = doc.querySelector('#special'),
      target = doc.querySelector('#main'),
      coachMark = doc.createElement('pearson-coachmark');

    function generateCoach(opts) {
      for (let attrName in opts) {
        coachMark.setAttribute(attrName, opts[attrName])
      }
      target.appendChild(coachMark)
    }

    if (trigger !== null) {
      trigger.addEventListener('click', function (event) {
        coachOne();
        event.stopImmediatePropagation()
      });
    }

    if (infoTrigger !== null) {
      infoTrigger.addEventListener('click', function (event) {
        coachInfo();
        event.stopImmediatePropagation()
      });
    }



    if (genericTrigger !== null) {
      genericTrigger.addEventListener('click', function (event) {
        event.stopImmediatePropagation()
        coachGeneric();
      });
    }

    if (specialTrigger !== null) {
      specialTrigger.addEventListener('click', function (event) {
        event.stopImmediatePropagation()
        coachSpecial();
      });
    }

    if (defaultTrigger !== null) {
      defaultTrigger.addEventListener('click', function (event) {
        coachDefault();
        event.stopImmediatePropagation()
      });
    }

    const coachDefault = function (event) {
      generateCoach({
        position: 'top',
        trigger: '#openDefault',
        reference: '#defaultRef',
        title: 'Default Coachmark',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Got it",
        dismiss: true
      });
    };


    const coachOne = function (event) {
      generateCoach({
        position: 'top-start',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 1/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachTwo, false);
    };

    const coachTwo = function (event) {
      coachMark.removeEventListener('proceed', coachTwo, false);
      generateCoach({
        position: 'top',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 2/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"

      });
      coachMark.addEventListener('proceed', coachThree, false);
    };

    const coachThree = function (event) {
      coachMark.removeEventListener('proceed', coachThree, false);
      generateCoach({
        position: 'top-end',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 3/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachFour, false);
    };

    const coachFour = function (event) {
      coachMark.removeEventListener('proceed', coachFour, false);
      generateCoach({
        position: 'right-end',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 4/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachFive, false);
    };

    const coachFive = function (event) {
      coachMark.removeEventListener('proceed', coachFive, false);
      generateCoach({
        position: 'right',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 5/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachSix, false);
    };

    const coachSix = function (event) {
      coachMark.removeEventListener('proceed', coachSix, false);
      generateCoach({
        position: 'right-start',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 6/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachSeven, false);
    };

    const coachSeven = function (event) {
      coachMark.removeEventListener('proceed', coachSeven, false);
      generateCoach({
        position: 'bottom-end',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 7/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachEight, false);
    };

    const coachEight = function (event) {
      coachMark.removeEventListener('proceed', coachEight, false);
      generateCoach({
        position: 'bottom',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 8/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachNine, false);
    };


    const coachNine = function (event) {
      coachMark.removeEventListener('proceed', coachNine, false);
      generateCoach({
        position: 'bottom-start',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 9/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachTen, false);
    };

    const coachTen = function (event) {
      coachMark.removeEventListener('proceed', coachTen, false);
      generateCoach({
        position: 'left-start',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 10/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachEleven, false);
    };

    const coachEleven = function (event) {
      coachMark.removeEventListener('proceed', coachEleven, false);
      generateCoach({
        position: 'left',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 11/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "Next Coachmark"
      });
      coachMark.addEventListener('proceed', coachTwelve, false);
    };

    const coachTwelve = function (event) {
      coachMark.removeEventListener('proceed', coachTwelve, false);
      generateCoach({
        position: 'left-end',
        trigger: '#openTop',
        reference: '#reference',
        title: 'This is 12/12',
        content: 'Content for your enjoyment',
        type: 'default',
        arrow: true,
        gotIt: "All Finished - Close",
        dismiss: true
      });
    };

    const coachInfo = function (event) {
      generateCoach({
        position: 'top',
        trigger: '#info',
        reference: '#reference2',
        title: 'This is informational ',
        content: 'Content for your enjoyment',
        type: 'informational',
        arrow: true,
        gotIt: "Got it",
        dismiss: true
      });
    };

    const coachGeneric = function (event) {
      generateCoach({
        position: 'top',
        trigger: '#generic',
        reference: '#reference3',
        title: 'This is generic',
        content: 'Content for your enjoyment',
        type: 'generic',
        arrow: true,
        gotIt: "Got it",
        dismiss: true
      });
    };

    const coachSpecial = function (event) {
      generateCoach({
        position: 'bottom',
        trigger: '#special',
        reference: '#reference4',
        type: 'default',
        title: 'This is special',
        content: 'Content for your enjoyment',
        dismiss: true
      });
    };
  });
})(window, document);