Usage
This function runs automatically, so it is not called manually. Is this incorrect?
Additional Notes
This function checks the ID #primarynav for their first sub-menu automatically.
Source File
Located in /assets/js/modules/helpers.js on line 199.
No Hooks
This function does not have any filters or actions available. Request one?
JavaScript
nebula.overflowDetector = async function(){
if ( jQuery('.sub-menu').length ){ //Only add the event listener if sub-menus actually exist
jQuery('.menu li.menu-item').on({
'mouseenter focus focusin': async function(){
await nebula.yield();
if ( jQuery(this).children('.sub-menu').length ){ //Check if this menu has sub-menus
let submenuLeft = jQuery(this).children('.sub-menu').offset().left; //Left side of the sub-menu
let submenuRight = submenuLeft+jQuery(this).children('.sub-menu').width(); //Right side of the sub-menu
if ( submenuRight > nebula.dom.window.width() ){ //If the right side is greater than the width of the viewport
jQuery(this).children('.sub-menu').addClass('overflowing overflowing-left');
} else if ( submenuLeft > nebula.dom.window.width() ){
jQuery(this).children('.sub-menu').addClass('overflowing overflowing-right');
} else {
//jQuery(this).children('.sub-menu').removeClass('overflowing overflowing-left overflowing-right'); //This sometimes causes a movement/overflow on click so seems to work fine/better with it commented out.
}
}
},
'mouseleave': function(){
jQuery(this).children('.sub-menu').removeClass('overflowing overflowing-left overflowing-right');
}
});
}
};
Override
To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).
JavaScript
For non-module import functions:
nebula.overflowDetector = function(){
//Write your own code here, leave it blank, or return false.
}
For dynamically imported module function overrides:
jQuery(window).on('load', function(){
nebula.overflowDetector = function(){
//Write your own code here, leave it blank, or return false.
}
});
Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:
jQuery(document).on('nebula_module_loaded', function(module){
//Note that the module variable is also available to know which module specifically was imported
if ( typeof nebula.overflowDetector === 'function' ){
nebula.overflowDetector = function(){
//Write your own code here, leave it blank, or return false.
}
}
});