461 lines
14 KiB
JavaScript
461 lines
14 KiB
JavaScript
document.addEventListener("DOMContentLoaded", display_mega_menu_on_load);
|
|
document.addEventListener(
|
|
"astPartialContentRendered",
|
|
display_mega_menu_on_load
|
|
);
|
|
|
|
/**
|
|
* Remove "hidden" class after the page is fully loaded to fix the visibility issue of MegaMenu width.
|
|
*/
|
|
function display_mega_menu_on_load() {
|
|
// For Content width.
|
|
var menu_content = document.querySelectorAll(".content-width-mega");
|
|
if (menu_content.length > 0) {
|
|
for (var i = 0; i < menu_content.length; i++) {
|
|
menu_content[i].addEventListener("mouseenter", function (event) {
|
|
var mega_menu_container = event.target.querySelector(
|
|
".astra-mega-menu-width-content"
|
|
);
|
|
if (null !== mega_menu_container) {
|
|
mega_menu_container.classList.remove("ast-hidden");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// For Menu Container width.
|
|
var menu_container = document.querySelectorAll(".menu-container-width-mega");
|
|
if (menu_container.length > 0) {
|
|
for (var i = 0; i < menu_container.length; i++) {
|
|
menu_container[i].addEventListener("mouseenter", function (event) {
|
|
var mega_menu_container = event.target.querySelector(
|
|
".astra-mega-menu-width-menu-container"
|
|
);
|
|
if (null !== mega_menu_container) {
|
|
mega_menu_container.classList.remove("ast-hidden");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// For Full width.
|
|
var menu_full_width = document.querySelectorAll(".full-width-mega");
|
|
if (menu_full_width.length > 0) {
|
|
for (var i = 0; i < menu_full_width.length; i++) {
|
|
menu_full_width[i].addEventListener("mouseenter", function (event) {
|
|
var mega_menu_container = event.target.querySelector(
|
|
".astra-full-megamenu-wrapper"
|
|
);
|
|
var mega_menu_submenu = event.target.querySelector(
|
|
".astra-mega-menu-width-full"
|
|
);
|
|
if (null !== mega_menu_container) {
|
|
mega_menu_container.classList.remove("ast-hidden");
|
|
}
|
|
if (null !== mega_menu_submenu) {
|
|
mega_menu_submenu.classList.remove("ast-hidden");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// For Full width Stretched.
|
|
var menu_full_width_stretched = document.querySelectorAll(
|
|
".full-stretched-width-mega"
|
|
);
|
|
if (menu_full_width_stretched.length > 0) {
|
|
for (var i = 0; i < menu_full_width_stretched.length; i++) {
|
|
menu_full_width_stretched[i].addEventListener(
|
|
"mouseenter",
|
|
function (event) {
|
|
var mega_menu_container = event.target.querySelector(
|
|
".astra-full-megamenu-wrapper"
|
|
);
|
|
var mega_menu_submenu = event.target.querySelector(
|
|
".astra-mega-menu-width-full-stretched"
|
|
);
|
|
if (null !== mega_menu_container) {
|
|
mega_menu_container.classList.remove("ast-hidden");
|
|
}
|
|
if (null !== mega_menu_submenu) {
|
|
mega_menu_submenu.classList.remove("ast-hidden");
|
|
}
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
// For Custom Width MegaMenu.
|
|
var customWidthStretched = document.querySelectorAll(".custom-width-mega");
|
|
if (customWidthStretched.length > 0) {
|
|
for (var i = 0; i < customWidthStretched.length; i++) {
|
|
customWidthStretched[i].addEventListener("mouseenter", function (event) {
|
|
var megaMenuSubmenu = event.target.querySelector(
|
|
".astra-mega-menu-width-custom"
|
|
);
|
|
if (null !== megaMenuSubmenu) {
|
|
megaMenuSubmenu.classList.remove("ast-hidden");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
var items = document.getElementsByClassName("astra-megamenu-li");
|
|
|
|
function apply_megamenu_width_styles() {
|
|
[].slice.call(items).forEach(container => {
|
|
jQuery(container).hover(function () {
|
|
var ast_container = jQuery(container).parents(".ast-container"),
|
|
$main_container = ast_container.children(),
|
|
$full_width_main_container = ast_container.parent(),
|
|
$this = jQuery(this);
|
|
|
|
// Full width mega menu
|
|
if (
|
|
$this.hasClass("full-width-mega") ||
|
|
$this.hasClass("full-stretched-width-mega")
|
|
) {
|
|
$main_container = jQuery($main_container).closest(".ast-container");
|
|
}
|
|
|
|
if (
|
|
parseInt(window.innerWidth) > parseInt(astra.break_point) &&
|
|
"ast-hf-mobile-menu" !== $this.parent().attr("id") &&
|
|
"ast-desktop-toggle-menu" !== $this.parent().attr("id")
|
|
) {
|
|
var $menuWidth = $main_container.width(),
|
|
$menuPosition = $main_container.offset(),
|
|
$menuItemPosition = $this.offset(),
|
|
positionLeft =
|
|
$menuItemPosition.left -
|
|
($menuPosition.left +
|
|
parseFloat($main_container.css("paddingLeft"))),
|
|
positionRight = $menuWidth - ($menuItemPosition.left + $menuPosition.left) + 130;
|
|
|
|
var $fullMenuWidth = $full_width_main_container.width(),
|
|
$fullMenuPosition = $full_width_main_container.offset(),
|
|
fullPositionLeft =
|
|
$menuItemPosition.left -
|
|
($fullMenuPosition.left +
|
|
parseFloat($full_width_main_container.css("paddingLeft")));
|
|
|
|
if ($this.hasClass("custom-width-mega")) {
|
|
var customMegaMenuWidth =
|
|
window
|
|
.getComputedStyle(
|
|
$this.find(".astra-mega-menu-width-custom")[0],
|
|
"::before"
|
|
)
|
|
.getPropertyValue("content") || 1200;
|
|
|
|
customMegaMenuWidth = customMegaMenuWidth.replace(/[^0-9]/g, "");
|
|
customMegaMenuWidth = parseInt(customMegaMenuWidth);
|
|
|
|
if (customMegaMenuWidth <= $menuWidth) {
|
|
var extra_width = parseInt($menuWidth - customMegaMenuWidth),
|
|
customWithPositionLeft = parseInt(positionLeft - extra_width),
|
|
customWithPositionRight =
|
|
$menuPosition.left - customWithPositionLeft;
|
|
} else {
|
|
var extra_width = parseInt(customMegaMenuWidth - $menuWidth),
|
|
customWithPositionLeft = parseInt(positionLeft + extra_width),
|
|
customWithPositionRight =
|
|
$menuPosition.left + customWithPositionLeft;
|
|
}
|
|
}
|
|
|
|
if ($this.hasClass("menu-container-width-mega")) {
|
|
var menu_width_container =
|
|
jQuery(container).parents(".main-navigation");
|
|
|
|
if ($full_width_main_container.hasClass("ast-above-header")) {
|
|
menu_width_container = jQuery(".ast-above-header-navigation");
|
|
} else if ($full_width_main_container.hasClass("ast-below-header")) {
|
|
menu_width_container = jQuery(".ast-below-header-actual-nav");
|
|
}
|
|
|
|
if (menu_width_container.length) {
|
|
$target_container = menu_width_container;
|
|
} else {
|
|
$target_container = $this.parent("ul");
|
|
}
|
|
|
|
$menuWidth = $target_container.width() + "px";
|
|
var $offset_right =
|
|
jQuery(window).width() -
|
|
($target_container.offset().left + $target_container.outerWidth());
|
|
var $current_offset = $this.offset();
|
|
var $width =
|
|
jQuery(window).width() - $offset_right - $current_offset.left,
|
|
positionLeft = parseInt($target_container.width() - $width),
|
|
positionRight =
|
|
parseInt($menuWidth) -
|
|
$this.outerWidth() -
|
|
parseInt($target_container.width() - $width);
|
|
}
|
|
if ($this.hasClass("full-width-mega")) {
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.css({
|
|
left: "-" + fullPositionLeft + "px",
|
|
width: $fullMenuWidth,
|
|
});
|
|
$this.find(".astra-megamenu").css({ width: $menuWidth });
|
|
} else if ($this.hasClass("full-stretched-width-mega")) {
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.css({
|
|
left: "-" + fullPositionLeft + "px",
|
|
width: $fullMenuWidth,
|
|
});
|
|
} else if ($this.hasClass("custom-width-mega")) {
|
|
if (astra.isRtl) {
|
|
$this
|
|
.find(".astra-mega-menu-width-custom")
|
|
.css({
|
|
right: "-" + customWithPositionRight + "px",
|
|
width: customMegaMenuWidth + "px",
|
|
});
|
|
} else {
|
|
$this
|
|
.find(".astra-mega-menu-width-custom")
|
|
.css({
|
|
left: "-" + customWithPositionLeft + "px",
|
|
width: customMegaMenuWidth + "px",
|
|
});
|
|
}
|
|
} else {
|
|
if (astra.isRtl) {
|
|
$this
|
|
.find(".astra-megamenu")
|
|
.css({ right: "-" + positionRight + "px", width: $menuWidth });
|
|
} else {
|
|
$this
|
|
.find(".astra-megamenu")
|
|
.css({ left: "-" + positionLeft + "px", width: $menuWidth });
|
|
}
|
|
}
|
|
} else {
|
|
if (astra.isRtl) {
|
|
$this
|
|
.find(".astra-megamenu")
|
|
.css({ right: "", width: "", "background-image": "" });
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.css({ right: "", width: "", "background-image": "" });
|
|
} else {
|
|
$this
|
|
.find(".astra-megamenu")
|
|
.css({ left: "", width: "", "background-image": "" });
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.css({ left: "", width: "", "background-image": "" });
|
|
}
|
|
}
|
|
});
|
|
|
|
jQuery(container).mouseenter(function () {
|
|
document.dispatchEvent(
|
|
new CustomEvent("astra_mega_menu_on_hover", { detail: {} })
|
|
);
|
|
});
|
|
});
|
|
}
|
|
|
|
apply_megamenu_width_styles();
|
|
|
|
document.addEventListener("astMenuHoverStyleChanged", function () {
|
|
apply_megamenu_width_styles();
|
|
});
|
|
|
|
// Achieve accessibility for megamenus using focusin on <a>.
|
|
[].slice.call(items).forEach(function (container) {
|
|
var ast_container = jQuery(container).parents(".ast-container"),
|
|
$main_container = ast_container.children(),
|
|
$full_width_main_container = ast_container.parent(),
|
|
$this = jQuery(container);
|
|
|
|
// Full width mega menu
|
|
if (
|
|
$this.hasClass("full-width-mega") ||
|
|
$this.hasClass("full-stretched-width-mega")
|
|
) {
|
|
$main_container = jQuery($main_container).closest(".ast-container");
|
|
$this.find(".astra-full-megamenu-wrapper").removeClass("ast-hidden");
|
|
}
|
|
|
|
$this.find(".menu-link").focusin(function (e) {
|
|
if (!astra.is_header_footer_builder_active) {
|
|
$this.find(".sub-menu").addClass("astra-megamenu-focus");
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.addClass("astra-megamenu-wrapper-focus");
|
|
}
|
|
|
|
$this.find(".sub-menu").removeClass("ast-hidden");
|
|
if (
|
|
parseInt(jQuery(window).width()) > parseInt(astra.break_point) &&
|
|
"ast-hf-mobile-menu" !== $this.parent().attr("id") &&
|
|
"ast-desktop-toggle-menu" !== $this.parent().attr("id")
|
|
) {
|
|
var $menuWidth = $main_container.width(),
|
|
$menuPosition = $main_container.offset(),
|
|
$menuItemPosition = $this.offset(),
|
|
positionLeft =
|
|
$menuItemPosition.left -
|
|
($menuPosition.left + parseFloat($main_container.css("paddingLeft"))),
|
|
positionRight = $menuItemPosition.left + $menuPosition.left;
|
|
|
|
var $fullMenuWidth = $full_width_main_container.width(),
|
|
$fullMenuPosition = $full_width_main_container.offset(),
|
|
fullPositionLeft =
|
|
$menuItemPosition.left -
|
|
($fullMenuPosition.left +
|
|
parseFloat($full_width_main_container.css("paddingLeft")));
|
|
|
|
if ($this.hasClass("custom-width-mega")) {
|
|
var customMegaMenuWidth =
|
|
window
|
|
.getComputedStyle(
|
|
$this.find(".astra-mega-menu-width-custom")[0],
|
|
"::before"
|
|
)
|
|
.getPropertyValue("content") || 1200;
|
|
|
|
customMegaMenuWidth = customMegaMenuWidth.replace(/[^0-9]/g, "");
|
|
customMegaMenuWidth = parseInt(customMegaMenuWidth);
|
|
|
|
if (customMegaMenuWidth <= $menuWidth) {
|
|
var extra_width = parseInt($menuWidth - customMegaMenuWidth),
|
|
customWithPositionLeft = parseInt(positionLeft - extra_width),
|
|
customWithPositionRight =
|
|
$menuPosition.left - customWithPositionLeft;
|
|
} else {
|
|
var extra_width = parseInt(customMegaMenuWidth - $menuWidth),
|
|
customWithPositionLeft = parseInt(positionLeft + extra_width),
|
|
customWithPositionRight =
|
|
$menuPosition.left + customWithPositionLeft;
|
|
}
|
|
}
|
|
|
|
if ($this.hasClass("menu-container-width-mega")) {
|
|
var menu_width_container =
|
|
jQuery(container).parents(".main-navigation");
|
|
|
|
if ($full_width_main_container.hasClass("ast-above-header")) {
|
|
menu_width_container = jQuery(".ast-above-header-navigation");
|
|
} else if ($full_width_main_container.hasClass("ast-below-header")) {
|
|
menu_width_container = jQuery(".ast-below-header-actual-nav");
|
|
}
|
|
|
|
if (menu_width_container.length) {
|
|
$target_container = menu_width_container;
|
|
} else {
|
|
$target_container = $this.parent("ul");
|
|
}
|
|
|
|
$menuWidth = $target_container.width() + "px";
|
|
var $offset_right =
|
|
jQuery(window).width() -
|
|
($target_container.offset().left + $target_container.outerWidth());
|
|
var $current_offset = $this.offset();
|
|
var $width =
|
|
jQuery(window).width() - $offset_right - $current_offset.left,
|
|
positionLeft = parseInt($target_container.width() - $width),
|
|
positionRight =
|
|
parseInt($menuWidth) -
|
|
$this.outerWidth() -
|
|
parseInt($target_container.width() - $width);
|
|
}
|
|
if ($this.hasClass("full-width-mega")) {
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.css({ left: "-" + fullPositionLeft + "px", width: $fullMenuWidth });
|
|
$this.find(".astra-megamenu").css({ width: $menuWidth });
|
|
} else if ($this.hasClass("full-stretched-width-mega")) {
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.css({ left: "-" + fullPositionLeft + "px", width: $fullMenuWidth });
|
|
} else if ($this.hasClass("custom-width-mega")) {
|
|
if (astra.isRtl) {
|
|
$this
|
|
.find(".astra-mega-menu-width-custom")
|
|
.css({
|
|
right: "-" + customWithPositionRight + "px",
|
|
width: customMegaMenuWidth + "px",
|
|
});
|
|
} else {
|
|
$this
|
|
.find(".astra-mega-menu-width-custom")
|
|
.css({
|
|
left: "-" + customWithPositionLeft + "px",
|
|
width: customMegaMenuWidth + "px",
|
|
});
|
|
}
|
|
} else {
|
|
if (astra.isRtl) {
|
|
$this
|
|
.find(".astra-megamenu")
|
|
.css({ right: "-" + positionRight + "px", width: $menuWidth });
|
|
} else {
|
|
$this
|
|
.find(".astra-megamenu")
|
|
.css({ left: "-" + positionLeft + "px", width: $menuWidth });
|
|
}
|
|
}
|
|
} else {
|
|
if (astra.isRtl) {
|
|
$this
|
|
.find(".astra-megamenu")
|
|
.css({ right: "", width: "", "background-image": "" });
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.css({ right: "", width: "", "background-image": "" });
|
|
} else {
|
|
$this
|
|
.find(".astra-megamenu")
|
|
.css({ left: "", width: "", "background-image": "" });
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.css({ left: "", width: "", "background-image": "" });
|
|
}
|
|
}
|
|
});
|
|
|
|
if (!astra.is_header_footer_builder_active) {
|
|
$this.find(".menu-link").keydown(function (e) {
|
|
if (e.which == 9 && e.shiftKey) {
|
|
$this.find(".sub-menu").removeClass("astra-megamenu-focus");
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.removeClass("astra-megamenu-wrapper-focus");
|
|
}
|
|
});
|
|
|
|
jQuery(container)
|
|
.find(".sub-menu .menu-item")
|
|
.last()
|
|
.focusout(function () {
|
|
$this.find(".sub-menu").removeClass("astra-megamenu-focus");
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.removeClass("astra-megamenu-wrapper-focus");
|
|
});
|
|
|
|
jQuery(window).click(function () {
|
|
$this.find(".sub-menu").removeClass("astra-megamenu-focus");
|
|
$this
|
|
.find(".astra-full-megamenu-wrapper")
|
|
.removeClass("astra-megamenu-wrapper-focus");
|
|
});
|
|
}
|
|
|
|
$this.click(function (event) {
|
|
if (!jQuery(event.target).hasClass("menu-item")) {
|
|
return;
|
|
}
|
|
// event.stopPropagation();
|
|
event.stopImmediatePropagation();
|
|
});
|
|
});
|