Sabre Spark

Expand

Expand and collapse an element.

Option name Type Description
module components/expand.js
Example
new Expand(el);

Expand

function
 Expand() 

Expand constructor.

Option name Type Description
el Element
params Object
var Expand = function(el, params) {

  if (!el) {
    return;
  }

  this._setParams(this.defaults, true);
  this._cacheElements(el);
  this._setParams(params || {});
  this._bindEventListenerCallbacks();
  this._addEventListeners();
};

Expand.prototype = {

_setParams

property
 _setParams 

Include common functionality.

_setParams: Base.setParams,
_toggleClass: Base.toggleClass,
_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,
  isExpanded: false,
  onBeforeExpand: null,
  onAfterExpand: null,
  onBeforeCollapse: null,
  onAfterCollapse: null,
  _onClickBound: null,
  _onKeydownBound: null
},

_whitelistedParams

property
 _whitelistedParams 

Whitelisted parameters which can be set on construction.

Option name Type Description
_whitelistedParams: ['onBeforeExpand', 'onAfterExpand', 'onBeforeCollapse', 'onAfterCollapse'],

expand

method
 expand() 

Expand

expand: function() {

  (this.onBeforeExpand || noop)();

  animateHeight({
    el: this.el,
    toggleEl: '.spark-expand__content, .spark-panel__content'
  });

  this.isExpanded = true;
  this._updateClasses();
  var e = document.createEvent('Event');
  e.initEvent('spark.visible-children', true, true);
  this.el.dispatchEvent(e);

  // If the expand element have input, focus on the first one.
  if(this.el.querySelector('input')) {
    this.el.querySelector('input').focus();
  }

  (this.onAfterExpand || noop)();
},

collapse

method
 collapse() 

Collapse

collapse: function() {

  (this.onBeforeCollapse || noop)();

  animateHeight({
    el: this.el,
    toggleEl: '.spark-expand__content, .spark-panel__content',
    toggleValue: 'none',
    action: 'collapse'
  });

  this.isExpanded = false;
  this._updateClasses();

  (this.onAfterCollapse || noop)();
},

toggle

method
 toggle() 

Toggle the expand state.

toggle: function() {
  this[this.isExpanded ? 'collapse' : 'expand']();
},

_cacheElements

method
 _cacheElements() 

Store a reference to the element.

Option name Type Description
el Element
_cacheElements: function(el) {
  this.el = el;
  this.isExpanded = this._hasClass(this.el, 'expanded');
},

_updateClasses

method
 _updateClasses() 

Update classes for the expand or collapse state.

_updateClasses: function() {
  this._toggleClass(this.el, 'expanded', this.isExpanded);
},

_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._onKeydownBound = this._onKeydown.bind(this);
},

_addEventListeners

method
 _addEventListeners() 

Add event listeners for DOM events.

_addEventListeners: function() {
  this.el.addEventListener('click', this._onClickBound);
  this.el.addEventListener('keydown', this._onKeydownBound);
},

_removeEventListeners

method
 _removeEventListeners() 

Remove event listeners for DOM events..

_removeEventListeners: function() {
  this.el.removeEventListener('click', this._onClickBound);
  this.el.removeEventListener('keydown', this._onKeydownBound);
},

_onClick

method
 _onClick() 

When we are clicked, toggle the expanded state.

Option name Type Description
e Object
_onClick: function(e) {

  if (!this._getElementMatchingParent(e.target, '.spark-expand__toggle, [data-role="toggle"], [role="heading"]', this.el)) {
    return;
  }

  e.preventDefault();
  this.toggle();
},

_onKeydown

method
 _onKeydown() 

When the space or enter key is pressed on the toggle, toggle!

Option name Type Description
e Object
_onKeydown: function(e) {

  if (!this._getElementMatchingParent(e.target, '.spark-expand__toggle, [data-role="toggle"], [role="heading"]', this.el)) {
    return;
  }

  var code = e.keyCode || e.which;

  // Space or enter
  if (code === 32 || code === 13) {
    e.preventDefault();
    this.toggle();
  }
}
  };

  Base.exportjQuery(Expand, 'Expand');

  return Expand;
}));