Merge pull request #40 from frankiefu/master

update to use the new g-component sugar

src/g-icon.html

@@ -20,7 +20,8 @@
         width: 21px;
         height: 21px;
         cursor: pointer;
-        background: no-repeat center contain;
+        background: no-repeat center;
+        background-size: contain;
       }
     </style>
     <div class="icon" style="background-image:url({{src}})"></div>

src/g-ratings.html

@@ -5,35 +5,46 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-ratings"  attributes="value" handlers="click: clickHandler">
+<element name="g-ratings" attributes="count, value">
   <link rel="components" href="g-component.html">
-  <link rel="stylesheet" href="css/g-ratings.css" />
   <template>
-    <span class="star"></span>
-    <span class="star"></span>
-    <span class="star"></span>
-    <span class="star"></span>
-    <span class="star"></span>
+    <style>
+      .star {
+        display: inline-block;
+        width: 12px;
+        height: 21px;
+        background: url('images/star_blank.svg') center no-repeat;
+        cursor: default;
+      }
+
+      .star.full {
+        background: url('images/star_full.svg') center no-repeat;
+      }
+    </style>
+    <template iterate="stars">
+      <span index="{{index}}" class="star {{starClass}}" on-click="starClick"></span>
+    </template>
   </template>
   <script>
     this.component({
-      shadowRootCreated: function(inRoot) {
-        this.stars = ShadowDOM.localQueryAll(inRoot, ".star");
+      ready: function() {
+        this.node.count = this.node.count || 5;
       },
-      created: function() {
+      countChanged: function() {
+        this.stars = [];
+        for (var i = 0; i < this.node.count; i++) {
+          this.stars.push({index: i});
+        }
         this.valueChanged();
       },
-      prototype: {
-        valueChanged: function() {
-          for (var i=0, s; s=this.stars[i]; i++) {
-            s.classList.toggle('full', i < Number(this.value));
-          }
-        },
-        clickHandler: function(e) {
-          var s = e.target;
-          var i = this.stars.indexOf(s);
-          this.value = i + (s.classList.contains('full') ? 0 : 1);
-        }
+      valueChanged: function() {
+        this.stars && this.stars.forEach(function(s, i) {
+          s.starClass = i < this.value ? 'full' : '';
+        }.bind(this));
+      },
+      starClick: function(e) {
+        var s = e.currentTarget.model;
+        this.node.value = s.index + (s.starClass == 'full' ? 0 : 1);
       }
     });
   </script>

src/g-tabs.html

@@ -7,18 +7,56 @@
 -->
 <element name="g-tabs" extends="g-selector" attributes="selected, multi, vertical" handlers="click: clickHandler">
   <link rel="components" href="g-selector.html">
-  <link rel="stylesheet" href="css/g-tabs.css" />
   <template>
-    <div class="tabContainer">
-      <shadow></shadow>
-    </div>
+    <style>
+      @host {
+        display: block;
+        height: 28px;
+        line-height: 28px;
+        border: 0;
+        border-bottom: 1px solid #ccc;
+      }
+
+      @host.vertical {
+        display: inline-block;
+        width: 71px;
+        height: 100%;
+        border: 0;
+        border-right: 1px solid #ccc;
+      }
+
+      @host > * {
+        display: inline-block;
+        min-width: 54px;
+        height: 27px;
+        line-height: 27px;
+        text-align: center;
+        padding: 0 8px;
+        cursor: default;
+        border: 1px solid transparent;
+        border-radius: 2px 2px 0 0;
+        -webkit-transition: all 0.218s;
+      }
+
+      @host.vertical > * {
+        border-radius: 2px 0 0 2px;
+      }
+
+      @host > :hover {
+        color: #555;
+      }
+
+      @host > .selected {
+        color: #202020;
+        border: 1px solid #ccc;
+      }
+    </style>
+    <shadow></shadow>
   </template>
   <script>
     this.component({
-      prototype: {
-        verticalChanged: function() {
-          this.classList.toggle('vertical', this.vertical);
-        }
+      verticalChanged: function() {
+        this.node.classList.toggle('vertical', this.vertical);
       }
     });
   </script>

src/g-togglebutton.html

@@ -17,14 +17,13 @@
   </template>
   <script>
     this.component({
-      prototype: {
-        valueChanged: function() {
-          this.$.toggle.classList.toggle('on', this.value);
-        },
+      valueChanged: function() {
+        this.$.toggle.classList.toggle('on', this.value);
+      },
+      publish: {
         toggle: function() {
-          this.value = !this.value;
+          this.node.value = !this.node.value;
         }
-        // TODO(ffu): need to add dragging support
       }
     });
   </script>

workbench/ratings.html

@@ -7,10 +7,12 @@
 <html>
 <head>
   <title>Ratings</title>
-  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-ratings.html">
 </head>
 <body>
   <g-ratings value="3"></g-ratings>
+  <br>
+  <g-ratings value="5" count="10"></g-ratings>
 </body>
 </html>

workbench/tabs.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>Tabs</title>
-  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-tabs.html">
 </head>
 <body>

workbench/togglebutton.html

@@ -7,7 +7,7 @@
 <html>
 <head>
   <title>Toggle Button</title>
-  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-togglebutton.html">
 </head>
 <body>