Update key-table-builder to support multiple key tables.
authorGary Kacmarcik <garykac@google.com>
Tue, 09 Jul 2013 17:00:31 -0700
changeset 429 837c84bbeac5
parent 428 4cc962f2084b
child 430 351755b47b30
Update key-table-builder to support multiple key tables.
html/DOM3-Events.html
html/key-table-builder.js
--- a/html/DOM3-Events.html	Tue Jul 09 15:36:48 2013 -0700
+++ b/html/DOM3-Events.html	Tue Jul 09 17:00:31 2013 -0700
@@ -6382,7 +6382,7 @@
 						of values for use in the <a href="#events-KeyboardEvent-char"><code>KeyboardEvent.char</code></a> and <a href="#events-KeyboardEvent-key"><code>KeyboardEvent.key</code></a>
 						attributes, though not all values MAY be available on all platforms or devices.</p>
 
-					<div id="keytable">
+					<div id="keytable" class="key-table">
 						<!-- All keys must be defined in the keytable div -->
 						<key name="Attn" cat="General">The Attention (Attn) key.</key>
 						<key name="Apps" cat="General">Toggle display of available (interactive) application list.</key>
--- a/html/key-table-builder.js	Tue Jul 09 15:36:48 2013 -0700
+++ b/html/key-table-builder.js	Tue Jul 09 17:00:31 2013 -0700
@@ -1,11 +1,24 @@
 /* Convert <key> tags into a proper <table> of key info.
+ * The document must be structured as follows:
+ *   <div class="key-table">
+ *     <key name="name" cat="cat" char="0000">Key description.</key>
+ *     ...
+ *   </div>
+ * where:
+ *   name: The name of the 'key' attribute.
+ *   cat: The category (e.g.: 'General' or 'Math') of the key.
+ *   char: (optional) The 4-digit hexadecimal Unicode value.
+ *
+ * Multiple key-tables can be present in a single document.
  */
-function create_key_table() {
-	var tablediv = document.getElementById('keytable');
-	if (!tablediv) {
-		return;
+function create_key_tables() {
+	keytables = document.getElementsByClassName("key-table");
+	for (var i = 0; i < keytables.length; i++) {
+		create_key_table(keytables[i]);
 	}
+}
 
+function create_key_table(tablediv) {
 	var table = document.createElement('table');
 	table.setAttribute('class', 'data-table');
 
@@ -25,10 +38,13 @@
 	cell = document.createElement('th');
 	cell.appendChild(document.createTextNode('Category (Informative)'));
 	row.appendChild(cell);
-		
-	var keys = document.getElementsByTagName('key');
-	for (var i = 0; i < keys.length; i++) {
-		var key = keys[i];
+
+	while (tablediv.hasChildNodes()) {
+		var key = tablediv.removeChild(tablediv.firstChild);
+		if (key.nodeType != 1) {
+			continue;
+		}
+		console.log(key);
 		var keyname = key.getAttribute('name');
 		var keychar = key.getAttribute('char') || '';
 		var keycat = key.getAttribute('cat');
@@ -64,14 +80,9 @@
 		cell.appendChild(document.createTextNode(keycat));
 	}
 
-	// Remove all <key> tags from the 'keytable'.
-	while (tablediv.hasChildNodes()) {
-		tablediv.removeChild(tablediv.lastChild);
-	}
-	
 	tablediv.appendChild(table);
 }
 
 if (window.addEventListener) {
-	window.addEventListener('load', create_key_table, false);
+	window.addEventListener('load', create_key_tables, false);
 }