forked from hero/www_hero
94 lines
3.2 KiB
JavaScript
94 lines
3.2 KiB
JavaScript
|
var __assign = (this && this.__assign) || function () {
|
||
|
|
__assign = Object.assign || function(t) {
|
||
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||
|
|
s = arguments[i];
|
||
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||
|
|
t[p] = s[p];
|
||
|
|
}
|
||
|
|
return t;
|
||
|
|
};
|
||
|
|
return __assign.apply(this, arguments);
|
||
|
|
};
|
||
|
|
var Default = {
|
||
|
|
onCollapse: function () { },
|
||
|
|
onExpand: function () { },
|
||
|
|
onToggle: function () { },
|
||
|
|
};
|
||
|
|
var Collapse = /** @class */ (function () {
|
||
|
|
function Collapse(targetEl, triggerEl, options) {
|
||
|
|
if (targetEl === void 0) { targetEl = null; }
|
||
|
|
if (triggerEl === void 0) { triggerEl = null; }
|
||
|
|
if (options === void 0) { options = Default; }
|
||
|
|
this._targetEl = targetEl;
|
||
|
|
this._triggerEl = triggerEl;
|
||
|
|
this._options = __assign(__assign({}, Default), options);
|
||
|
|
this._visible = false;
|
||
|
|
this._init();
|
||
|
|
}
|
||
|
|
Collapse.prototype._init = function () {
|
||
|
|
var _this = this;
|
||
|
|
if (this._triggerEl) {
|
||
|
|
if (this._triggerEl.hasAttribute('aria-expanded')) {
|
||
|
|
this._visible =
|
||
|
|
this._triggerEl.getAttribute('aria-expanded') === 'true';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// fix until v2 not to break previous single collapses which became dismiss
|
||
|
|
this._visible = !this._targetEl.classList.contains('hidden');
|
||
|
|
}
|
||
|
|
this._triggerEl.addEventListener('click', function () {
|
||
|
|
_this.toggle();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Collapse.prototype.collapse = function () {
|
||
|
|
this._targetEl.classList.add('hidden');
|
||
|
|
if (this._triggerEl) {
|
||
|
|
this._triggerEl.setAttribute('aria-expanded', 'false');
|
||
|
|
}
|
||
|
|
this._visible = false;
|
||
|
|
// callback function
|
||
|
|
this._options.onCollapse(this);
|
||
|
|
};
|
||
|
|
Collapse.prototype.expand = function () {
|
||
|
|
this._targetEl.classList.remove('hidden');
|
||
|
|
if (this._triggerEl) {
|
||
|
|
this._triggerEl.setAttribute('aria-expanded', 'true');
|
||
|
|
}
|
||
|
|
this._visible = true;
|
||
|
|
// callback function
|
||
|
|
this._options.onExpand(this);
|
||
|
|
};
|
||
|
|
Collapse.prototype.toggle = function () {
|
||
|
|
if (this._visible) {
|
||
|
|
this.collapse();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.expand();
|
||
|
|
}
|
||
|
|
// callback function
|
||
|
|
this._options.onToggle(this);
|
||
|
|
};
|
||
|
|
return Collapse;
|
||
|
|
}());
|
||
|
|
export function initCollapses() {
|
||
|
|
document
|
||
|
|
.querySelectorAll('[data-collapse-toggle]')
|
||
|
|
.forEach(function ($triggerEl) {
|
||
|
|
var targetId = $triggerEl.getAttribute('data-collapse-toggle');
|
||
|
|
var $targetEl = document.getElementById(targetId);
|
||
|
|
// check if the target element exists
|
||
|
|
if ($targetEl) {
|
||
|
|
new Collapse($targetEl, $triggerEl);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.error("The target element with id \"".concat(targetId, "\" does not exist. Please check the data-collapse-toggle attribute."));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (typeof window !== 'undefined') {
|
||
|
|
window.Collapse = Collapse;
|
||
|
|
window.initCollapses = initCollapses;
|
||
|
|
}
|
||
|
|
export default Collapse;
|
||
|
|
//# sourceMappingURL=index.js.map
|