xrfragment/src/3rd/js/menu.js

$XRFMENU = $el(
  `<div id="menu" x-bind="XRFMENU">
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" type="text/javascript"></script>
    <style type="text/css">
      :root {
          --xrf-primary: #6839dc;
          --xrf-primary-fg: #FFF;
          --xrf-light-primary: #ea23cf;
          --xrf-secondary: #872eff;
          --xrf-light-xrf-secondary: #ce7df2;
          --xrf-overlay-bg: #fffb;
          --xrf-box-shadow: #0005;
          --xrf-red: red;
          --xrf-black: #424280;
          --xrf-white: #fdfdfd;
          --xrf-dark-gray: #343334;
          --xrf-gray: #ecf7ff47;
          --xrf-light-gray: #efefef;
          --xrf-lighter-gray: #e4e2fb96;
          --xrf-font-sans-serif: system-ui, -apple-system, segoe ui, roboto, ubuntu, helvetica, cantarell, noto sans, sans-serif;
          --xrf-font-monospace: menlo, monaco, lucida console, liberation mono, dejavu sans mono, bitstream vera sans mono, courier new, monospace, serif;
          --xrf-font-size-1: 14px;
          --xrf-font-size-2: 17px;
          --xrf-font-size-3: 21px;
      }

      .xrf table tr td{
        vertical-align:top;
      }
      .xrf table tr td:nth-child(1){
        padding-right:35px;
      }

      .xrf button,
      .xrf input[type="submit"],
      .xrf .btn {
        text-decoration:none;
        background: var(--xrf-primary);
        border: 0;
        border-radius: 25px;
        padding: 11px 15px;
        font-weight: bold;  
        transition: 0.3s;
        height: 32px;
        font-size: var(--xrf-font-size-1);
        color: var(--xrf-primary-fg);
        line-height: var(--xrf-font-size-1);
        cursor:pointer;
        white-space:pre;
        min-width: 45px;
        box-shadow: 0px 0px 10px var(--xrf-box-shadow);
      }

      .xrf button:hover,
      .xrf input[type="submit"]:hover,
      .xrf .btn:hover {
        background: var(--xrf-secondary);
      }

      .xrf, .xrf *{
        font-family: var(--xrf-font-sans-serif);
        font-size: var(--xrf-font-size-1);
        line-height:27px;
      }

      textarea, select, input[type="text"] {
        background: transparent; /* linear-gradient( var(--xrf-lighter-gray), var(--xrf-gray) ) !important; */
      }

      input[type="submit"] {
        color: var(--xrf-light-gray);
      }

      input[type=text]{
        padding:7px 15px;
      }
      input{
        border-radius:7px;
        margin:5px 0px;
      }

      .title {
        border-bottom: 2px solid var(--xrf-secondary);
        padding-bottom: 20px;
      }

      #overlay{
        background: var(--xrf-overlay-bg);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 48px;
        box-shadow: 0px 0px 10px var(--xrf-box-shadow);
        opacity: 0.9;
        z-index:2000;
      }

      #overlay .logo{
        width: 92px;
        position: absolute;
        top: 9px;
        left: 93px;
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
      }

      #overlay > input[type="submit"] {
        height: 32px;
        position: absolute;
        right: 20px;
        top: 2px;
      }

      #overlay > button#navback,
      #overlay > button#navforward {
        height: 32px;
        font-size: var(--xrf-font-size-1);
        position: absolute;
        left: 9px;
        padding: 2px 13px;
        border-radius:6px;
        top: 8px;
        color: var(--xrf-light-gray);
        width: 36px;
        min-width: unset;
      }
      #overlay > button#navforward {
        left:49px;
      }

      #overlay > #uri {
          height: 18px;
          font-size: var(--xrf-font-size-3);
          position: absolute;
          left: 200px;
          top: 9px;
          max-width: 550px;
          padding: 5px 0px 5px 5px;
          width: calc( 63% - 200px);
          background: #f0f0f0;
          border-color: #Ccc;
          border: 2px solid #CCC;
          border-radius: 7px;
          color: #555;
      }



      .menu .btn{
        background: var(--xrf-primary);
        border-radius: 25px;
        border: 0;
        padding: 5px 19px;
        font-weight: 1000;
        font-family: sans-serif;
        font-size: var(--xrf-font-size-2);
        color:var(--xrf-primary-fg);
        height:33px;
        z-index:2000;
        cursor:pointer;
        min-width:107px;
        text-decoration:none;
        display:none;
        margin-top: 15px;
        line-height:36px;
        margin-right:10px;
        text-align:left;
      }

      .xrf a.btn#more{
        width: 19px;
        min-width: 19px;
        font-size:16px;
        text-align: center;
        background:white;
      }

      html{
        max-width:unset;
      }

      .render {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
      }

      .lil-gui.autoPlace{
        right:0px !important;
        top:48px !important;
        height:33vh;
      }

      #VRButton {
        margin-bottom:20vh;
      }

      @media (max-width: 450px) {
        #uri{ display:none; }
      }

      @media (max-width: 640px) {
        .lil-gui.root{
          top:auto !important;
          left:auto !important;
        }
        .js-snackbar__message{
          overflow-y:auto;
          max-height:600px;
        }
        .js-snackbar__message h1,h2,h3{
          font-size:22px;
        }
        .xrf table tr td {
      
        }
        :root{
          --xrf-font-size-1: 13px;
          --xrf-font-size-2: 17px;
          --xrf-font-size-3: 20px;
        }
      }


      /* notifications */

      .js-snackbar-container .btn,
      .js-snackbar-container input[type=submit],
      .js-snackbar-container button{
        margin-bottom:15px;
      }
      .js-snackbar-container {
          position: absolute;
          top: 10px;
          left: 0px;
          display: flex;
          align-items: center;
        width:100%;
          max-width: 100%;
          padding: 10px;
          z-index:1001;
        justify-content: center;
          overflow: hidden;
      }

      .js-snackbar-container * {
          box-sizing: border-box;
      }

      .js-snackbar__wrapper {
        --color-c: #555;
        --color-a: #FFF;
      }


      .js-snackbar__wrapper {
          overflow: hidden;
          height: auto;
          margin: 5px 0;
          transition: all ease .5s;
          border-radius: 3px;
          box-shadow: 0 0 4px 0 var(--xrf-box-shadow);
          right: 20px;
          position: fixed;
          top: 55px;
      }

      .js-snackbar {
          display: inline-flex;
          box-sizing: border-box;
          border-radius: 3px;
          color: var(--color-c);
          background-color: var(--color-a);
          vertical-align: bottom;
      }

      .js-snackbar__close,
      .js-snackbar__status,
      .js-snackbar__message {
          position: relative;
      }

      .js-snackbar__message {
        margin: 12px;
      }

      .js-snackbar__status {
          display: none;
          width: 15px;
          margin-right: 5px;
          border-radius: 3px 0 0 3px;
          background-color: transparent;
      }

       .js-snackbar__status.js-snackbar--success,
       .js-snackbar__status.js-snackbar--warning,
       .js-snackbar__status.js-snackbar--danger,
       .js-snackbar__status.js-snackbar--info {
          display: block;
      }

      .js-snackbar__status.js-snackbar--success  {
          background-color: #4caf50;
      }

      .js-snackbar__status.js-snackbar--warning  {
          background-color: #ff9800;
      }

       .js-snackbar__status.js-snackbar--danger {
          background-color: #ff6060;
      }

      .js-snackbar__status.js-snackbar--info {
          background-color: #CCC;
      }

      .js-snackbar__close {
          cursor: pointer;
          display: flex;
          align-items: center;
          padding: 0 10px;
          user-select: none;
      }

      .js-snackbar__close:hover {
          background-color: #4443;
      }

      .a-enter-vr-button, .a-enter-ar-button{
        height:41px;
      }

      #qrcode{
        background: transparent;
        overflow: hidden;
        height: 121px;
        display: inline-block;
        position: relative;
      }

      input#share{
        font-size: var(--xrf-font-size-1);
        font-family: var(--xrf-font-monospace);
        border:2px solid #AAA;
        width:50vw;
        max-width:400px;
      }

      .footer {
        display: flex;
        flex-direction: column-reverse; /* This reverses the stacking order of the flex container */
        align-items: flex-end;
        height: 100%;
        position: fixed;
        top: 71px;
        right: 11px;
        bottom: 0;
        padding-bottom:149px;
        box-sizing:border-box;
      }
      .footer .menu{
        text-align:right;
      }

    </style>
    <div id="overlay" class="xrf" style="display:none">
      <div class="logo" :style="'background-image: url('+$store.XRFMENU.logo+')'"></div>
      <button id="navback"  onclick="history.back()">&lt;</button>
      <button id="navforward" onclick="history.forward()">&gt;</button>
      <input type="submit" value="load 3D file"></input>
      <input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )" style="display:none"/> 
    </div>
    <div class="xrf footer">
      <div id="buttons" class="menu">
        <a class="btn" id="more" style="display:inline-block" x-text="$store.XRFMENU.morelabel"></a>
      </div>
    </div>
  </div>`
)
      //${window.XRFMENU.html.map( (html) => typeof html == "function" ? html() : html ).join('\n')}

