Demonstration of stepper/steps features

demo.js

var demo = function (e) {
  // Stepper linear demonstration 
  let demoLinear = function () {
    // Select stepper container element      
    let element = document.querySelector('.mdl-stepper#demo-stepper-linear');
    if (!element) return false;
    // Get the MaterialStepper instance of element to control it          
    let stepper = element.MaterialStepper;
    let steps = element.querySelectorAll('.mdl-step');
    // Just looping and adding listener to event onstepnext to the all steps          
    steps.forEach(function (step, index, steps) {
      // When user clicks on [data-stepper-next] button of step          
      step.addEventListener('onstepnext', function (e) {
        // {element}.MaterialStepper.next() change the state of current step to "completed" 
        // and move one step forward        
        stepper.next();
      });
    });
    // When all steps is completed this event is dispatched          
    element.addEventListener('onsteppercomplete', function (e) {
      let toast = document.querySelector('#snackbar-stepper-complete');
      if (!toast) return false;
      toast.MaterialSnackbar.showSnackbar({ message: 'Stepper linear is completed', timeout: 4000, actionText: 'Ok' });
    });
  };
  // Stepper non-linear demonstration 
  let demoNonLinear = function () {
    let element = document.querySelector('.mdl-stepper#demo-stepper-non-linear');
    if (!element) return false;
    let stepper = element.MaterialStepper;
    let steps = element.querySelectorAll('.mdl-step');
    steps.forEach(function (step, index, steps) {
      step.addEventListener('onstepnext', function (e) {
        stepper.next();
      });
    });
    element.addEventListener('onsteppercomplete', function (e) {
      let toast = document.querySelector('#snackbar-stepper-complete');
      if (!toast) return false;
      toast.MaterialSnackbar.showSnackbar({ message: 'Stepper non-linear is completed', timeout: 4000, actionText: 'Ok' });
    });
  };
  // Stepper feedback demonstration 
  let demoFeedback = function () {
    let element = document.querySelector('.mdl-stepper#demo-stepper-feedback');
    if (!element) return false;
    let stepper = element.MaterialStepper;
    let steps = element.querySelectorAll('.mdl-step');
    steps.forEach(function (step, index, steps) {
      step.addEventListener('onstepnext', function (e) {
        // Just showing the transient effect for 3s     
        setTimeout(function () {
          // Nice now goes forward     
          stepper.next();
        }, 3000);
      });
    });
    element.addEventListener('onsteppercomplete', function (e) {
      let toast = document.querySelector('#snackbar-stepper-complete');
      if (!toast) return false;
      toast.MaterialSnackbar.showSnackbar({ message: 'Stepper with feedback is completed', timeout: 4000, actionText: 'Ok' });
    });
  };
  // Editable steps demonstration 
  let demoEditableSteps = function () {
    let element = document.querySelector('.mdl-stepper#demo-editable-steps');
    if (!element) return false;
    let stepper = element.MaterialStepper;
    let steps = element.querySelectorAll('.mdl-step');
    steps.forEach(function (step, index, steps) {
      step.addEventListener('onstepnext', function (e) {
        stepper.next();
      });
    });
    element.addEventListener('onsteppercomplete', function (e) {
      let toast = document.querySelector('#snackbar-stepper-complete');
      if (!toast) return false;
      toast.MaterialSnackbar.showSnackbar({ message: 'Stepper with editable step is completed', timeout: 4000, actionText: 'Ok' });
    });
  };
  // Optional steps demonstration 
  let demoOptionalSteps = function () {
    let element = document.querySelector('.mdl-stepper#demo-optional-steps');
    if (!element) return false;
    let stepper = element.MaterialStepper;
    let steps = element.querySelectorAll('.mdl-step');
    steps.forEach(function (step, index, steps) {
      // When user clicks on [data-stepper-skip] button of step                
      step.addEventListener('onstepskip', function (e) {
        // {element}.MaterialStepper.skip() move one step forward without change the
        // state of current step and only works in optionals steps           
        stepper.skip();
      });

      step.addEventListener('onstepnext', function (e) {
        stepper.next();
      });
    });
    element.addEventListener('onsteppercomplete', function (e) {
      let toast = document.querySelector('#snackbar-stepper-complete');
      if (!toast) return false;
      toast.MaterialSnackbar.showSnackbar({ message: 'Stepper with optional step is completed', timeout: 4000, actionText: 'Ok' });
    });
  };
  // Error state demonstration 
  let demoErrorState = function () {
    let element = document.querySelector('.mdl-stepper#demo-error-state');
    if (!element) return false;
    let stepper = element.MaterialStepper;
    let steps = element.querySelectorAll('.mdl-step');
    steps.forEach(function (step, index, steps) {
      step.addEventListener('onstepnext', function (e) {
        let input = this.querySelector('input#step-error-number');
        if (input) {
          if (input.value > 10) {
            // If input number > 10 just move forward          
            stepper.next();
          } else {
            let message = this.querySelector('input#step-error-message').value;
            if (!message) {
              message = 'Please number greater than 10';
            }
            // {element}.MaterialStepper.error(message) change the state of current step to "error"
            // and display the message passed as parameter          
            stepper.error(message);
          }
        } else {
          stepper.next();
        }
      });
    });
    element.addEventListener('onsteppercomplete', function (e) {
      let toast = document.querySelector('#snackbar-stepper-complete');
      if (!toast) return false;
      toast.MaterialSnackbar.showSnackbar({ message: 'Stepper with error state is completed', timeout: 4000, actionText: 'Ok' });
    });
  };

  demoLinear();
  demoNonLinear();
  demoFeedback();
  demoEditableSteps();
  demoOptionalSteps();
  demoErrorState();
};

// Call your functions after page load 
window.addEventListener('load', demo);