New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modify attributes with JavaScript #13

Closed
kris-ellery opened this Issue Sep 8, 2014 · 3 comments

Comments

Projects
None yet
2 participants
@kris-ellery

kris-ellery commented Sep 8, 2014

I like the idea and been playing with it multiple times before. However, always had issues with modifying attributes using JavaScript. Setting or removing attribute nukes its value, unless you have additional methods that might use regex to allow to modify multiple values per attribute. Plus, no toggle support.

It would be nice if we could have:

element.addAttr('am-Button', 'red large rounded'); // add 3 values to single attribute
element.removeAttr('am-Button', 'large'); // remove single value
element.toggleAttr('ui-state', 'disabled'); // toggle value

Thoughts?

@geelen

This comment has been minimized.

Contributor

geelen commented Sep 8, 2014

That's exactly the behaviour of the ClassList api: https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

So it's probably not worth trying to use attributes for toggling states like this - AM works because you the attribute defines what object an element is (like am-Button) and the value defines its variant (like red large rounded). So it wouldn't be the normal case for an element to change object or variant. State, however (like disabled), might change a fair bit, so using classes and classList would probably be the way to go.

The times I've had to do it, I've used angular: e.g. <div am-Button="{{ buttonVariant }}" ui-state="{{ buttonState }}"

@geelen geelen closed this Sep 8, 2014

@kris-ellery

This comment has been minimized.

kris-ellery commented Sep 8, 2014

Right, that's my point. JavaScript already has functionality to modify classes dynamically, which makes it really easy to update UI by toggling classes. In example toggling is-active state on a modal or off-canvas element. In general AMCSS approach is not JavaScript friendly.

@geelen

This comment has been minimized.

Contributor

geelen commented Sep 8, 2014

Yep, I agree. It's not designed to be JavaScript friendly - it's about capturing the styling information of your elements in the most meaningful way, and that information is less likely to need to change with JS. You can always use AMCSS for the stuff that doesn't change and use classes like is-disabled or is-active to capture state.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment