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