All events in a component's event object were being labeled as click/touch events.

[mikermcneil]

thanks! Sorry about the delay.

[mikermcneil]

OK! I went back through and tested everything, and ended up setting it up a bit differently. Now if you want to disable the automatic UI tweaks, just set tweaks: false in your component (for now, there's no way to do it globally-- it should be in the Mast.raise() options eventually)

With tweaks on (default), when an element has a click or touch event, it will receive cursor:pointer and styles to disable text selection when it is initially rendered.

[particlebanana]

Why is Mast concerned with css styles? It shouldn't inline any styles by default.

[mikermcneil]

It's optional sugar- I hate manually applying a no text select mixin in CSS, yeah? And I'm cool with it just adding a class instead, and leaving it up to you to define that, but the "knowing" of whether something has a click event bound or not is something we can't do in just CSS

Mike's phone

On Aug 26, 2013, at 7:59, Cody Stoltman notifications@github.com wrote:

Why is Mast concerned with css styles? It shouldn't inline any styles by default.

— Reply to this email directly or view it on GitHub.

[mikermcneil]

You're right- It was a long night, my judgement slipped

how about it adds a class or attr instead, and then it's up to you how you define it?

Team-wide, I'd like to standardize on a generic boilerplate stylesheet though (I think we're pretty close to it already)

Mike's phone

On Aug 26, 2013, at 7:59, Cody Stoltman notifications@github.com wrote:

Why is Mast concerned with css styles? It shouldn't inline any styles by default.

— Reply to this email directly or view it on GitHub.

[tkh44]

I've fixed the bug in that parse function. If you reopen the pull request I should be able to add it in. It should look like this. https://gist.github.com/tkh44/6343624

[particlebanana]

@mikermcneil the class is a much better solution but whats the deal with the no text select? I can see it maybe on a button but links should always be able to be selected. It seems like a better solution would be to just set it globally in your css file for buttons and other elements that you don't want text selected rather than use Mast to set it.

[mikermcneil]

@tkh44 Taking a look now, thanks!

@particlebanana so it'll add an attribute like data-FRAMEWORK-selectable, which you can then choose to use as you wish (assigning CSS w/ attribute selectors works in ie7+, so this should cover the use case)

[mikermcneil]

Ended up doing this: https://github.com/balderdashy/mast/commit/cb88f922342660192a589cc11b64b8c5e7e115db#L0R8981

So in your CSS, to achieve the same effect as before, you'd put:

/*
Selector to pick out clickable things,
where `framework` is the `id` of your Framework
(e.g. default: `framework`, but you might change it to `ioffice` or `balderdash`)
*/
[data-framework-clickable="true"] {

    /* Disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;

    /* Use hand cursor */
    cursor: pointer;
}

[mikermcneil]

• To disable this behavior globally, set Framework.attrFlags = false
• To disable this behavior for a single component, set attrFlags: false in its definition

@ghernandez345 can you doc this brozone?

[mikermcneil]

See https://github.com/balderdashy/mast/commit/156d4889357d18cd86ea6f53fa65cf8a3944f8fd for changes-- I just updated the above

Here are the corrections:

/*
Selector to pick out clickable things,
where `framework` is the `id` of your Framework
(e.g. default: `framework`, but you might change it to `ioffice` or `balderdash`)
*/
[data-framework-events*="click"] {

    /* Disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;

    /* Use hand cursor */
    cursor: pointer;
}

[mikermcneil]

And in the runtime HTML, it might look like:

<div class="dog" data-framework-events="click touch hover"></div>

Think about it like a way to get runtime access to DOM event status, like more versatile pseudoselectors (e.g. :hover and :active) Just that you're applying CSS rules based on the fact that these events are bound at all, not that they're currently in a particular state.

@rachaelraygun @KallunaLovegood @ghernandez345

[mikermcneil]

One final note-- currently only click and touch are implemented (ie.. just enough to fulfill the previous behavior) Eventually, we could implement the rest of the event bindings (if use cases come up where we need them)

I could see something like [data-framework-events*="scroll"] (detecting whether a scroll event is bound to an element), being used to add some styles, for instance.