Merge pull request #122 from bsatrom/date-attrs

added deserialization of Date attributes for custom elements

src/attrs.js

@@ -62,7 +62,7 @@
   function takeAttributes() {
     // for each attribute
     forEach(this.attributes, function(a) {
-      // try to match this attribute to a property (attributess are
+      // try to match this attribute to a property (attributes are
       // all lower-case, so this is case-insensitive search)
       var name = propertyForAttribute.call(this, a.name);
       if (name) {
@@ -87,15 +87,15 @@
 
   var lowerCase = String.prototype.toLowerCase.call.bind(
       String.prototype.toLowerCase);
-      
+
   // 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())];
   };
-  
+
   function deserializeValue(inValue, inDefaultValue) {
     var inferredType = typeof inDefaultValue;
     if (inferredType === 'string') {
@@ -109,6 +109,11 @@
       case 'false':
         return false;
     }
+
+    if (inDefaultValue instanceof Date) {
+      return new Date(Date.parse(inValue) || Date.now());
+    }
+
     var float = parseFloat(inValue);
     return (String(float) === inValue) ? float : inValue;
   }

test/html/take-attributes.html

@@ -59,6 +59,20 @@
     <x-zot id="zot4" bool="squid"></x-zot>
     <x-zot id="zot5" bool="0"></x-zot>
 
+    <element name="x-date" attributes="value">
+      <script>
+        Toolkit.register(this, {
+          value: new Date()
+        });
+      </script>
+    </element>
+
+    <x-date id="date1" value="2014/12/25"></x-date>
+    <x-date id="date2" value="December 25, 2014"></x-date>
+    <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>
+
   <script>
       var assert = chai.assert;
       document.addEventListener('WebComponentsReady', function() {
@@ -97,6 +111,13 @@
         //
         assert.equal(document.querySelector("#zot0").num, 84);
         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)));
+        assert.equal(document.querySelector("#date5").value.getMilliseconds(), new Date(2014, 11, 25, 11, 45, 30, 33).getMilliseconds());
         //
         done();
       });