diff --git a/app/assets/javascripts/blacklight/modal.js b/app/assets/javascripts/blacklight/modal.js index e3c9a04c59..416824a533 100644 --- a/app/assets/javascripts/blacklight/modal.js +++ b/app/assets/javascripts/blacklight/modal.js @@ -1,40 +1,40 @@ //= require blacklight/core -/* +/* The blacklight modal plugin can display some interactions inside a Bootstrap - modal window, including some multi-page interactions. + modal window, including some multi-page interactions. - It supports unobtrusive Javascript, where a link or form that would have caused + It supports unobtrusive Javascript, where a link that would have caused a new page load is changed to display it's results inside a modal dialog, by this plugin. The plugin assumes there is a Bootstrap modal div on the page with id #blacklight-modal to use as the modal -- the standard Blacklight - layout provides this. + layout provides this. - To make a link or form have their results display inside a modal, add - `data-blacklight-modal="trigger"` to the link or form. (Note, form itself not submit input) + To make a link have its results display inside a modal, add + `data-blacklight-modal="trigger"` to the link. With Rails link_to helper, you'd do that like: link_to something, link, data: { blacklight_modal: "trigger" } - The results of the link href or form submit will be displayed inside - a modal -- they should include the proper HTML markup for a bootstrap modal's + The results of the link href will be displayed inside + a modal -- it should include the proper HTML markup for a bootstrap modal's contents. Also, you ordinarily won't want the Rails template with wrapping navigational elements to be used. The Rails controller could suppress the layout when a JS AJAX request is detected, OR the response can include a `
` -- only the contents of the container will be placed inside the modal, the rest of the - page will be ignored. + page will be ignored. If you'd like to have a link or button that closes the modal, you can just add a `data-dismiss="modal"` to the link, standard Bootstrap convention. But you can also have an href on this link for non-JS contexts, we'll make sure - inside the modal it closes the modal and the link is NOT followed. + inside the modal it closes the modal and the link is NOT followed. - Link or forms inside the modal will ordinarily cause page loads + Links inside the modal will ordinarily cause page loads when they are triggered. However, if you'd like their results to stay within the modal, just add `data-blacklight-modal="preserve"` - to the link or form. + to the link. Here's an example of what might be returned, demonstrating most of the devices available: @@ -43,7 +43,7 @@

Request Placed

- +

Some message

<%= link_to "This result will still be within modal", some_link, data: { blacklight: "preserve" } %> @@ -59,22 +59,22 @@ One additional feature. If the content returned from the AJAX modal load has an element with `data-blacklight-modal=close`, that will trigger the modal to be closed. And if this element includes a node with class "flash_messages", - the flash-messages node will be added to the main page inside #main-flahses. + the flash-messages node will be added to the main page inside #main-flahses. == Events We'll send out an event 'loaded.blacklight.blacklight-modal' with the #blacklight-modal dialog as the target, right after content is loaded into the modal but before - it is shown (if not already a shown modal). In an event handler, you can + it is shown (if not already a shown modal). In an event handler, you can inspect loaded content by looking inside $(this). If you call event.preventDefault(), we won't 'show' the dialog (although it may already have been shown, you may want to - $(this).modal("hide") if you want to ensure hidden/closed. + $(this).modal("hide") if you want to ensure hidden/closed. - The data-blacklight-modal=close behavior is implemented with this event, see for example. + The data-blacklight-modal=close behavior is implemented with this event, see for example. */ -// We keep all our data in Blacklight.modal object. -// Create lazily if someone else created first. +// We keep all our data in Blacklight.modal object. +// Create lazily if someone else created first. if (Blacklight.modal === undefined) { Blacklight.modal = {}; } @@ -82,12 +82,11 @@ if (Blacklight.modal === undefined) { // a Bootstrap modal div that should be already on the page hidden Blacklight.modal.modalSelector = "#blacklight-modal"; -// Trigger selectors identify forms or hyperlinks that should open +// Trigger selector identifies hyperlinks that should open // inside a modal dialog. Blacklight.modal.triggerLinkSelector = "a[data-blacklight-modal~=trigger]"; -Blacklight.modal.triggerFormSelector = "form[data-blacklight-modal~=trigger]"; -// preserve selectors identify forms or hyperlinks that, if activated already +// preserve selectors identify hyperlinks that, if activated already // inside a modal dialog, should have destinations remain inside the modal -- but // won't trigger a modal if not already in one. // @@ -95,7 +94,6 @@ Blacklight.modal.triggerFormSelector = "form[data-blacklight-modal~=trigger]"; // be preserved. MUST be manually prefixed with the modal selector, // so they only apply to things inside a modal. Blacklight.modal.preserveLinkSelector = Blacklight.modal.modalSelector + ' a[data-blacklight-modal~=preserve]'; -Blacklight.modal.preserveFormSelector = Blacklight.modal.modalSelector + ' form[data-blacklight-modal~=preserve]' Blacklight.modal.containerSelector = "[data-blacklight-modal~=container]"; @@ -103,7 +101,7 @@ Blacklight.modal.modalCloseSelector = "[data-blacklight-modal~=close]"; // Called on fatal failure of ajax load, function returns content // to show to user in modal. Right now called only for extreme -// network errors. +// network errors. Blacklight.modal.onFailure = function(data) { var contents = "
" + "
Network Error
" + @@ -111,19 +109,19 @@ Blacklight.modal.onFailure = function(data) { ' ' + ''; $(Blacklight.modal.modalSelector).find('.modal-content').html(contents); - $(Blacklight.modal.modalSelector).modal('show'); + $(Blacklight.modal.modalSelector).modal('show'); } -Blacklight.modal.receiveAjax = function (data) { +Blacklight.modal.receiveAjax = function (data) { if (data.readyState == 0) { - // Network error, could not contact server. + // Network error, could not contact server. Blacklight.modal.onFailure(data) } else { var contents = data.responseText; - + // does it have a data- selector for container? - // important we don't execute script tags, we shouldn't. + // important we don't execute script tags, we shouldn't. // code modelled off of JQuery ajax.load. https://github.com/jquery/jquery/blob/master/src/ajax/load.js?source=c#L62 var container = $("
"). append( jQuery.parseHTML(contents) ).find( Blacklight.modal.containerSelector ).first(); @@ -139,7 +137,7 @@ Blacklight.modal.receiveAjax = function (data) { // if they did preventDefault, don't show the dialog if (e.isDefaultPrevented()) return; - $(Blacklight.modal.modalSelector).modal('show'); + $(Blacklight.modal.modalSelector).modal('show'); } }; @@ -155,43 +153,26 @@ Blacklight.modal.modalAjaxLinkClick = function(e) { jqxhr.always( Blacklight.modal.receiveAjax ); }; -Blacklight.modal.modalAjaxFormSubmit = function(e) { - e.preventDefault(); - - var jqxhr = $.ajax({ - url: $(this).attr('action'), - data: $(this).serialize(), - type: $(this).attr('method'), //POST', - dataType: 'script' - }); - - jqxhr.always(Blacklight.modal.receiveAjax); -} - - - Blacklight.modal.setup_modal = function() { // Event indicating blacklight is setting up a modal link, // you can catch it and call e.preventDefault() to abort - // setup. + // setup. var e = $.Event('setup.blacklight.blacklight-modal'); $("body").trigger(e); if (e.isDefaultPrevented()) return; // Register both trigger and preserve selectors in ONE event handler, combining // into one selector with a comma, so if something matches BOTH selectors, it - // still only gets the event handler called once. + // still only gets the event handler called once. $("body").on("click", Blacklight.modal.triggerLinkSelector + ", " + Blacklight.modal.preserveLinkSelector, Blacklight.modal.modalAjaxLinkClick); - $("body").on("submit", Blacklight.modal.triggerFormSelector + ", " + Blacklight.modal.preserveFormSelector, - Blacklight.modal.modalAjaxFormSubmit); // Catch our own custom loaded event to implement data-blacklight-modal=closed $("body").on("loaded.blacklight.blacklight-modal", Blacklight.modal.check_close_modal); // we support doing data-dismiss=modal on a with a href for non-ajax // use, we need to suppress following the a's href that's there for - // non-JS contexts. + // non-JS contexts. $("body ").on("click", Blacklight.modal.modalSelector + " a[data-dismiss~=modal]", function (e) { e.preventDefault(); }); @@ -199,7 +180,7 @@ Blacklight.modal.setup_modal = function() { // A function used as an event handler on loaded.blacklight.blacklight-modal // to catch contained data-blacklight-modal=closed directions -Blacklight.modal.check_close_modal = function(event) { +Blacklight.modal.check_close_modal = function(event) { if ($(event.target).find(Blacklight.modal.modalCloseSelector).length) { modal_flashes = $(this).find('.flash_messages'); @@ -208,10 +189,10 @@ Blacklight.modal.check_close_modal = function(event) { main_flashes = $('#main-flashes'); main_flashes.append(modal_flashes); - modal_flashes.fadeIn(500); + modal_flashes.fadeIn(500); } } -Blacklight.onLoad(function() { +Blacklight.onLoad(function() { Blacklight.modal.setup_modal(); });