hedera-web/js/htk/assistant-bar.js

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;
			}
		}
	},

	_assistant: null,
	_stepIndex: -1,
	
	render: function() {
		var bar = this.createRoot('div');
		bar.className = 'htk-assistant-bar';
		
		var previousButton = this.createElement('img');
		previousButton.src = 'image/icon/light/go-previous.svg';
		previousButton.className = 'previous';
		previousButton.title = _('Previous');
		previousButton.addEventListener('click', this.movePrevious.bind(this));
		bar.appendChild(previousButton);
		
		var steps = this.createElement('div');
		bar.appendChild(steps);
		
		var nextButton = this.createElement('img');
		nextButton.src = 'image/icon/light/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);
	},

	onStepsChange: function() {
		var stepCount = this._assistant.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 = this.createElement('img');
			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';

		if (stepIndex >= stepCount)
			return;

		this._stepIndex = stepIndex;
		
		if (stepIndex != -1)
			childs[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;
	}
});