Merge pull request aframevr#372 from ngokevin/inspectorexample

inspector/edit button on each example
sagar-kalra · Oct 24, 2016 · 046f141 · 046f141
2 parents f0540be + 71d7ade
commit 046f141
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git 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
diff --git 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);
         }