g-selector component and workbench file

2025-02-25 18:55:30 -06:00 · 2012-10-12 18:25:56 -07:00
parent 680c5f0f1e
commit c58db7ee9c
2 changed files with 114 additions and 0 deletions
--- a/src/g-selector.html
+++ b/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>
--- a/workbench/selector.html
+++ b/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>