ltm-wizard

by nomadev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<html>
  <body ng-app="wizardTest">
    <script id="wizard/step1" type="text/ng-template">
    	<h1>Hello Step 1</h1>
      <button ng-click="$$next()">Go next</button>
      <button ng-click="$$next('step3')">Go step3</button>
      <button ng-click="$$exit()">Exit</button>
    </script>
    <script id="wizard/step2" type="text/ng-template">
    	<h1>Hello Step 2</h1>
      <div ng-if="$wizardCtrl.waitingEnter">Entering...</div>
      <div ng-if="$wizardCtrl.waitingNext">Loading...</div>
      <button ng-click="$$back()">Go back</button>
      <button ng-click="$$next()">Go next</button>
      <button ng-click="$$exit()">Exit</button>
    </script>
    <script id="wizard/step3" type="text/ng-template">
    	<h1>Hello Step 3</h1>
      <button ng-click="$$back()">Go back</button>
      <button ng-click="$$finish()">Finish</button>
      <button ng-click="$$exit()">Exit</button>
    </script>
    <div ng-controller="TestCtrl">
      <ltm-wizard 
                  name="myWizard"
                  steps="steps"
                  on-step-changed="currStep = $step"
                  on-exit="exited = true"
                  on-finish="finished = true"
      ></ltm-wizard>
      
      <button ng-click="myWizard.exit()">
      Esci da fuori
      </button>
      
       <div style="margin-top: 20px; border: 1px solid gray">
         Finished? {{finished}}<br/>
         Exited? {{exited}}<br/>
         Step? {{currStep | json}}<br/>
      </div>
    </div>
    

  </body>
</html>

JavaScript

var lodash = _.noConflict();
var app = angular.module("wizardTest", []);

app.controller("TestCtrl", function($scope, $timeout, $q){

  $scope.steps = [
    {
      id : 'step1',
      template : 'wizard/step1',
      handleNext : peppe
    },
    {
      id : 'step2',
      template : 'wizard/step2',
      handleNext : function(){
      	return $q(resolve => {
        	$timeout(() => {
        		resolve('step3');
          }, 5000);
        });
      },
      onEnter : function(){
      	return $q(resolve => {
        	$timeout(resolve, 5000);
        });
      }
    },

    {
      id : 'step3',
      template : 'wizard/step3'
    }
  ];
  
  function pe($param) {
		if (!$param) $param = 'step2';
  	return $q.resolve($param);
	}
});


(function() {
  "use strict";

  /**
   * Accepts a list of steps with the following interface:
   * 
   * interface WizardStep {
   * 	id : string;       // Unique step id. Used to identify it in the wizard.
   * 	template : string; // The name of the template to show.
   * 
   *  	// Callback executed when the next is pressed. The promise must
   *  	// resolve with the id of the next step or reject to prevent advancing.
   *    // can also be a string to statically indicate the next step name
   * 	handleNext : angular injectable  or string,
   * 		
   * 	// Called when entering the step. Can be omitted.
   * 	onEnter : angular injectable or string,
   * }
   */

  app.component('ltmWizard', {
    bindings: {
      steps: '<',
      name: '@?',

      onStepChanged: '&?',
      onExit: '&?',
      onFinish: '&?'
    },
    controllerAs: '$wizardCtrl',
    controller: ['$scope', '$q', '$log', '$injector', 'typeUtils',
      function LtmWizardCtrl($scope, $q, $log, $injector, typeUtils) {
        var $ctrl = this;

        this.history = []; // History stack
        this.waitingEnter = false; // true when loading current step.
        this.waitingNext = false; // true when loading next step.
        this.currentStep = null;

    ...