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) {
      this.currentStepIndex = -1;
      this.steps = [];
      this.watcher = null;

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

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

        $scope.currentStepValid = false;
      };

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

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

          currentStep.element.hide();

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

        this.currentStepIndex++;

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

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

      this.register = function(scope, element) {
        element.hide();

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

      var that = this;
      $scope.$watch('nextStepCounter', function(nsc) {
        if (nsc >= 0) {
          that.next();
        } else {
          that.reset();
        }
      });
    }
  };
  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;
});