From 42368b8a72c4400ec66d5ce23b66f634b28cb23a Mon Sep 17 00:00:00 2001 From: Jonathan Rochkind Date: Wed, 12 Feb 2014 12:04:01 -0500 Subject: [PATCH 1/2] ajax_modal: Combine trigger and preserve selectors ...in one event handler registration, so if something matches both trigger and preserve selectors, it still only gets one event handler call, not two. Fixes #772 Needs to be backported to a 5.0.2 release as a bugfix. --- app/assets/javascripts/blacklight/ajax_modal.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/blacklight/ajax_modal.js b/app/assets/javascripts/blacklight/ajax_modal.js index 9d97ec6225..3f3207b424 100644 --- a/app/assets/javascripts/blacklight/ajax_modal.js +++ b/app/assets/javascripts/blacklight/ajax_modal.js @@ -152,12 +152,17 @@ Blacklight.ajaxModal.setup_modal = function() { $("body").trigger(e); if (e.isDefaultPrevented()) return; - $("body").on("click", Blacklight.ajaxModal.triggerLinkSelector, Blacklight.ajaxModal.modalAjaxLinkClick); - $("body").on("submit", Blacklight.ajaxModal.triggerFormSelector, Blacklight.ajaxModal.modalAjaxFormSubmit); - // preserve selectors apply just within the existing modal - $("body").on("click", Blacklight.ajaxModal.modalSelector + " " + Blacklight.ajaxModal.preserveLinkSelector, Blacklight.ajaxModal.modalAjaxLinkClick); - $("body").on("submit", Blacklight.ajaxModal.modalSelector + " " + Blacklight.ajaxModal.preserveFormSelector, Blacklight.ajaxModal.modalAjaxFormSubmit); + var nestedPreserveLinkSelector = Blacklight.ajaxModal.modalSelector + " " + Blacklight.ajaxModal.preserveLinkSelector; + var nestedPreserveFormSlector = Blacklight.ajaxModal.modalSelector + " " + Blacklight.ajaxModal.preserveFormSelector; + + // 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. + $("body").on("click", Blacklight.ajaxModal.triggerLinkSelector + ", " + nestedPreserveLinkSelector, + Blacklight.ajaxModal.modalAjaxLinkClick); + $("body").on("submit", Blacklight.ajaxModal.triggerFormSelector + ", " + nestedPreserveFormSlector , + Blacklight.ajaxModal.modalAjaxFormSubmit); // Catch our own custom loaded event to implement data-ajax-modal=closed $("body").on("loaded.blacklight.ajax-modal", Blacklight.ajaxModal.check_close_ajax_modal); From 5c9c93975423d1f5ee90ad81e7a1f80bf4693176 Mon Sep 17 00:00:00 2001 From: Jonathan Rochkind Date: Wed, 12 Feb 2014 16:18:40 -0500 Subject: [PATCH 2/2] ajax_modal: ensure preserve selectors properly scoped. since you can list multiple selectors, they each need to be manually listed as scoped inside the dialog, just string-prefixing the ancestor wasn't going to work. Plus better comment docs. --- .../javascripts/blacklight/ajax_modal.js | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/blacklight/ajax_modal.js b/app/assets/javascripts/blacklight/ajax_modal.js index 3f3207b424..3e65f70475 100644 --- a/app/assets/javascripts/blacklight/ajax_modal.js +++ b/app/assets/javascripts/blacklight/ajax_modal.js @@ -83,12 +83,20 @@ if (Blacklight.ajaxModal === undefined) { // a Bootstrap modal div that should be already on the page hidden Blacklight.ajaxModal.modalSelector = "#ajax-modal"; +// Trigger selectors identify forms or hyperlinks that should open +// inside a modal dialog. Blacklight.ajaxModal.triggerLinkSelector = "a[data-ajax-modal~=trigger], a.lightboxLink,a.more_facets_link,.ajax_modal_launch"; Blacklight.ajaxModal.triggerFormSelector = "form[data-ajax-modal~=trigger], form.ajax_form"; -// preserve selectors will be scopied inside the modal only -Blacklight.ajaxModal.preserveLinkSelector = 'a[data-ajax-modal~=preserve]'; -Blacklight.ajaxModal.preserveFormSelector = 'form[data-ajax-modal~=preserve], form.ajax_form'; +// preserve selectors identify forms or 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. +// +// No need to repeat selectors from trigger selectors, those will already +// be preserved. MUST be manually prefixed with the modal selector, +// so they only apply to things inside a modal. +Blacklight.ajaxModal.preserveLinkSelector = Blacklight.ajaxModal.modalSelector + ' a[data-ajax-modal~=preserve]'; +Blacklight.ajaxModal.preserveFormSelector = Blacklight.ajaxModal.modalSelector + 'form[data-ajax-modal~=preserve]' Blacklight.ajaxModal.containerSelector = "[data-ajax-modal~=container]"; @@ -152,16 +160,12 @@ Blacklight.ajaxModal.setup_modal = function() { $("body").trigger(e); if (e.isDefaultPrevented()) return; - // preserve selectors apply just within the existing modal - var nestedPreserveLinkSelector = Blacklight.ajaxModal.modalSelector + " " + Blacklight.ajaxModal.preserveLinkSelector; - var nestedPreserveFormSlector = Blacklight.ajaxModal.modalSelector + " " + Blacklight.ajaxModal.preserveFormSelector; - // 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. - $("body").on("click", Blacklight.ajaxModal.triggerLinkSelector + ", " + nestedPreserveLinkSelector, + $("body").on("click", Blacklight.ajaxModal.triggerLinkSelector + ", " + Blacklight.ajaxModal.preserveLinkSelector, Blacklight.ajaxModal.modalAjaxLinkClick); - $("body").on("submit", Blacklight.ajaxModal.triggerFormSelector + ", " + nestedPreserveFormSlector , + $("body").on("submit", Blacklight.ajaxModal.triggerFormSelector + ", " + Blacklight.ajaxModal.preserveFormSelector, Blacklight.ajaxModal.modalAjaxFormSubmit); // Catch our own custom loaded event to implement data-ajax-modal=closed