quay/static/js/directives/ui/step-view.js

/**
 * An element which displays the steps of the wizard-like dialog, changing them as each step
 * is completed.
 */
angular.module('quay').directive('stepView', function ($compile) {
  var directiveDefinitionObject = {
    priority: 0,
    templateUrl: '/static/directives/step-view.html',
    replace: true,
    transclude: true,
    restrict: 'C',
    scope: {
      'nextStepCounter': '=nextStepCounter',
      'currentStepValid': '=currentStepValid',

      'stepsCompleted': '&stepsCompleted'
    },
    controller: function($scope, $element, $rootScope) {
      var currentStepIndex = -1;
      var steps = [];
      var watcher = null;

      // Members on 'this' are accessed by the individual steps.
      this.register = function(scope, element) {
        element.hide();

        steps.push({
          'scope': scope,
          'element': element
        });

        nextStep();
      };

      var getCurrentStep = function() {
        return steps[currentStepIndex];
      };

      var reset = function() {
        currentStepIndex = -1;
        for (var i = 0; i < steps.length; ++i) {
          steps[i].element.hide();
        }

        $scope.currentStepValid = false;
      };

      var next = function() {
        if (currentStepIndex >= 0) {
          var currentStep = getCurrentStep();
          if (!currentStep || !currentStep.scope) { return; }

          if (!currentStep.scope.completeCondition) {
            return;
          }

          currentStep.element.hide();

          if (unwatch) {
            unwatch();
            unwatch = null;
          }
        }

        currentStepIndex++;

        if (currentStepIndex < steps.length) {
          var currentStep = getCurrentStep();
          currentStep.element.show();
          currentStep.scope.load()

          unwatch = currentStep.scope.$watch('completeCondition', function(cc) {
            $scope.currentStepValid = !!cc;
          });
        } else {
          $scope.stepsCompleted();
        }
      };

      var nextStep = function() {
        if (!steps || !steps.length) { return; }

        if ($scope.nextStepCounter >= 0) {
          next();
        } else {
          reset();
        }
      };

      $scope.$watch('nextStepCounter', nextStep);
    }
  };
  return directiveDefinitionObject;
});


/**
 * A step in the step view.
 */
angular.module('quay').directive('stepViewStep', function () {
  var directiveDefinitionObject = {
    priority: 1,
    require: '^stepView',
    templateUrl: '/static/directives/step-view-step.html',
    replace: false,
    transclude: true,
    restrict: 'C',
    scope: {
      'completeCondition': '=completeCondition',
      'loadCallback': '&loadCallback',
      'loadMessage': '@loadMessage'
    },
    link: function(scope, element, attrs, controller) {
      controller.register(scope, element);
    },
    controller: function($scope, $element) {
      $scope.load = function() {
        $scope.loading = true;
        $scope.loadCallback({'callback': function() {
          $scope.loading = false;
        }});
      };
    }
  };
  return directiveDefinitionObject;
});