polymer Reusable Modals with Polymer Modals

Example

So you want to add material design to your business or career portfolio.huh? You Just can not resist using a Modal? which pops upon a click on those crisp cards you intend to design, for each of your projects/products!

Let us say, for each project, you have done, or for each product you have designed, you need a material card.Each such card should have

• An icon, that pops up an info box, that lists all the features of
• your product or project, in detail. A “share this” icon, that shares
• your product or project across social media A “fork this” icon, that opens up the github page for your product/project

With native html, and assuming you use bootstrap or any other flex box layout, you would need to

• Write a wrapper div for each new project with a class row
• Wrap your hero image for each project in a column 12 cols wide
• Write Another row
• Wrap each link( info | share | fork) in a column 4 cols wide of its own
• Inject these two rows in to a container

For starters. Once you have done the above for all your projects, you need to work on creating the required pop up for each project.So,

• You download tons of javascript and css (by customizing bootstrap for modal functionality)
• You write a Modal with a unique id, to differentiate each project’s info(modal- P1 for Project 1, modal-P2 for Project 2 and so on)
• You then compose the html required, to display information for each project, in its corresponding Modal.

What are our goals?

Just to reiterate, visually, If you have two projects in your portfolio, the goal is to have cards like so:

So we have two concerns for EACH Project

• The hero image
• The tool bar with info(Pops up a Modal),share and fork links

First, Let us tackle what happens when a user clicks on the info link in the bar below each project.We need a Modal to pop up, with more info about the project.

So How exactly do you configure a Modal with bootstrap?

• You write this to trigger it, for each project

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myProject1"><img src="path-to-info-icon"></img></button>

• You then write the body of the Modal like so:

<div id="myProject1" class="modal fade" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal"></button>
                 <h4 class="modal-title">Project Title</h4>
             </div>
             <div class="modal-body">
                 <p>Some text in the modal.</p>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
</div>

and depending on the content and the length of your Project Description, You actually get a little lost monitoring the opening and closing of a div soup above in the body of the Modal!

Plus, That markup is downright tedious to compose EVERYTIME you need a modal.

Phew! And did it end there? No. You still need to write for each project,

• The Project card’s hero image,that is displayed above the tool bar.

So How do we add the hero image for each project? MORE html!

The hero image needs

• A row of its own
• A column 12 cols wide of its own inside that row

How would the complete html look for us to display one project as a card shown above?

<article id="project-neighbourhood">
 
    <div class="row">
 
        <div class="col-12">
 
            <img src="path-to-hero-image"></img>
 
        </div>
 
    </div>
 
    <div class="row">
 
        <div class="col-12">
            <div class="row">
                <div class="col-4">
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myProject1"><img src="path-to-info-icon"></img></button>
                </div>
                <div class="col-4">
                    <button class="btn btn-lg" id="share-on-g-plus"><img src="path-to-share-icon"></img></button>
                </div>
                <div class="col-4">
                    <button class="btn btn-lg" id="fork"><img src="path-to-fork-icon"></img></button>
                </div>
             </div> 
        </div> 
    </div> 
</article> 

Now say you have 10 projects to show off! You need to rewrite that messy markup 10 times! Plus 10 different Modals!

I do not have patience to rewrite that html, and 10 Modals, and I know you dont too!