Re: Proposal: getStyleAs(property, primitiveValue)

On Tue, Dec 22, 2009 at 4:53 AM, Giovanni Campagna
<scampa.giovanni@gmail.com> wrote:
> On Tue, Dec 22, 2009 at 10:30 AM, Patrick Garies <pgaries@fastmail.us> wrote:
>> On 9/22/2009 8:08 PM, Garrett Smith wrote:
>>>>
>>>> I also assume that getStyleAs can return a plethora of possible values
>>>> from strings to other interfaces...
>>>>
>>>
>>> I was thinking it would return a string although |asNumber| param
>>> might a possibility:-
>>>
>>> x.getStyleAs("length", "px", "number");
>>>
>>> Returns a number representing the length, in css pixels.
>>

Ah, no, there is no "length" /property/.

How about "width" for an element.

// Read el's computed width, in px, but as a number.
  el.getStyleAs("width", "px", "number");

On second glance, the method returning either string or number is
complex and inconsistent. The extra - valueType - argument is
responsible for this problem. It should be omitted and the method
should return a string. And so that leaves:

  el.getStyleAs("width", "px")

- which is already complicated enough.

This fulfills the goal of reading a computed style.

This does not allow for reading/parsing of numbers, nor does it allow
for value object.

>> For some reason, I'm thinking Travis was wondering what all the types of
>> returnable values are. So far, pixels, integers, and RGBA seem to be covered
>> based upon your examples. |rgb| is also mentioned, but it's not clear if
>> that's a reference to the hexadecimal or functional notation.
>>

The string "rgb" would get an RGB functional notation string

el.getStyleAs("color", "rgb");
=> "rgb(0, 0, 0)";

el.getStyleAs("color", "rgba");
=> "rgba(0,0,0,1)"

el.getStyleAs("color", "#");
=> "#000000"

Other situations will want an Object or number: getStyleObject, getStyleNumber.

var c = el.getStyleObject("color", "rgb");
[c.r, c.g, c.b] + "";
=> "0, 0, 0"

And for the number case, something like:

var c = el.getStyleNumber("color", "rgb");
=> 0

The idea of style.width.px++ wont be compatible with the web today and
2++ would be an error. However, parts of the idea could be used for a
different object.

Another proposal to read computedStyle on an HTMLElement that is not
disconnected, call it "ElementComputedStyle". Example:

el.computedStyle.color+ ""
=> "inherit";

el.computedStyle.color.rgb.r
=> 0

el.computedStyle.width.r
=> undefined

As you can see, the object returned from the css property name varies.
If it is a css length type of property, the object will have a - px -
property. If it is a CSS Color object, it will have an - r- property.

A setter for the computedStyle object would not make sense because it
is a *computed* style.

For setting values on an element, the element's style object could be
used. Example:

el.style.width  = el.computedStyle.width.percent + "%";

Finally, a third idea is "LiveStyle".

LiveStyle mixes computedStyle (for getting), overrideStyle (for
setting), and cascaded style, for default value in toString, into one
object. The object would have a toString function that returns the
*cascaded* style. The LiveStyle interface implements CSS2Properties,
but each CSS2Property of a LiveStyle has a new DynamicStyle properties
that implements CSS2Properties

interface LiveStyle : CSS2Properties {
  string toString()
}

Interface DynamicStyle : CSSStyleDeclaration {
  string toString()
  long valueOf()
}

The properties for a DynamicStyle depend on the property in question.
For RGBColor, an - r - property would be present, but for width, no r
property would be present. For property values that read a
computedStyle and set an overrideStyle. The liveStyle value itself
serializes the cascaded style.

el.liveStyle + "";
=> "color: red; width: auto"

el.liveStyle.width + ""; // cascaded style, as declared.
"auto";

el.liveStyle.width.px; // computed style, in px
=> 10

el.liveStyle.width.px++; // Read computedStyle in px, add 1, and set
override Style, in px
=> 11

el.liveStyle.color;
=> "inherit"

el.liveStyle.color.r += 10;
=> 255

Shorthand properties such as margin, pading, borderWidth, etc add
complexity with multiple CSS value types for both proposals. The
complexity of shorthand properties have to be considered to either
ignore, or consider handling iff is the property takes a length and
all values are equal.

// Shorthand, but risky.
el.style.margin = el.computedStyle.margin + "px";

There are the three proposals.
1) getStyleAs - reads a computed style, returns a string
2) ElementComputedStyle - reads computed style from non-disconnected element.
3) LiveStyle reads cascade style, computed style, sets override style.

Aside from it would be useful to have a standard specify conversion of
ToString for the setter of style property. So that setting a style
property to an object would result in calling the internal ToString
for the assigned value.

// Assign a string value.
el.style.width = "10px"; Standard.

// Proposed:
// Leverage ECMAScript internal [[ToString]]
anotherEl.style.width = { toString: function(){ return "10px"; }};

Garrett

Received on Tuesday, 22 December 2009 20:58:22 UTC