Grouped checkboxes

[Mohsen Azimi]

Hi,

I just started using Polymer. It's great and easy to pick up. My first element is a grouped checkbox. Like ones that exist in native platforms. There is a "select all" checkbox that select all options. 

Here is my element: 

http://jsbin.com/cogowopu/1/edit

I have three questions:

1. Is it recommended to use native HTML elements in our elements? If so, how we can make a modified version of them? In this case, I need a checkbox that supports "some checked" statue. (usually a solid square inside of it). I want to use the CSS that defines checkbox appearance so I can make my modified version looks like native ones in each platform. Where can I get that CSS?

2. Why event.target is replaced with event.srcElement? What is event.target now?

3. How can I avoid using "that"?

[Mohsen Azimi]

To make it clear by what I mean by "some checked" I've implemented it. In this sample, if you check some of the checkboxes, all checkbox will show "some selected" status:

http://jsbin.com/cogowopu/2/edit

[Steve Orvell]

Nice element. Here are some answers to your questions:

 

1. Is it recommended to use native HTML elements in our elements? If so, how we can make a modified version of them?

It depends. If a native element serves the need, use it. In this case, the 'partially checked' feature that you want isn't supported by the native version so it may not be a good fit.

 2. Why event.target is replaced with event.srcElement? What is event.target now?

The event.target is not replaced and it is correct. You should use the target property instead of the non-standard srcElement property. Events are re-targeted by ShadowDOM and this is why checking the 'all' checkbox doesn't give you that element in the event's target property when you listen on the grouped-checkbox element. There's more info here: http://www.polymer-project.org/platform/shadow-dom.html. I recommend listening on the 'group' div and the 'all' checkbox separately.

3. How can I avoid using "that"?

Polymer supports declarative event handlers. See the Declarative events section here: http://www.polymer-project.org/docs/polymer/polymer.html.

 

One other comment: it's improper to query the element's children in the ready method. At this time, the element is not guaranteed to have any children. Also, the set of children is dynamic. In this case, it's probably best simply to query the children when the 'all' checkbox is checked.

Sometimes, you need to do some processing on an element's children. As of polymer, 0.2, we've included a 'domReady' method which is called at a time when the element's initial set of children are guaranteed to exist. To handle dynamically added/removed children, a mutation observer should be used.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a07ad24f-36d9-46a4-aa17-a44e45833ac8%40googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

[Erik Arvidsson]

On Mon, Mar 3, 2014 at 9:54 AM, Steve Orvell <sor...@google.com> wrote:

Nice element. Here are some answers to your questions:

 

1. Is it recommended to use native HTML elements in our elements? If so, how we can make a modified version of them?

It depends. If a native element serves the need, use it. In this case, the 'partially checked' feature that you want isn't supported by the native version so it may not be a good fit.

FYI. Indeterminate checkboxes is part of HTML. The indeterminate state needs to be set through script.

http://jsbin.com/ximahenu/1/edit

 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZgni8233YDRmqQG1pg3wMQeFMyhGg5n_pXc_u4%3DeoQ71Q%40mail.gmail.com.

For more options, visit https://groups.google.com/groups/opt_out.

--
erik

[Mohsen Azimi]

Thank for you comments. I've updated my element. Now I'm using your advice to make it better. 

Couple of issues:

1. domReady doesn't seem to work. When I put a breakpoint inside a domReady method it doesn't stop there.

2. When clicking on "all" checkbox, this.$.group.innerHTML is "<content></content>". I can't see my checkboxes.

Could you please review my code again?

On Sunday, March 2, 2014 3:25:52 PM UTC-8, Mohsen Azimi wrote:

[Mohsen Azimi]

Opps! I forgot to paste new code. Here it is:

http://jsbin.com/cogowopu/5/edit

[Scott Miles]

http://jsbin.com/cogowopu/6/edit

I believe Steve already explained most of what I did here. Please follow up if there is something you don't understand.

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f1ec3676-8f7d-4054-97d9-7d83c86d5041%40googlegroups.com.

[Mohsen Azimi]

Scott, that is brilliant! I love the binary logic you've added. For using attributes it seems that I'm missing something. In this example I tried using a "label" optional attribute for putting a label on "all" checkbox. But it didn't seem to work the way I was expecting. It's picking up default attribute no matter if I pass the label attribute or not. I followed this example for using attributes.

[Scott Miles]

You need to declare attributes. The easiest way is by setting `attributes` on the `polymer-element` see here:

http://jsbin.com/cogowopu/9/edit

Other notes:

 - I forgot to mention that I loaded a newer version of polymer than in your original example

 - the `style` tag should be inside the `<template>`

Scott

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/175d5b8e-5a4d-4d90-8a86-7953331391ba%40googlegroups.com.