Usage
This function runs automatically, so it is not called manually. Is this incorrect?
Demo
Change tabs to see the log:
Additional Notes
This function essentially does the following:
- If a prerender was detected, send an event to Google Analytics and prevent videos from playing.
- If the page was hidden, trigger nebula_page_hidden, add a
page-visibility-hiddenclass to the body, and pause all videos. - Otherwise, if the page has become visible, trigger nebula_page_visible and remove the
page-visibility-hiddenfrom the body. Note: This does not automatically resume videos.
Source File
Located in /assets/js/modules/utilities.js on line 1131.
No Hooks
This function does not have any filters or actions available. Request one?nebula.visibilityChangeActions = function(){
if ( document.visibilityState === 'prerender' ){ //Page was prerendered
gtag('event', 'page_visibility', {
event_category: 'Page Visibility',
event_action: 'Prerendered',
event_label: 'Page loaded before tab/window was visible',
non_interaction: true
});
nebula.pauseAllVideos(false);
}
if ( document.visibilitystate === 'hidden' ){ //Page is hidden
nebula.dom.document.trigger('nebula_page_hidden');
nebula.dom.body.addClass('page-visibility-hidden');
nebula.pauseAllVideos(false);
} else { //Page is visible
nebula.networkAvailable();
nebula.dom.document.trigger('nebula_page_visible');
nebula.dom.body.removeClass('page-visibility-hidden');
}
};
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).
For non-module import functions:
nebula.visibilityChangeActions = function(){
//Write your own code here, leave it blank, or return false.
}
For dynamically imported module function overrides:
jQuery(window).on('load', function(){
nebula.visibilityChangeActions = 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.visibilityChangeActions === 'function' ){
nebula.visibilityChangeActions = function(){
//Write your own code here, leave it blank, or return false.
}
}
});