Shepherd Test Working - Cleanup

index.slim

.container
  .inner-row
    .box.one
    .box.two
    .box.three
    .box.four    
    / button.btn.btn-reset Reset
  .inner-row
    button.btn.btn-start Start

    

script.babel

var shepStart = function (ev) {
   
  var _instance;
  
  function init () {
    ev.preventDefault();
    setupShepherd();
  };
  
  function setupShepherd () {
     createOverlays();
  }
  
  function clearOverlays () {  
    $( '[data-label="tourOverlay"]' ).remove();
  }  
  
  function createOverlays () {
       
      var $mainContainer = $(".container");
      var $mainContainerWidth = $mainContainer.outerWidth();
      var $mainContainerHeight = $mainContainer.outerHeight();
      var $target = $(".shepherd-enabled");

      var $targetWidth = $target.outerWidth();
      var $targetHeight = $target.outerHeight();
      var $targetOffset = $target.offset();
      var $targetOffsetTop = $target.offset().top;
      var $targetOffsetLeft = $target.offset().left;

      /*******************   TOP OVERLAY   ******************/
      function createTopOverlay() {

        var overlayProps = {
          "height": $targetOffsetTop,
          "class": "topOverlay"
        };

        overlayFactory(overlayProps);
      };

      /*****************   BOTTOM OVERLAY   ****************/
      function createBottomOverlay() {

        var overlayTop = $targetOffsetTop + $targetHeight;
        var overlayHeight = ($mainContainerHeight - $targetOffsetTop - $targetHeight);

        var overlayProps = {
          "height": overlayHeight,
          "top": overlayTop,
          "class": "bottomOverlay"
        };

        overlayFactory(overlayProps);
      };

      /******************   LEFT OVERLAY   *****************/
      function createLeftOverlay() {

        var overlayHeight = $targetHeight;
        var overlayWidth = $targetOffsetLeft;
        var overlayTop = $targetOffsetTop;

        var overlayProps = {
          "height": overlayHeight,
          "top": overlayTop,
          "width": overlayWidth,
          "class": "leftOverlay"
        };

        overlayFactory(overlayProps);
      };

      /******************   RIGHT OVERLAY   *****************/
      function createRightOverlay() {

        var overlayLeft = $targetOffsetLeft + $targetWidth;
        var overlayTop = $targetOffsetTop;
        var overlayHeight = $targetHeight;
        var overlayWidth = ($mainContainerWidth - $targetWidth - $targetOffsetLeft);

        var overlayProps = {
          "height": overlayHeight,
          "top": overlayTop,
          "width": overlayWidth,
          "left": overlayLeft,
          "class": "rightOverlay"
        };

        overlayFactory(overlayProps);

      };

       /******************   OVERLAY FACTORY   *****************/
       function overlayFactory(overlayProps) {
         var overlayDiv = $('<div />', {
           "class": 'tourOverlay ' + overlayProps.class,
           "data-label": 'tourOverlay',
           "height": overlayProps.height,
           "width": overlayProps.width
         });

         overlayDiv.css("top", overlayProps.top || 0)
         overlayDiv.css("left", overlayProps.left || 0)
         $('body').append(overlayDiv);

      };

      /***********************  OVERLAY INIT   **********************/
     function overlayInit() {
        clearOverlays();
        createTopOverlay();
        createBottomOverlay();
        createLeftOverlay();
        createRightOverlay();
      }

      return overlayInit();
    
  };
  
  
  /***********************   TOUR   **********************/
  var tour = new Shepherd.Tour({
  defaults: {
    classes: 'shepherd shepherd-theme-dark',
    showCancelLink: true,
    scrollTo: true
  }
  });
  
  tour.on('complete', clearOverlays);
  tour.on('cancel', clearOverlays);

  tour.addStep('example', {
    title: 'Example ',
    text: 'Step 1 - This is only a test...',
    attachTo: '.one bottom',
    buttons: [     
      {
          text: 'Next',
          action: function() {
            tour.next();
            createOverlays()
          },
          classes: 'shepherd-button-example-primary'
      }        
  ]
  });
  
  tour.addStep('example', {
    title: 'Example ',
    text: 'Step 2 - This is only a test...',
    attachTo: '.two bottom',
    buttons: [
  
      {
          text: 'Next',
          action: function() {
            tour.next();
            createOverlays()
          },
          classes: 'shepherd-button-example-primary'
      }        
  ]
  });
  
  tour.addStep('example', {
    title: 'Example ',
    text: 'Step 3 - This is only a test...',
    attachTo: '.three bottom',
    buttons: [
  
      {
          text: 'Next',
          action: function() {
            tour.next();
            createOverlays()
          },
          classes: 'shepherd-button-example-primary'
      }        
  ]
  });
  
  tour.addStep('example', {
    title: 'Example ',
    text: 'Step 4 - This is only a test...',
    attachTo: '.four bottom',
    buttons: [
  
      {
          text: 'Exit',
          action: function() {
            tour.complete();
            // createOverlays()
          },
          classes: 'shepherd-button-example-primary'
      }        
  ]
  });       
  
  tour.start();
 
  /***********************   END TOUR   **********************/
  
  console.log(tour);  

  window.onresize = function(){
   if( $('body').is('.shepherd-active')) {
      createOverlays();
    }
  }
  
  return init();
};



$('.btn').on('click', shepStart)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/jquery.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/js/shepherd.js"></script>

shepherd-test-working-cleanup.markdown

Shepherd Test Working - Cleanup

This version has overlays working properly and responsing to resizing properly. Tour advances and closes without issue it seems. Animation next.

A Pen by Matt on CodePen.

License.

style.scss

body {
  // background: linear-gradient(to left, #614385, #516395);
  background-image: url("http://dietradio.fm/wp-content/uploads/2014/08/daft-2006.jpg") ;
  // background-size: cover;
background-size: auto;
  font-family: 'Lato'
}

.container {
  height: 100vh;
}

.inner-row {
  padding: 20px;
  margin-left: 30px;
  display: flex;
  justify-content: center;
}

.inner-row:last-child {
  margin-top: 140px;
}

.tourOverlay {
  z-index: 999950 !important;
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  background: rgba(0, 0, 0, .90);
  // transition: background 300ms ease-in 2s;
}

.bottomOverlay,
.topOverlay {
  width: 100% !important;
  left: 0 !important;
}

.leftOverlay {
  left: 0 !important;
}

.box {
  display: inline-block;
  margin: 10px 40px;
  border-radius: 4px;
  background: rgba(245, 0, 87, 1);
  // height: 13vh;
  height: 100px;
  width: 8%;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

button {
  margin: 0 .5%;
  font-size: 1rem;
}

.btn-start {
  // opacity: 0;
  z-index: 999998;
  border-radius: 5px;
  // width: 40px;
  height: 50px;
  color: none;
  background-color: rgb(105, 240, 174) !important;
  border: 1px rgb(105, 240, 174) solid;
  margin: 0 auto;
  padding: 4px 20px;
}

.header {
  color: yellow;
  font-size: 2rem;
  opacity: 0;
  margin: 200px auto 20px;
  text-align: center;
}

.pclass {
  color: yellow;
  font-size: 1.6rem;
  opacity: 0;
  text-align: center;
  margin: 20px auto;
}

.shepherd-element.shepherd-theme-dark,
shepherd-step {
  z-index: 999990 !important;
}

.test {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999996;
  background: rgba(0, 0, 0, 1);
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-arrows.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-arrows-fix.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-arrows-plain-buttons.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-square-dark.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-square.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-dark.css" rel="stylesheet" />