Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes #57: attr-for-selected now always expects hyphenated names. #101

Closed
wants to merge 3 commits into from
Closed

Fixes #57: attr-for-selected now always expects hyphenated names. #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
938a126
`attr-for-selected` now always expects hyphenated names (which are au…
bicknellr Jan 29, 2016
5df0b5f
Compute camel case property name from attribute name only on attribut…
bicknellr Jan 29, 2016
938ebec
Copyright headers to new files.
bicknellr Jan 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions attr-for-selected-elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!--
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">

<dom-module id="attr-reflector">
<template>
<div>{{someAttr}}</div>
</template>
<script>
Polymer({
is: 'attr-reflector',

properties: {
someAttr: {
type: String,
value: "",
reflectToAttribute: true
}
}
});
</script>
</dom-module>
29 changes: 23 additions & 6 deletions iron-selectable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,11 @@
properties: {

/**
* If you want to use the attribute value of an element for `selected` instead of the index,
* set this to the name of the attribute.
* If you want to use an attribute value or property of an element for
* `selected` instead of the index, set this to the name of the attribute
* or property. The attribute or property name **must be given in
* hyphenated form**, even if the property is not reflected to an attribute.
* (Always use `attr-or-property-name` instead of `attrOrPropertyName`.)
*/
attrForSelected: {
type: String,
Expand Down Expand Up @@ -280,10 +283,24 @@
}
},

_valueForItem: function(item) {
var propValue = item[this.attrForSelected];
return propValue != undefined ? propValue : item.getAttribute(this.attrForSelected);
},
_valueForItem: (function() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This caching is way broken (static)! Don't merge until I've fixed it!

var lastAttrForSelected = undefined;
var lastPropertyNameForSelected = undefined;

return function(item) {
var attrForSelected = this.attrForSelected;
var propertyNameForSelected = lastPropertyNameForSelected;

if (lastAttrForSelected !== attrForSelected) {
lastAttrForSelected = attrForSelected;
lastPropertyNameForSelected = propertyNameForSelected =
Polymer.CaseMap.dashToCamelCase(attrForSelected);
}

var propValue = item[propertyNameForSelected];
return propValue != undefined ? propValue : item.getAttribute(this.attrForSelected);
};
})(),

_applySelection: function(item, isSelected) {
if (this.selectedClass) {
Expand Down
163 changes: 163 additions & 0 deletions test/attr-for-selected.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!doctype html>
<!--
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<html>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add copyright comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(done)

<head>

<title>iron-selector attr-for-selected</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>

<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
<link rel="import" href="../attr-for-selected-elements.html">

<link rel="import" href="../iron-selector.html">

<style>
.iron-selected {
background: #ccc;
}

.my-selected {
background: red;
}
</style>

</head>
<body>

<test-fixture id="inlineAttributes">
<template>
<iron-selector attr-for-selected="some-attr">
<div some-attr="value0">Item 0</div>
<div some-attr="value1">Item 1</div>
<div some-attr="value2">Item 2</div>
</iron-selector>
</template>
</test-fixture>

<test-fixture id="reflectedProperties">
<template>
<iron-selector attr-for-selected="some-attr">
<attr-reflector>Item 0</attr-reflector>
<attr-reflector>Item 1</attr-reflector>
<attr-reflector>Item 2</attr-reflector>
</iron-selector>
</template>
</test-fixture>

<test-fixture id="mixedPropertiesAndAttributes">
<template>
<iron-selector attr-for-selected="some-attr">
<attr-reflector>Item 0</attr-reflector>
<attr-reflector>Item 1</attr-reflector>
<div some-attr="value2">Item 2</div>
<div some-attr="value3">Item 3</div>
<attr-reflector>Item 4</attr-reflector>
<div some-attr="value5">Item 5</div>
</iron-selector>
</template>
</test-fixture>

<script>
suite('inline attributes', function() {
var selector;
var items;

setup(function () {
selector = fixture('inlineAttributes');
items = Array.prototype.slice.apply(selector.querySelectorAll('div[some-attr]'));
});

test('selecting value programatically selects correct item', function() {
selector.select('value1');
assert.equal(selector.selectedItem, items[1]);
});

test('selecting item sets the correct selected value', function(done) {
MockInteractions.downAndUp(items[2], function() {
assert.equal(selector.selected, 'value2');
done();
});
});
});

suite('reflected properties as attributes', function() {
var selector;
var items;

setup(function () {
selector = fixture('reflectedProperties');
items = Array.prototype.slice.apply(selector.querySelectorAll('attr-reflector'));
for (var i = 0; i < items.length; i++) {
items[i].someAttr = "value" + i;
}
});

test('selecting value programatically selects correct item', function() {
selector.select('value1');
assert.equal(selector.selectedItem, items[1]);
});

test('selecting item sets the correct selected value', function(done) {
MockInteractions.downAndUp(items[2], function() {
assert.equal(selector.selected, 'value2');
done();
});
});
});

suite('mixed properties and inline attributes', function() {
var selector;
var items;

setup(function () {
selector = fixture('mixedPropertiesAndAttributes');
items = Array.prototype.slice.apply(selector.querySelectorAll('attr-reflector, div[some-attr]'));
for (var i = 0; i < items.length; i++) {
items[i].someAttr = "value" + i;
}
});

test('selecting value programatically selects correct item', function() {
for (var i = 0; i < items.length; i++) {
selector.select('value' + i);
assert.equal(selector.selectedItem, items[i]);
}
});

test('selecting item sets the correct selected value', function(done) {
var i = 0;

function testSelectItem(i) {
if (i >= items.length) {
done();
return;
}

MockInteractions.downAndUp(items[i], function() {
assert.equal(selector.selected, 'value' + i);

testSelectItem(i + 1);
});
}

testSelectItem(i);
});
});
</script>

</body>
</html>