are there listeners for show and hide? and dynamically add to toolbar

[emails....@gmail.com]

Hi: 

I'm new to polymer with background in sencha's ext js. 

I'm playing around with the polymer starter kit and 

I'm looking for event listeners that can be triggered when an element is shown and hidden, 

I managed to find created, attached, detached  (i.e. below) but the created and attached is triggered once and that's it. 

I wanted to add buttons dynamically to the toolbar whenever my element is shown, is this possible?

<script>

        (function(){

            Polymer({

                is: 'my-element',

                properties: {

                  

                },

                created: function() {

                    console.log(this.localName + '#' + this.id + ' was created');

                },

                attached: function() {

                    console.log(this.localName + '#' + this.id + ' was attached');

                },

                detached: function() {

                    console.log(this.localName + '#' + this.id + ' was detached');

                }

            });

        })();

    </script>

Thanks 

Juan 

[emails....@gmail.com]

I wanted to add buttons dynamically to the toolbar whenever my element is shown

*** And remove those buttons when my element is hidden ****

, is this possible?

[Eric Bidelman]

There's not a good way to know if/when an element becomes "visible". That goes for native elements like <div> too. It's a limitation of the browser and we desperately need an API for it. However, attached/detached should be called any time an instance of the element is added to the DOM or removed from the DOM. It doesn't have anything to say if the element is actually visible to the user.

What I've done in the past is checked `this.offsetParent !== null` to know if an element isn't part of layout (e.g. `display: none`). However, that doesn't work for cases like `visibility: hidden`. Another option is to apply a css class or boolean html attribute when the action is taken by the user...then show/hide icons accordingly from within your element's css.

Lastly, IronResizableBehavior  is used by some of the elements to know when things becoming "visible".

https://elements.polymer-project.org/elements/iron-resizable-behavior?active=Polymer.IronResizableBehavior

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/15744b6c-ee29-4196-a66b-8e6ee713e235%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.