diff --git a/example/aframe/sandbox/index.html b/example/aframe/sandbox/index.html
index 9f45496..68b0078 100644
--- a/example/aframe/sandbox/index.html
+++ b/example/aframe/sandbox/index.html
@@ -36,7 +36,7 @@
$menu.logo = 'logo_file_or_url_here'
$menu.morelabel = '⚡'
// add your menubuttons:
- $menu.buttons = $menu.buttons.concat([`💁 about
`])
+ $menu.buttons = $menu.buttons.concat([`💁 about
`])
$menu.collapsed = false
$menu.showAbout = () => window.notify(`
💁 Hi there!
diff --git a/src/3rd/js/extra/$chat.js b/src/3rd/js/extra/$chat.js
index cdc9699..30a14af 100644
--- a/src/3rd/js/extra/$chat.js
+++ b/src/3rd/js/extra/$chat.js
@@ -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 ${document.location.search.substr(1)}, a 3D scene(file) which simply links to others.
You can start a solo offline exploration in XR right away.
Type /help below, or use the arrow- or WASD-keys on your keyboard, and mouse-drag to rotate.
`, class: ["info","multiline"] })
+ $chat.send({message:`Welcome to ${document.location.search.substr(1)}, a 3D scene(file) which simply links to other ones.
You can start a solo offline exploration in XR right away.
Type /help below, or use the arrow- or WASD-keys on your keyboard, and mouse-drag to rotate.
`, 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;
+ }
`
diff --git a/src/3rd/js/extra/$connections.js b/src/3rd/js/extra/$connections.js
index 5b79895..3f1c1d7 100644
--- a/src/3rd/js/extra/$connections.js
+++ b/src/3rd/js/extra/$connections.js
@@ -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()
}
},{
diff --git a/src/3rd/js/extra/$menu.js b/src/3rd/js/extra/$menu.js
index e0ce460..849115e 100644
--- a/src/3rd/js/extra/$menu.js
+++ b/src/3rd/js/extra/$menu.js
@@ -12,7 +12,7 @@ menuComponent = {
`,
@@ -21,7 +21,7 @@ menuComponent = {
morelabel: '⚡',
collapsed: false,
logo: './../../assets/logo.png',
- buttons: [`🔗 share
`],
+ buttons: [`🔗 share
`],
$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+):/,"\$1
")
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;
+ 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;
}
diff --git a/src/3rd/js/extra/accessibility.js b/src/3rd/js/extra/accessibility.js
index a5851d0..fe7e747 100644
--- a/src/3rd/js/extra/accessibility.js
+++ b/src/3rd/js/extra/accessibility.js
@@ -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)
+ })
})
})
diff --git a/src/3rd/js/extra/network.js b/src/3rd/js/extra/network.js
index 7afba5e..46a2e91 100644
--- a/src/3rd/js/extra/network.js
+++ b/src/3rd/js/extra/network.js
@@ -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 = ([`🧑🤝🧑 connect
`])
+ $menu.buttons = ([`🧑🤝🧑 connect
`])
.concat($menu.buttons)
})
diff --git a/src/3rd/js/extra/network/matrix.js b/src/3rd/js/extra/network/matrix.js
index 9d08500..f631f19 100644
--- a/src/3rd/js/extra/network/matrix.js
+++ b/src/3rd/js/extra/network/matrix.js
@@ -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}.
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}.
You can basically make up a new channelname or use an existing one`)
})
return el
}
diff --git a/src/3rd/js/extra/network/trystero.js b/src/3rd/js/extra/network/trystero.js
index f5db5f5..ff5585b 100644
--- a/src/3rd/js/extra/network/trystero.js
+++ b/src/3rd/js/extra/network/trystero.js
@@ -14,7 +14,10 @@ window.trystero = (opts) => new Proxy({
html: {
generic: (opts) => `