window.XRFMENU = {

  $:   $XRFMENU,

  morelabel:  '⚡',
  enabled:    false,
  logo:       './../../assets/logo.png',
  buttons:    [ 
     `<a class="btn" aria-label="button" aria-description="start text/audio/video chat" id="meeting" target="_blank">🧑‍🤝‍🧑 meeting</a><br>`,
     `<a class="btn" aria-label="button" aria-description="share URL/screenshot/embed" id="share" target="_blank" onclick="window.share()">🔗 share</a><br>`
  ],

  init: () => {

    // bind object as alpine app 
    document.body.appendChild( XRFMENU.$ )
    document.addEventListener('alpine:init', () => Alpine.bind('XRFMENU', () => XRFMENU ) )

    //if( XRFMENU.logo ) $('.logo').style['background-image'] = `url(${XRFMENU.logo})`
    window.notify   = XRFMENU.notify(window)
    window.share    = XRFMENU.share
    window.download = XRFMENU.download
    window.notify('loading '+document.location.search.substr(1))
    // reroute console messages to snackbar notifications
    console.log = ( (log) => function(str){
      if( String(str).match(/(:.*#|note:)/) ) window.notify(str)
      log(str)
    })(console.log)
    // allow iframe to open url
    window.addEventListener('message', (event) => {
      if (event.data && event.data.url) {
        window.open(event.data.url, '_blank');
      }
    });
  },
      
  loadFile(contentLoaders, multiple){
    return () => {
      window.notify("if you're on Meta browser, file-uploads might be disabled")
      let input = document.createElement('input');
      input.type = 'file';
      input.multiple = multiple;
      input.accept = Object.keys(contentLoaders).join(",");
      input.onchange = () => {
          let files = Array.from(input.files);
          let file = files.slice ? files[0] : files 
          for( var i in contentLoaders ){
            let r = new RegExp('\\'+i+'$')
            if( file.name.match(r) ) return contentLoaders[i](file)
          }
          alert(file.name+" is not supported")
      };
      input.click();
    }
  },

  setupMenu(XRF){
    let aScene   = document.querySelector('a-scene')
    let urlbar   = $('input#uri')
    let inIframe = window.location !== window.parent.location
    let els      = [ ...document.querySelectorAll('.menu .btn') ]
    els          = els.filter( (el) => el.id != "more" ? el : false )

    let showMenu = (state) => {
      els.map( (el) => el.style.display = state ? 'inline-block' : 'none' )
      $('a#more').style.display         = state ? 'none'         : 'inline-block'
      $('#overlay').style.display       = state ? 'inline-block' : 'none'
      if( inIframe ) $('#uri').style.display = 'block'
    }

    els.map( (el) => el.addEventListener('click', () => showMenu(false) ) )
    $('a#more').addEventListener('click',    () => showMenu(true) )
    $('.a-canvas').addEventListener('click',    () => showMenu(false) )

    // enable meetings
    let startMeeting = () => {
      aScene.setAttribute('meeting', 'id: xrfragments') 
      $('a#meeting').innerText = '🧑‍🤝‍🧑 breakout meeting'
      $('a#meeting').setAttribute('aria-description','breakout room')
    }
    $('a#meeting').addEventListener('click', () => {
      if( aScene.getAttribute('meeting') ){ // meeting already, start breakout room
        let parentRoom = document.location.href
        XRFMENU.updateHashPosition(true) 
        let meeting = $('[meeting]').components['meeting']
        meeting.data.parentRoom = parentRoom
        meeting.update()
      }else startMeeting()
    })
    if( document.location.hash.match(/(#|&)meet/) ) startMeeting()

    XRF.addEventListener('hash', () => reflectUrl() )
    const reflectUrl = window.reflectUrl = (url) => {
      urlbar.value = url || document.location.search.substr(1) + document.location.hash
    }
    reflectUrl()
  },

  SnackBar(userOptions) {
      var snackbar = this || (window.snackbar = {});
      var _Interval;
      var _Message;
      var _Element;
      var _Container;
      
      var _OptionDefaults = {
          message: "Operation performed successfully.",
          dismissible: true,
          timeout: 7000,
          status: ""
      }
      var _Options = _OptionDefaults;

      function _Create() {
          _Container = document.querySelector(".js-snackbar-container") 
          if( _Container ){
            _Container.remove()
          }
          _Container = null

          if (!_Container) {
              // need to create a new container for notifications
              _Container = document.createElement("div");
              _Container.classList.add("js-snackbar-container");

              document.body.appendChild(_Container);
          }
          _Container.opts = _Options
          _Container.innerHTML = ''
          _Element = document.createElement("div");
          _Element.classList.add("js-snackbar__wrapper","xrf");

          let innerSnack = document.createElement("div");
          innerSnack.classList.add("js-snackbar", "js-snackbar--show");
      
          if (_Options.status) {
              _Options.status = _Options.status.toLowerCase().trim();

              let status = document.createElement("span");
              status.classList.add("js-snackbar__status");


              if (_Options.status === "success" || _Options.status === "green") {
                  status.classList.add("js-snackbar--success");
              }
              else if (_Options.status === "warning" || _Options.status === "alert" || _Options.status === "orange") {
                  status.classList.add("js-snackbar--warning");
              }
              else if (_Options.status === "danger" || _Options.status === "error" || _Options.status === "red") {
                  status.classList.add("js-snackbar--danger");
              }
              else {
                  status.classList.add("js-snackbar--info");
              }

              innerSnack.appendChild(status);
          }
          
          _Message = document.createElement("span");
          _Message.classList.add("js-snackbar__message");
          if( typeof _Options.message == 'string' ){
            _Message.innerHTML = _Options.message;
          }else _Message.appendChild(_Options.message)

          innerSnack.appendChild(_Message);

          if (_Options.dismissible) {
              let closeBtn = document.createElement("span");
              closeBtn.classList.add("js-snackbar__close");
              closeBtn.innerText = "\u00D7";

              closeBtn.onclick = snackbar.Close;

              innerSnack.appendChild(closeBtn);
          }

          _Element.style.height = "0px";
          _Element.style.opacity = "0";
          _Element.style.marginTop = "0px";
          _Element.style.marginBottom = "0px";

          _Element.appendChild(innerSnack);
          _Container.appendChild(_Element);

          if (_Options.timeout !== false) {
              _Interval = setTimeout(snackbar.Close, _Options.timeout);
          }
      }

      snackbar.Open = function() {
          let contentHeight = _Element.firstElementChild.scrollHeight; // get the height of the content

          _Element.style.height = contentHeight + "px";
          _Element.style.opacity = 1;
          _Element.style.marginTop = "5px";
          _Element.style.marginBottom = "5px";

          _Element.addEventListener("transitioned", function() {
              _Element.removeEventListener("transitioned", arguments.callee);
              _Element.style.height = null;
          })
      }

      snackbar.Close = function () {
          if (_Interval)
              clearInterval(_Interval);

          let snackbarHeight = _Element.scrollHeight; // get the auto height as a px value
          let snackbarTransitions = _Element.style.transition;
          _Element.style.transition = "";

          requestAnimationFrame(function() {
              _Element.style.height = snackbarHeight + "px"; // set the auto height to the px height
              _Element.style.opacity = 1;
              _Element.style.marginTop = "0px";
              _Element.style.marginBottom = "0px";
              _Element.style.transition = snackbarTransitions

              requestAnimationFrame(function() {
                  _Element.style.height = "0px";
                  _Element.style.opacity = 0;
              })
          });

          setTimeout(function() {
              try { 
                _Container.removeChild(_Element); 
              } catch (e) { }
          }, 1000);
      };

      _Options = { ..._OptionDefaults, ...userOptions }
      _Create();
      snackbar.Open();
  },

  notify(scope){
    return function notify(str,opts){
      opts = opts || {status:'info'}        
      opts = Object.assign({ status, timeout:4000 },opts)
      if( typeof str == 'string' ){
        if( !opts.status ){      
          if( str.match(/error/g)   ) opts.status = "danger"
          if( str.match(/warning/g) ) opts.status = "warning"
        }
      }
      opts.message = str
      window.XRFMENU.SnackBar( opts )
    }
  },

  download(){
    function fetchAndDownload(dataurl, filename) {
      var a = document.createElement("a");
      a.href = dataurl;
      a.setAttribute("download", filename);
      a.click();
      return false;
    }
    let file = document.location.search.replace(/\?/,'')
    fetchAndDownload( file, file )
  },

  updateHashPosition(randomize){
    // *TODO* this should be part of the XRF Threejs framework
    if( typeof THREE == 'undefined' ) THREE = xrf.THREE 
    let radToDeg  = THREE.MathUtils.radToDeg
    let toDeg     = (x) => x / (Math.PI / 180)
    let camera    = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
    camera.position.x += Math.random()/10
    camera.position.z += Math.random()/10

    // *TODO* add camera direction
    let direction = new xrf.THREE.Vector3()
    camera.getWorldDirection(direction)
    const pitch   = Math.asin(direction.y);
    const yaw     = Math.atan2(direction.x, direction.z);
    const pitchInDegrees = pitch * 180 / Math.PI;
    const yawInDegrees = yaw * 180 / Math.PI;

    let lastPos = `pos=${camera.position.x.toFixed(2)},${camera.position.y.toFixed(2)},${camera.position.z.toFixed(2)}`
    let newHash = document.location.hash.replace(/[&]?(pos|rot)=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
    newHash += `&${lastPos}`
    document.location.hash = newHash.replace(/&&/,'&')
                                    .replace(/#&/,'')
    XRFMENU.copyToClipboard( window.location.href );
  },

  copyToClipboard(text){
    // copy url to clipboard 
    var dummy = document.createElement('input')
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand('copy');
    document.body.removeChild(dummy); 
  },

  share(){
    let inMeeting = $('[meeting]')
    let url = window.location.href
    if( !inMeeting ) XRFMENU.updateHashPosition()
    else url = $('[meeting]').components['meeting'].data.link
    XRFMENU.copyToClipboard( url )
    // End of *TODO* 
    window.notify(`<h2>${ inMeeting ? 'Meeting link ' : 'Link'} copied to clipboard!</h2> <br>Now share it with your friends ❤️<br>
      <canvas id="qrcode" width="121" height="121"></canvas><br>
      <button onclick="window.download()">💾 download scene file</button> <br>
      <button onclick="alert('this might take a while'); $('a-scene').components.screenshot.capture('equirectangular')">📷 download 360 screenshot</button> <br>
      <a class="btn" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">🖥 clone & selfhost this experience</a><br>
      <br>
      To embed this experience in your blog,<br>
      copy/paste the following into your HTML:<br><input type="text" value="&lt;iframe src='${document.location.href}'&gt;<br>&lt;/iframe&gt;" id="share"/>
      <br>
    `,{timeout:2000000})
    // draw QR code
    setTimeout( () => {
      let QR  = window.QR
      QR.canvas = document.getElementById('qrcode')
      QR.draw( url, QR.canvas )
    },0)
  }
}