projectblacklight/blacklight — pull request #657 by jrochkind (2013-12-17 18:36:15+00:00)
Title: Enhanced ajax modal

The current/previous Bootstrap modal ajaxy dialog stuff is very nice, simple code that gets the job done. I needed a few more features for my local app; I tried to add them in such a way that still kept the code simple, while making things much more flexible.

It did end up being a fairly major refactor, step by step, although it's behavior should be backwards compatible.

* Made the primary selectors for modal dialog behavior be based on data-* attributes. In line with modern best practices for html/js integration, and makes it easy to apply modal ajax behavior to your custom code just by dropping in the data attributes. Old selectors are still there though (with one exception that caused problems for my local app by being too broad).
* Made the event handlers use a single JQuery `on` attached to body, instead of attached directly to each individual `` or `

`. Allows for simpler code, theoretically higher performance (prob doesn't matter), and also makes it a lot easier for ajax modal behavior to be given to things added to the DOM by JS.
* Added support for a `data-ajax-modal="container"` to specify a sub-part of the page to be popped into modal when returned from Ajax, instead of whole thing. (Avoids need to turn off layout for xhr if you want, although you still can)
* Added an event sent by this plugin on content load `loaded.blacklight.ajax-modal`. The `data-ajax-modal=close` stuff is now implemented in terms of this event, but the event is also available for custom local behavior (I needed it).
* Bootstrap modal already supports `data-dismiss=modal` on an a/button to close the modal; but if it's on an `a` that also has an `href`, weird undesirable things happen. I wanted to be able to do this to have ``s that worked in both non-js and js-modal environments. Added a listener to preventDefault on ``s with `data-dismiss-modal`
* generally refactored for DRY
* Added comment docs at top of file
* Changed name of file from lightbox_dialog.js to ajax_modal.js

An additional step which I did *not* take would be turning this into an actual JQuery plugin. Would make some aspects of the code simpler, other parts somewhat harder to read maybe. I wasn't sure it was worth it, although can do it if people want it.

Feedback welcome!