Add autofocus attribute for html snippets

marijnh · marijnh · commit b9babe155f50 · 2014-03-24T13:23:42.000+01:00
diff --git a/14_event.txt b/14_event.txt
@@ -248,6 +248,7 @@ enabling the effect on `"keydown"`, and turning it off again on
 `"keyup"`.
 
 [source,text/html]
+[focus="yes"]
 ----
 <p>This page turns violet when you hold the V key.</p>
 <script>
@@ -262,13 +263,6 @@ enabling the effect on `"keydown"`, and turning it off again on
 </script>
 ----
 
-ifdef::html_target[]
-
-To make the browser actually deliver key events to the example page,
-you have to click it first to focus it.
-
-endif::html_target[]
-
 Despite its name, `"keydown"` is not only fired when the key is
 physically pushed down. When a key is pressed and held, the event is
 fired again every time the key “repeats”. Sometimes, for example when
@@ -308,6 +302,7 @@ looking at the `shiftKey`, `ctrlKey`, `altKey`, and `metaKey`
 properties of key (and mouse) events.
 
 [source,text/html]
+[focus="yes"]
 ----
 <p>Press control-space to continue.</p>
 <script>
@@ -329,6 +324,7 @@ The `String.fromCharCode` function can be used to turn this code into
 an actual (single-character) string.
 
 [source,text/html]
+[focus="yes"]
 ----
 <p>Focus this page and type something.</p>
 <script>
diff --git a/asciidoc_html.conf b/asciidoc_html.conf
@@ -36,7 +36,7 @@ options=sectionbody
 </div></div>
 
 [source-highlight-block]
-<pre{id? id="{id}"} data-language="{language}" class="snippet cm-s-default"{sandbox? data-sandbox="{sandbox}"}>
+<pre{id? id="{id}"} data-language="{language}" class="snippet cm-s-default"{sandbox? data-sandbox="{sandbox}"}{focus? data-focus="true"}>
 |
 </pre>
 
diff --git a/html/js/ejs.js b/html/js/ejs.js
@@ -124,7 +124,10 @@ window.addEventListener("load", function() {
     var val = data.editor.getValue();
     getSandbox(data.sandbox, data.isHTML, function(box) {
       if (data.isHTML)
-        box.setHTML(withDoctype(val), data.output, Math.min);
+        box.setHTML(withDoctype(val), data.output, function() {
+          if (data.orig.getAttribute("data-focus"))
+            box.win.focus();
+        });
       else
         box.run(val, data.output);
     });

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ options=sectionbody`
`36`	`36`	`</div></div>`
`37`	`37`
`38`	`38`	`[source-highlight-block]`
`39`		`-<pre{id? id="{id}"} data-language="{language}" class="snippet cm-s-default"{sandbox? data-sandbox="{sandbox}"}>`
	`39`	`+<pre{id? id="{id}"} data-language="{language}" class="snippet cm-s-default"{sandbox? data-sandbox="{sandbox}"}{focus? data-focus="true"}>`
`40`	`40`	`\|`
`41`	`41`	`</pre>`
`42`	`42`