Show a hint about code being runnable when the user hasn't used that feature yet

Closes marijnh#92

Author: marijnh

html/css/ejs.css

@@ -48,6 +48,7 @@ pre {
   padding: 5px 0 5px 15px;
   line-height: 1.35;
   margin: 1rem 0;
+  position: relative;
 }
 
 pre[data-language=javascript] {
@@ -314,6 +315,29 @@ blockquote footer:before {
   font-size: 60%;
 }
 
+.sandboxhint {
+  position: absolute;
+  top: 5px;
+  right: 0px;
+  font-family: tahoma, arial, sans-serif;
+  font-size: 70%;
+  padding: 4px 8px;
+  background: rgb(220, 220, 220);
+  color: white;
+  border-radius: 5px;
+}
+
+.sandboxhint:before {
+  position: absolute;
+  width: 0; height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 12px solid rgb(220, 220, 220);
+  top: 6px;
+  left: -11px;
+  content: '';
+}
+
 
 div.image img {
   max-width: 640px;

html/js/ejs.js

@@ -10,6 +10,20 @@ window.addEventListener("load", function() {
   // If there's no ecmascript 5 support, don't try to initialize
   if (!Object.create || !window.JSON) return;
 
+  var sandboxHint = null;
+  if (window.chapNum && window.chapNum < 20 && window.localStorage && !localStorage.getItem("usedSandbox")) {
+    var pres = document.getElementsByTagName("pre");
+    for (var i = 0; i < pres.length; i++) {
+      var pre = pres[i];
+      if (!/^(text\/)?(javascript|html)$/.test(pre.getAttribute("data-language")) ||
+          chapNum == 1 && !/console\.log/.test(pre.textContent)) continue;
+      sandboxHint = elt("div", {"class": "sandboxhint"},
+                        "edit & run code by clicking it");
+      pre.appendChild(sandboxHint);
+      break;
+    }
+  }
+
   document.body.addEventListener("click", function(e) {
     for (var n = e.target; n; n = n.parentNode) {
       if (n.className == "c_ident") return;
@@ -69,6 +83,12 @@ window.addEventListener("load", function() {
   var article = document.getElementsByTagName("article")[0];
 
   function activateCode(node, e, lang) {
+    if (sandboxHint) {
+      sandboxHint.parentNode.removeChild(sandboxHint);
+      sandboxHint = null;
+      localStorage.setItem("usedSandbox", "true");
+    }
+
     var code = node.textContent;
     var wrap = node.parentNode.insertBefore(elt("div", {"class": "editor-wrap"}), node);
     var editor = CodeMirror(function(div) {wrap.insertBefore(div, wrap.firstChild)}, {