work in progress [might break]
This commit is contained in:
parent
faaf18e417
commit
fceaf07c1f
8 changed files with 65 additions and 27 deletions
|
|
@ -36,7 +36,7 @@
|
|||
$menu.logo = 'logo_file_or_url_here'
|
||||
$menu.morelabel = '⚡'
|
||||
// add your menubuttons:
|
||||
$menu.buttons = $menu.buttons.concat([`<a class="btn" aria-label="button" aria-description="about menu" onclick="$menu.showAbout()">💁 about</a><br>`])
|
||||
$menu.buttons = $menu.buttons.concat([`<a class="btn" aria-label="button" aria-title="menu button" aria-description="about menu" onclick="$menu.showAbout()">💁 about</a><br>`])
|
||||
$menu.collapsed = false
|
||||
$menu.showAbout = () => window.notify(`
|
||||
<h1>💁 Hi there!</h1>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ chatComponent = {
|
|||
el.style.display = 'none' // start hidden
|
||||
document.body.appendChild( el )
|
||||
document.dispatchEvent( new CustomEvent("$chat:ready", {detail: opts}) )
|
||||
$chat.send({message:`Welcome to <b>${document.location.search.substr(1)}</b>, a 3D scene(file) which simply links to others.<br>You can start a solo offline exploration in XR right away.<br>Type /help below, or use the arrow- or WASD-keys on your keyboard, and mouse-drag to rotate.<br>`, class: ["info","multiline"] })
|
||||
$chat.send({message:`Welcome to <b>${document.location.search.substr(1)}</b>, a 3D scene(file) which simply links to other ones.<br>You can start a solo offline exploration in XR right away.<br>Type /help below, or use the arrow- or WASD-keys on your keyboard, and mouse-drag to rotate.<br>`, class: ["info","multiline"] })
|
||||
},
|
||||
|
||||
initListeners(){
|
||||
|
|
@ -182,14 +182,13 @@ chatComponent.css = `
|
|||
line-height:33px;
|
||||
}
|
||||
#messages .msg.info{
|
||||
border: 4px dotted #CCC
|
||||
font-size: 14px;
|
||||
padding: 3px 16px;
|
||||
}
|
||||
#messages.guide .guide{
|
||||
#messages.guide, .guide{
|
||||
display:unset;
|
||||
}
|
||||
$message .guide, .guide{
|
||||
#messages .guide, .guide{
|
||||
display:none;
|
||||
}
|
||||
br.guide{
|
||||
|
|
@ -233,5 +232,28 @@ chatComponent.css = `
|
|||
height: 18px;
|
||||
max-width:168px;
|
||||
}
|
||||
}
|
||||
|
||||
#messages button.emoticon,
|
||||
#messages .btn.emoticon {
|
||||
line-height:2px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
padding: 0px 0px;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
border: none;
|
||||
min-width: 31px;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
#messages button.emoticon:hover,
|
||||
#messages .btn.emoticon:hover {
|
||||
border: 1px solid #ccc !important;
|
||||
background:#EEE;
|
||||
}
|
||||
|
||||
nomargin{
|
||||
margin:0;
|
||||
}
|
||||
</style>`
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ connectionsComponent = {
|
|||
},
|
||||
|
||||
show(){
|
||||
$chat.visible = true
|
||||
if( !network.connected ){
|
||||
$chat.send({message:"", el})
|
||||
this.renderSettings()
|
||||
|
|
@ -75,6 +76,20 @@ connectionsComponent = {
|
|||
if( theChatnetwork.plugin.name != theWebcam.plugin.name ) $settings.appendChild( theChatnetwork.config(opts) )
|
||||
if( theScene.plugin.name != theWebcam.plugin.name && theScene.plugin.name != theChatnetwork.plugin.name )
|
||||
$settings.appendChild( scene.config(opts) )
|
||||
},
|
||||
|
||||
randomName(){
|
||||
var names = []
|
||||
let add = (s) => s.length < 6 && !s.match(/[0-9$]/) && !s.match(/_/) ? names.push(s) : false
|
||||
for ( var i in window ) add(i)
|
||||
for ( var i in Object.prototype ) add(i)
|
||||
for ( var i in Function.prototype ) add(i)
|
||||
for ( var i in Array.prototype ) add(i)
|
||||
for ( var i in String.prototype ) add(i)
|
||||
var a = names[Math.floor(Math.random() * names.length)];
|
||||
var b = names[Math.floor(Math.random() * names.length)];
|
||||
var c = names[Math.floor(Math.random() * names.length)];
|
||||
return String(`${a}-${b}-${c}`).toLowerCase()
|
||||
}
|
||||
|
||||
},{
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ menuComponent = {
|
|||
<div class="xrf footer">
|
||||
<div class="menu">
|
||||
<div id="buttons"></div>
|
||||
<a class="btn" id="more" aria-description="menu with options, like extra accessibility" onclick="$menu.toggle()"></a><br>
|
||||
<a class="btn" id="more" aria-title="menu button" aria-description="menu with options, like extra accessibility" onclick="$menu.toggle()"></a><br>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
|
@ -21,7 +21,7 @@ menuComponent = {
|
|||
morelabel: '⚡',
|
||||
collapsed: false,
|
||||
logo: './../../assets/logo.png',
|
||||
buttons: [`<a class="btn" aria-label="button" aria-description="share URL/screenshot/embed" id="share" onclick="$menu.share()">🔗 share</a><br>`],
|
||||
buttons: [`<a class="btn" aria-label="button" aria-title="share button" aria-description="share URL/screenshot/embed" id="share" onclick="$menu.share()">🔗 share</a><br>`],
|
||||
|
||||
$overlay: $overlay = el.querySelector('#overlay'),
|
||||
$logo: $logo = el.querySelector('.logo'),
|
||||
|
|
@ -265,6 +265,7 @@ let utils = {
|
|||
|
||||
notify(scope){
|
||||
return function notify(_str,opts){
|
||||
if( accessibility.enabled ) return $chat.send({message:_str})
|
||||
str = _str.replace(/(^\w+):/,"<div class='badge'>\$1</div>")
|
||||
opts = opts || {status:'info'}
|
||||
opts = Object.assign({ status, timeout:4000 },opts)
|
||||
|
|
@ -586,7 +587,7 @@ $menu.css = `
|
|||
height:33px;
|
||||
z-index:2000;
|
||||
cursor:pointer;
|
||||
min-width:130px;
|
||||
min-width:145px;
|
||||
text-decoration:none;
|
||||
margin-top: 15px;
|
||||
line-height:36px;
|
||||
|
|
@ -813,18 +814,19 @@ $menu.css = `
|
|||
border-inline: none;
|
||||
border-block: none;
|
||||
border: 1px solid #AAA;
|
||||
box-shadow: 0px 0px 5px #0003;
|
||||
height: 31px;
|
||||
border-radius: 5px;
|
||||
background: var(--xrf-lighter-gray);
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
.xrf table tr td {
|
||||
vertical-align:middle;
|
||||
text-align:right;
|
||||
}
|
||||
.xrf table tr td:nth-child(1){
|
||||
padding-right:35px;
|
||||
min-width:80px;
|
||||
min-width:95px;
|
||||
padding-right:15px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ window.accessibility = (opts) => new Proxy({
|
|||
// features
|
||||
speak_movements: true,
|
||||
speak_keyboard: true,
|
||||
speak_notifications: true,
|
||||
|
||||
// audio settings
|
||||
speak_rate: 1,
|
||||
|
|
@ -59,14 +58,6 @@ window.accessibility = (opts) => new Proxy({
|
|||
this.speak(k,true)
|
||||
})
|
||||
|
||||
document.addEventListener('notify', (e) => {
|
||||
let opts = e.detail
|
||||
let status = `${opts.status} ` || ''
|
||||
if( !this.enabled ) return
|
||||
this.speak(opts.message)
|
||||
$chat.send({message: opts.message, class:["info","guide"]})
|
||||
})
|
||||
|
||||
document.addEventListener('$menu:buttons:render', (e) => {
|
||||
let $ = e.detail
|
||||
let a = [...$.querySelectorAll('a')]
|
||||
|
|
@ -74,6 +65,10 @@ window.accessibility = (opts) => new Proxy({
|
|||
a.map( (btn) => {
|
||||
if( !btn.href ) btn.setAttribute("href","javascript:void(0)") // important!
|
||||
btn.setAttribute("aria-label","button")
|
||||
btn.addEventListener('mouseover', (e) => {
|
||||
let str = btn.getAttribute("aria-title") + btn.getAttribute('aria-description')
|
||||
this.speak( str,true)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,6 @@ window.network = (opts) => new Proxy({
|
|||
document.addEventListener('$menu:ready', (e) => {
|
||||
window.network = network(e.detail)
|
||||
document.dispatchEvent( new CustomEvent("network:ready", e ) )
|
||||
$menu.buttons = ([`<a class="btn" aria-label="button" aria-description="start text/audio/video chat" id="meeting" onclick="$connections.show()">🧑🤝🧑 connect</a><br>`])
|
||||
$menu.buttons = ([`<a class="btn" aria-label="button" aria-title="connect button" aria-description="start text/audio/video chat" id="meeting" onclick="$connections.show()">🧑🤝🧑 connect</a><br>`])
|
||||
.concat($menu.buttons)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@ window.matrix = (opts) => new Proxy({
|
|||
if( this.html[i] ) html += this.html[i](opts)
|
||||
}
|
||||
el.innerHTML = html
|
||||
el.addEventListener('mouseover', () => {
|
||||
window.notify(`${opts.name} is ${opts.description}.<br>You can basically make up your own channelname or use an existing one`)
|
||||
el.querySelector('.badge').addEventListener('mouseover', () => {
|
||||
window.notify(`${opts.name} is ${opts.description}.<br>You can basically make up a new channelname or use an existing one`)
|
||||
})
|
||||
return el
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,10 @@ window.trystero = (opts) => new Proxy({
|
|||
html: {
|
||||
generic: (opts) => `<table id="trystero">
|
||||
<tr>
|
||||
<td><a href="${opts.url}" target="_blank" class="badge">P2P</a></td>
|
||||
<td>
|
||||
<button class="emoticon" id="randomize" aria-label="button" aria-title="randomize" onclick="$('#trystero #channelname').value = $connections.randomName()">🎲</button>
|
||||
<a href="${opts.url}" target="_blank" class="badge nomargin">P2P</a>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="channelname" placeholder="channel name"/>
|
||||
</td>
|
||||
|
|
@ -57,7 +60,8 @@ window.trystero = (opts) => new Proxy({
|
|||
if( this.html[i] ) html += this.html[i](opts)
|
||||
}
|
||||
el.innerHTML = html
|
||||
el.addEventListener('mouseover', () => {
|
||||
el.querySelector('#randomize').addEventListener('mouseover', () => window.notify("generate random channel name") )
|
||||
el.querySelector('.badge').addEventListener('mouseover', () => {
|
||||
window.notify(`${opts.name} is ${opts.description} <br>by using a serverless technology called <a href="${opts.url}" target="_blank">trystero</a>.<br>You can basically make up your own channelname or choose an existing one`)
|
||||
})
|
||||
return el
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue