GreenPolyProducts/polymer
5
0
Fork 0
mirror of https://github.com/Polymer/polymer.git synced 2025-02-25 18:55:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9 from sjmiles/master

Browse Source 
add g-selection and g-selector components
This commit is contained in:
Steve Orvell
2012-10-12 18:34:35 -07:00
parent 6b71697272 c58db7ee9c
commit 64dbbce682
5 changed files with 204 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/g-component.html
View File

@@ -66,7 +66,8 @@ license that can be found in the LICENSE file.
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);

62
src/g-selection.html Normal file
View File

@@ -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>

72
src/g-selector.html Normal file
View File

@@ -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>

26
workbench/selection.html Normal file
View File

@@ -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>

42
workbench/selector.html Normal file
View File

@@ -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>