polymer Reusable Modals with Polymer Modals, With Polymer?
Example
Note
I assume you know
What if, we could just have one custom element, say
<tool-bar></tool-bar>
and it magically did everything that messy Modal markup could?
Tempting eh!
How do you specify which Modal belongs to which project?
Simple! just write
<tool-bar modal-id="Project-cats"></tool-bar>
So that reserves the markup with an id of “Project-cats” for the project on cats for example.
How do you write what goes into the modal? simple! Just write your normal markup, wrapped, within the custom tag “”
Like so:
<tool-bar modal-id="Project-cats">
<div class="col-12 modal-desc">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</tool-bar>
Ain’t that simple enough?
And If you are wondering How the complete markup look? Including the share and the fork links, see below.
<div class=row>
<div class="col-12"> <img src="path-to-hero-image"></img></div>
</div>
<div class="row">
<tool-bar
modal-id="Project-cats"
link2-share="http://www.project-cats.com/kitten"
link2-fork="https://github.com/myusername/my-project-cats">
<div class="col-12 modal-desc">
<p> yadda yadda blah blah</p>
</div>
</tool-bar>
</div>
Much better than rewriting the complete div soup eh!
Of course you could shorten it further, and make it completely composible by abstracting the hero image implementation inside the custom element, but let us hold off on that, as a later concern.
