Selection buttons

[tombye]

Script to support a specific design of radio buttons and checkboxes wrapped in <label> tags:

<label>
  <input type="radio" name="size" value="medium" />
</label>

The script allows the label styling to reflect the state of the input inside because changes in state cause classes to be added or removed from the parent label. This makes the following styling possible:

Normal state:

Focused state:

Focused and selected state:

A test page is available in the Gist to see the script working in-place. It requires your placing the selection-buttons.js script in the same folder as the page.

https://gist.github.com/tombye/4875fb3ace4f67dfe654

[dsingleton]

Would it be worth including checkboxes in this?

They have the same behaviour in elements, and we'll need to add that at some point. It might be worth doing now, rather than having to shoe-horn in later.

[edds]

Can you add some readme or docs for this. I am not entirely sure what it does.

[tombye]

@dsingleton @edds thanks, good points all. Will include checkboxes and actually explain the thing.

[edds]

setup doesn't feel like a very good name. What does this method actually do?

[tombye]

I tend to split any code that sets up the instance object into:

1. any commands related to the arguments sent into the constructor (which is in the constructor)
2. anything else in a separate method.

Explained that way I suppose it is ambiguous because it represents a container for every other action that needs to be performed around adding properties/methods to the instance.

In this context it's only really doing one thing, querying the DOM to find the radio in the set that's selected so maybe getSelection?

[edds]

The separation is a good thing. Methods named generic things like setup often get used as a dumping ground so are best avoided.

I would possibly go with getSelections because it does it on every element. But getSelection would be perfectly agreeable.