Make SkyElement more classy.

sky/examples/city-list/city-list.sky

 <!--
 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
 <import src="city-data-service.sky" as="CityDataService" />
 <import src="city-sequence.sky" as="CitySequence" />
 
+<script>
+// TODO(esprehn): exports should start as the empty object.
+module.exports = {};
+</script>
+
+<sky-element name="state-header">
 <template>
   <style>
     div {
       font-size: 16px;
       color: #FFF;
       background-color: #333;
       padding: 4px 4px 4px 12px;
       display: paragraph;
     }
   </style>
   <div>{{ state }}</div>
 </template>
 <script>
-SkyElement({
-  name: 'state-header',
-
+module.exports.StateHeaderElement = class extends SkyElement {
   set datum(datum) {
     this.state = datum.state;
   }
-});
+}.register();
 </script>
+</sky-element>
 
+<sky-element name="letter-header">
 <template>
   <style>
     div {
       font-size: 12px;
       font-weight: bold;
       padding: 2px 4px 4px 12px;
       background-color: #DDD;
       display: paragraph;
     }
   </style>
   <div>{{ letter }}</div>
 </template>
 <script>
-SkyElement({
-  name: 'letter-header',
-
+module.exports.LetterHeaderElement = class extends SkyElement {
   set datum(datum) {
     this.letter = datum.letter;
   }
-});
+}.register();
 </script>
+</sky-element>
 
+<sky-element name="city-item">
 <template>
   <style>
     :host {
       display: flex;
       font-size: 13px;
       padding: 8px 4px 4px 12px;
       border-bottom: 1px solid #EEE;
       line-height: 15px;
       overflow: hidden;
     }
@@ skipping 14 matching lines @@
       color: #AAA;
     }
 
   </style>
   <div>
     <span id="name">{{ name }}</span>,
     <span id="population">population {{ population }}</span>
   </div>
 </template>
 <script>
-  SkyElement({
-    name: 'city-item',
+module.exports.CityItemElement = class extends SkyElement {
+  set datum(datum) {
+    this.name = datum.name;
+    this.population = datum.population;
+  }
+}.register();
+</script>
+</sky-element>
 
-    set datum(datum) {
-      this.name = datum.name;
-      this.population = datum.population;
-    }
-  });
-</script>
-
+<sky-element name="city-list">
 <template>
   <style>
 
   :host {
       overflow: hidden;
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
@@ skipping 31 matching lines @@
     display: none;
   }
 
   .position {
     position: absolute;
     left: 0;
     right: 0;
   }
 
   </style>
-
   <div id="scroller" fit>
     <div id="scrollarea">
       <div id="contentarea">
       </div>
     </div>
   </div>
-
 </template>
 <script>
 
 (function(global) {
     "use strict";
 
     var LOAD_LENGTH = 20;
     var LOAD_BUFFER_PRE = LOAD_LENGTH * 4;
     var LOAD_BUFFER_POST = LOAD_LENGTH * 4;
 
@@ skipping 366 matching lines @@
         this.checkinTile(tiles.pop());
       }
     }
 
     Tiler.prototype.reset = function() {
       this.checkinAllTiles();
       this.drawTop = 0;
       this.drawBottom = 0;
     }
 
-    SkyElement({
-      name: 'city-list',
-      loader: null,
-      scroller: null,
-      tiler: null,
-      date: null,
-      month: null,
-      views: null,
+    module.exports.CityListElement = class extends SkyElement {
 
-      attached: function() {
+      created() {
+        this.loader = null;
+        this.scroller = null;
+        this.tiler = null;
+        this.date = null;
+        this.month = null;
+        this.views = null;
+      }
+
+      attached() {
         this.views = {};
         this.loader = new Loader(this);
         this.scroller = new Scroller();
         this.tiler = new Tiler(
             this.shadowRoot.getElementById('contentarea'), this.views, {
           stateHeader: 27,
           letterHeader: 18,
           cityItem: 30
         });
 
         this.dataLoaded = this.dataLoaded.bind(this);
         this.scrollerElement = this.shadowRoot.getElementById('scroller');
         this.scrollerElement.addEventListener('scroll',
             this.handleScroll.bind(this));
 
         var self = this;
         setTimeout(function() {
           self.domReady();
           self.loader.maybeLoadMoreData(self.dataLoaded);
         });
-      },
+      }
 
-      domReady: function() {
+      domReady() {
         this.scroller.setup(this.shadowRoot.getElementById('scroller'),
             this.shadowRoot.getElementById('scrollarea'),
             this.shadowRoot.getElementById('contentarea'));
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.setupViews(scrollFrame);
-      },
+      }
 
-      updateView: function(data, scrollChanged) {
+      updateView(data, scrollChanged) {
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.drawTiles(scrollFrame, data);
         var datum = scrollChanged ?
             this.tiler.getFirstVisibleDatum(scrollFrame) : null;
         this.loader.maybeLoadMoreData(this.dataLoaded, datum);
-      },
+      }
 
-      dataLoaded: function(data, indexOffset) {
+      dataLoaded(data, indexOffset) {
         var scrollFrame = this.scroller.getCurrentFrame();
         this.tiler.updateFirstItem(indexOffset);
         this.updateView(data.items, false);
-      },
+      }
 
-      handleScroll: function(event) {
+      handleScroll(event) {
         if (!this.scroller.captureNewFrame(event))
           return;
 
         this.updateView(this.loader.getItems(), true);
-      },
+      }
 
-      scrollBy: function(amount) {
+      scrollBy(amount) {
         this.scrollerElement.scrollTop += amount;
         this.handleScroll({ target: this.scrollerElement });
       }
-    });
+    }.register();
 
 })(this);
-
 </script>
-
+</sky-element>