Corrected default columns for row-staggered table, added keyboard sho…

…rtcuts to the editor

docs/index.html

@@ -231,6 +231,15 @@ <h2>What to show and what to filter</h2>
 				If a keyboard supports <em>either</em> trackballs or touchpads
 				(as seen on Ximi), you'll need to fill out the "pointing devices"
 				field (or the numbers will be added up).
+			</li><li>
+				The editor supports a few keyboard shortcuts!
+				<ul><li>
+					Page Up, Ctrl+Up: Previous section
+				</li><li>
+					Page Down, Ctrl+Down: Next section
+				</li><li>
+					Arrow keys: Switch between checkboxes in the group
+				</li></ul>
 			</li></ul>
 		</details>
 		<form id="editor"></form>

src/KeyboardTable.hx

@@ -209,6 +209,7 @@ class KeyboardTable<KB:Keyboard> extends FancyTable<KB> {
 
 		var staggerType = new TagListColumn("Stagger type", mgf(kb.stagger), StaggerType);
 		staggerType.shortName = "Stag";
+		staggerType.columnCount = 2;
 		staggerType.filterLabels[StaggerType.Column] = "Columnar";
 		staggerType.filterLabels[StaggerType.Ortho] = "Ortholinear";
 		staggerType.shortLabels[StaggerType.Column] = "Col";

src/RowStagTable.hx

@@ -36,6 +36,7 @@ class RowStagTable extends KeyboardTable<RowStagKeyboard> {
 		var col:FancyColumn<RowStagKeyboard>;
 
 		mAddColumn(col = new IntRangeListColumn("Key count", kb.keys));
+		col.show = true;
 		col.shortName = "#keys";
 		col.onEditorNotes = function(div):Void {
 			var extra:InputElement = cast div.appendElTextNode("input");
@@ -96,6 +97,7 @@ class RowStagTable extends KeyboardTable<RowStagKeyboard> {
 		};
 
 		mAddColumn(col = new IntRangeColumn("Rows", kb.rows));
+		col.show = true;
 		col.onNotes = function(div) {
 			div.appendParaTextNode("(not counting the modifier row)");
 		};

src/table/FancyTableEditor.hx

@@ -139,6 +139,9 @@ class FancyTableEditor {
 			out.reset();
 		}
 
+		// shortcuts
+		FancyTableEditorShortcuts.bind(out);
+
 		if (true) {
 			var isKB = (table is KeyboardTable);
 			var kbTable:KeyboardTable<Keyboard> = isKB ? cast table : null;

src/table/FancyTableEditorShortcuts.hx

@@ -0,0 +1,111 @@
+package table;
+
+import js.html.ScrollIntoViewOptions;
+import js.html.InputElement;
+import js.html.KeyboardEvent;
+import js.html.Element;
+using tools.HtmlTools;
+
+class FancyTableEditorShortcuts {
+	public static function bind(out:Element) {
+		var inputQuery = 'input, textarea, select';
+		function shortcutHandler(e:KeyboardEvent) {
+			var input:InputElement = cast e.target;
+			var isInput = input.tagName == "INPUT";
+			var isCheckbox = isInput && input.type == "checkbox";
+			var mode:FancyTableEditorShortcutsAction = switch (e.code) {
+				case "PageUp": Prev;
+				case "PageDown": Next;
+				//
+				case "ArrowUp" if (e.ctrlKey): Prev;
+				case "ArrowDown" if (e.ctrlKey): Next;
+				//
+				case "ArrowUp" if (isCheckbox): CbUp;
+				case "ArrowDown" if (isCheckbox): CbDown;
+				case "ArrowLeft" if (isCheckbox): CbLeft;
+				case "ArrowRight" if (isCheckbox): CbRight;
+				default: return;
+			}
+			//
+			var item = input.parentElement;
+			var found = false;
+			for (_ in 0 ... 8) {
+				if (item.classList.contains("item")) {
+					found = true;
+					break;
+				}
+				item = item.parentElement;
+			}
+			if (!found) return;
+			//
+			function focusAndScrollIntoView(first:Element) {
+				first.focus();
+				var opt:ScrollIntoViewOptions = {};
+				opt.behavior = SMOOTH;
+				opt.block = NEAREST;
+				first.scrollIntoView(opt);
+			}
+			switch (mode) {
+				case Prev, Next: {
+					e.preventDefault();
+					var isPrev = mode == Prev;
+					var adjItem = isPrev ? item.previousElementSibling : item.nextElementSibling;
+					inline function focusFirstInAdjItem() {
+						var first = adjItem.querySelector(inputQuery);
+						if (first != null) focusAndScrollIntoView(first);
+					}
+					if (adjItem != null && adjItem.classList.contains("item")) {
+						focusFirstInAdjItem();
+						return;
+					}
+					var details = item.parentElement;
+					var adjDetails = isPrev ? details.previousElementSibling : details.nextElementSibling;
+					if (adjDetails == null || adjDetails.tagName != "DETAILS") return;
+					adjItem = isPrev ? adjDetails.querySelector('.item:last-child') : adjDetails.querySelector('.item');
+					if (adjItem != null) {
+						focusFirstInAdjItem();
+						return;
+					}
+				}
+				case CbUp, CbDown, CbLeft, CbRight: {
+					if (mode == CbLeft || mode == CbRight) {
+						if (item.querySelector('.tag-options[column-count="2"]') == null) return;
+					}
+					//
+					var inputs = item.querySelectorAllAutoArr(inputQuery, Element);
+					var inputCount = inputs.length;
+					var inputHalfC = Math.ceil(inputs.length / 2);
+					var inputInd = inputs.indexOf(input);
+					if (inputInd == -1) return; // ..?
+					function adjustInputInd(delta) {
+						var newInputInd = inputInd + delta;
+						if (newInputInd < 0 || newInputInd >= inputCount) return;
+						inputInd = newInputInd;
+					}
+					switch (mode) {
+						case CbUp: adjustInputInd(-1);
+						case CbDown: adjustInputInd(1);
+						case CbLeft: adjustInputInd(-inputHalfC);
+						case CbRight: adjustInputInd(inputHalfC);
+						default:
+					}
+					if (inputInd < 0) inputInd += inputCount;
+					if (inputInd >= inputCount) inputInd -= inputCount;
+					focusAndScrollIntoView(inputs[inputInd]);
+					e.preventDefault();
+				};
+			}
+		}
+		for (el in out.querySelectorEls(inputQuery)) {
+			el.addEventListener("keydown", shortcutHandler);
+		}
+	}
+}
+enum FancyTableEditorShortcutsAction {
+	Prev;
+	Next;
+	CbUp;
+	CbDown;
+	CbLeft;
+	CbRight;
+}