Skip to content

Commit

Permalink
added array & obj support to attrs.js
Browse files Browse the repository at this point in the history
  • Loading branch information
bsatrom committed May 22, 2013
1 parent cf10031 commit 8bdeba4
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 45 deletions.
10 changes: 5 additions & 5 deletions polymer.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion polymer.min.js.map

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions polymer.native.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion polymer.native.min.js.map

Large diffs are not rendered by default.

78 changes: 47 additions & 31 deletions src/attrs.js
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
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

0 comments on commit 8bdeba4

Please sign in to comment.