CODEWITHSUNDEEP
javascriptpolymer
dcsan
dcsan

Reputation: 12275

polymer - simple JS to open an overlay

I'm looking at the code for core-overlay demo and trying to extract what I need to open an overlay from JS. I'm really looking for the equivalent of $("#overlay").toggle()

I created an overlay and gave it an ID, but i think maybe that's a naive approach.

html <core-overlay id='overlay'> <h2>Dialog</h2> <input placeholder="say something..." autofocus> <div>I agree with this wholeheartedly.</div> <button core-overlay-toggle>OK</button> </core-overlay>

the docs page gives the markup info and there is a "toggle" event that would open the overlay:

Toggle Toggle the opened state of the overlay

https://www.polymer-project.org/docs/elements/core-elements.html#core-overlay

however, how do I get at the actual overlay object to send this event to it? the demo page is extremely verbose.

there is this:

 Polymer('x-container', {   

    tapHandler: function() {
        this.$.dialog.toggle();
    }
}

but i'm not sure what the this.$.dialog is in that case. does all Polymer related events have to be declaratively setup within it's own little Polymer('x-blahblahblah') block or can i just send events to objects from my own JS code?

Update: this works:

overlay = document.getElementByID("overlay")
overlay.open()

but I'm leaving the question open as I'm sure this is not the "right" way to use polymer. However the examples code seems also extremely verbose, obviously to sit in with some type of auto-generation of demos for their docs. It would be nice to see a lean-and-mean simple JS + polymer demo.

Upvotes: 0

Views: 1257

Answers (1)

jimi dough10
jimi dough10

Reputation: 2016

to call a method of a polymer element that in inside another polymer element you would use this.$.id.method();

example

  <polymer-element name="example-element">
    <template>
       <paper-buton on-tap="{{method1}}">Call Method</paper-button>
       <core-overlay id='overlay'>
         <h2>Dialog</h2>
         <input placeholder="say something..." autofocus>
         <div>I agree with this wholeheartedly.</div>
         <button core-overlay-toggle>OK</button>
       </core-overlay>
    </template>
    <script>
     Polymer({
        method1: function () {
          this.$.overlay.toggle();
        }
     });
    </script>
  </polymer-element>

then to call method1 from your main JS file you would use document.querySelector('example-element').method1(); you could also replace example-element with a id #id

calling the method from main page JS with click handler could look something like

document.querySelector('#button').addEventListener('click', function () { document.querySelector('example-element').method1(); });

the #button id is just a generic id could be anything

Upvotes: 1

Related Questions