update g-ajax and minor g-panels and g-page fixes

src/g-ajax.html

@@ -14,65 +14,68 @@
   </template>
   <script>
     this.component({
-      prototype: {
+      ready: function() {
+        // wait until ready to auto go only 1x.
+        this.readied = true;
+        this.asyncMethod('autoChanged');
+      },
+      receive: function(inResponse, inXhr) {
+        if (this.isSuccess(inXhr)) {
+          this.response(inXhr);
+        } else {
+          this.error(inXhr);
+        }
+        this.complete(inXhr);
+      },
+      isSuccess: function(inXhr) {
+        var status = inXhr.status || 0;
+        return !status || (status >= 200 && status < 300);
+      },
+      response: function(inXhr) {
+        var response = this.evalResponse(inXhr);
+        this.fireEvent('response', {response: response, xhr: inXhr});
+      },
+      error: function(inXhr) {
+        var response = inXhr.status + ': ' + inXhr.responseText;
+        this.fireEvent('error', {response: response, xhr: inXhr});
+      },
+      complete: function(inXhr) {
+        this.fireEvent('complete', {response: inXhr.status, xhr: inXhr});
+      },
+      evalResponse: function(inXhr) {
+        return this[(this.handleAs || 'text') + 'Handler'](inXhr);
+      },
+      xmlHandler: function(inXhr) {
+        return inXhr.responseXML;
+      },
+      textHandler: function(inXhr) {
+        return inXhr.responseText;
+      },
+      jsonHandler: function(inXhr) {
+        var r = this.textHandler(inXhr);
+        try {
+          return JSON.parse(r);
+        } catch (x) {
+          return r;
+        }
+      },
+      autoChanged: function() {
+        if (this.auto && this.readied) {
+          this.go();
+        }
+      },
+      paramsChanged: function() {
+        if (this.auto && this.readied) {
+          this.go();
+        }
+      },
+      publish: {
         /**
          * Performs an Ajax request to the url specified.
          */
         go: function() {
-          var params = JSON.parse(this.params);
+          var params = this.params ? JSON.parse(this.params) : null;
           return this.$.xhr.request({url: this.url, callback: this.receive.bind(this), params: params});
-        },
-        receive: function(inResponse, inXhr) {
-          if (this.isSuccess(inXhr)) {
-            this.response(inXhr);
-          } else {
-            this.error(inXhr);
-          }
-          this.complete(inXhr);
-        },
-        isSuccess: function(inXhr) {
-          var status = inXhr.status || 0;
-          return !status || (status >= 200 && status < 300);
-        },
-        dispatchAjaxEvent: function(inType, inResponse, inXhr) {
-          this.dispatchEvent(new CustomEvent(inType,
-            {detail: {response: inResponse, xhr: inXhr}}));
-        },
-        response: function(inXhr) {
-          var response = this.evalResponse(inXhr);
-          this.dispatchAjaxEvent('response', response, inXhr);
-          // Here we want to expose the response as a model so that it can be
-          // consumed by other components.
-          this.model = this.model || {};
-          this.model.response = response;
-        },
-        error: function(inXhr) {
-          this.dispatchAjaxEvent('error', inXhr.status + ': ' + inXhr.responseText, inXhr);
-        },
-        complete: function(inXhr) {
-          this.dispatchAjaxEvent('complete', inXhr.status, inXhr);
-        },
-        evalResponse: function(inXhr) {
-          return this[(this.handleAs || 'text') + 'Handler'](inXhr);
-        },
-        xmlHandler: function(inXhr) {
-          return inXhr.responseXML;
-        },
-        textHandler: function(inXhr) {
-          return inXhr.responseText;
-        },
-        jsonHandler: function(inXhr) {
-          var r = this.textHandler(inXhr);
-          try {
-            return JSON.parse(r);
-          } catch (x) {
-            return r;
-          }
-        },
-        paramsChanged: function() {
-          if (this.auto) {
-            this.go();
-          }
         }
       }
     });

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-page.html

@@ -38,8 +38,10 @@
         sheet.setAttribute('g-page', '');
         sheet.removeAttribute('scoped');
         sheet.removeAttribute('id')
-        document.head.appendChild(sheet);
+        var head = document.head;
+        head.insertBefore(sheet, head.firstChild);
       }
+      sheet.textContent += '\n' + this.node.tagName.toLowerCase() + ' {height: 100%;}\n';
     }
   });
 </script>

src/g-panels.html

@@ -34,7 +34,7 @@
     ready: function() {
       // ensure default transition
       if (!this.transition) {
-        this.transition = this.defaultTransition;
+        this.node.transition = this.defaultTransition;
         if (this.index != null) {
           this.node.index = 0;
         }

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>