work in progress [might break]

dist/xrfragment.aframe.js

@@ -853,29 +853,6 @@ xrf.add = (object) => {
   xrf.scene.add(object)
 }
 
-/* 
- * EVENTS 
- */
-
-xrf.addEventListener = function(eventName, callback) {
-    if( !this._listeners ) this._listeners = []
-    if (!this._listeners[eventName]) {
-        // create a new array for this event name if it doesn't exist yet
-        this._listeners[eventName] = [];
-    }
-    // add the callback to the listeners array for this event name
-    this._listeners[eventName].push(callback);
-};
-
-xrf.emit = function(eventName, data) {
-    if( !this._listeners ) this._listeners = []
-    var callbacks = this._listeners[eventName]
-    if (callbacks) {
-        for (var i = 0; i < callbacks.length; i++) {
-            callbacks[i](data);
-        }
-    }
-};
 xrf.navigator = {}
 
 xrf.navigator.to = (url,event) => {
@@ -920,6 +897,57 @@ xrf.navigator.pushState = (file,hash) => {
   if( file == document.location.search.substr(1) ) return // page is in its default state
   window.history.pushState({},`${file}#${hash}`, document.location.pathname + `?${file}#${hash}` )
 }
+/* 
+ * (promise-able) EVENTS
+ *
+ * example:
+ *
+ *  xrf.addEventListener('foo',(e) => {
+ *    // let promise = e.promise()   
+ *    console.log("navigating to: "+e.detail.destination.url)
+ *    // promise.resolve()
+ *    // promise.reject("not going to happen")
+ *  })
+ *
+ *  xrf.emit('foo',123)
+ *  xrf.emit('foo',123).then(...).catch(...).finally(...)
+ */
+
+xrf.addEventListener = function(eventName, callback) {
+    if( !this._listeners ) this._listeners = []
+    if (!this._listeners[eventName]) {
+        // create a new array for this event name if it doesn't exist yet
+        this._listeners[eventName] = [];
+    }
+    // add the callback to the listeners array for this event name
+    this._listeners[eventName].push(callback);
+};
+
+xrf.emit = function(eventName, data){
+  return xrf.emit.promise(eventName,data)
+}
+
+xrf.emit.normal = function(eventName, data) {
+    if( !xrf._listeners ) xrf._listeners = []
+    var callbacks = xrf._listeners[eventName]
+    if (callbacks) {
+        for (var i = 0; i < callbacks.length; i++) {
+            callbacks[i](data);
+        }
+    }
+};
+
+xrf.emit.promise = function(e, opts){ 
+  opts.XRF = xrf // always pass root XRF obj
+  return new Promise( (resolve, reject) => {
+    opts.promise = () => {
+      opts.promise.halted = true
+      return { resolve, reject }
+    }
+    xrf.emit.normal(e, opts)     
+    if( !opts.promise.halted ) resolve()
+  })
+}
 xrf.frag.env = function(v, opts){
   let { mesh, model, camera, scene, renderer, THREE} = opts
   let env = mesh.getObjectByName(v.string)
@@ -1051,27 +1079,9 @@ xrf.frag.href = function(v, opts){
   }
 
   let teleport = mesh.userData.XRF.href.exec = (e) => {
-    const meshWorldPosition = new THREE.Vector3();
+    xrf
-    meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
+    .emit('href',{click:true,mesh,xrf:v})     // let all listeners agree
-
+    .then( () => xrf.navigator.to(v.string) ) // ok let's surf to HREF!
-    let portalArea = 1 // 2 meter
-    const cameraDirection = new THREE.Vector3();
-    camera.getWorldPosition(cameraDirection);
-    cameraDirection.sub(meshWorldPosition);
-    cameraDirection.normalize();
-    cameraDirection.multiplyScalar(portalArea); // move away from portal
-    const newPos = meshWorldPosition.clone().add(cameraDirection);
-
-    const distance = camera.position.distanceTo(newPos);
-    //if( distance > portalArea ){
-    if( !renderer.xr.isPresenting ){
-      if( !confirm("teleport to "+v.string+" ?") ) return 
-    }
-    
-    xrf.navigator.to(v.string) // ok let's surf to HREF!
-    console.log("teleport!")
-    
-    xrf.emit('href',{click:true,mesh,xrf:v})
   }
 
   let selected = (state) => () => {
@@ -1082,8 +1092,9 @@ xrf.frag.href = function(v, opts){
     if( !renderer.domElement.lastCursor )
       renderer.domElement.lastCursor = renderer.domElement.style.cursor
     renderer.domElement.style.cursor = state ? 'pointer' : renderer.domElement.lastCursor 
-    xrf.emit('href',{selected:state,mesh,xrf:v})
+    xrf
-    mesh.selected = state
+    .emit('href',{selected:state,mesh,xrf:v}) // let all listeners agree
+    .then( () => mesh.selected = state )
   }
 
   if( !opts.frag.q ){ // query means an action

dist/xrfragment.three.js

@@ -853,29 +853,6 @@ xrf.add = (object) => {
   xrf.scene.add(object)
 }
 
-/* 
- * EVENTS 
- */
-
-xrf.addEventListener = function(eventName, callback) {
-    if( !this._listeners ) this._listeners = []
-    if (!this._listeners[eventName]) {
-        // create a new array for this event name if it doesn't exist yet
-        this._listeners[eventName] = [];
-    }
-    // add the callback to the listeners array for this event name
-    this._listeners[eventName].push(callback);
-};
-
-xrf.emit = function(eventName, data) {
-    if( !this._listeners ) this._listeners = []
-    var callbacks = this._listeners[eventName]
-    if (callbacks) {
-        for (var i = 0; i < callbacks.length; i++) {
-            callbacks[i](data);
-        }
-    }
-};
 xrf.navigator = {}
 
 xrf.navigator.to = (url,event) => {
@@ -920,6 +897,57 @@ xrf.navigator.pushState = (file,hash) => {
   if( file == document.location.search.substr(1) ) return // page is in its default state
   window.history.pushState({},`${file}#${hash}`, document.location.pathname + `?${file}#${hash}` )
 }
+/* 
+ * (promise-able) EVENTS
+ *
+ * example:
+ *
+ *  xrf.addEventListener('foo',(e) => {
+ *    // let promise = e.promise()   
+ *    console.log("navigating to: "+e.detail.destination.url)
+ *    // promise.resolve()
+ *    // promise.reject("not going to happen")
+ *  })
+ *
+ *  xrf.emit('foo',123)
+ *  xrf.emit('foo',123).then(...).catch(...).finally(...)
+ */
+
+xrf.addEventListener = function(eventName, callback) {
+    if( !this._listeners ) this._listeners = []
+    if (!this._listeners[eventName]) {
+        // create a new array for this event name if it doesn't exist yet
+        this._listeners[eventName] = [];
+    }
+    // add the callback to the listeners array for this event name
+    this._listeners[eventName].push(callback);
+};
+
+xrf.emit = function(eventName, data){
+  return xrf.emit.promise(eventName,data)
+}
+
+xrf.emit.normal = function(eventName, data) {
+    if( !xrf._listeners ) xrf._listeners = []
+    var callbacks = xrf._listeners[eventName]
+    if (callbacks) {
+        for (var i = 0; i < callbacks.length; i++) {
+            callbacks[i](data);
+        }
+    }
+};
+
+xrf.emit.promise = function(e, opts){ 
+  opts.XRF = xrf // always pass root XRF obj
+  return new Promise( (resolve, reject) => {
+    opts.promise = () => {
+      opts.promise.halted = true
+      return { resolve, reject }
+    }
+    xrf.emit.normal(e, opts)     
+    if( !opts.promise.halted ) resolve()
+  })
+}
 xrf.frag.env = function(v, opts){
   let { mesh, model, camera, scene, renderer, THREE} = opts
   let env = mesh.getObjectByName(v.string)
@@ -1051,27 +1079,9 @@ xrf.frag.href = function(v, opts){
   }
 
   let teleport = mesh.userData.XRF.href.exec = (e) => {
-    const meshWorldPosition = new THREE.Vector3();
+    xrf
-    meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
+    .emit('href',{click:true,mesh,xrf:v})     // let all listeners agree
-
+    .then( () => xrf.navigator.to(v.string) ) // ok let's surf to HREF!
-    let portalArea = 1 // 2 meter
-    const cameraDirection = new THREE.Vector3();
-    camera.getWorldPosition(cameraDirection);
-    cameraDirection.sub(meshWorldPosition);
-    cameraDirection.normalize();
-    cameraDirection.multiplyScalar(portalArea); // move away from portal
-    const newPos = meshWorldPosition.clone().add(cameraDirection);
-
-    const distance = camera.position.distanceTo(newPos);
-    //if( distance > portalArea ){
-    if( !renderer.xr.isPresenting ){
-      if( !confirm("teleport to "+v.string+" ?") ) return 
-    }
-    
-    xrf.navigator.to(v.string) // ok let's surf to HREF!
-    console.log("teleport!")
-    
-    xrf.emit('href',{click:true,mesh,xrf:v})
   }
 
   let selected = (state) => () => {
@@ -1082,8 +1092,9 @@ xrf.frag.href = function(v, opts){
     if( !renderer.domElement.lastCursor )
       renderer.domElement.lastCursor = renderer.domElement.style.cursor
     renderer.domElement.style.cursor = state ? 'pointer' : renderer.domElement.lastCursor 
-    xrf.emit('href',{selected:state,mesh,xrf:v})
+    xrf
-    mesh.selected = state
+    .emit('href',{selected:state,mesh,xrf:v}) // let all listeners agree
+    .then( () => mesh.selected = state )
   }
 
   if( !opts.frag.q ){ // query means an action

example/aframe/sandbox/index.html

@@ -52,26 +52,24 @@
 
       $('a-scene').addEventListener('loaded', () => {
 
+        let XRF = window.AFRAME.XRF
         setupConsole( $('textarea') )
-        setupUrlBar( $('input#uri'), window.AFRAME.XRF )
+        setupUrlBar( $('input#uri'), XRF )
 
-        // optional hook to prompt surfing to external asset 
+        // example listener, to prompt surfing to external asset 
-        window.AFRAME.XRF.href = (xrf,v,opts) => {
+        XRF.addEventListener('href',(e) => {
-          let { mesh, model, camera, scene, renderer, THREE} = opts
+          if( e.click ){
-alert("1")
+            const { mesh, model, camera, scene, renderer, THREE} = e.XRF
-            let isExtern  = v.string[0] != '#'
+            const url       = e.xrf.string
-            let notIsHome = v.string != $('#home').getAttribute("xrf") 
+            const isExtern  = url != '#'
-//          xrf(v,opts) // original init
+            const notIsHome = url != $('#home').getAttribute("xrf") 
-//          const exec = mesh.userData.XRF.href.exec 
+            const promise   = e.promise() // promisify event
-//console.dir(exec)
+            if( !renderer.xr.isPresenting && isExtern && notIsHome ){
-//          mesh.userData.XRF.href.exec = (e) => {
+              if( confirm("teleport to "+url+" ?") ) promise.resolve()
-//            if( !renderer.xr.isPresenting && isExtern && notIsHome ){
+              else promise.reject('teleport not ok')
-//              if( !confirm("teleport to "+v.string+" ?") ) return
-//            }
-//            exec(e)
-//          }
             }
-
+          }
+        })
 
         // add screenshot component with camera to capture bigger size equirects
         $('a-scene').setAttribute("screenshot",{camera: "[camera]",width: 4096*2, height:2048*2})

src/3rd/three/index.js

@@ -119,26 +119,3 @@ xrf.add = (object) => {
   xrf.scene.add(object)
 }
 
-/* 
- * EVENTS 
- */
-
-xrf.addEventListener = function(eventName, callback) {
-    if( !this._listeners ) this._listeners = []
-    if (!this._listeners[eventName]) {
-        // create a new array for this event name if it doesn't exist yet
-        this._listeners[eventName] = [];
-    }
-    // add the callback to the listeners array for this event name
-    this._listeners[eventName].push(callback);
-};
-
-xrf.emit = function(eventName, data) {
-    if( !this._listeners ) this._listeners = []
-    var callbacks = this._listeners[eventName]
-    if (callbacks) {
-        for (var i = 0; i < callbacks.length; i++) {
-            callbacks[i](data);
-        }
-    }
-};

src/3rd/three/pubsub.js

@@ -0,0 +1,51 @@
+/* 
+ * (promise-able) EVENTS
+ *
+ * example:
+ *
+ *  xrf.addEventListener('foo',(e) => {
+ *    // let promise = e.promise()   
+ *    console.log("navigating to: "+e.detail.destination.url)
+ *    // promise.resolve()
+ *    // promise.reject("not going to happen")
+ *  })
+ *
+ *  xrf.emit('foo',123)
+ *  xrf.emit('foo',123).then(...).catch(...).finally(...)
+ */
+
+xrf.addEventListener = function(eventName, callback) {
+    if( !this._listeners ) this._listeners = []
+    if (!this._listeners[eventName]) {
+        // create a new array for this event name if it doesn't exist yet
+        this._listeners[eventName] = [];
+    }
+    // add the callback to the listeners array for this event name
+    this._listeners[eventName].push(callback);
+};
+
+xrf.emit = function(eventName, data){
+  return xrf.emit.promise(eventName,data)
+}
+
+xrf.emit.normal = function(eventName, data) {
+    if( !xrf._listeners ) xrf._listeners = []
+    var callbacks = xrf._listeners[eventName]
+    if (callbacks) {
+        for (var i = 0; i < callbacks.length; i++) {
+            callbacks[i](data);
+        }
+    }
+};
+
+xrf.emit.promise = function(e, opts){ 
+  opts.XRF = xrf // always pass root XRF obj
+  return new Promise( (resolve, reject) => {
+    opts.promise = () => {
+      opts.promise.halted = true
+      return { resolve, reject }
+    }
+    xrf.emit.normal(e, opts)     
+    if( !opts.promise.halted ) resolve()
+  })
+}

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

@@ -94,27 +94,9 @@ xrf.frag.href = function(v, opts){
   }
 
   let teleport = mesh.userData.XRF.href.exec = (e) => {
-    const meshWorldPosition = new THREE.Vector3();
+    xrf
-    meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
+    .emit('href',{click:true,mesh,xrf:v})     // let all listeners agree
-
+    .then( () => xrf.navigator.to(v.string) ) // ok let's surf to HREF!
-    let portalArea = 1 // 2 meter
-    const cameraDirection = new THREE.Vector3();
-    camera.getWorldPosition(cameraDirection);
-    cameraDirection.sub(meshWorldPosition);
-    cameraDirection.normalize();
-    cameraDirection.multiplyScalar(portalArea); // move away from portal
-    const newPos = meshWorldPosition.clone().add(cameraDirection);
-
-    const distance = camera.position.distanceTo(newPos);
-    //if( distance > portalArea ){
-    if( !renderer.xr.isPresenting ){
-      if( !confirm("teleport to "+v.string+" ?") ) return 
-    }
-    
-    xrf.navigator.to(v.string) // ok let's surf to HREF!
-    console.log("teleport!")
-    
-    xrf.emit('href',{click:true,mesh,xrf:v})
   }
 
   let selected = (state) => () => {
@@ -125,8 +107,9 @@ xrf.frag.href = function(v, opts){
     if( !renderer.domElement.lastCursor )
       renderer.domElement.lastCursor = renderer.domElement.style.cursor
     renderer.domElement.style.cursor = state ? 'pointer' : renderer.domElement.lastCursor 
-    xrf.emit('href',{selected:state,mesh,xrf:v})
+    xrf
-    mesh.selected = state
+    .emit('href',{selected:state,mesh,xrf:v}) // let all listeners agree
+    .then( () => mesh.selected = state )
   }
 
   if( !opts.frag.q ){ // query means an action