Remove horrible iframe overlay hack, introduce sandbox targets

Author: marijnh

asciidoc_html.conf

@@ -36,7 +36,7 @@ options=sectionbody
 </div></div>
 
 [source-highlight-block]
-<pre{id? id="{id}"} data-language="{language}" class="cm-s-default">
+<pre{id? id="{id}"} data-language="{language}" class="snippet cm-s-default"{sandbox? data-sandbox="{sandbox}"}>
 |
 </pre>
 

html/ejs.css

@@ -183,7 +183,6 @@ blockquote footer:before {
   -webkit-transition: margin-left .5s ease-out, margin-right .5s ease-out;
   -o-transition: margin-left .5s ease-out, margin-right .5s ease-out;
   transition: margin-left .5s ease-out, margin-right .5s ease-out;
-  border-top: 1px solid #4ab;
   border-bottom: 1px solid #4ab;
 }
 
@@ -199,10 +198,11 @@ blockquote footer:before {
   display: none;
 }
 
-#sandbox {
+.editor-wrap iframe {
+  display: block;
+  border: 1px dotted #4ab;
   border-top: 1px solid #4ab;
-  border-left: 1px dotted #4ab;
-  border-right: 1px dotted #4ab;
+  border-bottom-width: 0;
   padding: 0; margin: 0;
   width: 100%;
   -moz-box-sizing: border-box;
@@ -299,6 +299,7 @@ blockquote footer:before {
 .CodeMirror {
   height: auto;
   line-height: 1.3;
+  border-top: 1px solid #4ab;
 }
 .CodeMirror-scroll {
   max-height: 700px;

html/js/ejs.js

@@ -2,13 +2,6 @@ window.addEventListener("load", function() {
   // If there's no ecmascript 5 support, don't try to initialize
   if (!Object.create || !window.JSON) return;
 
-  var sandbox;
-  function resetSandbox() {
-    sandbox = new SandBox({loadFiles: window.sandboxLoadFiles});
-    window.sandbox = sandbox;
-  }
-  resetSandbox();
-
   document.body.addEventListener("click", function(e) {
     for (var n = e.target; n; n = n.parentNode) {
       if (n.className == "c_ident") return;
@@ -45,26 +38,38 @@ window.addEventListener("load", function() {
     "Ctrl-Q": resetSandbox
   };
 
+  var nextID = 0;
+
   function activateCode(node, e, lang) {
     var code = node.textContent;
     node.style.display = "none";
     var wrap = node.parentNode.insertBefore(elt("div", {"class": "editor-wrap"}), node);
-    var editor = CodeMirror(wrap, {
+    var editor = CodeMirror(function(div) {wrap.insertBefore(div, wrap.firstChild)}, {
       value: code,
       mode: lang,
       extraKeys: keyMap,
       matchBrackets: true,
       lineNumbers: true
     });
-    editor.on("change", SandBox.Output.repositionFrame);
-    wrap.style.margin = "0 -5em";
-    setTimeout(function() { editor.refresh(); SandBox.Output.repositionFrame(); }, 600);
-    editor.setCursor(editor.coordsChar({left: e.clientX, top: e.clientY}, "client"));
-    editor.focus();
+    wrap.style.margin = "1rem -5em";
+    setTimeout(function() { editor.refresh(); }, 600);
+    if (e) {
+      editor.setCursor(editor.coordsChar({left: e.clientX, top: e.clientY}, "client"));
+      editor.focus();
+    }
     var out = wrap.appendChild(elt("div", {"class": "sandbox-output"}));
     var menu = wrap.appendChild(elt("div", {"class": "sandbox-menu", title: "Sandbox menu..."}));
+    var sandbox = node.getAttribute("data-sandbox");
+    if (lang == "text/html" && !sandbox) {
+      sandbox = "html" + nextID++;
+      node.setAttribute("data-sandbox", sandbox);
+    }
 
-    var data = editor.state.context = {editor: editor, wrap: wrap, orig: node, isHTML: lang == "text/html"};
+    var data = editor.state.context = {editor: editor,
+                                       wrap: wrap,
+                                       orig: node,
+                                       isHTML: lang == "text/html",
+                                       sandbox: sandbox};
     data.output = new SandBox.Output(out);
     menu.addEventListener("click", function() { openMenu(data, menu); });
   }
@@ -73,8 +78,9 @@ window.addEventListener("load", function() {
     var menu = elt("div", {"class": "sandbox-open-menu"});
     var items = [["Run code (ctrl-enter)", function() { runCode(data); }],
                  ["Revert to original code", function() { revertCode(data); }],
-                 ["Reset sandbox (ctrl-q)", resetSandbox],
-                 ["Deactivate editor (ctrl-d)", function() { closeCode(data); }]];
+                 ["Reset sandbox (ctrl-q)", resetSandbox]];
+    if (!data.isHTML || !data.sandbox)
+      items.push(["Deactivate editor (ctrl-d)", function() { closeCode(data); }]);
     items.forEach(function(choice) {
       menu.appendChild(elt("div", choice[0]));
     });
@@ -96,20 +102,59 @@ window.addEventListener("load", function() {
 
   function runCode(data) {
     data.output.clear();
-    var val = data.editor.getValue();
+    var val = data.editor.getValue(), box = getSandbox(data.sandbox, data.bisHTML);
     if (data.isHTML)
-      sandbox.show(val, data.output);
+      box.setHTML(val, data.output);
     else
-      sandbox.run(val, data.output);
+      box.run(val, data.output);
   }
 
   function closeCode(data) {
+    if (data.isHTML && data.sandbox) return;
     data.wrap.parentNode.removeChild(data.wrap);
     data.orig.style.display = "";
-    SandBox.Output.repositionFrame();
   }
 
   function revertCode(data) {
     data.editor.setValue(data.orig.textContent);
   }
+
+  var sandboxes = {};
+  function getSandbox(name, forHTML) {
+    name = name || "null";
+    if (sandboxes.hasOwnProperty(name)) return sandboxes[name];
+    var options = {loadFiles: window.sandboxLoadFiles}, html;
+    if (name != "null") {
+      var snippets = document.getElementsByClassName("snippet");
+      for (var i = 0; i < snippets.length; i++) {
+        var snippet = snippets[i];
+        if (snippet.getAttribute("data-language") == "text/html" &&
+            snippet.getAttribute("data-sandbox") == name) {
+          options.place = function(node) { placeFrame(node, snippet); };
+          if (!forHTML) html = snippet.textContent;
+          break;
+        }
+      }
+    }
+    var box = sandboxes[name] = new SandBox(options);
+    if (html != null) box.win.document.documentElement.innerHTML = html;
+    return box;
+  }
+
+  function resetSandbox(name) {
+    name = name || "null";
+    if (!sandboxes.hasOwnProperty(name)) return;
+    var frame = sandboxes[name].frame;
+    frame.parentNode.removeChild(frame);
+    delete sandboxes[name];
+  }
+
+  function placeFrame(frame, snippet) {
+    var wrap = snippet.previousSibling;
+    if (!wrap || wrap.className != "editor-wrap") {
+      activateCode(snippet, null, "text/html");
+      wrap = snippet.previousSibling;
+    }
+    wrap.insertBefore(frame, wrap.childNodes[1]);
+  }
 });

html/js/sandbox.js

@@ -9,7 +9,6 @@
       found.push({fn: m[1] || m[3] || null,
                   line: m[2] || m[4]});
     }
-    console.log(stack);
     return found;
   }
   function frameString(frame) {
@@ -18,10 +17,13 @@
 
   var SandBox = window.SandBox = function(options) {
     var frame = this.frame = document.createElement("iframe");
-    frame.id = "sandbox";
-    frame.style.display = "none";
     frame.src = "about:blank";
-    document.body.appendChild(frame);
+    if (options.place) {
+      options.place(frame);
+    } else {
+      frame.style.display = "none";
+      document.body.appendChild(frame);
+    }
 
     var win = this.win = frame.contentWindow;
     var self = win.__sandbox = this;
@@ -72,10 +74,10 @@
       this.win.__c = 0;
       timeout(this.win, preprocess(code, this), 0);
     },
-    show: function(html, output) {
+    setHTML: function(code, output) {
       var scriptTags = [], sandbox = this, doc = this.win.document;
       this.frame.style.display = "block";
-      doc.documentElement.innerHTML = html.replace(/<script\b[^>]*?(?:\bsrc\s*=\s*('[^']+'|"[^"]+"|[^\s>]+)[^>]*)?>([\s\S]*?)<\/script>/, function(m, src, content) {
+      doc.documentElement.innerHTML = code.replace(/<script\b[^>]*?(?:\bsrc\s*=\s*('[^']+'|"[^"]+"|[^\s>]+)[^>]*)?>([\s\S]*?)<\/script>/, function(m, src, content) {
         var tag = doc.createElement("script");
         if (src) {
           if (/["']/.test(src.charAt(0))) src = src.slice(1, src.length - 1);
@@ -87,14 +89,21 @@
         return "";
       });
 
-      if (output) {
-        this.output = output;
-        output.addFrame(this.frame);
+      this.frame.style.height = "10px";
+      this.resizeFrame();
+      if (scriptTags.length) {
+        if (output) this.output = output;
+        this.startedAt = Date.now();
+        this.extraSecs = 1;
+        this.win.__c = 0;
+        var resize = doc.createElement("script");
+        resize.innerHTML = "__sandbox.resizeFrame();";
+        scriptTags.push(resize);
+        scriptTags.forEach(function(tag) { doc.body.appendChild(tag); });
       }
-      this.startedAt = Date.now();
-      this.extraSecs = 1;
-      this.win.__c = 0;
-      scriptTags.forEach(function(tag) { doc.body.appendChild(tag); });
+    },
+    resizeFrame: function() {
+      this.frame.style.height = Math.max(80, Math.min(this.frame.contentWindow.document.body.scrollHeight, 600)) + "px";
     },
     tick: function() {
       var now = Date.now();
@@ -165,33 +174,10 @@
     return "try{" + out + "\n}catch(e){__sandbox.error(e);}";
   }
 
-  function pageScrollX() { return window.pageXOffset || (document.documentElement || document.body).scrollLeft; }
-  function pageScrollY() { return window.pageYOffset || (document.documentElement || document.body).scrollTop; }
-
   var Output = SandBox.Output = function(div) {
     this.div = div;
   };
 
-  var currentPlaceHolder = null;
-  function positionFrame(node) {
-    node.style.width = currentPlaceHolder.offsetWidth + "px";
-    node.style.height = currentPlaceHolder.offsetHeight + "px";
-    var box = currentPlaceHolder.getBoundingClientRect();
-    node.style.left = (box.left + pageScrollX()) + "px";
-    node.style.top = (box.top + pageScrollY()) + "px";
-  }
-
-  window.addEventListener("resize", Output.repositionFrame = function() {
-    if (currentPlaceHolder) {
-      if (currentPlaceHolder.parentNode) {
-        positionFrame(currentPlaceHolder.frame);
-      } else {
-        currentPlaceHolder.frame.style.display = "none";
-        currentPlaceHolder = false;
-      }
-    }
-  });
-
   Output.prototype = {
     clear: function() { this.div.innerHTML = ""; },
     out: function(type, args) {
@@ -206,16 +192,6 @@
           wrap.appendChild(represent(arg, 58));
       }
       this.div.appendChild(wrap);
-    },
-    addFrame: function(node) {
-      if (currentPlaceHolder && currentPlaceHolder.parentNode)
-        currentPlaceHolder.parentNode.removeChild(currentPlaceHolder);
-      currentPlaceHolder = this.div.parentNode.insertBefore(document.createElement("div"), this.div);
-      currentPlaceHolder.innerHTML = "&nbsp;";
-      currentPlaceHolder.style.height = Math.max(100, Math.min(node.contentWindow.document.body.clientHeight, 600)) + "px";
-      currentPlaceHolder.frame = node;
-      node.style.position = "absolute";
-      positionFrame(node);
     }
   };