coderofsalvation/xrfragment
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Leon van Kammen 2023-12-28 09:22:54 +00:00
parent 21ef1ded86
commit 88b11775e2
7 changed files with 31 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/3rd/js/aframe/index.js
View file

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

7
src/3rd/js/extra/$chat.js
View file

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

10
src/3rd/js/extra/$connections.js
View file

@ -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
@ -118,6 +118,10 @@ connectionsComponent = {
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;
}
}

2
src/3rd/js/extra/$menu.js
View file

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

15
src/3rd/js/extra/network/matrix.js
View file

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

6
src/3rd/js/extra/network/trystero.js
View file

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

2
src/3rd/js/three/xrf/href.js
View file

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