From 71d7adee58b07cb34b67a34a2b495897c1cb2c62 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Sun, 23 Oct 2016 18:05:10 -0700
Subject: [PATCH] inspector/edit button on each example

---
 themes/aframe/layout/examples.ejs               | 15 ++++++++++++++-
 .../aframe/layout/partials/examples/iframe.ejs  | 10 ----------
 themes/aframe/source/js/examples.js             | 17 +++++++++--------
 3 files changed, 23 insertions(+), 19 deletions(-)
 delete mode 100644 themes/aframe/layout/partials/examples/iframe.ejs

diff --git a/themes/aframe/layout/examples.ejs b/themes/aframe/layout/examples.ejs
index 44b67375..80178305 100644
--- a/themes/aframe/layout/examples.ejs
+++ b/themes/aframe/layout/examples.ejs
@@ -2,6 +2,19 @@
 
 <div class="content content--examples">
   <div class="content--body">
-    <%- partial('partials/examples/iframe', {item: page}) %>
+    <!-- Example. -->
+    <iframe id="exampleIframe" class="example__iframe"
+            width="100%"
+            height="100%"
+            allowfullscreen="yes" scrolling="no"
+            allowvr="yes" src="<%- page.scene_url %>"></iframe>
+
+    <!-- Actions. -->
+    <div class="example__controls">
+      <a id="exampleInspector" class="btn" rel="nofollow"
+         title="Or open with `<ctrl> + <alt> + i`.">Visual Inspector</a>
+      <a id="exampleViewSource" class="btn" href="<%- page.source_url %>" target="_blank"
+         title="View the HTML on GitHub">View Source</a>
+    </div>
   </div>
 </div>
diff --git a/themes/aframe/layout/partials/examples/iframe.ejs b/themes/aframe/layout/partials/examples/iframe.ejs
deleted file mode 100644
index 63eff1d6..00000000
--- a/themes/aframe/layout/partials/examples/iframe.ejs
+++ /dev/null
@@ -1,10 +0,0 @@
-<iframe id="exampleIframe" class="example__iframe"
-        width="100%"
-        height="100%"
-        allowfullscreen="yes" scrolling="no"
-        allowvr
-        src="<%- page.scene_url %>"></iframe>
-<div class="example__controls">
-  <a href="" id="exampleReplay" class="btn" rel="nofollow">Replay</a>
-  <a href="<%- page.source_url %>" class="btn" id="exampleViewsource" target="_blank">View Source</a>
-</div>
diff --git a/themes/aframe/source/js/examples.js b/themes/aframe/source/js/examples.js
index 92d70039..6c3731db 100644
--- a/themes/aframe/source/js/examples.js
+++ b/themes/aframe/source/js/examples.js
@@ -156,14 +156,16 @@ function init () {
     this.setAttribute('href', getNextNavLink());
   });
 
+  // Inspector.
   var exampleIframe = document.querySelector('#exampleIframe');
-  var replayLink = document.querySelector('#exampleReplay');
-  if (replayLink) {
-    replayLink.addEventListener('click', function (e) {
-      e.preventDefault();
-      exampleIframe.src = exampleIframe.src;
-    });
-  }
+  var exampleInspector = document.querySelector('#exampleInspector');
+  var exampleViewsource = document.querySelector('#exampleViewSource');
+  exampleInspector.addEventListener('click', function () {
+    // <ctrl> + <alt> + i.
+    exampleIframe.contentWindow.postMessage('INJECT_AFRAME_INSPECTOR', '*');
+    exampleInspector.style.display = 'none';
+    exampleViewsource.style.display = 'none';
+  });
 
   if (settings.isSpa) {
     var showPage = singlePage(function (href) {
@@ -178,7 +180,6 @@ function init () {
 
         exampleIframe.setAttribute('src', currentExample.scene_url);
 
-        var exampleViewsource = document.querySelector('#exampleViewsource');
         if (exampleViewsource) {
           exampleViewsource.setAttribute('href', currentExample.source_url);
         }