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

g-selection component and workbench file (our first API only module: component-as-module-pattern)

Browse Source
This commit is contained in:
Scott Miles
2012-10-12 18:23:06 -07:00
parent 1aaf580685
commit e7b47629c1
2 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

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>