removed alpine (using Proxy now)
This commit is contained in:
parent
688713d179
commit
3f63c3e132
5 changed files with 506 additions and 445 deletions
|
|
@ -29,12 +29,13 @@
|
||||||
</a-scene>
|
</a-scene>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// the xrf-menu is totally optional but can be handy
|
// the xrfmenu is totally optional but can be handy
|
||||||
// to quickly add your logo & buttons etc
|
// to quickly add your logo & buttons etc
|
||||||
XRFMENU.logo = './../../assets/logo.png'
|
XRFMENU.logo = './../../assets/logo.png'
|
||||||
XRFMENU.morelabel = '⚡'
|
XRFMENU.morelabel = '⚡'
|
||||||
// add your menubuttons:
|
// add your menubuttons:
|
||||||
XRFMENU.buttons.push(`<a class="btn" aria-label="button" aria-description="about menu" onclick="XRFMENU.showAbout()">💁 about</a><br>`)
|
XRFMENU.buttons = XRFMENU.buttons.concat([`<a class="btn" aria-label="button" aria-description="about menu" onclick="XRFMENU.showAbout()">💁 about</a><br>`])
|
||||||
|
XRFMENU.collapsed = false
|
||||||
XRFMENU.showAbout = () => window.notify(`
|
XRFMENU.showAbout = () => window.notify(`
|
||||||
<h1>💁 Hi there!</h1>
|
<h1>💁 Hi there!</h1>
|
||||||
|
|
||||||
|
|
|
||||||
3
make
3
make
|
|
@ -86,8 +86,7 @@ build(){
|
||||||
example/assets/js/qr.js > dist/xrfragment.aframe.js
|
example/assets/js/qr.js > dist/xrfragment.aframe.js
|
||||||
|
|
||||||
# html extras like menu & meetings
|
# html extras like menu & meetings
|
||||||
test -f dist/alpine.min.js || wget "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" -O dist/alpine.min.js
|
cat src/3rd/js/extra/*.js > dist/xrfragment.extras.js
|
||||||
cat dist/alpine.min.js src/3rd/js/extra/*.js > dist/xrfragment.extras.js
|
|
||||||
|
|
||||||
# fat all-in-one standalone xrf release
|
# fat all-in-one standalone xrf release
|
||||||
test -f /tmp/xrf-aframe.js || {
|
test -f /tmp/xrf-aframe.js || {
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,11 @@
|
||||||
haxe
|
haxe
|
||||||
mmark
|
mmark
|
||||||
xml2rfc
|
xml2rfc
|
||||||
|
dendrite
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
shellHooks = ''
|
||||||
|
bash
|
||||||
|
'';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,67 @@
|
||||||
|
MEETING = {
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<div id="videos" style="pointer-events:none"></div>
|
||||||
|
<div id="chat" aria-live="assertive" aria-relevant></div>
|
||||||
|
<div id="chatfooter">
|
||||||
|
<div id="chatbar">
|
||||||
|
<input id="chatline" type="text" placeholder=""></input>
|
||||||
|
</div>
|
||||||
|
<button id="showchat" class="btn">show chat</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
init: (el) => new Proxy({
|
||||||
|
|
||||||
|
scene: null,
|
||||||
|
enabled: false,
|
||||||
|
active: false,
|
||||||
|
//$overlay: $overlay = el.querySelector('#overlay'),
|
||||||
|
//
|
||||||
|
install(opts){
|
||||||
|
this.scene = opts.scene
|
||||||
|
window.meeting.buttons.push(`<a class="btn" aria-label="button" aria-description="start text/audio/video chat" id="meeting" onclick="MEETING.toggle()" target="_blank">🧑🤝🧑 meeting</a><br>`)
|
||||||
|
document.body.appendChild( el )
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
start(){
|
||||||
|
this.scene.addEventListener('meeting.peer.add', () => console.log("$meeting.peer.add") )
|
||||||
|
this.scene.addEventListener('meeting.peer.remove', () => console.log("$meeting.peer.remove") )
|
||||||
|
},
|
||||||
|
|
||||||
|
toggle: () => MEETING.collapsed = !MEETING.collapsed,
|
||||||
|
install: (opts) => {
|
||||||
|
document.body.appendChild(el)
|
||||||
|
document.dispatchEvent( new CustomEvent("MEETING:ready", {detail: opts}) )
|
||||||
|
}
|
||||||
|
|
||||||
|
},{
|
||||||
|
|
||||||
|
get(data,k,v){ return data[k] },
|
||||||
|
set(data,k,v){
|
||||||
|
data[k] = v
|
||||||
|
switch( k ){
|
||||||
|
case "css": document.head.innerHTML += v; break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// reactify component!
|
||||||
|
document.addEventListener('XRFMENU:ready', (opts) => {
|
||||||
|
opts = opts.detail
|
||||||
|
$meeting = document.createElement('div')
|
||||||
|
$meeting.innerHTML = MEETING.html
|
||||||
|
MEETING = MEETING.init($meeting)
|
||||||
|
MEETING.install(opts)
|
||||||
|
})
|
||||||
|
|
||||||
// alpine component for displaying meetings
|
// alpine component for displaying meetings
|
||||||
|
|
||||||
$XRFMEETING = $el(
|
MEETING.css = `
|
||||||
`<div x-show="enabled" id="meeting" x-data="XRFMEETING">
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
#videos{
|
#videos{
|
||||||
display:grid-auto-columns;
|
display:grid-auto-columns;
|
||||||
|
|
@ -112,48 +172,4 @@ $XRFMEETING = $el(
|
||||||
font-family:monospace;
|
font-family:monospace;
|
||||||
font-size:15px;
|
font-size:15px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>`
|
||||||
<div id="videos" style="pointer-events:none"></div>
|
|
||||||
<div id="chat" aria-live="assertive" aria-relevant></div>
|
|
||||||
<div id="chatfooter">
|
|
||||||
<div id="chatbar">
|
|
||||||
<input id="chatline" type="text" placeholder=""></input>
|
|
||||||
</div>
|
|
||||||
<button id="showchat" class="btn">show chat</button>
|
|
||||||
</div>
|
|
||||||
</div>`
|
|
||||||
)
|
|
||||||
|
|
||||||
window.XRFMEETING = {
|
|
||||||
|
|
||||||
scene: null,
|
|
||||||
enabled: false,
|
|
||||||
active: false,
|
|
||||||
init(){
|
|
||||||
window.XRFMEETING = this.$data // replace so we can modify state in global scope
|
|
||||||
window.meeting
|
|
||||||
},
|
|
||||||
toggle(){
|
|
||||||
this.enabled = !this.enabled
|
|
||||||
if( !this.active ) this.start()
|
|
||||||
},
|
|
||||||
|
|
||||||
install(opts){
|
|
||||||
this.scene = opts.scene
|
|
||||||
window.XRFMENU.buttons.push(`<a class="btn" aria-label="button" aria-description="start text/audio/video chat" id="meeting" onclick="XRFMEETING.toggle()" target="_blank">🧑🤝🧑 meeting</a><br>`)
|
|
||||||
document.body.appendChild( $XRFMEETING )
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
start(){
|
|
||||||
this.scene.addEventListener('meeting.peer.add', () => console.log("$meeting.peer.add") )
|
|
||||||
this.scene.addEventListener('meeting.peer.remove', () => console.log("$meeting.peer.remove") )
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// finally we alpinify
|
|
||||||
document.addEventListener('XRFMENU:ready', (opts) => {
|
|
||||||
opts = opts.detail
|
|
||||||
Alpine.data('XRFMEETING', () => window.XRFMEETING)
|
|
||||||
XRFMEETING.install(opts)
|
|
||||||
})
|
|
||||||
|
|
|
||||||
|
|
@ -1,410 +1,75 @@
|
||||||
// alpine component for displaying the menu
|
// reactive component for displaying the menu
|
||||||
|
XRFMENU = {
|
||||||
|
|
||||||
$XRFMENU = $el(
|
html: `
|
||||||
`<div id="menu" x-data="XRFMENU">
|
<div id="overlay" class="xrf">
|
||||||
<style type="text/css">
|
<div class="logo" ></div>
|
||||||
:root {
|
|
||||||
--xrf-primary: #6839dc;
|
|
||||||
--xrf-primary-fg: #FFF;
|
|
||||||
--xrf-light-primary: #ea23cf;
|
|
||||||
--xrf-secondary: #872eff;
|
|
||||||
--xrf-light-xrf-secondary: #ce7df2;
|
|
||||||
--xrf-overlay-bg: #fffb;
|
|
||||||
--xrf-box-shadow: #0005;
|
|
||||||
--xrf-red: red;
|
|
||||||
--xrf-black: #424280;
|
|
||||||
--xrf-white: #fdfdfd;
|
|
||||||
--xrf-dark-gray: #343334;
|
|
||||||
--xrf-gray: #ecf7ff47;
|
|
||||||
--xrf-light-gray: #efefef;
|
|
||||||
--xrf-lighter-gray: #e4e2fb96;
|
|
||||||
--xrf-font-sans-serif: system-ui, -apple-system, segoe ui, roboto, ubuntu, helvetica, cantarell, noto sans, sans-serif;
|
|
||||||
--xrf-font-monospace: menlo, monaco, lucida console, liberation mono, dejavu sans mono, bitstream vera sans mono, courier new, monospace, serif;
|
|
||||||
--xrf-font-size-1: 14px;
|
|
||||||
--xrf-font-size-2: 17px;
|
|
||||||
--xrf-font-size-3: 21px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xrf table tr td{
|
|
||||||
vertical-align:top;
|
|
||||||
}
|
|
||||||
.xrf table tr td:nth-child(1){
|
|
||||||
padding-right:35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xrf button,
|
|
||||||
.xrf input[type="submit"],
|
|
||||||
.xrf .btn {
|
|
||||||
text-decoration:none;
|
|
||||||
background: var(--xrf-primary);
|
|
||||||
border: 0;
|
|
||||||
border-radius: 25px;
|
|
||||||
padding: 11px 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: 0.3s;
|
|
||||||
height: 32px;
|
|
||||||
font-size: var(--xrf-font-size-1);
|
|
||||||
color: var(--xrf-primary-fg);
|
|
||||||
line-height: var(--xrf-font-size-1);
|
|
||||||
cursor:pointer;
|
|
||||||
white-space:pre;
|
|
||||||
min-width: 45px;
|
|
||||||
box-shadow: 0px 0px 10px var(--xrf-box-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.xrf button:hover,
|
|
||||||
.xrf input[type="submit"]:hover,
|
|
||||||
.xrf .btn:hover {
|
|
||||||
background: var(--xrf-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.xrf, .xrf *{
|
|
||||||
font-family: var(--xrf-font-sans-serif);
|
|
||||||
font-size: var(--xrf-font-size-1);
|
|
||||||
line-height:27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea, select, input[type="text"] {
|
|
||||||
background: transparent; /* linear-gradient( var(--xrf-lighter-gray), var(--xrf-gray) ) !important; */
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"] {
|
|
||||||
color: var(--xrf-light-gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=text]{
|
|
||||||
padding:7px 15px;
|
|
||||||
}
|
|
||||||
input{
|
|
||||||
border-radius:7px;
|
|
||||||
margin:5px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
border-bottom: 2px solid var(--xrf-secondary);
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay{
|
|
||||||
background: var(--xrf-overlay-bg);
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 48px;
|
|
||||||
box-shadow: 0px 0px 10px var(--xrf-box-shadow);
|
|
||||||
opacity: 0.9;
|
|
||||||
z-index:2000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay .logo{
|
|
||||||
width: 92px;
|
|
||||||
position: absolute;
|
|
||||||
top: 9px;
|
|
||||||
left: 93px;
|
|
||||||
height: 30px;
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay > input[type="submit"] {
|
|
||||||
height: 32px;
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay > button#navback,
|
|
||||||
#overlay > button#navforward {
|
|
||||||
height: 32px;
|
|
||||||
font-size: var(--xrf-font-size-1);
|
|
||||||
position: absolute;
|
|
||||||
left: 9px;
|
|
||||||
padding: 2px 13px;
|
|
||||||
border-radius:6px;
|
|
||||||
top: 8px;
|
|
||||||
color: var(--xrf-light-gray);
|
|
||||||
width: 36px;
|
|
||||||
min-width: unset;
|
|
||||||
}
|
|
||||||
#overlay > button#navforward {
|
|
||||||
left:49px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay > #uri {
|
|
||||||
height: 18px;
|
|
||||||
font-size: var(--xrf-font-size-3);
|
|
||||||
position: absolute;
|
|
||||||
left: 200px;
|
|
||||||
top: 9px;
|
|
||||||
max-width: 550px;
|
|
||||||
padding: 5px 0px 5px 5px;
|
|
||||||
width: calc( 63% - 200px);
|
|
||||||
background: #f0f0f0;
|
|
||||||
border-color: #Ccc;
|
|
||||||
border: 2px solid #CCC;
|
|
||||||
border-radius: 7px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.menu .btn{
|
|
||||||
display:inline-block;
|
|
||||||
background: var(--xrf-primary);
|
|
||||||
border-radius: 25px;
|
|
||||||
border: 0;
|
|
||||||
padding: 5px 19px;
|
|
||||||
font-weight: 1000;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: var(--xrf-font-size-2);
|
|
||||||
color:var(--xrf-primary-fg);
|
|
||||||
height:33px;
|
|
||||||
z-index:2000;
|
|
||||||
cursor:pointer;
|
|
||||||
min-width:107px;
|
|
||||||
text-decoration:none;
|
|
||||||
margin-top: 15px;
|
|
||||||
line-height:36px;
|
|
||||||
margin-right:10px;
|
|
||||||
text-align:left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.xrf a.btn#more{
|
|
||||||
width: 19px;
|
|
||||||
min-width: 19px;
|
|
||||||
font-size:16px;
|
|
||||||
text-align: center;
|
|
||||||
background:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
html{
|
|
||||||
max-width:unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render {
|
|
||||||
position:absolute;
|
|
||||||
top:0;
|
|
||||||
left:0;
|
|
||||||
right:0;
|
|
||||||
bottom:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lil-gui.autoPlace{
|
|
||||||
right:0px !important;
|
|
||||||
top:48px !important;
|
|
||||||
height:33vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#VRButton {
|
|
||||||
margin-bottom:20vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
|
||||||
#uri{ display:none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.lil-gui.root{
|
|
||||||
top:auto !important;
|
|
||||||
left:auto !important;
|
|
||||||
}
|
|
||||||
.js-snackbar__message{
|
|
||||||
overflow-y:auto;
|
|
||||||
max-height:600px;
|
|
||||||
}
|
|
||||||
.js-snackbar__message h1,h2,h3{
|
|
||||||
font-size:22px;
|
|
||||||
}
|
|
||||||
.xrf table tr td {
|
|
||||||
|
|
||||||
}
|
|
||||||
:root{
|
|
||||||
--xrf-font-size-1: 13px;
|
|
||||||
--xrf-font-size-2: 17px;
|
|
||||||
--xrf-font-size-3: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* notifications */
|
|
||||||
|
|
||||||
.js-snackbar-container .btn,
|
|
||||||
.js-snackbar-container input[type=submit],
|
|
||||||
.js-snackbar-container button{
|
|
||||||
margin-bottom:15px;
|
|
||||||
}
|
|
||||||
.js-snackbar-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 0px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width:100%;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
z-index:1001;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar-container * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__wrapper {
|
|
||||||
--color-c: #555;
|
|
||||||
--color-a: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.js-snackbar__wrapper {
|
|
||||||
overflow: hidden;
|
|
||||||
height: auto;
|
|
||||||
margin: 5px 0;
|
|
||||||
transition: all ease .5s;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 0 4px 0 var(--xrf-box-shadow);
|
|
||||||
right: 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar {
|
|
||||||
display: inline-flex;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: var(--color-c);
|
|
||||||
background-color: var(--color-a);
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__close,
|
|
||||||
.js-snackbar__status,
|
|
||||||
.js-snackbar__message {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__message {
|
|
||||||
margin: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__status {
|
|
||||||
display: none;
|
|
||||||
width: 15px;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 3px 0 0 3px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__status.js-snackbar--success,
|
|
||||||
.js-snackbar__status.js-snackbar--warning,
|
|
||||||
.js-snackbar__status.js-snackbar--danger,
|
|
||||||
.js-snackbar__status.js-snackbar--info {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__status.js-snackbar--success {
|
|
||||||
background-color: #4caf50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__status.js-snackbar--warning {
|
|
||||||
background-color: #ff9800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__status.js-snackbar--danger {
|
|
||||||
background-color: #ff6060;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__status.js-snackbar--info {
|
|
||||||
background-color: #CCC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__close {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 10px;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-snackbar__close:hover {
|
|
||||||
background-color: #4443;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-enter-vr-button, .a-enter-ar-button{
|
|
||||||
height:41px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#qrcode{
|
|
||||||
background: transparent;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 121px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
input#share{
|
|
||||||
font-size: var(--xrf-font-size-1);
|
|
||||||
font-family: var(--xrf-font-monospace);
|
|
||||||
border:2px solid #AAA;
|
|
||||||
width:50vw;
|
|
||||||
max-width:400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse; /* This reverses the stacking order of the flex container */
|
|
||||||
align-items: flex-end;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
top: 71px;
|
|
||||||
right: 11px;
|
|
||||||
bottom: 0;
|
|
||||||
padding-bottom:149px;
|
|
||||||
box-sizing:border-box;
|
|
||||||
}
|
|
||||||
.footer .menu{
|
|
||||||
text-align:right;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<div id="overlay" class="xrf" x-show="enabled">
|
|
||||||
<div class="logo" :style="'background-image: url('+logo+')'"></div>
|
|
||||||
<button id="navback" onclick="history.back()"><</button>
|
<button id="navback" onclick="history.back()"><</button>
|
||||||
<button id="navforward" onclick="history.forward()">></button>
|
<button id="navforward" onclick="history.forward()">></button>
|
||||||
<input type="submit" value="load 3D file"></input>
|
<input id="load" type="submit" value="load 3D file"></input>
|
||||||
<input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )" style="display:none"/>
|
<input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )" style="display:none"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="xrf footer">
|
<div class="xrf footer">
|
||||||
<div id="buttons" class="menu">
|
<div class="menu">
|
||||||
<template x-for="btn in buttons.reverse()">
|
<div id="buttons"></div>
|
||||||
<div x-show="enabled" x-html="btn"></div>
|
<a class="btn" id="more" onclick="XRFMENU.toggle()"></a><br>
|
||||||
</template>
|
|
||||||
<a class="btn" id="more" @click="toggle" x-text="morelabel"></a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>`
|
`,
|
||||||
)
|
|
||||||
|
|
||||||
window.XRFMENU = {
|
init: (el) => new Proxy({
|
||||||
|
morelabel: '⚡',
|
||||||
|
collapsed: false,
|
||||||
|
logo: './../../assets/logo.png',
|
||||||
|
buttons: [`<a class="btn" aria-label="button" aria-description="share URL/screenshot/embed" id="share" onclick="XRFMENU.share()">🔗 share</a><br>`],
|
||||||
|
|
||||||
morelabel: '⚡',
|
$overlay: $overlay = el.querySelector('#overlay'),
|
||||||
enabled: false,
|
$logo: $logo = el.querySelector('.logo'),
|
||||||
logo: './../../assets/logo.png',
|
$uri: $uri = el.querySelector('#uri'),
|
||||||
buttons: [`<a class="btn" aria-label="button" aria-description="share URL/screenshot/embed" id="share" onclick="window.share()">🔗 share</a><br>`],
|
$buttons: $buttons = el.querySelector('#buttons'),
|
||||||
init(){ window.XRFMENU = this.$data }, // replace so we can modify state in global scope
|
$btnMore: $btnMore = el.querySelector('#more'),
|
||||||
toggle(){ this.enabled = !this.enabled },
|
|
||||||
|
|
||||||
install(opts){
|
toggle: () => XRFMENU.collapsed = !XRFMENU.collapsed,
|
||||||
|
install: (opts) => {
|
||||||
|
XRFMENU.bindToWindow() // bind functions like notify to window
|
||||||
|
window.notify('loading '+document.location.search.substr(1))
|
||||||
|
document.body.appendChild(el)
|
||||||
|
document.dispatchEvent( new CustomEvent("XRFMENU:ready", {detail: opts}) )
|
||||||
|
}
|
||||||
|
|
||||||
document.body.appendChild( $XRFMENU )
|
},{
|
||||||
document.dispatchEvent( new CustomEvent("XRFMENU:ready", {detail: opts}) )
|
|
||||||
|
get(data,k,v){ return data[k] },
|
||||||
|
set(data,k,v){
|
||||||
|
data[k] = v
|
||||||
|
switch( k ){
|
||||||
|
case "logo": $logo.style.backgroundImage = `url(${v})`; break;
|
||||||
|
case "css": document.head.innerHTML += v; break;
|
||||||
|
case "morelabel": $btnMore.innerText = data.morelabel; break;
|
||||||
|
case "buttons": $buttons.innerHTML = this.renderButtons(data); break;
|
||||||
|
case "collapsed": $overlay.style.display = data.collapsed ? 'block' : 'none'
|
||||||
|
$buttons.style.display = data.collapsed ? 'block' : 'none'
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
renderButtons: (data) => `${data.buttons.join('')}`
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// reactify component!
|
||||||
|
$xrfmenu = document.createElement('div')
|
||||||
|
$xrfmenu.innerHTML = XRFMENU.html
|
||||||
|
XRFMENU = XRFMENU.init($xrfmenu)
|
||||||
|
|
||||||
|
|
||||||
|
// here come all menu functions which are less related to rendering
|
||||||
|
let utils = {
|
||||||
|
|
||||||
|
bindToWindow(opts){
|
||||||
|
|
||||||
window.notify = XRFMENU.notify(window)
|
window.notify = XRFMENU.notify(window)
|
||||||
window.share = XRFMENU.share
|
|
||||||
window.download = XRFMENU.download
|
|
||||||
window.notify('loading '+document.location.search.substr(1))
|
|
||||||
|
|
||||||
// reroute console messages to snackbar notifications
|
// reroute console messages to snackbar notifications
|
||||||
console.log = ( (log) => function(str){
|
console.log = ( (log) => function(str){
|
||||||
|
|
@ -648,7 +313,7 @@ window.XRFMENU = {
|
||||||
// End of *TODO*
|
// End of *TODO*
|
||||||
window.notify(`<h2>${ inMeeting ? 'Meeting link ' : 'Link'} copied to clipboard!</h2> <br>Now share it with your friends ❤️<br>
|
window.notify(`<h2>${ inMeeting ? 'Meeting link ' : 'Link'} copied to clipboard!</h2> <br>Now share it with your friends ❤️<br>
|
||||||
<canvas id="qrcode" width="121" height="121"></canvas><br>
|
<canvas id="qrcode" width="121" height="121"></canvas><br>
|
||||||
<button onclick="window.download()">💾 download scene file</button> <br>
|
<button onclick="XRFMENU.download()">💾 download scene file</button> <br>
|
||||||
<button onclick="alert('this might take a while'); $('a-scene').components.screenshot.capture('equirectangular')">📷 download 360 screenshot</button> <br>
|
<button onclick="alert('this might take a while'); $('a-scene').components.screenshot.capture('equirectangular')">📷 download 360 screenshot</button> <br>
|
||||||
<a class="btn" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">🖥 clone & selfhost this experience</a><br>
|
<a class="btn" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">🖥 clone & selfhost this experience</a><br>
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -665,6 +330,9 @@ window.XRFMENU = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// map to component
|
||||||
|
for( let i in utils ) XRFMENU[i] = utils[i]
|
||||||
|
|
||||||
//$('a-scene').addEventListener('XRF', this.onXRFready )
|
//$('a-scene').addEventListener('XRF', this.onXRFready )
|
||||||
//
|
//
|
||||||
// if( document.location.search.length > 2 ){
|
// if( document.location.search.length > 2 ){
|
||||||
|
|
@ -731,3 +399,375 @@ window.XRFMENU = {
|
||||||
// })
|
// })
|
||||||
// $("#overlay > input[type=submit]").addEventListener("click", fileLoaders )
|
// $("#overlay > input[type=submit]").addEventListener("click", fileLoaders )
|
||||||
|
|
||||||
|
|
||||||
|
// finally add some css
|
||||||
|
XRFMENU.css = `
|
||||||
|
<style type="text/css">
|
||||||
|
:root {
|
||||||
|
--xrf-primary: #6839dc;
|
||||||
|
--xrf-primary-fg: #FFF;
|
||||||
|
--xrf-light-primary: #ea23cf;
|
||||||
|
--xrf-secondary: #872eff;
|
||||||
|
--xrf-light-xrf-secondary: #ce7df2;
|
||||||
|
--xrf-overlay-bg: #fffb;
|
||||||
|
--xrf-box-shadow: #0005;
|
||||||
|
--xrf-red: red;
|
||||||
|
--xrf-black: #424280;
|
||||||
|
--xrf-white: #fdfdfd;
|
||||||
|
--xrf-dark-gray: #343334;
|
||||||
|
--xrf-gray: #ecf7ff47;
|
||||||
|
--xrf-light-gray: #efefef;
|
||||||
|
--xrf-lighter-gray: #e4e2fb96;
|
||||||
|
--xrf-font-sans-serif: system-ui, -apple-system, segoe ui, roboto, ubuntu, helvetica, cantarell, noto sans, sans-serif;
|
||||||
|
--xrf-font-monospace: menlo, monaco, lucida console, liberation mono, dejavu sans mono, bitstream vera sans mono, courier new, monospace, serif;
|
||||||
|
--xrf-font-size-1: 14px;
|
||||||
|
--xrf-font-size-2: 17px;
|
||||||
|
--xrf-font-size-3: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrf table tr td{
|
||||||
|
vertical-align:top;
|
||||||
|
}
|
||||||
|
.xrf table tr td:nth-child(1){
|
||||||
|
padding-right:35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrf button,
|
||||||
|
.xrf input[type="submit"],
|
||||||
|
.xrf .btn {
|
||||||
|
text-decoration:none;
|
||||||
|
background: var(--xrf-primary);
|
||||||
|
border: 0;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 11px 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: 0.3s;
|
||||||
|
height: 32px;
|
||||||
|
font-size: var(--xrf-font-size-1);
|
||||||
|
color: var(--xrf-primary-fg);
|
||||||
|
line-height: var(--xrf-font-size-1);
|
||||||
|
cursor:pointer;
|
||||||
|
white-space:pre;
|
||||||
|
min-width: 45px;
|
||||||
|
box-shadow: 0px 0px 10px var(--xrf-box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrf button:hover,
|
||||||
|
.xrf input[type="submit"]:hover,
|
||||||
|
.xrf .btn:hover {
|
||||||
|
background: var(--xrf-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrf, .xrf *{
|
||||||
|
font-family: var(--xrf-font-sans-serif);
|
||||||
|
font-size: var(--xrf-font-size-1);
|
||||||
|
line-height:27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea, select, input[type="text"] {
|
||||||
|
background: transparent; /* linear-gradient( var(--xrf-lighter-gray), var(--xrf-gray) ) !important; */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
color: var(--xrf-light-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text]{
|
||||||
|
padding:7px 15px;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
border-radius:7px;
|
||||||
|
margin:5px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
border-bottom: 2px solid var(--xrf-secondary);
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay{
|
||||||
|
background: var(--xrf-overlay-bg);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
box-shadow: 0px 0px 10px var(--xrf-box-shadow);
|
||||||
|
opacity: 0.9;
|
||||||
|
z-index:2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay .logo{
|
||||||
|
width: 92px;
|
||||||
|
position: absolute;
|
||||||
|
top: 9px;
|
||||||
|
left: 93px;
|
||||||
|
height: 30px;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay > input[type="submit"] {
|
||||||
|
height: 32px;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay > button#navback,
|
||||||
|
#overlay > button#navforward {
|
||||||
|
height: 32px;
|
||||||
|
font-size: var(--xrf-font-size-1);
|
||||||
|
position: absolute;
|
||||||
|
left: 9px;
|
||||||
|
padding: 2px 13px;
|
||||||
|
border-radius:6px;
|
||||||
|
top: 8px;
|
||||||
|
color: var(--xrf-light-gray);
|
||||||
|
width: 36px;
|
||||||
|
min-width: unset;
|
||||||
|
}
|
||||||
|
#overlay > button#navforward {
|
||||||
|
left:49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay > #uri {
|
||||||
|
height: 18px;
|
||||||
|
font-size: var(--xrf-font-size-3);
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
top: 9px;
|
||||||
|
max-width: 550px;
|
||||||
|
padding: 5px 0px 5px 5px;
|
||||||
|
width: calc( 63% - 200px);
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-color: #Ccc;
|
||||||
|
border: 2px solid #CCC;
|
||||||
|
border-radius: 7px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.menu .btn{
|
||||||
|
display:inline-block;
|
||||||
|
background: var(--xrf-primary);
|
||||||
|
border-radius: 25px;
|
||||||
|
border: 0;
|
||||||
|
padding: 5px 19px;
|
||||||
|
font-weight: 1000;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: var(--xrf-font-size-2);
|
||||||
|
color:var(--xrf-primary-fg);
|
||||||
|
height:33px;
|
||||||
|
z-index:2000;
|
||||||
|
cursor:pointer;
|
||||||
|
min-width:107px;
|
||||||
|
text-decoration:none;
|
||||||
|
margin-top: 15px;
|
||||||
|
line-height:36px;
|
||||||
|
margin-right:10px;
|
||||||
|
text-align:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xrf a.btn#more{
|
||||||
|
width: 19px;
|
||||||
|
min-width: 19px;
|
||||||
|
font-size:16px;
|
||||||
|
text-align: center;
|
||||||
|
background:white;
|
||||||
|
color: var(--xrf-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
html{
|
||||||
|
max-width:unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.render {
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
right:0;
|
||||||
|
bottom:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lil-gui.autoPlace{
|
||||||
|
right:0px !important;
|
||||||
|
top:48px !important;
|
||||||
|
height:33vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#VRButton {
|
||||||
|
margin-bottom:20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
#uri{ display:none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.lil-gui.root{
|
||||||
|
top:auto !important;
|
||||||
|
left:auto !important;
|
||||||
|
}
|
||||||
|
.js-snackbar__message{
|
||||||
|
overflow-y:auto;
|
||||||
|
max-height:600px;
|
||||||
|
}
|
||||||
|
.js-snackbar__message h1,h2,h3{
|
||||||
|
font-size:22px;
|
||||||
|
}
|
||||||
|
.xrf table tr td {
|
||||||
|
|
||||||
|
}
|
||||||
|
:root{
|
||||||
|
--xrf-font-size-1: 13px;
|
||||||
|
--xrf-font-size-2: 17px;
|
||||||
|
--xrf-font-size-3: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* notifications */
|
||||||
|
|
||||||
|
.js-snackbar-container .btn,
|
||||||
|
.js-snackbar-container input[type=submit],
|
||||||
|
.js-snackbar-container button{
|
||||||
|
margin-bottom:15px;
|
||||||
|
}
|
||||||
|
.js-snackbar-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 0px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width:100%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
z-index:1001;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar-container * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__wrapper {
|
||||||
|
--color-c: #555;
|
||||||
|
--color-a: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.js-snackbar__wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
height: auto;
|
||||||
|
margin: 5px 0;
|
||||||
|
transition: all ease .5s;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 0 4px 0 var(--xrf-box-shadow);
|
||||||
|
right: 20px;
|
||||||
|
position: fixed;
|
||||||
|
top: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar {
|
||||||
|
display: inline-flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: var(--color-c);
|
||||||
|
background-color: var(--color-a);
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__close,
|
||||||
|
.js-snackbar__status,
|
||||||
|
.js-snackbar__message {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__message {
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__status {
|
||||||
|
display: none;
|
||||||
|
width: 15px;
|
||||||
|
margin-right: 5px;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__status.js-snackbar--success,
|
||||||
|
.js-snackbar__status.js-snackbar--warning,
|
||||||
|
.js-snackbar__status.js-snackbar--danger,
|
||||||
|
.js-snackbar__status.js-snackbar--info {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__status.js-snackbar--success {
|
||||||
|
background-color: #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__status.js-snackbar--warning {
|
||||||
|
background-color: #ff9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__status.js-snackbar--danger {
|
||||||
|
background-color: #ff6060;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__status.js-snackbar--info {
|
||||||
|
background-color: #CCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__close {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-snackbar__close:hover {
|
||||||
|
background-color: #4443;
|
||||||
|
}
|
||||||
|
|
||||||
|
.a-enter-vr-button, .a-enter-ar-button{
|
||||||
|
height:41px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#qrcode{
|
||||||
|
background: transparent;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 121px;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#share{
|
||||||
|
font-size: var(--xrf-font-size-1);
|
||||||
|
font-family: var(--xrf-font-monospace);
|
||||||
|
border:2px solid #AAA;
|
||||||
|
width:50vw;
|
||||||
|
max-width:400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse; /* This reverses the stacking order of the flex container */
|
||||||
|
align-items: flex-end;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 71px;
|
||||||
|
right: 11px;
|
||||||
|
bottom: 0;
|
||||||
|
padding-bottom:149px;
|
||||||
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
.footer .menu{
|
||||||
|
text-align:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
`
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue