Sabre Spark

Modal

Show content in a modal.

Option name Type Description
module components/modal.js
(function(root, factory) {

  'use strict';

  if (typeof define === 'function' && define.amd) {
    define(['spark/components/base'], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('./base'));
  } else {
    root.Spark = root.Spark || {};
    root.Spark.Modal = factory(root.Spark.BaseComponent);
  }
}(this, function(Base) {

  'use strict';
Example
new Modal(el);

Modal constructor.

Option name Type Description
el Element
params Object
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 = {

_setParams

property
 _setParams 

Include common functionality.

_setParams: Base.setParams,
_toggleClass: Base.toggleClass,
_addClass: Base.addClass,
_removeClass: Base.removeClass,
_hasClass: Base.hasClass,
_getElementMatchingParent: Base.getElementMatchingParent,
remove: Base.remove,

defaults

property
 defaults 

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.

Option name Type Description
defaults: {
  el: null,
  modalEl: null,
  scrollEl: null,
  isActive: false,
  _onClickBound: null,
  _onKeyupBound: null,
  _onModalClickBound: null
},

_whitelistedParams

property
 _whitelistedParams 

Whitelisted parameters which can be set on construction.

Option name Type Description
_whitelistedParams: [],

open

method
 open() 

Open

open: function() {
  this.isActive = true;
  this._addWindowEventListeners();
  this._updateClasses();
  this._addClass(document.body, 'spark-modal-open');
},

close

method
 close() 

Close

close: function() {
  this.isActive = false;
  this._removeWindowEventListeners();
  this._updateClasses();
  this._removeClass(document.body, 'spark-modal-open');
},

_cacheElements

method
 _cacheElements() 

Store a reference to the element. Either a modal itself
or a button referencing a modal may be passed.

Option name Type Description
el Element
modalEl Element

@optional

_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');
},

_updateClasses

method
 _updateClasses() 

Update classes for the open or close state.

_updateClasses: function() {
  this._toggleClass(this.modalEl, 'active', this.isActive);
},

_bindEventListenerCallbacks

method
 _bindEventListenerCallbacks() 

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);
},

_addEventListeners

method
 _addEventListeners() 

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);
},

_removeEventListeners

method
 _removeEventListeners() 

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);
},

_addWindowEventListeners

method
 _addWindowEventListeners() 

Add event listeners for DOM events.

_addWindowEventListeners: function() {
  this._removeWindowEventListeners();
  window.addEventListener('keyup', this._onKeyupBound);
},

_removeWindowEventListeners

method
 _removeWindowEventListeners() 

Remove event listeners for DOM events..

_removeWindowEventListeners: function() {
  window.removeEventListener('keyup', this._onKeyupBound);
},

_onClick

method
 _onClick() 

When the button is clicked.

Option name Type Description
e Object
_onClick: function() {
  this.open();
},

_onModalClick

method
 _onModalClick() 

When we are clicked, toggle the opened state.

Option name Type Description
e Object
_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();
  }
},

_onKeyup

method
 _onKeyup() 

When a key is pressed on the window and it's an ESC, close the modal.

Option name Type Description
e Object
_onKeyup: function(e) {
  if (e.keyCode === 27) {
    this.close();
  }
}
  };

  Base.exportjQuery(Modal, 'Modal');

  return Modal;
}));