add g-selection and g-selector components

src/g-component.html

@@ -66,7 +66,8 @@
 
       var establishNodeReferences = function(inRoot) {
         this.$ = this.$ || {};
-        var nodes = inRoot.querySelectorAll("[id]");
+        // search the LOCAL tree
+        var nodes = ShadowDom.localQueryAll(inRoot, "[id]");
         Array.prototype.forEach.call(nodes, function(n) {
           this.$[n.id] = deref(n);
         }, this);

src/g-selection.html

@@ -0,0 +1,62 @@
+<!--
+/*
+ * 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-selection">
+  <link rel="components" href="g-component.html">
+  <template>
+    <style>
+      @host {
+        display: none;
+      }
+    </style>
+  </template>
+  <script>
+    this.component({
+      created: function() {
+        this.multi = false;
+        this.selection = [];
+      },
+      prototype: {
+        getSelection: function() {
+          return this.multi ? this.selection : this.selection[0];
+        },
+        isSelected: function(inItem) {
+          return this.selection.indexOf(inItem) >= 0;
+        },
+        select: function(inItem) {
+          if (this.multi) {
+            this.toggle(inItem);
+          } else {
+            this.deselect(this.getSelection());
+            this._select(inItem);
+          }
+        },
+        dispatchSelectEvent: function(inType, inItem) {
+          return this.dispatchEvent(new CustomEvent(inType, 
+            {bubbles: true, detail: {item: inItem}}));
+        },
+        _select: function(inItem) {
+          this.selection.push(inItem);
+          this.dispatchSelectEvent("select", inItem);
+        },
+        deselect: function(inItem) {
+          var i = this.selection.indexOf(inItem);
+          if (i >= 0) {
+            this.selection.splice(i, 1);
+            this.dispatchSelectEvent("deselect", inItem);
+          }
+        },
+        toggle: function(inItem) {
+          this[this.isSelected(inItem) ? 'deselect' : '_select'](inItem);
+        },
+        clear: function() {
+          this.selection.splice(0);
+        }
+      }
+    });
+  </script>
+</element>

src/g-selector.html

@@ -0,0 +1,72 @@
+<!--
+/*
+ * 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-selector" attributes="selected" handlers="click: clickHandler">
+  <link rel="components" href="g-component.html">
+  <link rel="components" href="g-selection.html">
+  <template>
+    <content id="items" select="*"></content>
+  </template>
+  <script>
+    this.component({
+      created: function() {
+        var s = this.selection = document.createElement("g-selection");
+        s.addEventListener("select", this.select.bind(this));
+        s.addEventListener("deselect", this.deselect.bind(this));
+        s.multi = this.hasAttribute('multi');
+        this.selectedAttributeChanged();
+      },
+      prototype: {
+        getItems: function() {
+          return this.$.items.distributedNodes;
+        },
+        indexOfSelected: function(inSelected) {
+          var items = this.getItems();
+          for (var i=0, c; c=items[i]; i++) {
+            if (c.value && c.value == inSelected) {
+              return i;
+            }
+          }
+          return inSelected;
+        },
+        getSelectedItem: function() {
+          return (this.getItems())[this.indexOfSelected(this.selected)];
+        },
+        selectedAttributeChanged: function() {
+          var s = this.getSelectedItem();
+          if (s != null) {
+            this.selection.select(s);
+          }
+        },
+        select: function(e) {
+          e.detail.item.classList.add('selected');
+        },
+        deselect: function(e) {
+          e.detail.item.classList.remove('selected');
+        },
+        clickHandler: function(evt) {
+          var n = evt.target;
+          while (n && n != this) {
+            var i = this.indexOfItem(n);
+            if (i != undefined) {
+              this.selected = n.value || i;
+              break;
+            }
+            n = n.parentNode;
+          }
+        },
+        indexOfItem: function(inItem) {
+          for (var i=0, items=this.getItems(), c; c=items[i]; i++) {
+            if (c == inItem) {
+              return i;
+            }
+          }
+        }
+      }
+    });
+  </script>
+</element>

workbench/selection.html

@@ -0,0 +1,26 @@
+<!--
+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>Selection</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
+  <link rel="components" href="../../toolkit/src/g-selection.html">
+</head>
+<body>
+  <g-selection></g-selection>
+  <script>
+    window.addEventListener('WebComponentsReady', function() {
+      // g-selection provides a code module, not rendering
+      var s = document.querySelector("g-selection");
+      s.addEventListener("select", function(inEvent, inItem) {
+        console.log("selected", arguments);
+      });
+      s.select({});
+    });
+  </script>
+</body>
+</html>

workbench/selector.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Selector</title>
+  <script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
+  <link rel="components" href="../../toolkit/src/g-selector.html">
+  <style>
+    g-selector {
+      display: block;
+      border: 1px solid #ccc;
+      border-bottom: none;
+    }
+    g-selector > * {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 20px;
+      border-bottom: 1px solid #ccc;
+    }
+    g-selector > .selected {
+      background: #eee;
+    }
+  </style>
+</head>
+<body>
+  <h2>Single-select</h2>
+  <g-selector>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+  </g-selector>
+  <h2>Multi-select</h2>
+  <g-selector multi>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+  </g-selector>
+</body>
+</html>