2022-06-06 08:53:59 +00:00
|
|
|
require('./style.scss');
|
2022-06-06 12:49:18 +00:00
|
|
|
var Component = require('vn/component');
|
2022-06-06 08:53:59 +00:00
|
|
|
var Step = require('../step');
|
|
|
|
var Toast = require('../toast');
|
2018-05-16 09:36:42 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* A simple assistant with steps.
|
|
|
|
*/
|
|
|
|
module.exports = new Class({
|
2022-06-06 12:49:18 +00:00
|
|
|
Extends: Component,
|
2018-05-16 09:36:42 +00:00
|
|
|
Tag: 'htk-assistant',
|
|
|
|
Properties: {
|
|
|
|
/**
|
|
|
|
* The current step index.
|
|
|
|
*/
|
|
|
|
step: {
|
|
|
|
type: Number,
|
|
|
|
set: function(x) {
|
|
|
|
this.setStep(x);
|
|
|
|
},
|
|
|
|
get: function() {
|
|
|
|
return this._stepIndex;
|
2015-07-03 05:49:45 +00:00
|
|
|
}
|
2018-05-16 09:36:42 +00:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* The current step name.
|
|
|
|
*/
|
|
|
|
stepName: {
|
|
|
|
type: String,
|
|
|
|
set: function(x) {
|
|
|
|
this.setStepByName(x);
|
|
|
|
},
|
|
|
|
get: function() {
|
|
|
|
return this._stepName;
|
2015-07-03 05:49:45 +00:00
|
|
|
}
|
|
|
|
},
|
2018-05-16 09:36:42 +00:00
|
|
|
/**
|
|
|
|
* The steps index.
|
|
|
|
*/
|
|
|
|
stepsIndex: {
|
|
|
|
type: Array,
|
|
|
|
set: function(x) {
|
|
|
|
this._stepsIndex = x;
|
|
|
|
this.setStep(this._stepIndex);
|
2022-05-30 01:30:33 +00:00
|
|
|
this.emit('steps-change');
|
2018-05-16 09:36:42 +00:00
|
|
|
},
|
|
|
|
get: function() {
|
|
|
|
return this._stepsIndex;
|
2015-07-03 05:49:45 +00:00
|
|
|
}
|
2018-05-16 09:36:42 +00:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* The total number of steps in the assistant.
|
|
|
|
*/
|
|
|
|
stepCount: {
|
|
|
|
type: Number,
|
|
|
|
get: function() {
|
|
|
|
if (this._stepsIndex)
|
|
|
|
return this._stepsIndex.length;
|
|
|
|
return 0;
|
2015-07-03 05:49:45 +00:00
|
|
|
}
|
|
|
|
},
|
2018-05-16 09:36:42 +00:00
|
|
|
/**
|
|
|
|
* Function to call on every step change.
|
|
|
|
*/
|
|
|
|
stepFunc: {
|
|
|
|
type: Function,
|
2018-05-17 08:52:27 +00:00
|
|
|
value: null
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* Function to call on every step change.
|
|
|
|
*/
|
|
|
|
endFunc: {
|
|
|
|
type: Function,
|
|
|
|
value: null
|
2015-07-03 05:49:45 +00:00
|
|
|
},
|
2018-05-16 09:36:42 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
_stepNode: null,
|
|
|
|
_stepIndex: 0,
|
|
|
|
_stepName: null,
|
|
|
|
steps: {},
|
|
|
|
|
|
|
|
initialize: function(props) {
|
2022-06-06 16:02:17 +00:00
|
|
|
Component.prototype.initialize.call(this, props);
|
2022-06-06 17:13:57 +00:00
|
|
|
this.createRoot('div');
|
2018-05-16 09:36:42 +00:00
|
|
|
},
|
|
|
|
|
2018-05-16 09:50:04 +00:00
|
|
|
appendChild: function(step) {
|
2018-05-16 09:36:42 +00:00
|
|
|
if (!(step instanceof Step))
|
|
|
|
throw new Error('Invalid child for assistant');
|
2015-07-03 05:49:45 +00:00
|
|
|
|
2018-05-16 09:36:42 +00:00
|
|
|
this.node.appendChild(step.node);
|
|
|
|
this.steps[step.name] = step;
|
|
|
|
},
|
2015-07-03 05:49:45 +00:00
|
|
|
|
2018-05-16 09:36:42 +00:00
|
|
|
setStepByName: function(stepName) {
|
|
|
|
if (this._stepsIndex)
|
|
|
|
this.setStep(this._stepsIndex.indexOf(stepName));
|
|
|
|
},
|
|
|
|
|
|
|
|
setStep: function(stepIndex) {
|
|
|
|
if ((this.currentStep && stepIndex == this._stepIndex)
|
|
|
|
|| !this._stepsIndex
|
|
|
|
|| !(stepIndex >= -1 && stepIndex < this._stepsIndex.length))
|
2015-07-03 05:49:45 +00:00
|
|
|
return;
|
|
|
|
|
2018-05-16 09:36:42 +00:00
|
|
|
if (stepIndex > this._stepIndex) {
|
|
|
|
var validateIni = Math.max(this._stepIndex, 0);
|
2015-07-03 05:49:45 +00:00
|
|
|
|
2018-05-16 09:36:42 +00:00
|
|
|
try {
|
|
|
|
for (var i = validateIni; i < stepIndex; i++) {
|
|
|
|
var validateName = this._stepsIndex[i];
|
|
|
|
var validateStep = this.steps[validateName];
|
|
|
|
validateStep.validate();
|
|
|
|
}
|
|
|
|
} catch(e) {
|
|
|
|
Toast.showError(e.message);
|
|
|
|
if (i == this._stepIndex) return;
|
|
|
|
stepIndex = i;
|
2015-07-03 05:49:45 +00:00
|
|
|
}
|
|
|
|
}
|
2018-05-16 09:36:42 +00:00
|
|
|
|
|
|
|
var stepName = this._stepsIndex[stepIndex];
|
|
|
|
var step = this.steps[stepName];
|
|
|
|
var currentStep = this.currentStep;
|
|
|
|
|
|
|
|
if (currentStep)
|
|
|
|
currentStep.hide();
|
|
|
|
|
2015-07-03 05:49:45 +00:00
|
|
|
this._stepIndex = stepIndex;
|
2018-05-16 09:36:42 +00:00
|
|
|
this._stepName = stepName;
|
|
|
|
this.currentStep = step;
|
|
|
|
step.show();
|
2022-05-30 01:30:33 +00:00
|
|
|
this.emit('step-change', stepIndex);
|
2018-05-17 08:52:27 +00:00
|
|
|
|
|
|
|
if (this.stepFunc)
|
|
|
|
this.stepFunc(step);
|
2018-05-16 09:36:42 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Moves the assistant to the previous step.
|
|
|
|
*/
|
|
|
|
movePrevious: function() {
|
|
|
|
this.setStep(this._stepIndex - 1);
|
|
|
|
},
|
2015-07-03 05:49:45 +00:00
|
|
|
|
2018-05-16 09:36:42 +00:00
|
|
|
/**
|
|
|
|
* Moves the assistant to the next step.
|
|
|
|
*/
|
|
|
|
moveNext: function() {
|
|
|
|
this.setStep(this._stepIndex + 1);
|
2018-05-17 08:52:27 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Ends the assistant. If defined, the stepFunc will be called.
|
|
|
|
*/
|
|
|
|
end: function() {
|
|
|
|
if (this.endFunc)
|
|
|
|
this.endFunc();
|
2015-07-03 05:49:45 +00:00
|
|
|
}
|
|
|
|
});
|