repo: janusweb
action: commit
revision: 
path_from: 
revision_from: 97adf298cff79e3e5f515642608aa4ebd9094834:
path_to: 
revision_to: 

commit 97adf298cff79e3e5f515642608aa4ebd9094834
Author: James Baicoianu 
Date:   Thu Feb 1 00:00:44 2018 -0800

    Fixed JS error on custom element viewers

diff --git a/scripts/client.js b/scripts/client.js

--- a/scripts/client.js
+++ b/scripts/client.js
@@ -235,41 +235,74 @@ elation.require(['engine.engine', 'engine.assets', 'engine.things.light_ambient'
   }, elation.engine.client);

   if (typeof customElements != 'undefined') {
-    elation.extend('janusweb.viewer.base', Object.create( HTMLElement, {
-      get fullscreen() {
-        return this.getAttribute('fullscreen');
-      },
-      set fullscreen(fullscreen) {
-        return this.setAttribute('fullscreen', fullscreen);
-      },
-      get autostart() {
-        return this.getAttribute('autostart');
-      },
-      set autostart(autostart) {
-        return this.setAttribute('autostart', autostart);
+    elation.extend('janusweb.viewer.base', Object.create( HTMLElement.prototype, {
+      fullscreen: {
+        get: function() {
+          return this.getAttribute('fullscreen');
+        },
+        set: function(fullscreen) {
+          return this.setAttribute('fullscreen', fullscreen);
+        }
       },
-      get src() {
-        return this.getAttribute('src');
+      autostart: {
+        get: function() {
+          return this.getAttribute('autostart');
+        },
+        set: function(autostart) {
+          return this.setAttribute('autostart', autostart);
+        }
       },
-      set src(src) {
-        return this.setAttribute('src', src);
+      src: {
+        get: function() {
+          return this.getAttribute('src');
+        },
+        set: function(src) {
+          return this.setAttribute('src', src);
+        }
       },
-      get width() {
-        return this.getAttribute('width') || 640;
+      width: {
+        get: function() {
+          return this.getAttribute('width') || 640;
+        },
+        set: function(width) {
+          return this.setAttribute('width', width);
+        }
       },
-      set width(width) {
-        return this.setAttribute('width', width);
+      height: {
+        get: function() {
+          return this.getAttribute('height') || 480;
+        },
+        set height(height) {
+          return this.setAttribute('height', width);
+        }
       },
-      get height() {
-        return this.getAttribute('height') || 480;
+      connectedCallback: function() {
+        setTimeout(() => this.init(), 10);
       },
-      set height(height) {
-        return this.setAttribute('height', width);
+      init: function() {
+        elation.janusweb.init(this.getClientArgs());
       },
-      connectedCallback : function() {
-        this.init();
+      getClientArgs: function() {
+        var fullscreen = this.fullscreen,
+            width = (this.fullscreen ? window.innerWidth : this.width),
+            height = (this.fullscreen ? window.innerHeight : this.height);
+        var args = {
+          url: this.getRoomURL(),
+          //resolution: width + 'x' + height,
+          //shownavigation: false,
+        };
+        return args;
       },
-      init : function() {
+      getRoomURL: function() {
+        return this.src || document.location.href;
+      }
+    }));
+    document.registerElement('janus-viewer', elation.janusweb.viewer.base);
+
+
+    elation.extend('janusweb.viewer.frame', Object.create( elation.janusweb.viewer.base, {
+      init: function() {
+        if (this.iframe) return;
         var iframe = document.createElement('iframe');
         var fullscreen = this.fullscreen;
         iframe.width = (this.fullscreen ? window.innerWidth : this.width);
@@ -292,56 +325,61 @@ elation.require(['engine.engine', 'engine.assets', 'engine.things.light_ambient'
         }
         content.document.write('');
         content.document.close();
-      },
-      getClientArgs : function() {
-        var fullscreen = this.fullscreen,
-            width = (this.fullscreen ? window.innerWidth : this.width),
-            height = (this.fullscreen ? window.innerHeight : this.height);
-        var args = {
-          url: this.getRoomURL(),
-          //resolution: width + 'x' + height,
-          shownavigation: false,
-        };
-        return args;
-      },
-      getRoomURL : function() {
-        return this.src || document.location.href;
+
+        this.iframe = iframe;
       }
     }));
-    customElements.define('janus-viewer', elation.janusweb.viewer.base);
+    document.registerElement('janus-viewer-frame', elation.janusweb.viewer.frame);

-    elation.extend('janusweb.viewer.image360', Object.create( elation.janusweb.viewer.base, {
+    elation.extend('janusweb.viewer.image360', Object.create( elation.janusweb.viewer.frame, {
       getRoomURL : function() {
         return 'data:text/html,' + encodeURIComponent('