/** * 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; });