| Option name | Type | Description |
|---|---|---|
| el | Element | |
| params | Object |
Modal constructor.
var Modal = function(el, params) {
params = params || {};
if (!el) {
return;
}
this._setParams(this.defaults, true);
this._cacheElements(el, params.modalEl);
this._setParams(params);
this._bindEventListenerCallbacks();
this._addEventListeners();
};
Modal.prototype = {
Include common functionality.
_setParams: Base.setParams,
_toggleClass: Base.toggleClass,
_addClass: Base.addClass,
_removeClass: Base.removeClass,
_hasClass: Base.hasClass,
_getElementMatchingParent: Base.getElementMatchingParent,
remove: Base.remove,
Default values for internal properties we will be setting.
These are set on each construction so we don't leak properties
into the prototype chain.
defaults: {
el: null,
modalEl: null,
scrollEl: null,
isActive: false,
_onClickBound: null,
_onKeyupBound: null,
_onModalClickBound: null
},
Whitelisted parameters which can be set on construction.
_whitelistedParams: [],
Open
open: function() {
this.isActive = true;
this._addWindowEventListeners();
this._updateClasses();
this._addClass(document.body, 'spark-modal-open');
},
Close
close: function() {
this.isActive = false;
this._removeWindowEventListeners();
this._updateClasses();
this._removeClass(document.body, 'spark-modal-open');
},
| Option name | Type | Description |
|---|---|---|
| el | Element | |
| modalEl | Element | @optional |
Store a reference to the element. Either a modal itself
or a button referencing a modal may be passed.
_cacheElements: function(el, modalEl) {
var modalPassed = this._hasClass(el, 'spark-modal');
if (modalPassed) {
this.modalEl = el;
} else {
this.el = el;
this.modalEl = modalEl || document.querySelector(el.getAttribute('data-modal'));
}
this.scrollEl = this.modalEl.querySelector('.spark-modal__scroll') || this.modalEl;
this.isActive = this._hasClass(this.el || this.modalEl, 'active');
},
Update classes for the open or close state.
_updateClasses: function() {
this._toggleClass(this.modalEl, 'active', this.isActive);
},
Create bound versions of event listener callbacks and store them.
Otherwise we can't unbind from these events later because the
function signatures won't match.
_bindEventListenerCallbacks: function() {
this._onClickBound = this._onClick.bind(this);
this._onKeyupBound = this._onKeyup.bind(this);
this._onModalClickBound = this._onModalClick.bind(this);
},
Add event listeners for DOM events.
_addEventListeners: function() {
if (this.el) this.el.addEventListener('click', this._onClickBound);
if (this.modalEl) this.modalEl.addEventListener('click', this._onModalClickBound);
},
Remove event listeners for DOM events..
_removeEventListeners: function() {
if (this.el) this.el.removeEventListener('click', this._onClickBound);
if (this.modalEl) this.modalEl.removeEventListener('click', this._onModalClickBound);
},
Add event listeners for DOM events.
_addWindowEventListeners: function() {
this._removeWindowEventListeners();
window.addEventListener('keyup', this._onKeyupBound);
},
Remove event listeners for DOM events..
_removeWindowEventListeners: function() {
window.removeEventListener('keyup', this._onKeyupBound);
},
| Option name | Type | Description |
|---|---|---|
| e | Object |
When the button is clicked.
_onClick: function() {
this.open();
},
| Option name | Type | Description |
|---|---|---|
| e | Object |
When we are clicked, toggle the opened state.
_onModalClick: function(e) {
// The close button is clicked or the actual modal (gray area)
if (this._getElementMatchingParent(e.target, '.spark-modal__close, .spark-modal__dismiss', this.modalEl) || e.target === this.scrollEl || e.target === this.modalEl) {
e.preventDefault();
this.close();
}
},
| Option name | Type | Description |
|---|---|---|
| e | Object |
When a key is pressed on the window and it's an ESC, close the modal.
_onKeyup: function(e) {
if (e.keyCode === 27) {
this.close();
}
}
};
Base.exportjQuery(Modal, 'Modal');
return Modal;
}));