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

require('./style.scss');
var Component = require('vn/component');
var Assistant = require('../assistant');

module.exports = new Class({
	Extends: Component,
	Tag: 'htk-assistant-bar',
	Properties: {
		assistant: {
			type: Assistant,
			set(x) {
				this.link({_assistant: x}, {
					'step-change': this.onStepChange,
					'steps-change': this.onStepsChange
				});
				this.onStepsChange();
			},
			get() {
				return this._assistant;
			}
		},
		disabled: {
			type: Boolean,
			set(x) {
				this._disabled = x;
				this._previousButton.disabled = x;
				this._nextButton.disabled = x;
				this._endButton.disabled = x;
			},
			get() {
				return this._disabled;
			}
		}
	},

	_assistant: null,
	_stepIndex: -1,
	_disabled: false,
	
	render() {
		var node = this.createRoot('div');

		var previousButton = new Htk.Button({
			icon: 'arrow_back',
			tip: 'Previous'
		}).node;
		previousButton.classList.add('previous');
		previousButton.addEventListener('click', this.movePrevious.bind(this));
		node.appendChild(previousButton);
		
		var steps = this.createElement('div');
		steps.className = 'steps';
		node.appendChild(steps);
		
		var nextButton = new Htk.Button({
			icon: 'arrow_forward',
			tip: 'Next'
		}).node;
		nextButton.classList.add('next');
		nextButton.addEventListener('click', this.moveNext.bind(this));
		node.appendChild(nextButton);
		
		var endButton = new Htk.Button({
			icon: 'done',
			tip: 'Confirm'
		}).node;
		endButton.classList.add('end');
		endButton.addEventListener('click', this.end.bind(this));
		node.appendChild(endButton);
		
		this._steps = steps;
		this._previousButton = previousButton;
		this._nextButton = nextButton;
		this._endButton = endButton;
	},

	movePrevious() {
		if (this._assistant)
			this._assistant.movePrevious();
	},
	
	moveNext() {
		if (this._assistant)
			this._assistant.moveNext();
	},
	
	end() {
		if (this._assistant)
			this._assistant.end();
	},
	
	setStep(stepIndex) {
		if (this._assistant)
			this._assistant.setStep(stepIndex);
	},

	onStepsChange() {
		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() {
		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';
	}
});