Modal dialog refinements

This commit is contained in:
Winston Chang
2016-04-05 13:18:00 -05:00
parent e1a955752f
commit ed7b9a9989
4 changed files with 252 additions and 25 deletions

View File

@@ -1,19 +1,29 @@
exports.modal = {
// Show a modal dialog. This is meant to handle two types of cases: one is
// that the content is a Bootstrap modal dialog, and the other is that the
// content is non-Bootstrap. Bootstrap modals require some special handling,
// which is coded in here.
show: function({ html='', deps=[] } = {}) {
// Get existing DOM element for this ID, or create if needed.
// If there was an existing Bootstrap modal, then there will be a modal-
// backdrop div that was added outside of the modal wrapper, and it must be
// removed; otherwise there can be multiple of these divs.
$('.modal-backdrop').remove();
// Get existing wrapper DOM element, or create if needed.
let $modal = $('#shiny-modal-wrapper');
if ($modal.length === 0) {
$modal = $('<div id="shiny-modal-wrapper"></div>');
$('body').append($modal);
}
// When the inner modal is hidden, remove the entire thing, including
// wrapper. This is meant to work with Bootstrap modal dialogs.
$modal.on('hidden.bs.modal', function() {
exports.unbindAll($modal);
$modal.remove();
});
// If the wrapper's content is a Bootstrap modal, then when the inner
// modal is hidden, remove the entire thing, including wrapper.
$modal.on('hidden.bs.modal', function() {
exports.unbindAll($modal);
$modal.remove();
});
}
// Set/replace contents of wrapper with html.
exports.renderContent($modal, { html: html, deps: deps });
@@ -22,14 +32,11 @@ exports.modal = {
remove: function() {
const $modal = $('#shiny-modal-wrapper');
// Look for a Bootstrap modal dialog inside the modal wrapper
const $bsmodal = $modal.find(".modal");
if ($bsmodal.length > 0) {
// If the modal wrapper contains a Bootstrap modal dialog, trigger hide
// event. This will trigger the hidden.bs.modal callback taht we set in
// show(), which unbinds and removes the element.
$bsmodal.modal('hide');
// Look for a Bootstrap modal and if present, trigger hide event. This will
// trigger the hidden.bs.modal callback that we set in show(), which unbinds
// and removes the element.
if ($modal.find('.modal').length > 0) {
$modal.find('.modal').modal('hide');
} else {
// If not a Bootstrap modal dialog, simply unbind and remove it.