work in progress [might break]

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([`<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>

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 <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>`

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()
     }
 
   },{

src/3rd/js/extra/$menu.js

@@ -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:95px;
-      min-width:80px;
+      padding-right:15px;
     }
 
 

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)
+        })
       })
     })
 

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 = ([`<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)
 })

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', () => {
+    el.querySelector('.badge').addEventListener('mouseover', () => {
-      window.notify(`${opts.name} is ${opts.description}.<br>You can basically make up your own channelname or use an existing one`)
+      window.notify(`${opts.name} is ${opts.description}.<br>You can basically make up a new channelname or use an existing one`)
     })
     return el
   }

src/3rd/js/extra/network/trystero.js

@@ -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