href buttons with nonhttp protocol in scene, now trigger connection popup

Author: coderofsalvation

src/3rd/js/aframe/index.js

@@ -61,6 +61,7 @@ window.AFRAME.registerComponent('xrf', {
             let url     = opts.xrf.string
             let isLocal = url.match(/^#/)
             let hasPos  = url.match(/pos=/)
+            if( !isLocal && !url.match(/^http/) ) return // dont fade/load for custom protocol handlers
             if( isLocal && hasPos ){
               // local teleports only
               let fastFadeMs = 200

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

@@ -50,6 +50,7 @@ chatComponent = {
 
     send(opts){
       opts = { linebreak:true, message:"", class:[], ...opts }
+      let div = document.createElement('div')
       let msg = document.createElement('div')
       let br  = document.createElement('br')
       msg.className = "msg"
@@ -62,8 +63,9 @@ chatComponent = {
         msg.classList.add.apply(msg.classList, opts.class)
         br.classList.add.apply(br.classList, opts.class)
       }
-      $messages.appendChild(msg)
-      if( opts.linebreak ) $messages.appendChild(br)
+      div.appendChild(msg)
+      $messages.appendChild(div)
+      if( opts.linebreak ) div.appendChild(br)
       $messages.scrollTop = $messages.scrollHeight // scroll down
       document.dispatchEvent( new CustomEvent("$chat:receive", {detail: opts}) )
       $messages.last = msg.innerHTML
@@ -161,6 +163,7 @@ chatComponent.css = `
        box-sizing:border-box;
        height: 24px;
        font-size: var(--xrf-font-size-2);
+       max-width:unset;
      }
      #messages{
        position: absolute;

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

@@ -2,10 +2,10 @@ connectionsComponent = {
 
   html: `
    <div id="connections">
-      <h2>Network channels:</h2>
+      <h2>Connection layers:</h2>
       <table>
         <tr>
-          <td>Webcam</td>
+          <td>Webcam/Audio</td>
           <td>
             <select id="webcam"></select>
           </td>
@@ -59,7 +59,7 @@ connectionsComponent = {
     show(){
       $chat.visible = true
       if( !network.connected ){
-          if( el.parentElement ) el.parentElement.remove()
+          if( el.parentElement ) el.parentElement.parentElement.remove()
           $chat.send({message:"", el})
           this.renderSettings()
           if( !network.meetinglink ){ // set default
@@ -115,9 +115,13 @@ connectionsComponent = {
     set(data,k,v){ 
       data[k] = v 
       switch( k ){
-        case "webcam":      $webcam.innerHTML       = `<option>${data[k].map((p)=>p.plugin.name).join('</option><option>')}</option>`; break;
-        case "chatnetwork": $chatnetwork.innerHTML  = `<option>${data[k].map((p)=>p.plugin.name).join('</option><option>')}</option>`; break;
-        case "scene":       $scene.innerHTML        = `<option>${data[k].map((p)=>p.plugin.name).join('</option><option>')}</option>`; break;
+        case "webcam":              $webcam.innerHTML       = `<option>${data[k].map((p)=>p.plugin.name).join('</option><option>')}</option>`; break;
+        case "chatnetwork":         $chatnetwork.innerHTML  = `<option>${data[k].map((p)=>p.plugin.name).join('</option><option>')}</option>`; break;
+        case "scene":               $scene.innerHTML        = `<option>${data[k].map((p)=>p.plugin.name).join('</option><option>')}</option>`; break;
+        case "selectedScene":       $scene.value       = v; data.renderSettings(); break;
+        case "selectedWebcam":      $webcam.value      = v; data.renderSettings(); break;
+        case "selectedChatnetwork": $chatnetwork.value = v; data.renderSettings(); break;
+
       } 
     }
 

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

@@ -855,7 +855,7 @@ $menu.css = `
       text-align:right;
     }
     .xrf table tr td:nth-child(1){
-      min-width:115px;
+      min-width:70px;
       height:40px;
       padding-right:15px;
     }

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

@@ -37,9 +37,9 @@ window.matrix = (opts) => new Proxy({
             </td>
           </tr>
           <tr>
-            <td>authenticate</td> 
+            <td>auth</td> 
             <td>
-              <select>
+              <select id="auth">
                 <option>via password</option>
                 <option>via access token</option>
               </select> 
@@ -48,7 +48,7 @@ window.matrix = (opts) => new Proxy({
           <tr>
             <td></td> 
             <td>
-              <input type="text" id="secret" placeholder="password or token"/>
+              <input type="text" id="secret" placeholder="enter password"/>
             </td>
           </tr>
         </table>
@@ -79,6 +79,9 @@ window.matrix = (opts) => new Proxy({
       if( this.html[i] ) html += this.html[i](opts)
     }
     this.el.innerHTML = html
+    this.el.querySelector('#auth').addEventListener('change', (e) => {
+      this.el.querySelector('#secret').setAttribute('placeholder', `enter ${e.target.value.replace(/.* /,'')}`)
+    })
     window.notify(`${opts.name} is ${opts.description}, it is the hottest internet technology available at this moment.<br>Read more about it <a href="${opts.url}" target="_blank">here</a>.<br>You can basically make up a new channelname or use an existing one`)
     return this.el
   },
@@ -90,11 +93,11 @@ window.matrix = (opts) => new Proxy({
       if( mesh.userData.href.match(this.protocol) ){
         let parts = mesh.userData.href.replace(this.plugin.protocol,'')
         if( parts[0] == 'r' ){ // room
-          $connections.$chatnetwork.value = this.plugin.name
-          $connections.$scene.value       = this.plugin.name
-          $connections.show()
           let server  = parts.split("/")[1].replace(/:.*/,'') 
           let channel = parts.split("/")[1].replace(/.*:/,'')
+          $connections.show()
+          $connections.selectedChatnetwork        = this.plugin.name
+          $connections.selectedScene              = this.plugin.name
           this.el.querySelector('#channel').value = `#${channel}:${server}`
           this.el.querySelector('#server').value  = server 
           console.log("configured matrix")

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

@@ -82,9 +82,9 @@ window.trystero = (opts) => new Proxy({
           this.server = parts.split("/")[1].replace(/.*:/,'')
           if( this.server != 'bittorrent' ) window.notify("only bittorrent is supported for trystero (for now) :/") 
           $connections.show()
-          $connections.$webcam.value      = this.plugin.name
-          $connections.$chatnetwork.value = this.plugin.name
-          $connections.$scene.value       = this.plugin.name
+          $connections.selectedWebcam     = this.plugin.name
+          $connections.selectedChatnetwork= this.plugin.name
+          $connections.selectedScene      = this.plugin.name
           console.log("configured trystero")
         }
       }else window.notify("malformed connection URI: "+mesh.userData.href)

src/3rd/js/three/xrf/href.js

@@ -48,6 +48,8 @@ xrf.frag.href = function(v, opts){
       //}
       const flags = v.string[0] == '#' ? xrf.XRF.PV_OVERRIDE : undefined
       let toFrag = xrf.URI.parse( v.string, xrf.XRF.NAVIGATOR | xrf.XRF.PV_OVERRIDE | xrf.XRF.METADATA )
+      // *TODO* support for multiple protocols
+      if( !v.string.match(/^http/) ) return
       // always commit current location (keep a trail of last positions before we navigate)
       if( !e.nocommit && !document.location.hash.match(lastPos) ) xrf.navigator.to(`#${lastPos}`)
       xrf.navigator.to(v.string)    // let's surf to HREF!