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

added array & obj support to attrs.js (plus refactor) #158

Merged
merged 1 commit into from
Jun 11, 2013
Merged

added array & obj support to attrs.js (plus refactor) #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 deletions polymer.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion polymer.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions polymer.native.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion polymer.native.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

78 changes: 47 additions & 31 deletions src/attrs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
*/

(function() {

// imports

var bindPattern = Polymer.bindPattern;

// constants

var published$ = '__published';
var attributes$ = 'attributes';
var attrProps$ = 'publish';
var attrProps$ = 'publish';
//var attrProps$ = 'attributeDefaults';

var publishAttributes = function(inElement, inPrototype) {
Expand Down Expand Up @@ -83,53 +83,69 @@
}
}
}, this);
};
}

// return the published property matching name, or undefined
function propertyForAttribute(name) {
// matchable properties must be published
var properties = Object.keys(this[published$]);
// search for a matchable property
return properties[properties.map(lowerCase).indexOf(name.toLowerCase())];
};
}

var lowerCase = String.prototype.toLowerCase.call.bind(
String.prototype.toLowerCase);


var typeHandlers = {
'string': function(value) {
return value;
},
'date': function(value) {
return new Date(Date.parse(value) || Date.now());
},
'boolean': function(value) {
if (value === '') {
return true;
}

return value === 'false' ? false : !!value;
},
'number': function(value) {
var floatVal = parseFloat(value);

return (String(floatVal) === value) ? floatVal : value;
},
'object': function(value, defaultValue) {
if (!defaultValue) {
return value;
}

try {
// If the string is an object, we can parse is with the JSON library.
// include convenience replace for single-quotes. If the author omits
// quotes altogether, parse will fail.
return JSON.parse(value.replace(/'/g, '"'));
} catch(e) {
// The object isn't valid JSON, return the raw value
return value;
}
}
};

function deserializeValue(value, defaultValue) {
// attempt to infer type from default value
var inferredType = typeof defaultValue;
if (defaultValue instanceof Date) {
inferredType = 'date';
}
// special handling for inferredTypes
switch (inferredType) {
case 'string':
return value;
case 'date':
return new Date(Date.parse(value) || Date.now());
case 'boolean':
if (value == '') {
return true;
}
}
// unless otherwise typed, convert 'true|false' to boolean values
switch (value) {
case 'true':
return true;
case 'false':
return false;
}
// unless otherwise typed, convert eponymous floats to float values
var float = parseFloat(value);
return (String(float) === value) ? float : value;

return typeHandlers[inferredType](value, defaultValue);
}

// exports

Polymer.takeAttributes = takeAttributes;
Polymer.publishAttributes = publishAttributes;
Polymer.propertyForAttribute = propertyForAttribute;

})();
42 changes: 39 additions & 3 deletions test/html/take-attributes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
<x-zot id="zot3"></x-zot>
<x-zot id="zot4" bool="squid"></x-zot>
<x-zot id="zot5" bool="0"></x-zot>
<x-zot id="zot6" num="185"></x-zot>

<element name="x-date" attributes="value">
<script>
Expand All @@ -72,7 +73,31 @@
<x-date id="date3" value="2014/12/25 11:45"></x-date>
<x-date id="date4" value="2014/12/25 11:45:30"></x-date>
<x-date id="date5" value="2014/12/25 11:45:30:33"></x-date>
<x-date id="dated" value="2014/12/25T11:45:30:33"></x-date>

<element name="x-array" attributes="values">
<script>
Polymer.register(this, {
values: []
});
</script>
</element>

<x-array id="arr1" values="[0, 1, 2]"></x-array>
<x-array id="arr2" values="[33]"></x-array>

<element name="x-obj" attributes="values">
<script>
Polymer.register(this, {
values: {}
});
</script>
</element>

<x-obj id="obj1" values='{ "name": "Brandon", "nums": [1, 22, 33] }'></x-obj>
<x-obj id="obj2" values='{ "color": "Red" }'></x-obj>
<x-obj id="obj3" values="{ 'movie': 'Buckaroo Banzai', 'DOB': '07/31/1978' }"></x-obj>

<script>
var assert = chai.assert;
document.addEventListener('WebComponentsReady', function() {
Expand All @@ -83,7 +108,7 @@
// this one is only 'truthy'
assert.ok(document.querySelector("#foo4").bool);
// this one is also 'truthy', but should it be?
assert.ok(document.querySelector("#foo4").bool);
assert.ok(document.querySelector("#foo5").bool);
//
assert.equal(document.querySelector("#foo0").num, 42);
assert.equal(document.querySelector("#foo0").str, "don't panic");
Expand All @@ -95,7 +120,7 @@
// this one is only 'truthy'
assert.ok(document.querySelector("#bar4").bool);
// this one is also 'truthy', but should it be?
assert.ok(document.querySelector("#bar4").bool);
assert.ok(document.querySelector("#bar5").bool);
//
assert.equal(document.querySelector("#bar0").num, 42);
assert.equal(document.querySelector("#bar0").str, "don't panic");
Expand All @@ -107,20 +132,31 @@
// this one is only 'truthy'
assert.ok(document.querySelector("#zot4").bool);
// this one is also 'truthy', but should it be?
assert.ok(document.querySelector("#zot4").bool);
assert.ok(document.querySelector("#zot5").bool);
//
assert.equal(document.querySelector("#zot0").num, 84);
assert.equal(document.querySelector("#zot6").num, 185);
assert.equal(document.querySelector("#zot0").str, "don't panic");
//
// Date deserialization tests
assert.equal(String(document.querySelector("#date1").value), String(new Date(2014, 11, 25)));
assert.equal(String(document.querySelector("#date2").value), String(new Date(2014, 11, 25)));
assert.equal(String(document.querySelector("#date3").value), String(new Date(2014, 11, 25, 11, 45)));
assert.equal(String(document.querySelector("#date4").value), String(new Date(2014, 11, 25, 11, 45, 30)));
// Failures on Firefox. Need to fix this with custom parsing
//assert.equal(String(document.querySelector("#date5").value), String(new Date(2014, 11, 25, 11, 45, 30)));
//
// milliseconds in the Date string not supported on Firefox
//assert.equal(document.querySelector("#date5").value.getMilliseconds(), new Date(2014, 11, 25, 11, 45, 30, 33).getMilliseconds());
//
// Array deserialization tests
assert.deepEqual(document.querySelector("#arr1").values, [0, 1, 2]);
assert.deepEqual(document.querySelector("#arr2").values, [33]);
// Object deserialization tests
assert.deepEqual(document.querySelector("#obj1").values, { name: 'Brandon', nums: [1, 22, 33] });
assert.deepEqual(document.querySelector("#obj2").values, { "color": "Red" });
assert.deepEqual(document.querySelector("#obj3").values, { movie: 'Buckaroo Banzai', DOB: '07/31/1978' });
//
done();
});
</script>
Expand Down