removed alpine (using Proxy now)

Author: coderofsalvation

example/aframe/sandbox/index.html

@@ -29,12 +29,13 @@
     </a-scene>
 
     <script>
-      // the xrf-menu is totally optional but can be handy
+      // the xrfmenu is totally optional but can be handy
       // to quickly add your logo & buttons etc
       XRFMENU.logo      = './../../assets/logo.png'
       XRFMENU.morelabel = '⚡'
       // add your menubuttons:
-      XRFMENU.buttons.push(`<a class="btn" aria-label="button" aria-description="about menu" onclick="XRFMENU.showAbout()">💁 about</a><br>`)
+      XRFMENU.buttons = XRFMENU.buttons.concat([`<a class="btn" aria-label="button" aria-description="about menu" onclick="XRFMENU.showAbout()">💁 about</a><br>`])
+      XRFMENU.collapsed = false
       XRFMENU.showAbout = () => window.notify(`
           <h1>💁 Hi there!</h1>
 

make

@@ -86,8 +86,7 @@ build(){
         example/assets/js/qr.js  > dist/xrfragment.aframe.js
 
     # html extras like menu & meetings
-    test -f dist/alpine.min.js || wget "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" -O dist/alpine.min.js
-    cat dist/alpine.min.js src/3rd/js/extra/*.js  > dist/xrfragment.extras.js 
+    cat src/3rd/js/extra/*.js  > dist/xrfragment.extras.js 
 
     # fat all-in-one standalone xrf release
     test -f /tmp/xrf-aframe.js || {

shell.nix

@@ -8,6 +8,11 @@
       haxe
       mmark
       xml2rfc
+      dendrite
 
     ];
+
+    shellHooks = ''
+      bash
+    '';
 }

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

@@ -1,7 +1,67 @@
+MEETING = {
+
+  html: `
+     <div id="videos" style="pointer-events:none"></div>
+     <div id="chat" aria-live="assertive" aria-relevant></div>
+     <div id="chatfooter">
+       <div id="chatbar">
+           <input id="chatline" type="text" placeholder=""></input>
+       </div>
+       <button id="showchat" class="btn">show chat</button>
+     </div>
+    </div>
+  `,
+
+  init: (el) => new Proxy({
+
+    scene: null,
+    enabled:  false,
+    active:   false,
+    //$overlay: $overlay = el.querySelector('#overlay'),
+    //
+    install(opts){
+      this.scene = opts.scene 
+      window.meeting.buttons.push(`<a class="btn" aria-label="button" aria-description="start text/audio/video chat" id="meeting" onclick="MEETING.toggle()" target="_blank">🧑‍🤝‍🧑 meeting</a><br>`)
+      document.body.appendChild( el )
+
+    },
+
+    start(){
+      this.scene.addEventListener('meeting.peer.add',    () => console.log("$meeting.peer.add") )
+      this.scene.addEventListener('meeting.peer.remove', () => console.log("$meeting.peer.remove") )
+    },
+
+    toggle:   () => MEETING.collapsed = !MEETING.collapsed,
+    install:  (opts) => {
+      document.body.appendChild(el)
+      document.dispatchEvent( new CustomEvent("MEETING:ready", {detail: opts}) )
+    }
+
+  },{
+
+    get(data,k,v){ return data[k] },
+    set(data,k,v){ 
+      data[k] = v    
+      switch( k ){
+        case "css":        document.head.innerHTML += v;                  break;
+      }
+    },
+
+  })
+}
+
+// reactify component!
+document.addEventListener('XRFMENU:ready', (opts) => {
+  opts = opts.detail
+  $meeting = document.createElement('div')
+  $meeting.innerHTML = MEETING.html
+  MEETING = MEETING.init($meeting)
+  MEETING.install(opts)
+})
+
 // alpine component for displaying meetings
 
-$XRFMEETING = $el(
-  `<div x-show="enabled" id="meeting" x-data="XRFMEETING">
+MEETING.css = `
     <style type="text/css">
      #videos{
        display:grid-auto-columns;
@@ -112,48 +172,4 @@ $XRFMEETING = $el(
        font-family:monospace;
        font-size:15px;
      }
-   </style>
-   <div id="videos" style="pointer-events:none"></div>
-   <div id="chat" aria-live="assertive" aria-relevant></div>
-   <div id="chatfooter">
-     <div id="chatbar">
-         <input id="chatline" type="text" placeholder=""></input>
-     </div>
-     <button id="showchat" class="btn">show chat</button>
-   </div>
-  </div>`
-)
-
-window.XRFMEETING = {
-
-  scene: null,
-  enabled:  false,
-  active:   false,
-  init(){   
-    window.XRFMEETING = this.$data // replace so we can modify state in global scope
-    window.meeting
-  },
-  toggle(){ 
-    this.enabled = !this.enabled 
-    if( !this.active ) this.start() 
-  },
-
-  install(opts){
-    this.scene = opts.scene 
-    window.XRFMENU.buttons.push(`<a class="btn" aria-label="button" aria-description="start text/audio/video chat" id="meeting" onclick="XRFMEETING.toggle()" target="_blank">🧑‍🤝‍🧑 meeting</a><br>`)
-    document.body.appendChild( $XRFMEETING )
-
-  },
-
-  start(){
-    this.scene.addEventListener('meeting.peer.add',    () => console.log("$meeting.peer.add") )
-    this.scene.addEventListener('meeting.peer.remove', () => console.log("$meeting.peer.remove") )
-  }
-}
-
-// finally we alpinify
-document.addEventListener('XRFMENU:ready', (opts) => {
-  opts = opts.detail
-  Alpine.data('XRFMEETING', () => window.XRFMEETING)
-  XRFMEETING.install(opts)
-})
+   </style>`