forked from verdnatura/hedera-web
148 lines
3.5 KiB
JavaScript
148 lines
3.5 KiB
JavaScript
|
|
var Widget = require('./widget');
|
|
var Assistant = require('./assistant');
|
|
|
|
module.exports = new Class({
|
|
Extends: Widget,
|
|
Tag: 'htk-assistant-bar',
|
|
Properties: {
|
|
assistant: {
|
|
type: Assistant,
|
|
set: function(x) {
|
|
this.link({_assistant: x}, {
|
|
'step-change': this.onStepChange,
|
|
'steps-change': this.onStepsChange
|
|
});
|
|
this.onStepsChange();
|
|
},
|
|
get: function() {
|
|
return this._assistant;
|
|
}
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
set: function(x) {
|
|
this._disabled = x;
|
|
this._previousButton.disabled = x;
|
|
this._nextButton.disabled = x;
|
|
this._endButton.disabled = x;
|
|
},
|
|
get: function() {
|
|
return this._disabled;
|
|
}
|
|
}
|
|
},
|
|
|
|
_assistant: null,
|
|
_stepIndex: -1,
|
|
_disabled: false,
|
|
|
|
render: function() {
|
|
var bar = this.createRoot('div');
|
|
bar.className = 'htk-assistant-bar';
|
|
|
|
var previousButton = this.createElement('button');
|
|
previousButton.className = 'previous';
|
|
previousButton.title = _('Previous');
|
|
previousButton.addEventListener('click', this.movePrevious.bind(this));
|
|
bar.appendChild(previousButton);
|
|
|
|
var img = this.createElement('img');
|
|
img.src = 'image/icon/light/go-previous.svg';
|
|
previousButton.appendChild(img);
|
|
|
|
var steps = this.createElement('div');
|
|
steps.className = 'steps';
|
|
bar.appendChild(steps);
|
|
|
|
var nextButton = this.createElement('button');
|
|
nextButton.className = 'next';
|
|
nextButton.title = _('Next');
|
|
nextButton.addEventListener('click', this.moveNext.bind(this));
|
|
bar.appendChild(nextButton);
|
|
|
|
var img = this.createElement('img');
|
|
img.src = 'image/icon/light/go-next.svg';
|
|
nextButton.appendChild(img);
|
|
|
|
var endButton = this.createElement('button');
|
|
endButton.className = 'end';
|
|
endButton.title = _('Confirm');
|
|
endButton.addEventListener('click', this.end.bind(this));
|
|
bar.appendChild(endButton);
|
|
|
|
var img = this.createElement('img');
|
|
img.src = 'image/icon/light/ok.svg';
|
|
endButton.appendChild(img);
|
|
|
|
this._steps = steps;
|
|
this._previousButton = previousButton;
|
|
this._nextButton = nextButton;
|
|
this._endButton = endButton;
|
|
},
|
|
|
|
movePrevious: function() {
|
|
if (this._assistant)
|
|
this._assistant.movePrevious();
|
|
},
|
|
|
|
moveNext: function() {
|
|
if (this._assistant)
|
|
this._assistant.moveNext();
|
|
},
|
|
|
|
end: function() {
|
|
if (this._assistant)
|
|
this._assistant.end();
|
|
},
|
|
|
|
setStep: function(stepIndex) {
|
|
if (this._assistant)
|
|
this._assistant.setStep(stepIndex);
|
|
},
|
|
|
|
onStepsChange: function() {
|
|
var stepCount = this._assistant.stepCount;
|
|
var steps = this._steps;
|
|
|
|
Vn.Node.removeChilds(steps);
|
|
|
|
for (var i = 0; i < stepCount; i++) {
|
|
var img = this.createElement('div');
|
|
img.src = 'image/step.svg';
|
|
img.addEventListener('click', this.setStep.bind(this, i));
|
|
steps.appendChild(img);
|
|
}
|
|
|
|
this.onStepChange();
|
|
},
|
|
|
|
onStepChange: function() {
|
|
var childs = this._steps.childNodes;
|
|
var stepCount = childs ? childs.length : 0;
|
|
var stepIndex = this._assistant ? this._assistant.step : -1;
|
|
|
|
if (this._stepIndex != -1) {
|
|
childs[this._stepIndex].src = 'image/step.svg';
|
|
childs[this._stepIndex].className = '';
|
|
}
|
|
|
|
if (stepIndex >= stepCount)
|
|
return;
|
|
|
|
this._stepIndex = stepIndex;
|
|
|
|
if (stepIndex != -1) {
|
|
childs[stepIndex].src = 'image/step-cur.svg';
|
|
childs[this._stepIndex].className = 'selected';
|
|
}
|
|
|
|
var visibility = stepIndex > 0 ? 'visible' : 'hidden';
|
|
this._previousButton.style.visibility = visibility;
|
|
|
|
var isEnd = stepIndex >= stepCount - 1;
|
|
this._nextButton.style.display = isEnd ? 'none' : 'block';
|
|
this._endButton.style.display = isEnd ? 'block' : 'none';
|
|
}
|
|
});
|