120 lines
No EOL
3 KiB
JavaScript
120 lines
No EOL
3 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) {
|
|
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;
|
|
}); |