126 lines
No EOL
3.1 KiB
JavaScript
126 lines
No EOL
3.1 KiB
JavaScript
/**
|
|
* 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;
|
|
}); |