repo: janusweb
action: commit
revision: 
path_from: 
revision_from: 368999c984d245cffeb220b6d15a1e0806769018:
path_to: 
revision_to: 

commit 368999c984d245cffeb220b6d15a1e0806769018
Author: James Baicoianu 
Date:   Tue Mar 27 10:52:58 2018 -0700

    Use newest Web Component wrapper syntax for templated clients

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

--- a/scripts/client.js
+++ b/scripts/client.js
@@ -233,54 +233,21 @@ 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.prototype, {
-      fullscreen: {
-        get: function() {
-          return this.getAttribute('fullscreen');
-        },
-        set: function(fullscreen) {
-          return this.setAttribute('fullscreen', fullscreen);
-        }
-      },
-      autostart: {
-        get: function() {
-          return this.getAttribute('autostart');
-        },
-        set: function(autostart) {
-          return this.setAttribute('autostart', autostart);
-        }
-      },
-      src: {
-        get: function() {
-          return this.getAttribute('src');
-        },
-        set: function(src) {
-          return this.setAttribute('src', src);
-        }
-      },
-      width: {
-        get: function() {
-          return this.getAttribute('width') || 640;
-        },
-        set: function(width) {
-          return this.setAttribute('width', width);
-        }
-      },
-      height: {
-        get: function() {
-          return this.getAttribute('height') || 480;
-        },
-        set height(height) {
-          return this.setAttribute('height', width);
-        }
-      },
-      connectedCallback: function() {
-        setTimeout(() => this.init(), 10);
-      },
-      init: function() {
+    elation.elements.define('janus.viewer.base', class extends elation.elements.base {
+      init() {
+        super.init();
+        this.defineAttributes({
+          fullscreen: { type: 'boolean', default: true },
+          autostart: { type: 'boolean', default: true },
+          src: { type: 'string' },
+          width: { type: 'integer', default: 640 },
+          height: { type: 'integer', default: 480 },
+        });
+      }
+      create() {
         elation.janusweb.init(this.getClientArgs());
-      },
-      getClientArgs: function() {
+      }
+      getClientArgs() {
         var fullscreen = this.fullscreen,
             width = (this.fullscreen ? window.innerWidth : this.width),
             height = (this.fullscreen ? window.innerHeight : this.height);
@@ -290,16 +257,20 @@ elation.require(['engine.engine', 'engine.assets', 'engine.things.light_ambient'
           //shownavigation: false,
         };
         return args;
-      },
-      getRoomURL: function() {
+      }
+      getRoomURL() {
         return this.src || document.location.href;
       }
-    }));
-    document.registerElement('janus-viewer', elation.janusweb.viewer.base);
+    });
+    //document.registerElement('janus-viewer', elation.janusweb.viewer.base);


-    elation.extend('janusweb.viewer.frame', Object.create( elation.janusweb.viewer.base, {
-      init: function() {
+    elation.elements.define('janus.viewer.frame', class extends elation.elements.janus.viewer.base {
+      init() {
+        super.init();
+        console.log('init frame', this);
+      }
+      create() {
         if (this.iframe) return;
         var iframe = document.createElement('iframe');
         var fullscreen = this.fullscreen;
@@ -326,58 +297,71 @@ elation.require(['engine.engine', 'engine.assets', 'engine.things.light_ambient'

         this.iframe = iframe;
       }
-    }));
-    document.registerElement('janus-viewer-frame', elation.janusweb.viewer.frame);
+    });
+    //document.registerElement('janus-viewer-frame', elation.janusweb.viewer.frame);
+    elation.elements.define('janus.viewer.generatedframe', class extends elation.elements.janus.viewer.frame {
+      getRoomURL() {
+        return 'data:text/html,' + encodeURIComponent(this.getRoomSource());
+      }
+      getTemplate() {
+        return '';
+      }
+      getRoomSource() {
+        if (!this.tplname) {
+          this.tplname = this.type + '.src';
+          elation.template.add(this.tplname, this.getTemplate());
+        }
+        return elation.template.get(this.tplname, this);
+      }
+    });

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