hedera-web/js/htk/calendar/index.js

require('./style.scss');

module.exports = new Class({
	Extends: Htk.Field
	,Tag: 'htk-calendar'
	,Properties: {
		restrictFunc: {
			type: Function
			,set(x) {
				this._restrictFunc = x;
			}
			,get() {
				return this._restrictFunc;
			}
		}
	}
	
	,cells: []
	,selectedCell: -1
	,year: null
	,month: null

	,render() {
		this.createRoot('div');
		
		var table = this.createElement('table');
		this.node.appendChild(table);

		var colgroup = this.createElement('colgroup');
		table.appendChild(colgroup);
		
		var len = Vn.Date.WDays.length;
		for (var i = 0; i < len; i++)
			colgroup.appendChild(this.createElement('col'));
		
		var thead = this.createElement('thead');
		table.appendChild(thead);

		var tr = this.createElement('tr');
		thead.appendChild(tr);

		var th = this.createElement('th');
		th.className = 'previous';
		tr.appendChild(th);

		var previousButton = new Htk.Button({
			icon: 'arrow_back_ios'
		}).node;
		previousButton.addEventListener('click', this.prevMonthClicked.bind(this));
		th.appendChild(previousButton);

		var th = this.createElement('th');
		th.className = 'month-year';
		th.colSpan = 5;
		tr.appendChild(th);

		var monthNode = this.createElement('span');
		th.appendChild(monthNode);

		var space = this.createTextNode(' ');
		th.appendChild(space);
		
		var yearNode = this.createElement('span');
		th.appendChild(yearNode);

		var th = this.createElement('th');
		th.className = 'next';
		tr.appendChild(th);

		var nextButton = new Htk.Button({
			icon: 'arrow_forward_ios'
		}).node;
		nextButton.addEventListener('click', this.nextMonthClicked.bind(this));
		th.appendChild(nextButton);
		
		var tr = this.createElement('tr');
		tr.className = 'weekdays';
		thead.appendChild(tr);
		
		for (var i = 1; i <= len; i++) {
			var th = this.createElement('th');
			tr.appendChild(th);
			
			var weekday = _(Vn.Date.AbrWDays [i%len]);
			th.appendChild(this.createTextNode(weekday));
		}

		var tbody = this.createElement('tbody');
		table.appendChild(tbody);
		
		for (var i = 0; i < 6; i++) {
			var tr = this.createElement('tr');
			tbody.appendChild(tr);

			for (var j = 0; j < len; j++) {
				var td = this.createElement('td');
				td.addEventListener('click', this.dayClicked.bind(this, td, i*len+j));
				tr.appendChild(td);
				
				var div = this.createElement('div');
				td.appendChild(div);

				this.cells.push({
					node: div,
					enabled: false,
					day: -1
				});
			}
		}

		this.monthNode = monthNode;
		this.yearNode = yearNode;
		this.goToCurrentMonth();
	}

	,getMonthDays() {
		if (this.month > 6)
			return (this.month % 2 != 0) ? 31 : 30;
		else if (this.month != 1)
			return (this.month % 2 != 1) ? 31 : 30;
		else
			return (this.year % 4 != 0) ? 28 : 29;
	}
	
	,goToMonth(year, month) {
		if (year)
			this.year = year;
		if (!isNaN(month))
			this.month = month;

		this.refresh();
	}
	
	,goToSelectedMonth() {
		var date = this._value;
		
		if (date instanceof Date)
			this.goToMonth(date.getFullYear(), date.getMonth());
		else
			this.goToCurrentMonth();			
	}

	,goToCurrentMonth() {
		var date = new Date();
		this.goToMonth(date.getFullYear(), date.getMonth());
	}

	,refresh() {
		Vn.Node.setText(this.yearNode, this.year);
		Vn.Node.setText(this.monthNode, _(Vn.Date.Months[this.month]));

		var day = 1;
		var cellDate = new Date(this.year, this.month, 1);

		var weekDay = cellDate.getDay();
		var firstWeekDay = (weekDay != 0) ? weekDay - 1 : 6;
		var monthDays = this.getMonthDays();

		for (var i = 0; i < this.cells.length; i++) {
			var cell = this.cells[i];

			if (firstWeekDay <= i && day <= monthDays) {
				Vn.Node.setText(cell.node, day);
				cell.enabled = true;
				cell.day = day++;
				
				if (this._restrictFunc) {
					cell.enabled = this._restrictFunc(cellDate);
					cellDate.setDate(cellDate.getDate() + 1);
				}
			} else {
				Vn.Node.removeChilds(cell.node);
				cell.enabled = false;
				cell.day = -1;
			}
			
			cell.node.className = cell.enabled ? 'enabled' : 'disabled';
		}

		// Marks the current day

		var today = new Date();
		
		if (this.year == today.getFullYear()
		&& this.month == today.getMonth()) {
			var cellIndex = (firstWeekDay + today.getDate()) - 1;
			Vn.Node.addClass(this.cells[cellIndex].node, 'today');
		}
		
		// Marks the selected day
		
		var date = this._value;

		if (date instanceof Date
		&& this.year == date.getFullYear()
		&& this.month == date.getMonth())
			this.selectCell((firstWeekDay + date.getDate()) - 1);
		else
			this.selectCell(-1);
	}

	,selectCell(cellIndex) {
		if (this.selectedCell != -1) {
			var node = this.cells[this.selectedCell].node;
			Vn.Node.removeClass(node, 'selected');
		}
		if (cellIndex != -1) {
			var node = this.cells[cellIndex].node;
			Vn.Node.addClass(node, 'selected');
		}

		this.selectedCell = cellIndex;
	}

	,putValue() {
		this.goToSelectedMonth();
	}

	,dayClicked(td, cellIndex) {
		var cell = this.cells[cellIndex];
	
		if (cell.enabled) {
			this.selectCell(cellIndex);
			var newDate = new Date(this.year, this.month, cell.day);

			if (this.value) {
				var orgDate = this.value instanceof Date
					? this.value
					: new Date(this.value);

				if (!isNaN(orgDate.getTime()))
					newDate.setHours(
						orgDate.getHours(),
						orgDate.getMinutes(),
						orgDate.getSeconds(),
						orgDate.getMilliseconds()
					);
			}

			this.valueChanged(newDate);
		}
	}

	,prevMonthClicked() {
		if (this.month > 0)
			this.month--;
		else {
			this.month = 11;
			this.year--;
		}
		
		this.refresh();
	}

	,nextMonthClicked() {
		if (this.month < 11)
			this.month++;
		else {
			this.month = 0;
			this.year++;
		}
		
		this.refresh();
	}
});