Merge pull request #22 from frankiefu/master

menu component and basic component unit tests

src/css/g-menu.css

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+@host {
+	display: inline-block;
+	background: white;
+	border: 1px solid #cfcfcf;
+	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+}

src/css/g-menuitem.css

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+@host {
+  display: block;
+  box-sizing: border-box;
+  padding: 11px 10px;
+  margin: 10px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+@host.selected {
+  border: 1px solid rgba(0, 0, 0, 0.16);
+  background: whitesmoke;
+}
+
+.label {
+  margin: 0 15px;
+}
+
+g-icon, .label, .label > * {
+  display: inline-block;
+  vertical-align: middle;
+}

src/g-menu.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.
+ */
+-->
+<element name="g-menu" extends="g-selector" attributes="selected, multi" handlers="click: clickHandler">
+  <link rel="components" href="g-selector.html">
+  <link rel="stylesheet" href="css/g-menu.css" />
+  <template>
+    <shadow></shadow>
+  </template>
+  <script>
+    this.component({
+    });
+  </script>
+</element>

src/g-menuitem.html

@@ -0,0 +1,27 @@
+<!--
+/*
+ * 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-menuitem" attributes="src">
+  <link rel="components" href="g-component.html">
+  <link rel="components" href="g-icon.html">
+  <link rel="stylesheet" href="css/g-menuitem.css" />
+  <template>
+    <g-icon id="icon"></g-icon>
+    <div class="label">
+      <content></content>
+    </div>
+  </template>
+  <script>
+    this.component({
+      prototype: {
+        srcChanged: function() {
+          this.$.icon.src = this.src;
+        }
+      }
+    });
+  </script>
+</element>

test/component.js

@@ -0,0 +1,82 @@
+/*
+ * 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.
+ */
+
+suite('component', function() {
+  var foo;
+
+  setup(function() {
+    foo = document.createElement('g-foo');
+    work.appendChild(foo);
+  });
+
+  teardown(function() {
+    work.textContent = '';
+  });
+
+  function async(inFn) {
+    setTimeout(inFn, 1);
+  }
+
+  test('string attribute', function() {
+    foo.str = 'hello world';
+    expect(foo._str).to.be('hello world');
+    foo.setAttribute('str', 'good bye');
+    async(function() {
+      expect(foo._str).to.be('good bye');
+    });
+  });
+
+  test('boolean attribute', function() {
+    foo.bool = true;
+    expect(foo._bool).to.be(true);
+    foo.bool = false;
+    expect(foo._bool).to.be(false);
+    foo.setAttribute('bool', true);
+    async(function() {
+      expect(foo._bool).to.be(true);
+    })
+  });
+
+  test('number attribute', function() {
+    foo.num = 3;
+    expect(foo._num).to.be(3);
+    foo.setAttribute('num', 5);
+    async(function() {
+      expect(foo._num).to.be(5);
+    })
+  });
+
+  test('string property', function() {
+    foo.strp = 'hello world';
+    expect(foo._strp).to.be('hello world');
+  });
+
+  test('boolean property', function() {
+    foo.boolp = true;
+    expect(foo._boolp).to.be(true);
+    foo.boolp = false;
+    expect(foo._boolp).to.be(false);
+  });
+
+  test('number property', function() {
+    foo.nump = 3;
+    expect(foo._nump).to.be(3);
+  });
+
+  test('node reference', function() {
+    var ref = foo.$.ref1;
+    expect(ref.id).to.be('ref1');
+    ref = foo.$.ref2;
+    expect(ref.textContent).to.be('hello!!!');
+  });
+
+  test('handler', function() {
+    expect(foo._click).to.be(undefined);
+    foo.click();
+    expect(foo._click).to.be(true);
+  })
+});
+

test/g-foo.html

@@ -0,0 +1,51 @@
+<!--
+/*
+ * 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-foo" attributes="str, bool, num" handlers="click: clickHandler">
+  <link rel="components" href="../src/g-component.html">
+  <template>
+    <div id="ref1" atclick="ref1ClickHandler">
+      <div id="ref2">hello!!!</div>
+    </div>
+    <content></content>
+  </template>
+  <script>
+    this.component({
+      published: {
+        strp: '',
+        boolp: false,
+        nump: 0
+      },
+      prototype: {
+        strChanged: function() {
+          this._str = this.str;
+        },
+        boolChanged: function() {
+          this._bool = this.bool;
+        },
+        numChanged: function() {
+          this._num = this.num;
+        },
+        strpChanged: function() {
+          this._strp = this.strp;
+        },
+        boolpChanged: function() {
+          this._boolp = this.boolp;
+        },
+        numpChanged: function() {
+          this._nump = this.nump;
+        },
+        clickHandler: function() {
+          this._click = true;
+        },
+        ref1ClickHandler: function() {
+          this._ref1click = true;
+        }
+      }
+    });
+  </script>
+</element>

test/icon.js

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+suite('g-icon', function() {
+  var icon;
+
+  setup(function() {
+    icon = document.createElement('g-icon');
+    work.appendChild(icon);
+  });
+
+  teardown(function() {
+    work.textContent = '';
+  });
+
+  suite('attributes', function() {
+    test('src', function() {
+      var i = ShadowDOM.localQuery(icon.shadow, '.icon');
+      var src = 'http://foo.com/bar.png';
+      icon.src = src;
+      expect(i.style.backgroundImage).to.be('url(' + src + ')');
+    });
+  });
+});

test/test.html

@@ -14,6 +14,7 @@
     <script src="../third_party/mocha/mocha.js"></script>
     <!-- -->
     <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+    <link rel="components" href="g-foo.html">
     <link rel="components" href="../src/g-icon.html">
     <link rel="components" href="../src/g-selection.html">
     <link rel="components" href="../src/g-selector.html">
@@ -31,6 +32,7 @@
     </script>
     <!--  -->
     <div id="work"></div>
+    <script src="component.js"></script>
     <script src="icon.js"></script>
     <script src="selection.js"></script>
     <script src="selector.js"></script>

workbench/menu.html

@@ -0,0 +1,27 @@
+<!--
+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>Menu</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <link rel="components" href="../../toolkit/src/g-menuitem.html">
+  <link rel="components" href="../../toolkit/src/g-menu.html">
+  <style>
+    body {
+      font-family: 'Helvetica Nue', 'Helvetica', Arial, 'open sans' sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <g-menu>
+    <g-menuitem src="images/edit_page.svg">Post a Comment</g-menuitem>
+    <g-menuitem src="images/chat.svg">Share Link</g-menuitem>
+    <g-menuitem src="images/email.svg">Email Link</g-menuitem>
+    <g-menuitem src="images/favorite.svg">Add to Favorites</g-menuitem>
+  </g-menu>
+</body>
+</html>