ractive-ez-table/lib/cursors/EditCursor.js

Ractive Ez UI Table

var utils = require("./utils.js");

var KEY_ARROW_UP = 38;
var KEY_ARROW_DOWN = 40;
var KEY_TAB = 9;

var findFocusedTableCellIndex = function(elm) {
	while (elm && elm.tagName != "TD")
		elm = elm.parentNode;
	
	var tr = elm.parentNode;
	return [].indexOf.call(tr.childNodes, elm);
};

var findFocusableContent = function(elm, reverse) {
	var selector = "input:not([type='hidden']), select, button, textarea, [tabindex]";
	
	if (reverse) {
		var matches = elm.querySelectorAll(selector);
		return matches[matches.length - 1];
	} else {
		return elm.querySelector(selector);
	}
};

var focusContentCell = function(table, cellIndex) {
	utils.setImmediate(function() {
		var tr = table.find(".ez-selected");
		var td = tr.childNodes[cellIndex];
		var ui = findFocusableContent(td) || findFocusableContent(tr);
		ui.focus && ui.focus();
	});
};

var focusContentRow = function(table, reverse) {
	utils.setImmediate(function() {
		var tr = table.find(".ez-selected");
		var ui = findFocusableContent(tr, reverse);
		ui.focus  && ui.focus();
		ui.select && ui.select();
	});
};

var isFirstTabTarget = function(table, reverse) {
	var firstTarget = findFocusableContent(table.find(".ez-selected"), reverse);
	return firstTarget == document.activeElement;
};

var SelectionCursor = module.exports = function(table) {
	this.table = table;
};

SelectionCursor.prototype.toggle = function(item) {
	var isSelected = this.table.isItemSelected(item);

	if (!isSelected) {
		this.table.clearSelection();
		this.table.selectItem(item);
	}
};

SelectionCursor.prototype.handleClick = function(event, item) {
	var table = this.table;
	var cellIndex = findFocusedTableCellIndex(event.target);
	this.toggle(item);
	focusContentCell(table, cellIndex);
};

SelectionCursor.prototype.handleKey = function(event, item) {
	var table = this.table;
	
	item = table.get("selectedItems.0");
	if (item == null) return;
	
	if (event.keyCode == KEY_ARROW_UP) {
		var cellIndex = findFocusedTableCellIndex(event.target);
		this.toggle(table.getPreviousVisualItem(item));
		focusContentCell(table, cellIndex);
		event.preventDefault();
		
	} else if (event.keyCode == KEY_ARROW_DOWN) {
		var cellIndex = findFocusedTableCellIndex(event.target);
		this.toggle(table.getNextVisualItem(item));
		focusContentCell(table, cellIndex);
		event.preventDefault();
		
	} else if (event.keyCode == KEY_TAB &&  event.shiftKey && isFirstTabTarget(table, false)) {
		this.toggle(table.getPreviousVisualItem(item));
		focusContentRow(table, true);
		event.preventDefault();
		
	} else if (event.keyCode == KEY_TAB && !event.shiftKey && isFirstTabTarget(table, true)) {
		this.toggle(table.getNextVisualItem(item));
		focusContentRow(table, false);
		event.preventDefault();
	}
	
};