| Option name | Type | Description |
|---|---|---|
| el | Element | |
| params | Object |
Expand constructor.
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 = {
Include common functionality.
_setParams: Base.setParams,
_toggleClass: Base.toggleClass,
_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,
isExpanded: false,
onBeforeExpand: null,
onAfterExpand: null,
onBeforeCollapse: null,
onAfterCollapse: null,
_onClickBound: null,
_onKeydownBound: null
},
Whitelisted parameters which can be set on construction.
_whitelistedParams: ['onBeforeExpand', 'onAfterExpand', 'onBeforeCollapse', 'onAfterCollapse'],
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
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 the expand state.
toggle: function() {
this[this.isExpanded ? 'collapse' : 'expand']();
},
| Option name | Type | Description |
|---|---|---|
| el | Element |
Store a reference to the element.
_cacheElements: function(el) {
this.el = el;
this.isExpanded = this._hasClass(this.el, 'expanded');
},
Update classes for the expand or collapse state.
_updateClasses: function() {
this._toggleClass(this.el, 'expanded', this.isExpanded);
},
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);
},
Add event listeners for DOM events.
_addEventListeners: function() {
this.el.addEventListener('click', this._onClickBound);
this.el.addEventListener('keydown', this._onKeydownBound);
},
Remove event listeners for DOM events..
_removeEventListeners: function() {
this.el.removeEventListener('click', this._onClickBound);
this.el.removeEventListener('keydown', this._onKeydownBound);
},
| Option name | Type | Description |
|---|---|---|
| e | Object |
When we are clicked, toggle the expanded state.
_onClick: function(e) {
if (!this._getElementMatchingParent(e.target, '.spark-expand__toggle, [data-role="toggle"], [role="heading"]', this.el)) {
return;
}
e.preventDefault();
this.toggle();
},
| Option name | Type | Description |
|---|---|---|
| e | Object |
When the space or enter key is pressed on the toggle, toggle!
_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;
}));