intercellular / cell

A self-driving web app framework
https://www.celljs.org
MIT License
1.51k stars 94 forks source link

supporting CSStyleDeclaration style #138

Closed gliechtenstein closed 7 years ago

gliechtenstein commented 7 years ago

This PR adds support for CSSStyleDeclaration type style.

Problem

Previously the style attribute was directly being set as string, which is the intended behavior if style was an ordinary attribute. But it's not. Internally it has its own data structure CSSStyleDeclaration. More discussion on this here https://github.com/intercellular/cell/issues/136

Solution

The solution:

  1. supports an object notation (in addition to the string format) for setting the style.
  2. overrides the getter so that even if the attribute was set as a string it can be retrieved as CSSStyleDeclaration object.

Example:

d = {
  $cell: true,
  $type: 'div',
  $text: 'Send message',
  style: {
    fontFamily: "Courier",
    color: "white",
    padding: "20px",
    backgroundColor: "red"
  }
}

This is same as using the string format:

d = {
  $cell: true,
  $type: 'div',
  $text: 'Send message',
  style: "background-color: yellow; color: white; padding: 20px; font-family: Courier;"
}

Also it can be modified:

d = {
  $cell: true,
  $type: 'div',
  $text: 'Send message',
  style: "background-color: yellow; color: white; padding: 20px; font-family: Courier;",
  onmouseover: function() {
    this.style.backgroundColor = "blue"; // It works!
    this.style.fontFamily = "Arial";
  },
  onmouseout: function() {
    this.style.backgroundColor = "red"; // It works!
    this.style.fontFamily = "Courier";
  }
}

You can play with the fiddle here: https://jsfiddle.net/1y8xfL7j/