From 6dff16bd16177041e3d44ef18b89140df5b1cb86 Mon Sep 17 00:00:00 2001
From: Leon van Kammen <leonvankammen@gmail.com>
Date: Tue, 4 Jul 2023 15:43:15 +0200
Subject: [PATCH] add embed feature

---
 example/aframe/sandbox/index.html  |  6 ++++--
 example/assets/css/style.css       | 25 ++++++++++++-------------
 example/assets/js/utils.js         |  6 +++++-
 example/threejs/sandbox/index.html |  3 ++-
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/example/aframe/sandbox/index.html b/example/aframe/sandbox/index.html
index 6027b37..a95b6f7 100644
--- a/example/aframe/sandbox/index.html
+++ b/example/aframe/sandbox/index.html
@@ -19,7 +19,8 @@
       <input type="submit" value="load 3D asset"></input>
       <input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )"/> 
     </div>
-    <a class="btn-foot" id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment-aframe-helloworld">clone project</a> 
+    <a class="btn-foot" id="embed" target="_blank" onclick="embed()">📺 embed</a> 
+    <a class="btn-foot" id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">clone project</a> 
     <a class="btn-foot" id="model" target="_blank" href="">⬇️ model</a> 
     <textarea style="display:none"></textarea>
     <a-scene light="defaultLightsEnabled: false">
@@ -39,9 +40,10 @@
     </a-scene>
 
     <script type="module">
-      import { loadFile, setupConsole, setupUrlBar, notify }   from './../../assets/js/utils.js';
+      import { loadFile, setupConsole, setupUrlBar, notify, embed }   from './../../assets/js/utils.js';
       window.$ = (s) => document.querySelector(s)
       window.notify = notify(window)
+      window.embed  = embed
       console.log = ( (log) => function(str){
         if( String(str).match(/:.*#/) ) window.notify(str)
         log(str)
diff --git a/example/assets/css/style.css b/example/assets/css/style.css
index 3e4563e..275074e 100644
--- a/example/assets/css/style.css
+++ b/example/assets/css/style.css
@@ -91,30 +91,29 @@ input[type="submit"] {
   border-radius: 10px;
   border: 5px solid #1c1c3299;
   padding: 0px 6px;
-  bottom:73px;
   position: absolute;
+  font-weight: bold;
+  font-family: sans-serif;
+  color: #7c7c7c;
+  z-index:2000;
+  cursor:pointer;
+  right: 10px;
 }
 
 a.btn-foot#source{
-  right: 10px;
   color: #888;
-  font-weight: bold;
-  font-family: sans-serif;
-  z-index:2000;
   bottom: 126px;
 }
 
 a.btn-foot#model{
-  position: absolute;
-  right: 10px;
-  color: #7c7c7c;
-  font-weight: bold;
-  font-family: sans-serif;
-  z-index:2000;
+  bottom:73px;
 }
 
-html.a-fullscreen a#model,
-html.a-fullscreen a#source{
+a.btn-foot#embed{
+  bottom:179px;
+}
+
+html.a-fullscreen a.btn-foot {
   margin-right:10px;
 }
 
diff --git a/example/assets/js/utils.js b/example/assets/js/utils.js
index 095ee74..7d77ca2 100644
--- a/example/assets/js/utils.js
+++ b/example/assets/js/utils.js
@@ -126,7 +126,7 @@ function SnackBar(userOptions) {
         
         _Message = document.createElement("span");
         _Message.classList.add("js-snackbar__message");
-        _Message.textContent = _Options.message;
+        _Message.innerHTML = _Options.message;
 
         innerSnack.appendChild(_Message);
 
@@ -265,3 +265,7 @@ export function notify(scope){
     SnackBar( opts )
   }
 }
+
+export function embed(){
+  window.notify(`copy/paste the following into your HTML:<br><br>&lt;iframe src='${document.location.href}'&gt;<br>&lt;/iframe&gt;<br>`,{timeout:null})
+}
diff --git a/example/threejs/sandbox/index.html b/example/threejs/sandbox/index.html
index 73e895b..e9a84a9 100644
--- a/example/threejs/sandbox/index.html
+++ b/example/threejs/sandbox/index.html
@@ -13,7 +13,8 @@
 			<input type="submit" value="load 3D asset"></input>
 			<input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )"/>
     </div>
-    <a class="btn-foot" id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment-three-helloworld">clone project</a> 
+    <a class="btn-foot" id="embed" target="_blank" onclick="embed()">📺 embed</a> 
+    <a class="btn-foot" id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">clone project</a> 
     <a class="btn-foot" id="model" target="_blank" href="">⬇️ model</a> 
 		<textarea style="display:none"></textarea>