117 lines
2.5 KiB
JavaScript
117 lines
2.5 KiB
JavaScript
|
|
||
|
|
Htk.AssitantBar = new Class
|
||
|
|
({
|
||
|
|
Extends: Htk.Widget
|
||
|
|
,Tag: 'htk-assistant-bar'
|
||
|
|
,Properties:
|
||
|
|
{
|
||
|
|
assistant:
|
||
|
|
{
|
||
|
|
type: Htk.Assistant
|
||
|
|
,set: function (x)
|
||
|
|
{
|
||
|
|
this.link ({_assistant: x}, {'step-change': this.onStepChange});
|
||
|
|
|
||
|
|
var stepCount = x.stepCount;
|
||
|
|
var steps = this._steps;
|
||
|
|
|
||
|
|
Vn.Node.removeChilds (steps);
|
||
|
|
steps.style.width = (stepCount * 1.7) + 'em';
|
||
|
|
|
||
|
|
for (var i = 0; i < stepCount; i++)
|
||
|
|
{
|
||
|
|
var img = document.createElement ('img');
|
||
|
|
img.src = 'image/step.svg';
|
||
|
|
img.addEventListener ('click', this.setStep.bind (this, i));
|
||
|
|
steps.appendChild (img);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.onStepChange ();
|
||
|
|
}
|
||
|
|
,get: function ()
|
||
|
|
{
|
||
|
|
return this._assistant;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
,_assistant: null
|
||
|
|
,_stepIndex: -1
|
||
|
|
|
||
|
|
,initialize: function (props)
|
||
|
|
{
|
||
|
|
this.parent (props);
|
||
|
|
|
||
|
|
var bar = this.createElement ('div');
|
||
|
|
bar.className = 'htk-assistant-bar';
|
||
|
|
|
||
|
|
var previousButton = document.createElement ('img');
|
||
|
|
previousButton.src = 'image/go-previous.svg';
|
||
|
|
previousButton.className = 'previous';
|
||
|
|
previousButton.title = _('Previous');
|
||
|
|
previousButton.addEventListener ('click', this.movePrevious.bind (this));
|
||
|
|
bar.appendChild (previousButton);
|
||
|
|
|
||
|
|
var steps = document.createElement ('div');
|
||
|
|
bar.appendChild (steps);
|
||
|
|
|
||
|
|
var nextButton = document.createElement ('img');
|
||
|
|
nextButton.src = 'image/go-next.svg';
|
||
|
|
nextButton.className = 'next';
|
||
|
|
nextButton.title = _('Next');
|
||
|
|
nextButton.addEventListener ('click', this.moveNext.bind (this));
|
||
|
|
bar.appendChild (nextButton);
|
||
|
|
|
||
|
|
this._steps = steps;
|
||
|
|
this._previousButton = previousButton;
|
||
|
|
this._nextButton = nextButton;
|
||
|
|
}
|
||
|
|
|
||
|
|
,movePrevious: function ()
|
||
|
|
{
|
||
|
|
if (this._assistant)
|
||
|
|
this._assistant.movePrevious ();
|
||
|
|
}
|
||
|
|
|
||
|
|
,moveNext: function ()
|
||
|
|
{
|
||
|
|
if (this._assistant)
|
||
|
|
this._assistant.moveNext ();
|
||
|
|
}
|
||
|
|
|
||
|
|
,setStep: function (stepIndex)
|
||
|
|
{
|
||
|
|
if (this._assistant)
|
||
|
|
this._assistant.setStep (stepIndex);
|
||
|
|
}
|
||
|
|
|
||
|
|
,onStepChange: function ()
|
||
|
|
{
|
||
|
|
if (this._assistant)
|
||
|
|
{
|
||
|
|
var stepIndex = this._assistant.step;
|
||
|
|
var stepCount = this._assistant.stepCount;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
var stepIndex = -1;
|
||
|
|
var stepCount = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this._stepIndex != -1)
|
||
|
|
this._steps.childNodes[this._stepIndex].src = 'image/step.svg';
|
||
|
|
|
||
|
|
this._stepIndex = stepIndex;
|
||
|
|
|
||
|
|
if (stepIndex != -1)
|
||
|
|
this._steps.childNodes[stepIndex].src = 'image/step-cur.svg';
|
||
|
|
|
||
|
|
var visibility = stepIndex <= 0 ? 'hidden' : 'visible';
|
||
|
|
this._previousButton.style.visibility = visibility;
|
||
|
|
|
||
|
|
var visibility = stepIndex >= stepCount - 1 ? 'hidden' : 'visible';
|
||
|
|
this._nextButton.style.visibility = visibility;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|