Merge pull request #8 from frankiefu/master

add ajax and togglebutton components

src/css/g-togglebutton.css

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+.toggle {
+  position: relative;
+  height: 27px;
+  line-height: 27px;
+  width: 94px;
+  overflow: hidden;
+  border: 1px solid #CCC;
+  border-radius: 2px;
+  font-size: 13px;
+  font-weight: bold;
+  color: #666;
+  background-image: -webkit-linear-gradient(top, #EEEEEE, #e0e0e0);
+  box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
+}
+
+.toggle span {
+  display: inline-block;
+  width: 45px;
+  text-align: center;
+  border-radius: 2px 2px 0 0;
+}
+
+.toggle span.on {
+  width: 47px;
+  margin-right: -2px;
+  color: #FFF;
+  background-image: -webkit-linear-gradient(top, #3b93ff, #3689EE);
+  box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
+  border-radius: 2px 0 0 2px;
+}
+
+.toggle .thumb {
+  position: absolute;
+  display: block;
+  top: -1px;
+  left: -1px;
+  height: 27px;
+  width: 47px;
+  border: 1px solid #CCC;
+  border-radius: 2px;
+  box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1);
+  background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
+  -webkit-transition: all 0.130s ease-out;
+}
+
+.thumb.dragging {
+  -webkit-transition: all 0;
+}
+
+.toggle.on .thumb {
+  left: 46px;
+}
+
+.toggle .thumb::after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 9px;
+  left: 15px;
+  height: 9px;
+  width: 17px;
+  background-image: -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%);
+  background-size: 2px;
+  background-position: 0 0, 0 2px, 0 4px, 0 6px, 0 8px;
+  background-repeat: repeat-x;
+}

src/g-ajax.html

@@ -0,0 +1,80 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-ajax" attributes="url, handleAs, params">
+  <link rel="components" href="g-component.html">
+  <link rel="components" href="g-xhr.html">
+  <template>
+    <g-xhr id="xhr"></g-xhr>
+    <content></content>
+  </template>
+  <script>
+    this.component({
+      created: function(inSuper) {
+        if (this.getAttribute('autogo')) {
+          this.go();
+        }
+      },
+      prototype: {
+        /**
+         * Performs an Ajax request to the url specified.
+         */
+        go: function() {
+          var params = JSON.parse(this.params);
+          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;
+          }
+        }
+      }
+    });
+  </script>
+</element>

src/g-togglebutton.html

@@ -0,0 +1,38 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-togglebutton" attributes="value" handlers="click: clickHandler">
+  <link rel="components" href="g-component.html">
+  <link rel="stylesheet" href="css/g-togglebutton.css" />
+  <template>
+    <div id="toggle" class="toggle">
+      <span class="on">ON</span>
+      <span class="off">OFF</span>
+      <span class="thumb"></span>
+    </div>
+  </template>
+  <script>
+    this.component({
+      created: function() {
+        this.valueAttributeChanged();
+      },
+      prototype: {
+        valueAttributeChanged: function() {
+          this.$.toggle.classList.enable('on', this.trueValue());
+        },
+        clickHandler: function() {
+          this.value = !this.trueValue();
+        },
+        // TODO(ffu): remove this when base component handles auto-converting string value to boolean
+        trueValue: function() {
+          return this.value != 'false' && Boolean(this.value);
+        }
+        // TODO(ffu): need to add dragging support
+      }
+    });
+  </script>
+</element>

src/g-xhr.html

@@ -0,0 +1,90 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-xhr">
+  <link rel="components" href="g-component.html">
+  <template>
+    <style>
+      @host {
+        display: none;
+      }
+    </style>
+  </template>
+  <script>
+    this.component({
+      prototype: {
+        /**
+         * Sends a HTTP request to the server and returns the XHR object.
+         *
+         * @param inOptions A set of key/value pairs that configure the request.
+         * @param inOptions.url The url to which the request is sent.
+         * @param inOptions.method The HTTP method to use, default is GET.
+         * @param inOptions.sync By default, all requests are sent asynchronously.
+         *        To send synchronous requests, set to true.
+         * @param inOptions.params Data to be sent to the server.
+         * @param inOptions.body The content for the request body for POST method.
+         * @param inOptions.headers HTTP request headers.
+         * @param inOptions.callback Called when request is completed.
+         * @returns XHR object.
+         */
+        request: function(inOptions) {
+          var transport = this.getTransport();
+          var url = inOptions.url;
+          var method = inOptions.method || 'GET';
+          var async = !inOptions.sync;
+          var params = this.toQueryString(inOptions.params);
+          if (params && method == 'GET') {
+            url += (url.indexOf('?') > 0 ? '&' : '?') + params;
+          }
+          transport.open(method, url, async);
+          this.makeReadyStateHandler(transport, inOptions.callback);
+          this.setRequestHeaders(inOptions.headers);
+          transport.send(method == 'POST' ? (inOptions.body || params) : null);
+          if (!async) {
+            transport.onreadystatechange(transport);
+          }
+          return transport;
+        },
+        getTransport: function() {
+          try {
+            return new XMLHttpRequest();
+          } catch (e) {}
+          try {
+            return new ActiveXObject('Msxml2.XMLHTTP');
+          } catch (e) {}
+          try {
+            return new ActiveXObject('Microsoft.XMLHTTP');
+          } catch (e) {}
+          return false;
+        },
+        makeReadyStateHandler: function(inXhr, inCallback) {
+          inXhr.onreadystatechange = function() {
+            if (inXhr.readyState == 4) {
+              inCallback && inCallback.apply(null, [inXhr.responseText, inXhr]);
+            }
+          };
+        },
+        setRequestHeaders: function(inXhr, inHeaders) {
+          if (inHeaders) {
+            for (var name in inHeaders) {
+              xhr.setRequestHeader(name, inHeaders[name]);
+            }
+          }
+        },
+        toQueryString: function(inParams) {
+          var r = [];
+          for (var n in inParams) {
+            var v = inParams[n];
+            n = encodeURIComponent(n);
+            r.push(v === undefined || v === null ? n : (n + '=' + encodeURIComponent(v)));
+          }
+          return r.join('&');
+        }
+      }
+    });
+  </script>
+</element>

workbench/ajax.html

@@ -0,0 +1,23 @@
+<!--
+Copyright 2012 The Toolkitchen Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Ajax</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
+  <link rel="components" href="../../toolkit/src/g-ajax.html">
+</head>
+<body>
+  <g-ajax autogo="true" url="http://gdata.youtube.com/feeds/api/videos/"
+          handleAs="json"	params='{"alt":"json", "q":"chrome"}'>
+    <div>
+      <template iterate="response.feed.entry">
+        <div>{{title.$t}}</div>
+      </template>
+    </div>
+  </g-ajax>
+</body>
+</html>

workbench/togglebutton.html

@@ -0,0 +1,18 @@
+<!--
+Copyright 2012 The Toolkitchen Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Toggle Button</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
+  <link rel="components" href="../../toolkit/src/g-togglebutton.html">
+</head>
+<body>
+  <g-togglebutton value="true"></g-togglebutton>
+  <br>
+  <g-togglebutton value="false"></g-togglebutton>
+</body>
+</html>