add embed feature

This commit is contained in:
Leon van Kammen 2023-07-04 15:43:15 +02:00
parent ee5ce9e32a
commit 6dff16bd16
4 changed files with 23 additions and 17 deletions

View file

@ -19,7 +19,8 @@
<input type="submit" value="load 3D asset"></input> <input type="submit" value="load 3D asset"></input>
<input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )"/> <input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )"/>
</div> </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> <a class="btn-foot" id="model" target="_blank" href="">⬇️ model</a>
<textarea style="display:none"></textarea> <textarea style="display:none"></textarea>
<a-scene light="defaultLightsEnabled: false"> <a-scene light="defaultLightsEnabled: false">
@ -39,9 +40,10 @@
</a-scene> </a-scene>
<script type="module"> <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.$ = (s) => document.querySelector(s)
window.notify = notify(window) window.notify = notify(window)
window.embed = embed
console.log = ( (log) => function(str){ console.log = ( (log) => function(str){
if( String(str).match(/:.*#/) ) window.notify(str) if( String(str).match(/:.*#/) ) window.notify(str)
log(str) log(str)

View file

@ -91,30 +91,29 @@ input[type="submit"] {
border-radius: 10px; border-radius: 10px;
border: 5px solid #1c1c3299; border: 5px solid #1c1c3299;
padding: 0px 6px; padding: 0px 6px;
bottom:73px;
position: absolute; position: absolute;
font-weight: bold;
font-family: sans-serif;
color: #7c7c7c;
z-index:2000;
cursor:pointer;
right: 10px;
} }
a.btn-foot#source{ a.btn-foot#source{
right: 10px;
color: #888; color: #888;
font-weight: bold;
font-family: sans-serif;
z-index:2000;
bottom: 126px; bottom: 126px;
} }
a.btn-foot#model{ a.btn-foot#model{
position: absolute; bottom:73px;
right: 10px;
color: #7c7c7c;
font-weight: bold;
font-family: sans-serif;
z-index:2000;
} }
html.a-fullscreen a#model, a.btn-foot#embed{
html.a-fullscreen a#source{ bottom:179px;
}
html.a-fullscreen a.btn-foot {
margin-right:10px; margin-right:10px;
} }

View file

@ -126,7 +126,7 @@ function SnackBar(userOptions) {
_Message = document.createElement("span"); _Message = document.createElement("span");
_Message.classList.add("js-snackbar__message"); _Message.classList.add("js-snackbar__message");
_Message.textContent = _Options.message; _Message.innerHTML = _Options.message;
innerSnack.appendChild(_Message); innerSnack.appendChild(_Message);
@ -265,3 +265,7 @@ export function notify(scope){
SnackBar( opts ) 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})
}

View file

@ -13,7 +13,8 @@
<input type="submit" value="load 3D asset"></input> <input type="submit" value="load 3D asset"></input>
<input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )"/> <input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )"/>
</div> </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> <a class="btn-foot" id="model" target="_blank" href="">⬇️ model</a>
<textarea style="display:none"></textarea> <textarea style="display:none"></textarea>