Dialogs: Move click handler from templates to JS

[jdlrobson]

Description

From now on simply adding a class .floaterShut to an element will make it close an open dialog.
.floaterShut--parent will request the parent element closes it.

Previously we did this via inline JavaScript which made it really hard to determine which pages should run this code. Having it in a central place also allows us in future to defer the loading of jquery ui off the critical path. This is the most simple first step!

Testing

Visit http://localhost:8080/works/OL53924W/The_complete_works_of_Mark_Twain#addImage and click "change cover". The close icon should close the dialog

[cdrini]

Overall looks good; some naming things/introducing duplicate code. I know you have dependent commits on this, so if it's easier, you can put these changes in new commits on your WIP branch and I can review that. If anything requires a ton of rebasing of your other PR, PLEASE LET ME KNOW! We can just do it there.

[jdlrobson]

Are you okay for me to do the remaining changes as follow ups? I should have some time available tomorrow to do that as well as get #2423 ready.

[cdrini]

That seems good to me. Are you going to put them on top of your WIP PR?

[jdlrobson]

I've got a new patchset locally that ill push when this is merged.

[jdlrobson]

Okay, given it's not merged I'll temporary submit to my WIP branch. When it's merged I'll split that into reviewable separate pull requests.

[jdlrobson]

For completeness the follow ups are in 00a4db2

I can push a pull request tomorrow if this one is merged tonight/tomorrow

[cdrini]

Tested:

• ✅ Book cover popup close http://192.168.99.100:8080/books/OL24755423M/Odyssey_book_iv
• ✅ Add book cover popup closes http://192.168.99.100:8080/books/OL24755423M/Odyssey_book_iv
• ✅ Add author photo popup closes http://192.168.99.100:8080/authors/OL6848355A/Homer
• ✅ Check preview popup closes (copydocs, then http://192.168.99.100:8080/books/OL24381130M/The_Lion_the_Witch_and_the_Wardrobe )
• ✅ No occurrences of colorbox.close in HTML attributes

[cdrini]

Oh, whoops, missed the other commits on here. My apologies for the delay; I had weekend plans and wasn't able to finish this before heading out of town.

[jdlrobson]

Can we rename href to dialogSelector? href makes it seem like it could be an arbitrary link.

@cdrini The name href is used for consistency with the colorbox plugin which is called href (http://www.jacklmoore.com/colorbox/) According to the docs: "This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. $("h1").colorbox({href:"welcome.html"});" I'd thus like us to use href too. It also means the code is less verbose as the parameter can be used as the key name and value name. Would better docs in this doc tag help?

[jdlrobson]

Sorry for confusion let's move discussion about clickHander

Oh, whoops, missed the other commits on here. My apologies for the delay; I had weekend plans and wasn't able to finish this before heading out of town.

Sorry for confusion that wasn't intentional. We can continue the discussions on #2423 once this is merged.