mirror of
https://github.com/moodle/moodle.git
synced 2025-07-19 21:31:32 +02:00
782 lines
24 KiB
JavaScript
782 lines
24 KiB
JavaScript
// This file is part of Moodle - http://moodle.org/
|
|
//
|
|
// Moodle is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
//
|
|
// Moodle is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU General Public License for more details.
|
|
//
|
|
// You should have received a copy of the GNU General Public License
|
|
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
/**
|
|
* Contain the logic for modals.
|
|
*
|
|
* @module core/modal
|
|
* @class modal
|
|
* @package core
|
|
* @copyright 2016 Ryan Wyllie <ryan@moodle.com>
|
|
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
|
*/
|
|
define(['jquery', 'core/templates', 'core/notification', 'core/key_codes',
|
|
'core/custom_interaction_events', 'core/modal_backdrop', 'core/event', 'core/modal_events'],
|
|
function($, Templates, Notification, KeyCodes, CustomEvents, ModalBackdrop, Event, ModalEvents) {
|
|
|
|
var SELECTORS = {
|
|
CONTAINER: '[data-region="modal-container"]',
|
|
MODAL: '[data-region="modal"]',
|
|
HEADER: '[data-region="header"]',
|
|
TITLE: '[data-region="title"]',
|
|
BODY: '[data-region="body"]',
|
|
FOOTER: '[data-region="footer"]',
|
|
HIDE: '[data-action="hide"]',
|
|
DIALOG: '[role=dialog]',
|
|
FORM: 'form',
|
|
MENU_BAR: '[role=menubar]',
|
|
HAS_Z_INDEX: '.moodle-has-zindex',
|
|
CAN_RECEIVE_FOCUS: 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]',
|
|
};
|
|
|
|
var TEMPLATES = {
|
|
LOADING: 'core/loading',
|
|
BACKDROP: 'core/modal_backdrop',
|
|
};
|
|
|
|
/**
|
|
* Module singleton for the backdrop to be reused by all Modal instances.
|
|
*/
|
|
var backdropPromise;
|
|
|
|
/**
|
|
* A counter that gets incremented for each modal created. This can be
|
|
* used to generate unique values for the modals.
|
|
*/
|
|
var modalCounter = 0;
|
|
|
|
/**
|
|
* Constructor for the Modal.
|
|
*
|
|
* @param {object} root The root jQuery element for the modal
|
|
*/
|
|
var Modal = function(root) {
|
|
this.root = $(root);
|
|
this.modal = this.root.find(SELECTORS.MODAL);
|
|
this.header = this.modal.find(SELECTORS.HEADER);
|
|
this.title = this.header.find(SELECTORS.TITLE);
|
|
this.body = this.modal.find(SELECTORS.BODY);
|
|
this.footer = this.modal.find(SELECTORS.FOOTER);
|
|
this.hiddenSiblings = [];
|
|
this.isAttached = false;
|
|
this.bodyJS = null;
|
|
this.footerJS = null;
|
|
this.modalCount = modalCounter++;
|
|
|
|
if (!this.root.is(SELECTORS.CONTAINER)) {
|
|
Notification.exception({message: 'Element is not a modal container'});
|
|
}
|
|
|
|
if (!this.modal.length) {
|
|
Notification.exception({message: 'Container does not contain a modal'});
|
|
}
|
|
|
|
if (!this.header.length) {
|
|
Notification.exception({message: 'Modal is missing a header region'});
|
|
}
|
|
|
|
if (!this.title.length) {
|
|
Notification.exception({message: 'Modal header is missing a title region'});
|
|
}
|
|
|
|
if (!this.body.length) {
|
|
Notification.exception({message: 'Modal is missing a body region'});
|
|
}
|
|
|
|
if (!this.footer.length) {
|
|
Notification.exception({message: 'Modal is missing a footer region'});
|
|
}
|
|
|
|
this.registerEventListeners();
|
|
};
|
|
|
|
/**
|
|
* Add the modal to the page, if it hasn't already been added. This includes running any
|
|
* javascript that has been cached until now.
|
|
*
|
|
* @method attachToDOM
|
|
*/
|
|
Modal.prototype.attachToDOM = function() {
|
|
if (this.isAttached) {
|
|
return;
|
|
}
|
|
|
|
$('body').append(this.root);
|
|
|
|
// If we'd cached any JS then we can run it how that the modal is
|
|
// attached to the DOM.
|
|
if (this.bodyJS) {
|
|
Templates.runTemplateJS(this.bodyJS);
|
|
this.bodyJS = null;
|
|
}
|
|
|
|
if (this.footerJS) {
|
|
Templates.runTemplateJS(this.footerJS);
|
|
this.footerJS = null;
|
|
}
|
|
|
|
this.isAttached = true;
|
|
};
|
|
|
|
/**
|
|
* Count the number of other visible modals (not including this one).
|
|
*
|
|
* @method countOtherVisibleModals
|
|
* @return {int}
|
|
*/
|
|
Modal.prototype.countOtherVisibleModals = function() {
|
|
var count = 0;
|
|
$('body').find(SELECTORS.CONTAINER).each(function(index, element) {
|
|
element = $(element);
|
|
|
|
// If we haven't found ourself and the element is visible.
|
|
if (!this.root.is(element) && element.hasClass('show')) {
|
|
count++;
|
|
}
|
|
}.bind(this));
|
|
|
|
return count;
|
|
};
|
|
|
|
/**
|
|
* Get the modal backdrop.
|
|
*
|
|
* @method getBackdrop
|
|
* @return {object} jQuery promise
|
|
*/
|
|
Modal.prototype.getBackdrop = function() {
|
|
if (!backdropPromise) {
|
|
backdropPromise = Templates.render(TEMPLATES.BACKDROP, {})
|
|
.then(function(html) {
|
|
var element = $(html);
|
|
|
|
return new ModalBackdrop(element);
|
|
})
|
|
.fail(Notification.exception);
|
|
}
|
|
|
|
return backdropPromise;
|
|
};
|
|
|
|
/**
|
|
* Get the root element of this modal.
|
|
*
|
|
* @method getRoot
|
|
* @return {object} jQuery object
|
|
*/
|
|
Modal.prototype.getRoot = function() {
|
|
return this.root;
|
|
};
|
|
|
|
/**
|
|
* Get the modal element of this modal.
|
|
*
|
|
* @method getModal
|
|
* @return {object} jQuery object
|
|
*/
|
|
Modal.prototype.getModal = function() {
|
|
return this.modal;
|
|
};
|
|
|
|
/**
|
|
* Get the modal title element.
|
|
*
|
|
* @method getTitle
|
|
* @return {object} jQuery object
|
|
*/
|
|
Modal.prototype.getTitle = function() {
|
|
return this.title;
|
|
};
|
|
|
|
/**
|
|
* Get the modal body element.
|
|
*
|
|
* @method getBody
|
|
* @return {object} jQuery object
|
|
*/
|
|
Modal.prototype.getBody = function() {
|
|
return this.body;
|
|
};
|
|
|
|
/**
|
|
* Get the modal footer element.
|
|
*
|
|
* @method getFooter
|
|
* @return {object} jQuery object
|
|
*/
|
|
Modal.prototype.getFooter = function() {
|
|
return this.footer;
|
|
};
|
|
|
|
/**
|
|
* Get the unique modal count.
|
|
*
|
|
* @method getModalCount
|
|
* @return {int}
|
|
*/
|
|
Modal.prototype.getModalCount = function() {
|
|
return this.modalCount;
|
|
};
|
|
|
|
/**
|
|
* Set the modal title element.
|
|
*
|
|
* This method is overloaded to take either a string value for the title or a jQuery promise that is resolved with
|
|
* HTML most commonly from a Str.get_string call.
|
|
*
|
|
* @method setTitle
|
|
* @param {(string|object)} value The title string or jQuery promise which resolves to the title.
|
|
*/
|
|
Modal.prototype.setTitle = function(value) {
|
|
var title = this.getTitle();
|
|
|
|
this.asyncSet(value, title.html.bind(title));
|
|
};
|
|
|
|
/**
|
|
* Set the modal body element.
|
|
*
|
|
* This method is overloaded to take either a string value for the body or a jQuery promise that is resolved with
|
|
* HTML and Javascript most commonly from a Templates.render call.
|
|
*
|
|
* @method setBody
|
|
* @param {(string|object)} value The body string or jQuery promise which resolves to the body.
|
|
*/
|
|
Modal.prototype.setBody = function(value) {
|
|
var body = this.getBody();
|
|
|
|
if (typeof value === 'string') {
|
|
// Just set the value if it's a string.
|
|
body.html(value);
|
|
Event.notifyFilterContentUpdated(body);
|
|
this.getRoot().trigger(ModalEvents.bodyRendered, this);
|
|
} else {
|
|
var jsPendingId = 'amd-modal-js-pending-id-' + this.getModalCount();
|
|
M.util.js_pending(jsPendingId);
|
|
// Otherwise we assume it's a promise to be resolved with
|
|
// html and javascript.
|
|
var contentPromise = null;
|
|
body.css('overflow', 'hidden');
|
|
|
|
if (value.state() == 'pending') {
|
|
// We're still waiting for the body promise to resolve so
|
|
// let's show a loading icon.
|
|
var height = body.innerHeight();
|
|
if (height < 100) {
|
|
height = 100;
|
|
}
|
|
|
|
body.animate({height: height + 'px'}, 150);
|
|
|
|
body.html('');
|
|
contentPromise = Templates.render(TEMPLATES.LOADING, {})
|
|
.then(function(html) {
|
|
var loadingIcon = $(html).hide();
|
|
body.html(loadingIcon);
|
|
loadingIcon.fadeIn(150);
|
|
|
|
// We only want the loading icon to fade out
|
|
// when the content for the body has finished
|
|
// loading.
|
|
return $.when(loadingIcon.promise(), value);
|
|
})
|
|
.then(function(loadingIcon) {
|
|
// Once the content has finished loading and
|
|
// the loading icon has been shown then we can
|
|
// fade the icon away to reveal the content.
|
|
return loadingIcon.fadeOut(100).promise();
|
|
})
|
|
.then(function() {
|
|
return value;
|
|
});
|
|
} else {
|
|
// The content is already loaded so let's just display
|
|
// it to the user. No need for a loading icon.
|
|
contentPromise = value;
|
|
}
|
|
|
|
// Now we can actually display the content.
|
|
contentPromise.then(function(html, js) {
|
|
var result = null;
|
|
|
|
if (this.isVisible()) {
|
|
// If the modal is visible then we should display
|
|
// the content gracefully for the user.
|
|
body.css('opacity', 0);
|
|
var currentHeight = body.innerHeight();
|
|
body.html(html);
|
|
// We need to clear any height values we've set here
|
|
// in order to measure the height of the content being
|
|
// added. This then allows us to animate the height
|
|
// transition.
|
|
body.css('height', '');
|
|
var newHeight = body.innerHeight();
|
|
body.css('height', currentHeight + 'px');
|
|
result = body.animate(
|
|
{height: newHeight + 'px', opacity: 1},
|
|
{duration: 150, queue: false}
|
|
).promise();
|
|
} else {
|
|
// Since the modal isn't visible we can just immediately
|
|
// set the content. No need to animate it.
|
|
body.html(html);
|
|
}
|
|
|
|
if (js) {
|
|
if (this.isAttached) {
|
|
// If we're in the DOM then run the JS immediately.
|
|
Templates.runTemplateJS(js);
|
|
} else {
|
|
// Otherwise cache it to be run when we're attached.
|
|
this.bodyJS = js;
|
|
}
|
|
}
|
|
Event.notifyFilterContentUpdated(body);
|
|
this.getRoot().trigger(ModalEvents.bodyRendered, this);
|
|
|
|
return result;
|
|
}.bind(this))
|
|
.fail(Notification.exception)
|
|
.always(function() {
|
|
// When we're done displaying all of the content we need
|
|
// to clear the custom values we've set here.
|
|
body.css('height', '');
|
|
body.css('overflow', '');
|
|
body.css('opacity', '');
|
|
M.util.js_complete(jsPendingId);
|
|
|
|
return;
|
|
})
|
|
.fail(Notification.exception);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set the modal footer element. The footer element is made visible, if it
|
|
* isn't already.
|
|
*
|
|
* This method is overloaded to take either a string
|
|
* value for the body or a jQuery promise that is resolved with HTML and Javascript
|
|
* most commonly from a Templates.render call.
|
|
*
|
|
* @method setFooter
|
|
* @param {(string|object)} value The footer string or jQuery promise
|
|
*/
|
|
Modal.prototype.setFooter = function(value) {
|
|
// Make sure the footer is visible.
|
|
this.showFooter();
|
|
|
|
var footer = this.getFooter();
|
|
|
|
if (typeof value === 'string') {
|
|
// Just set the value if it's a string.
|
|
footer.html(value);
|
|
} else {
|
|
// Otherwise we assume it's a promise to be resolved with
|
|
// html and javascript.
|
|
Templates.render(TEMPLATES.LOADING, {}).done(function(html) {
|
|
footer.html(html);
|
|
|
|
value.done(function(html, js) {
|
|
footer.html(html);
|
|
|
|
if (js) {
|
|
if (this.isAttached) {
|
|
// If we're in the DOM then run the JS immediately.
|
|
Templates.runTemplateJS(js);
|
|
} else {
|
|
// Otherwise cache it to be run when we're attached.
|
|
this.footerJS = js;
|
|
}
|
|
}
|
|
}.bind(this));
|
|
}.bind(this));
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Check if the footer has any content in it.
|
|
*
|
|
* @method hasFooterContent
|
|
* @return {bool}
|
|
*/
|
|
Modal.prototype.hasFooterContent = function() {
|
|
return this.getFooter().children().length ? true : false;
|
|
};
|
|
|
|
/**
|
|
* Hide the footer element.
|
|
*
|
|
* @method hideFooter
|
|
*/
|
|
Modal.prototype.hideFooter = function() {
|
|
this.getFooter().addClass('hidden');
|
|
};
|
|
|
|
/**
|
|
* Show the footer element.
|
|
*
|
|
* @method showFooter
|
|
*/
|
|
Modal.prototype.showFooter = function() {
|
|
this.getFooter().removeClass('hidden');
|
|
};
|
|
|
|
/**
|
|
* Mark the modal as a large modal.
|
|
*
|
|
* @method setLarge
|
|
*/
|
|
Modal.prototype.setLarge = function() {
|
|
if (this.isLarge()) {
|
|
return;
|
|
}
|
|
|
|
this.getModal().addClass('modal-lg');
|
|
};
|
|
|
|
/**
|
|
* Check if the modal is a large modal.
|
|
*
|
|
* @method isLarge
|
|
* @return {bool}
|
|
*/
|
|
Modal.prototype.isLarge = function() {
|
|
return this.getModal().hasClass('modal-lg');
|
|
};
|
|
|
|
/**
|
|
* Mark the modal as a small modal.
|
|
*
|
|
* @method setSmall
|
|
*/
|
|
Modal.prototype.setSmall = function() {
|
|
if (this.isSmall()) {
|
|
return;
|
|
}
|
|
|
|
this.getModal().removeClass('modal-lg');
|
|
};
|
|
|
|
/**
|
|
* Check if the modal is a small modal.
|
|
*
|
|
* @method isSmall
|
|
* @return {bool}
|
|
*/
|
|
Modal.prototype.isSmall = function() {
|
|
return !this.getModal().hasClass('modal-lg');
|
|
};
|
|
|
|
/**
|
|
* Determine the highest z-index value currently on the page.
|
|
*
|
|
* @method calculateZIndex
|
|
* @return {int}
|
|
*/
|
|
Modal.prototype.calculateZIndex = function() {
|
|
var items = $(SELECTORS.DIALOG + ', ' + SELECTORS.MENU_BAR + ', ' + SELECTORS.HAS_Z_INDEX);
|
|
var zIndex = parseInt(this.root.css('z-index'));
|
|
|
|
items.each(function(index, item) {
|
|
item = $(item);
|
|
// Note that webkit browsers won't return the z-index value from the CSS stylesheet
|
|
// if the element doesn't have a position specified. Instead it'll return "auto".
|
|
var itemZIndex = item.css('z-index') ? parseInt(item.css('z-index')) : 0;
|
|
|
|
if (itemZIndex > zIndex) {
|
|
zIndex = itemZIndex;
|
|
}
|
|
});
|
|
|
|
return zIndex;
|
|
};
|
|
|
|
/**
|
|
* Check if this modal is visible.
|
|
*
|
|
* @method isVisible
|
|
* @return {bool}
|
|
*/
|
|
Modal.prototype.isVisible = function() {
|
|
return this.root.hasClass('show');
|
|
};
|
|
|
|
/**
|
|
* Check if this modal has focus.
|
|
*
|
|
* @method hasFocus
|
|
* @return {bool}
|
|
*/
|
|
Modal.prototype.hasFocus = function() {
|
|
var target = $(document.activeElement);
|
|
return this.root.is(target) || this.root.has(target).length;
|
|
};
|
|
|
|
/**
|
|
* Check if this modal has CSS transitions applied.
|
|
*
|
|
* @method hasTransitions
|
|
* @return {bool}
|
|
*/
|
|
Modal.prototype.hasTransitions = function() {
|
|
return this.getRoot().hasClass('fade');
|
|
};
|
|
|
|
/**
|
|
* Display this modal. The modal will be attached to the DOM if it hasn't
|
|
* already been.
|
|
*
|
|
* @method show
|
|
*/
|
|
Modal.prototype.show = function() {
|
|
if (this.isVisible()) {
|
|
return;
|
|
}
|
|
|
|
if (this.hasFooterContent()) {
|
|
this.showFooter();
|
|
} else {
|
|
this.hideFooter();
|
|
}
|
|
|
|
if (!this.isAttached) {
|
|
this.attachToDOM();
|
|
}
|
|
|
|
this.getBackdrop().done(function(backdrop) {
|
|
var currentIndex = this.calculateZIndex();
|
|
var newIndex = currentIndex + 2;
|
|
var newBackdropIndex = newIndex - 1;
|
|
this.root.css('z-index', newIndex);
|
|
backdrop.setZIndex(newBackdropIndex);
|
|
backdrop.show();
|
|
|
|
this.root.removeClass('hide').addClass('show');
|
|
this.accessibilityShow();
|
|
this.getModal().focus();
|
|
$('body').addClass('modal-open');
|
|
this.root.trigger(ModalEvents.shown, this);
|
|
}.bind(this));
|
|
};
|
|
|
|
/**
|
|
* Hide this modal if it does not contain a form.
|
|
*
|
|
* @method hideIfNotForm
|
|
*/
|
|
Modal.prototype.hideIfNotForm = function() {
|
|
var formElement = this.modal.find(SELECTORS.FORM);
|
|
if (formElement.length == 0) {
|
|
this.hide();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Hide this modal.
|
|
*
|
|
* @method hide
|
|
*/
|
|
Modal.prototype.hide = function() {
|
|
this.getBackdrop().done(function(backdrop) {
|
|
if (!this.countOtherVisibleModals()) {
|
|
// Hide the backdrop if we're the last open modal.
|
|
backdrop.hide();
|
|
$('body').removeClass('modal-open');
|
|
}
|
|
|
|
var currentIndex = parseInt(this.root.css('z-index'));
|
|
this.root.css('z-index', '');
|
|
backdrop.setZIndex(currentIndex - 3);
|
|
|
|
this.accessibilityHide();
|
|
|
|
if (this.hasTransitions()) {
|
|
// Wait for CSS transitions to complete before hiding the element.
|
|
this.getRoot().one('transitionend webkitTransitionEnd oTransitionEnd', function() {
|
|
this.getRoot().removeClass('show').addClass('hide');
|
|
}.bind(this));
|
|
} else {
|
|
this.getRoot().removeClass('show').addClass('hide');
|
|
}
|
|
|
|
this.root.trigger(ModalEvents.hidden, this);
|
|
}.bind(this));
|
|
};
|
|
|
|
/**
|
|
* Remove this modal from the DOM.
|
|
*
|
|
* @method destroy
|
|
*/
|
|
Modal.prototype.destroy = function() {
|
|
this.root.remove();
|
|
this.root.trigger(ModalEvents.destroyed, this);
|
|
};
|
|
|
|
/**
|
|
* Sets the appropriate aria attributes on this dialogue and the other
|
|
* elements in the DOM to ensure that screen readers are able to navigate
|
|
* the dialogue popup correctly.
|
|
*
|
|
* @method accessibilityShow
|
|
*/
|
|
Modal.prototype.accessibilityShow = function() {
|
|
// We need to get a list containing each sibling element and the shallowest
|
|
// non-ancestral nodes in the DOM. We can shortcut this a little by leveraging
|
|
// the fact that this dialogue is always appended to the document body therefore
|
|
// it's siblings are the shallowest non-ancestral nodes. If that changes then
|
|
// this code should also be updated.
|
|
$('body').children().each(function(index, child) {
|
|
// Skip the current modal.
|
|
if (!this.root.is(child)) {
|
|
child = $(child);
|
|
var hidden = child.attr('aria-hidden');
|
|
// If they are already hidden we can ignore them.
|
|
if (hidden !== 'true') {
|
|
// Save their current state.
|
|
child.data('previous-aria-hidden', hidden);
|
|
this.hiddenSiblings.push(child);
|
|
|
|
// Hide this node from screen readers.
|
|
child.attr('aria-hidden', 'true');
|
|
}
|
|
}
|
|
}.bind(this));
|
|
|
|
// Make us visible to screen readers.
|
|
this.root.attr('aria-hidden', 'false');
|
|
};
|
|
|
|
/**
|
|
* Restores the aria visibility on the DOM elements changed when displaying
|
|
* the dialogue popup and makes the dialogue aria hidden to allow screen
|
|
* readers to navigate the main page correctly when the dialogue is closed.
|
|
*
|
|
* @method accessibilityHide
|
|
*/
|
|
Modal.prototype.accessibilityHide = function() {
|
|
this.root.attr('aria-hidden', 'true');
|
|
|
|
// Restore the sibling nodes back to their original values.
|
|
$.each(this.hiddenSiblings, function(index, sibling) {
|
|
sibling = $(sibling);
|
|
var previousValue = sibling.data('previous-aria-hidden');
|
|
// If the element didn't previously have an aria-hidden attribute
|
|
// then we can just remove the one we set.
|
|
if (typeof previousValue == 'undefined') {
|
|
sibling.removeAttr('aria-hidden');
|
|
} else {
|
|
// Otherwise set it back to the old value (which will be false).
|
|
sibling.attr('aria-hidden', previousValue);
|
|
}
|
|
});
|
|
|
|
// Clear the cache. No longer need to store these.
|
|
this.hiddenSiblings = [];
|
|
};
|
|
|
|
/**
|
|
* Handle the tab event to lock focus within this modal.
|
|
*
|
|
* @method handleTabLock
|
|
* @param {event} e The tab key jQuery event
|
|
*/
|
|
Modal.prototype.handleTabLock = function(e) {
|
|
if (!this.hasFocus()) {
|
|
return;
|
|
}
|
|
|
|
var target = $(document.activeElement);
|
|
var focusableElements = this.modal.find(SELECTORS.CAN_RECEIVE_FOCUS);
|
|
var firstFocusable = focusableElements.first();
|
|
var lastFocusable = focusableElements.last();
|
|
|
|
if (target.is(firstFocusable) && e.shiftKey) {
|
|
lastFocusable.focus();
|
|
e.preventDefault();
|
|
} else if (target.is(lastFocusable) && !e.shiftKey) {
|
|
firstFocusable.focus();
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set up all of the event handling for the modal.
|
|
*
|
|
* @method registerEventListeners
|
|
*/
|
|
Modal.prototype.registerEventListeners = function() {
|
|
this.getRoot().on('keydown', function(e) {
|
|
if (!this.isVisible()) {
|
|
return;
|
|
}
|
|
|
|
if (e.keyCode == KeyCodes.tab) {
|
|
this.handleTabLock(e);
|
|
} else if (e.keyCode == KeyCodes.escape) {
|
|
this.hide();
|
|
}
|
|
}.bind(this));
|
|
|
|
// Listen for clicks on the modal container.
|
|
this.getRoot().click(function(e) {
|
|
// If the click wasn't inside the modal element then we should
|
|
// hide the modal.
|
|
if (!$(e.target).closest(SELECTORS.MODAL).length) {
|
|
// The check above fails to detect the click was inside the modal when the DOM tree is already changed.
|
|
// So, we check if we can still find the container element or not. If not, then the DOM tree is changed.
|
|
// It's best not to hide the modal in that case.
|
|
if ($(e.target).closest(SELECTORS.CONTAINER).length) {
|
|
this.hideIfNotForm();
|
|
}
|
|
}
|
|
}.bind(this));
|
|
|
|
CustomEvents.define(this.getModal(), [CustomEvents.events.activate]);
|
|
this.getModal().on(CustomEvents.events.activate, SELECTORS.HIDE, function(e, data) {
|
|
this.hide();
|
|
data.originalEvent.preventDefault();
|
|
}.bind(this));
|
|
};
|
|
|
|
/**
|
|
* Set or resolve and set the value using the function.
|
|
*
|
|
* @method asyncSet
|
|
* @param {(string|object)} value The string or jQuery promise.
|
|
* @param {function} setFunction The setter
|
|
* @return {Promise}
|
|
*/
|
|
Modal.prototype.asyncSet = function(value, setFunction) {
|
|
var p = value;
|
|
if (typeof value !== 'object' || !value.hasOwnProperty('then')) {
|
|
p = $.Deferred();
|
|
p.resolve(value);
|
|
}
|
|
|
|
p.then(function(content) {
|
|
setFunction(content);
|
|
|
|
return;
|
|
})
|
|
.fail(Notification.exception);
|
|
|
|
return p;
|
|
};
|
|
|
|
return Modal;
|
|
});
|