@talentsoft-opensource/uxp-themes
Version:
Talentsoft UX themes
85 lines (84 loc) • 3.31 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.initializeMenuList = function ($button, $menu, $mainMenu) {
if ($mainMenu === void 0) { $mainMenu = false; }
var handleScrollMenuMain = function () {
window.addEventListener("scroll", function (event) {
if ($button.classList.contains("button-menu-main--open")) {
$button.classList.remove("button-menu-main--open");
hideMenu();
}
});
};
var handleClickMenu = function () {
$button.addEventListener("click", function (event) {
var idMenu = $mainMenu ? "menu-main" : "menu_context";
if ($button.classList.contains("button-" + idMenu + "--open")) {
$button.classList.remove("button-" + idMenu + "--open");
hideMenu();
}
else {
$button.classList.add("button-" + idMenu + "--open");
showMenu(prepareStyle());
}
});
};
var getPositionMainMenu = function () {
var widthButton = $button.getBoundingClientRect().right - $button.getBoundingClientRect().left;
var widthPanel = $menu.offsetWidth;
var posVertical = $button.getBoundingClientRect().right - widthButton / 2 - widthPanel + 35;
var posHorizontal = $button.getBoundingClientRect().bottom + 20;
return [posVertical, posHorizontal];
};
var prepareStyle = function () {
var style = {};
if ($mainMenu) {
var positionMenu = getPositionMainMenu();
style.left = positionMenu[0];
style.top = positionMenu[1];
}
else {
var widthButton = $button.offsetWidth;
var positionPanel = getPosition();
var widthPanel = $menu.offsetWidth;
var posVertical = positionPanel[0] - widthPanel + (widthButton / 2 + 33);
var posHorizontal = positionPanel[1] + 45;
style.left = posVertical;
style.top = posHorizontal;
}
return style;
};
var getPosition = function () {
var left = 0;
var top = 0;
var $elem = $button;
while ($elem.offsetParent !== undefined && $elem.offsetParent !== null) {
left += $elem.offsetLeft + ($elem.clientLeft !== null ? $elem.clientLeft : 0);
top += $elem.offsetTop + ($elem.clientTop !== null ? $elem.clientTop : 0);
$elem = $elem.offsetParent;
}
return [left, top];
};
var hideMenu = function () {
$menu.classList.remove('panel-menu--open');
};
var showMenu = function (styleMenu) {
var $items = $menu.querySelectorAll("li");
$menu.classList.add('panel-menu--open');
Array.prototype.forEach.call($items, function ($el, index) {
var $item = $el;
$item.style.transition = "all 0.2s " + index * 0.1 + "s";
});
};
var initializePosition = function () {
var style = prepareStyle();
$menu.style.left = style.left + "px";
$menu.style.top = style.top + "px";
};
if ($mainMenu) {
handleScrollMenuMain();
}
handleClickMenu();
initializePosition();
};
exports.default = exports.initializeMenuList;