Add assetStringify for asset based properties (#5544)

Author: mrxz

src/core/propertyTypes.js

@@ -8,18 +8,18 @@ var nonCharRegex = /[,> .[\]:]/;
 var urlRegex = /url\((.+)\)/;
 
 // Built-in property types.
-registerPropertyType('audio', '', assetParse);
+registerPropertyType('audio', '', assetParse, assetStringify);
 registerPropertyType('array', [], arrayParse, arrayStringify, arrayEquals);
-registerPropertyType('asset', '', assetParse);
+registerPropertyType('asset', '', assetParse, assetStringify);
 registerPropertyType('boolean', false, boolParse);
 registerPropertyType('color', '#FFF');
 registerPropertyType('int', 0, intParse);
 registerPropertyType('number', 0, numberParse);
-registerPropertyType('map', '', assetParse);
-registerPropertyType('model', '', assetParse);
+registerPropertyType('map', '', assetParse, assetStringify);
+registerPropertyType('model', '', assetParse, assetStringify);
 registerPropertyType('selector', null, selectorParse, selectorStringify, defaultEquals, false);
 registerPropertyType('selectorAll', null, selectorAllParse, selectorAllStringify, arrayEquals, false);
-registerPropertyType('src', '', srcParse);
+registerPropertyType('src', '', srcParse, assetStringify);
 registerPropertyType('string', '');
 registerPropertyType('time', 0, intParse);
 registerPropertyType('vec2', {x: 0, y: 0}, vecParse, coordinates.stringify, coordinates.equals);
@@ -121,6 +121,19 @@ function assetParse (value) {
   return value;
 }
 
+function assetStringify (value) {
+  if (value.getAttribute) {
+    var id = value.getAttribute('id');
+    if (id) {
+      return '#' + value.getAttribute('id');
+    }
+    // HTMLElement without id can not be stringified, as there is no string assetParse
+    // could convert back to this exact element, using the src attribute instead.
+    return value.getAttribute('src');
+  }
+  return defaultStringify(value);
+}
+
 function defaultParse (value) {
   return value;
 }

tests/core/propertyTypes.test.js

@@ -9,6 +9,7 @@ var register = PropertyTypes.registerPropertyType;
 suite('propertyTypes', function () {
   suite('asset', function () {
     var parse = propertyTypes.asset.parse;
+    var stringify = propertyTypes.asset.stringify;
 
     setup(function () {
       var el = this.el = document.createElement('div');
@@ -52,6 +53,18 @@ suite('propertyTypes', function () {
       this.el.appendChild(video);
       assert.equal(parse('#foo'), video);
     });
+
+    test('stringifies to id', function () {
+      var video = document.createElement('video');
+      video.setAttribute('id', 'foo');
+      assert.equal(stringify(video), '#foo');
+    });
+
+    test('stringifies to src if no id available', function () {
+      var video = document.createElement('video');
+      video.setAttribute('src', '/some-url');
+      assert.equal(stringify(video), '/some-url');
+    });
   });
 
   suite('boolean', function () {