What is the role of Surface{ properties:{} }?

Question

Where does {pointerEvents: 'none'} belong on a Surface?

From the Famo.us University "Timbre" example: http://famo.us/university/famous-102/timbre/24/

function _createIcon() {
    var iconSurface = new ImageSurface({
        size: [this.options.iconSize, this.options.iconSize],
        content : this.options.iconUrl,
        pointerEvents : 'none'
    });

And from: http://famo.us/university/famous-102/timbre/25/

function _createTitle() {
    var titleSurface = new Surface({
        size: [true, true],
        content: this.options.title,
        properties: {
            color: 'white',
            fontSize: this.options.fontSize + 'px',
            textTransform: 'uppercase',
            pointerEvents : 'none'
        }
    });

According to the Surface documentation: http://famo.us/docs/0.2.0/core/Surface
properties: is a

string dictionary of HTML attributes to set on target div

The "PointerEvent Interface" is defined by the W3C
http://www.w3.org/TR/pointerevents/#pointerevent-interface
so it seems appropriate to include it in the properties object.

But, if pointerEvents can be used both inside and outside the properties object, does the properties object have any real meaning? Is the Surface object ultimately just flattened out?

Or do Surface and ImageSurface handle properties differently? I can't tell from the documentation.

Answer 1

Congratulations! You found a bug in famo.us University!

I visited your link and inspected the icon that was meant to have it's pointer events value set. Rather than "none" the value was "auto" (from the base famous-surface CSS class used in famo.us university)

In page 25 of the tutorial pointer-events is in the correct position (within the properties object)

options that are not valid html attributes are simply discounted by the browser. Everything in the properties object is applied to the style attribute of the Surface's

The only difference between an ImageSurface and a normal Surface is that ImageSurface is a <img> and not a <div>

It also has a premade src property to store the url of an image, where with a Surface you would need to write something on the lines of in the content property.

Answer 2

Shu from famo.us here.

Thanks for pointing this out. Kraig, you're right on the money. This has been fixed.