From 88b11775e2f7b20365d072d5ffe186f9f7aa7a72 Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Thu, 28 Dec 2023 09:22:54 +0000 Subject: [PATCH] href buttons with nonhttp protocol in scene, now trigger connection popup --- src/3rd/js/aframe/index.js | 1 + src/3rd/js/extra/$chat.js | 7 +++++-- src/3rd/js/extra/$connections.js | 16 ++++++++++------ src/3rd/js/extra/$menu.js | 2 +- src/3rd/js/extra/network/matrix.js | 15 +++++++++------ src/3rd/js/extra/network/trystero.js | 6 +++--- src/3rd/js/three/xrf/href.js | 2 ++ 7 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/3rd/js/aframe/index.js b/src/3rd/js/aframe/index.js index 06fadac..68ffdcf 100644 --- a/src/3rd/js/aframe/index.js +++ b/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 diff --git a/src/3rd/js/extra/$chat.js b/src/3rd/js/extra/$chat.js index 0acd141..2aa8b3f 100644 --- a/src/3rd/js/extra/$chat.js +++ b/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; diff --git a/src/3rd/js/extra/$connections.js b/src/3rd/js/extra/$connections.js index 0e00b77..504b22f 100644 --- a/src/3rd/js/extra/$connections.js +++ b/src/3rd/js/extra/$connections.js @@ -2,10 +2,10 @@ connectionsComponent = { html: `
-

Network channels:

+

Connection layers:

- + @@ -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 = ``; break; - case "chatnetwork": $chatnetwork.innerHTML = ``; break; - case "scene": $scene.innerHTML = ``; break; + case "webcam": $webcam.innerHTML = ``; break; + case "chatnetwork": $chatnetwork.innerHTML = ``; break; + case "scene": $scene.innerHTML = ``; 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; + } } diff --git a/src/3rd/js/extra/$menu.js b/src/3rd/js/extra/$menu.js index 477e543..e250748 100644 --- a/src/3rd/js/extra/$menu.js +++ b/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; } diff --git a/src/3rd/js/extra/network/matrix.js b/src/3rd/js/extra/network/matrix.js index de56bde..688e30f 100644 --- a/src/3rd/js/extra/network/matrix.js +++ b/src/3rd/js/extra/network/matrix.js @@ -37,9 +37,9 @@ window.matrix = (opts) => new Proxy({ - +
WebcamWebcam/Audio
authenticateauth - @@ -48,7 +48,7 @@ window.matrix = (opts) => new Proxy({
- +
@@ -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.
Read more about it here.
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") diff --git a/src/3rd/js/extra/network/trystero.js b/src/3rd/js/extra/network/trystero.js index 7095e7f..aa8923b 100644 --- a/src/3rd/js/extra/network/trystero.js +++ b/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) diff --git a/src/3rd/js/three/xrf/href.js b/src/3rd/js/three/xrf/href.js index ed0650b..ee3084f 100644 --- a/src/3rd/js/three/xrf/href.js +++ b/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!