forked from hero/www_hero
138 lines
4.7 KiB
JavaScript
138 lines
4.7 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 = {
|
|
triggerType: 'hover',
|
|
onShow: function () { },
|
|
onHide: function () { },
|
|
onToggle: function () { },
|
|
};
|
|
var Dial = /** @class */ (function () {
|
|
function Dial(parentEl, triggerEl, targetEl, options) {
|
|
if (parentEl === void 0) { parentEl = null; }
|
|
if (triggerEl === void 0) { triggerEl = null; }
|
|
if (targetEl === void 0) { targetEl = null; }
|
|
if (options === void 0) { options = Default; }
|
|
this._parentEl = parentEl;
|
|
this._triggerEl = triggerEl;
|
|
this._targetEl = targetEl;
|
|
this._options = __assign(__assign({}, Default), options);
|
|
this._visible = false;
|
|
this._init();
|
|
}
|
|
Dial.prototype._init = function () {
|
|
var _this = this;
|
|
if (this._triggerEl) {
|
|
var triggerEventTypes = this._getTriggerEventTypes(this._options.triggerType);
|
|
triggerEventTypes.showEvents.forEach(function (ev) {
|
|
_this._triggerEl.addEventListener(ev, function () {
|
|
_this.show();
|
|
});
|
|
_this._targetEl.addEventListener(ev, function () {
|
|
_this.show();
|
|
});
|
|
});
|
|
triggerEventTypes.hideEvents.forEach(function (ev) {
|
|
_this._parentEl.addEventListener(ev, function () {
|
|
if (!_this._parentEl.matches(':hover')) {
|
|
_this.hide();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
};
|
|
Dial.prototype.hide = function () {
|
|
this._targetEl.classList.add('hidden');
|
|
if (this._triggerEl) {
|
|
this._triggerEl.setAttribute('aria-expanded', 'false');
|
|
}
|
|
this._visible = false;
|
|
// callback function
|
|
this._options.onHide(this);
|
|
};
|
|
Dial.prototype.show = function () {
|
|
this._targetEl.classList.remove('hidden');
|
|
if (this._triggerEl) {
|
|
this._triggerEl.setAttribute('aria-expanded', 'true');
|
|
}
|
|
this._visible = true;
|
|
// callback function
|
|
this._options.onShow(this);
|
|
};
|
|
Dial.prototype.toggle = function () {
|
|
if (this._visible) {
|
|
this.hide();
|
|
}
|
|
else {
|
|
this.show();
|
|
}
|
|
};
|
|
Dial.prototype.isHidden = function () {
|
|
return !this._visible;
|
|
};
|
|
Dial.prototype.isVisible = function () {
|
|
return this._visible;
|
|
};
|
|
Dial.prototype._getTriggerEventTypes = function (triggerType) {
|
|
switch (triggerType) {
|
|
case 'hover':
|
|
return {
|
|
showEvents: ['mouseenter', 'focus'],
|
|
hideEvents: ['mouseleave', 'blur'],
|
|
};
|
|
case 'click':
|
|
return {
|
|
showEvents: ['click', 'focus'],
|
|
hideEvents: ['focusout', 'blur'],
|
|
};
|
|
case 'none':
|
|
return {
|
|
showEvents: [],
|
|
hideEvents: [],
|
|
};
|
|
default:
|
|
return {
|
|
showEvents: ['mouseenter', 'focus'],
|
|
hideEvents: ['mouseleave', 'blur'],
|
|
};
|
|
}
|
|
};
|
|
return Dial;
|
|
}());
|
|
export function initDials() {
|
|
document.querySelectorAll('[data-dial-init]').forEach(function ($parentEl) {
|
|
var $triggerEl = $parentEl.querySelector('[data-dial-toggle]');
|
|
if ($triggerEl) {
|
|
var dialId = $triggerEl.getAttribute('data-dial-toggle');
|
|
var $dialEl = document.getElementById(dialId);
|
|
if ($dialEl) {
|
|
var triggerType = $triggerEl.getAttribute('data-dial-trigger');
|
|
new Dial($parentEl, $triggerEl, $dialEl, {
|
|
triggerType: triggerType
|
|
? triggerType
|
|
: Default.triggerType,
|
|
});
|
|
}
|
|
else {
|
|
console.error("Dial with id ".concat(dialId, " does not exist. Are you sure that the data-dial-toggle attribute points to the correct modal id?"));
|
|
}
|
|
}
|
|
else {
|
|
console.error("Dial with id ".concat($parentEl.id, " does not have a trigger element. Are you sure that the data-dial-toggle attribute exists?"));
|
|
}
|
|
});
|
|
}
|
|
if (typeof window !== 'undefined') {
|
|
window.Dial = Dial;
|
|
window.initDials = initDials;
|
|
}
|
|
export default Dial;
|
|
//# sourceMappingURL=index.js.map
|