Merge branch 'master' of https://github.com/toolkitchen/toolkit

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "third_party/mocha"]
+	path = third_party/mocha
+	url = https://github.com/visionmedia/mocha.git
+[submodule "third_party/expect.js"]
+	path = third_party/expect.js
+	url = https://github.com/LearnBoost/expect.js.git

src/css/g-tabs.css

@@ -0,0 +1,46 @@
+/*
+ * 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;
+  height: 28px;
+  line-height: 28px;
+  border: 0;
+  border-bottom: 1px solid #ccc;
+}
+
+.vertical {
+  display: inline-block;
+  width: 71px;
+  height: 100%;
+  border: 0;
+  border-right: 1px solid #ccc;
+}
+
+.tabContainer > * {
+  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;
+}
+
+.vertical .tabContainer > * {
+  border-radius: 2px 0 0 2px;
+}
+
+.tabContainer > :hover {
+  color: #555;
+}
+
+.tabContainer > .selected {
+  color: #202020;
+  border: 1px solid #ccc;
+}

src/g-selection.html

@@ -8,15 +8,11 @@
 <element name="g-selection" attributes="multi">
   <link rel="components" href="g-component.html">
   <template>
-    <style>
-      @host {
-        display: none;
-      }
-    </style>
   </template>
   <script>
     this.component({
       created: function() {
+        this.style.display = 'none';
         this.clear();
       },
       prototype: {

src/g-tabs.html

@@ -0,0 +1,25 @@
+<!--
+/*
+ * 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-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>
+  </template>
+  <script>
+    this.component({
+      prototype: {
+        verticalChanged: function() {
+          this.classList.enable('vertical', this.vertical);
+        }
+      }
+    });
+  </script>
+</element>

src/g-togglebutton.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-togglebutton" attributes="value" handlers="click: clickHandler">
+<element name="g-togglebutton" attributes="value" handlers="click: toggle">
   <link rel="components" href="g-component.html">
   <link rel="stylesheet" href="css/g-togglebutton.css" />
   <template>
@@ -17,19 +17,12 @@
   </template>
   <script>
     this.component({
-      created: function() {
-        this.valueAttributeChanged();
-      },
       prototype: {
-        valueAttributeChanged: function() {
-          this.$.toggle.classList.enable('on', this.trueValue());
+        valueChanged: function() {
+          this.$.toggle.classList.enable('on', this.value);
         },
-        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);
+        toggle: function() {
+          this.value = !this.value;
         }
         // TODO(ffu): need to add dragging support
       }

test/selection.js

@@ -0,0 +1,75 @@
+/*
+ * 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-selection', function() {
+  var selection;
+  var item = {index: 1, title: 'google'};
+  
+  setup(function() {
+    selection = document.createElement('g-selection');
+  });
+  
+  test('getSelection', function() {
+    selection.select(item);
+    expect(selection.getSelection()).to.be(item);
+  });
+  
+  test('isSelected', function() {
+    selection.select(item);
+    expect(selection.isSelected(item)).to.be(true);
+  });
+  
+  test('deselectItem', function() {
+    selection.select(item);
+    selection.deselectItem(item);
+    expect(selection.isSelected(item)).to.be(false);
+  });
+  
+  test('clear', function() {
+    selection.select(item);
+    selection.clear();
+    expect(selection.isSelected(item)).to.be(false);
+  });
+  
+  test('toggle', function() {
+    selection.toggle(item);
+    expect(selection.isSelected(item)).to.be(true);
+    selection.toggle(item);
+    expect(selection.isSelected(item)).to.be(false);
+  });
+  
+  suite('attributes', function() {
+    test('multi', function() {
+      selection.multi = true;
+      selection.select('foo');
+      selection.select('bar');
+      expect(selection.getSelection()).to.have.length(2);
+      expect(selection.getSelection()).to.contain('foo');
+      expect(selection.getSelection()).to.contain('bar');
+    });
+  });
+  
+  suite('events', function() {
+    test('select', function() {
+      var selected;
+      selection.addEventListener('select', function(e) {
+        selected = e.detail.item;
+      });
+      selection.select(item);
+      expect(selected).to.be(item);
+    });
+    
+    test('deselect', function() {
+      var deselected;
+      selection.addEventListener('deselect', function(e) {
+        deselected = e.detail.item;
+      });
+      selection.select(item);
+      selection.deselectItem(item);
+      expect(deselected).to.be(item);
+    });
+  });
+});

test/selector.js

@@ -0,0 +1,54 @@
+/*
+ * 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-selector', function() {
+  var selector;
+  
+  setup(function() {
+    selector = document.createElement('g-selector');
+    work.appendChild(selector);
+  });
+  
+  teardown(function() {
+    work.textContent = '';
+  });
+  
+  function addItems(inNum) {
+    for (var i=0; i<inNum; i++) {
+      selector.appendChild(document.createElement('div')).textContent = 'item' + i;
+    }
+    ShadowDOM.distribute(selector);
+  }
+  
+  test('getItems', function() {
+    addItems(4);
+    expect(selector.getItems()).to.have.length(4);
+  });
+  
+  test('item textContent', function() {
+    addItems(4);
+    selector.getItems().forEach(function(item, i) {
+      expect(item.textContent).to.be('item'+i);
+    });
+  });
+  
+  suite('attributes', function() {
+    test('selected', function() {
+      addItems(4);
+      selector.selected = 2;
+      expect(selector.getItems()[2].className).to.be('selected');
+    });
+    
+    test('multi', function() {
+      addItems(4);
+      selector.multi = true;
+      selector.selected = 0;
+      selector.selected = 1;
+      expect(selector.getItems()[0].className).to.be('selected');
+      expect(selector.getItems()[1].className).to.be('selected');
+    });
+  });
+});

test/test.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+<html>
+  <head>
+    <title>Mocha Test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <!-- -->
+    <link rel="stylesheet" href="../third_party/mocha/mocha.css" />
+    <script src="../third_party/expect.js/expect.js"></script>
+    <script src="../third_party/mocha/mocha.js"></script>
+    <!-- -->
+    <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+    <link rel="components" href="../src/g-icon.html">
+    <link rel="components" href="../src/g-selection.html">
+    <link rel="components" href="../src/g-selector.html">
+    <link rel="components" href="../src/g-togglebutton.html">
+    <style>
+      #work {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="mocha"></div>
+    <script>
+      mocha.setup({ui: 'tdd'});
+    </script>
+    <!--  -->
+    <div id="work"></div>
+    <script src="icon.js"></script>
+    <script src="selection.js"></script>
+    <script src="selector.js"></script>
+    <script src="togglebutton.js"></script>
+    <!--  -->
+    <script>
+      window.addEventListener('WebComponentsReady', function() {
+        mocha.run();
+      });
+    </script>
+  </body>
+</html>

test/togglebutton.js

@@ -0,0 +1,40 @@
+/*
+ * 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-togglebutton', function() {
+  var togglebutton;
+  
+  setup(function() {
+    togglebutton = document.createElement('g-togglebutton');
+    work.appendChild(togglebutton);
+  });
+  
+  teardown(function() {
+    work.textContent = '';
+  });
+  
+  test('initial value', function() {
+    expect(togglebutton.value).to.not.be.ok();
+  });
+  
+  test('toggle', function() {
+    var t = ShadowDOM.localQuery(togglebutton.shadow, '.toggle');
+    togglebutton.toggle();
+    expect(t.classList.contains('on')).to.be(true);
+    togglebutton.toggle();
+    expect(t.classList.contains('on')).to.be(false);
+  });
+  
+  suite('attributes', function() {
+    test('value', function() {
+      var t = ShadowDOM.localQuery(togglebutton.shadow, '.toggle');
+      togglebutton.value = true;
+      expect(t.classList.contains('on')).to.be(true);
+      togglebutton.value = false;
+      expect(t.classList.contains('on')).to.be(false);
+    });
+  });
+});

workbench/ratings.html

@@ -6,7 +6,7 @@ license that can be found in the LICENSE file.
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Icon</title>
+  <title>Ratings</title>
   <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
   <link rel="components" href="../../toolkit/src/g-ratings.html">
 </head>

workbench/tabs.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tabs</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shadow="shim"></script>
+  <link rel="components" href="../../toolkit/src/g-tabs.html">
+</head>
+<body>
+  <g-tabs>
+    <span>One</span>
+    <span>Two</span>
+    <span>Three</span>
+    <span>Four</span>
+  </g-tabs>
+  <br><br>
+  <g-tabs vertical="true">
+    <span>One</span>
+    <span>Two</span>
+    <span>Three</span>
+    <span>Four</span>
+  </g-tabs>
+</body>
+</html>