Add styleObject filter.

The following expression: {width: '10px', backgroundColor: 'red'} | styleObject is transformed to: 'width: 10px; background-color: red' [email protected] Review URL: https://codereview.appspot.com/14724043
googlearchive · Oct 16, 2013 · 60c6262 · 60c6262
1 parent be2b4e2
commit 60c6262
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 0 deletions.
diff --git a/src/polymer-expressions.js b/src/polymer-expressions.js
@@ -397,6 +397,28 @@
     };
   };
 
+  /**
+   * Converts a style property name to a css property name. For example:
+   * "WebkitUserSelect" to "-webkit-user-select"
+   */
+  function convertStylePropertyName(name) {
+    return String(name).replace(/[A-Z]/g, function(c) {
+      return '-' + c.toLowerCase();
+    });
+  }
+
+  PolymerExpressions.filters.styleObject = function() {
+    return {
+      toDOM: function(value) {
+        var parts = [];
+        for (var key in value) {
+          parts.push(convertStylePropertyName(key) + ': ' + value[key]);
+        }
+        return parts.join('; ');
+      }
+    };
+  };
+
   PolymerExpressions.prototype = {
     prepareBinding: function(pathString, name, node) {
       if (Path.get(pathString).valid)

diff --git a/tests/tests.js b/tests/tests.js
@@ -187,6 +187,64 @@ suite('PolymerExpressions', function() {
     assert.strictEqual('bar bot', target.className);
   });
 
+  test('styleObject', function() {
+    // IE removes invalid style attribute values so we use xstyle in this test.
+
+    var div = createTestHtml(
+        '<template bind>' +
+        '<div xstyle="{{ object | styleObject }}">' +
+        '</div></template>');
+
+    var model = {
+      object: {
+        width: '100px',
+        backgroundColor: 'blue',
+        WebkitUserSelect: 'none'
+      }
+    };
+    recursivelySetTemplateModel(div, model);
+    Platform.performMicrotaskCheckpoint();
+
+    var target = div.childNodes[1];
+    assert.strictEqual(target.getAttribute('xstyle'),
+        'width: 100px; background-color: blue; -webkit-user-select: none');
+
+    model.object = {
+      left: '50px',
+      whiteSpace: 'pre'
+    };
+    Platform.performMicrotaskCheckpoint();
+
+    assert.strictEqual(target.getAttribute('xstyle'),
+        'left: 50px; white-space: pre');
+  });
+
+  test('styleObject2', function() {
+    // IE removes invalid style attribute values so we use xstyle in this test.
+
+    var div = createTestHtml(
+        '<template bind>' +
+        '<div xstyle="{{ {width: w, backgroundColor: bc} | styleObject }}">' +
+        '</div></template>');
+
+    var model = {
+      w: '100px',
+      bc: 'blue'
+    };
+    recursivelySetTemplateModel(div, model);
+    Platform.performMicrotaskCheckpoint();
+
+    var target = div.childNodes[1];
+    assert.strictEqual(target.getAttribute('xstyle'),
+                       'width: 100px; background-color: blue');
+
+    model.w = 0;
+    Platform.performMicrotaskCheckpoint();
+
+    assert.strictEqual(target.getAttribute('xstyle'),
+        'width: 0; background-color: blue');
+  });
+
   test('Named Scope Bind', function() {
     var div = createTestHtml(
         '<template bind>' +