gridbuilderWP with PowerPack Off-Canvas Menu - auto close menu on facet refresh/change

functions.php

<?php ~> don't add me / this function calls the script.js

add_filter( 'wp_grid_builder/frontend/register_scripts', 'prefix_register_script' );

//gridbuilder external js script
function prefix_register_script( $scripts ) {

	$scripts[] = [
		'handle'  => 'global',
		'source'  => '/wp-content/themes/mytheme/js/script.js',
		'version' => '1.0.0',
	];

	return $scripts;

}

javascript-direct.js

// Scroll into view on Reset - add code directly to BB Page via JS insertion box
window.addEventListener( 'wpgb.loaded', function() {
	window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', function( wpgb ) {
		wpgb.facets && wpgb.facets.on( 'reset', function() {
			wpgb.element.scrollIntoView();
		} );
	} );
} );


// Scroll into view on Facet refresh - add code directly to BB Page via JS insertion box
window.addEventListener( 'wpgb.loaded', function() {
    window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', function( wpgb ) {
        wpgb.facets && wpgb.facets.on( 'change', function( slug ) {
          'load_more' !== wpgb.facets.getFacet( slug )[ 0 ].type && wpgb.element.scrollIntoView();
        } );		
    } );
} );

script.js

// We listen every time a grid/template/content is initialized.
window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', function( wpgb ) {

    console.dir( wpgb ); // Holds all instances.


	wpgb.facets.on( 'change', function( slug ) {  

		pp_offcanvas_oijtr5hndzls._close(); // Close PowerPack Menu On Facet Reset

		'load_more' !== wpgb.facets.getFacet( slug )[ 0 ].type && wpgb.element.scrollIntoView(); // Scroll into view

		console.log("Facets Changing"); // Check it's working

	});

	wpgb.facets.on( 'reset', function( facets ) { 

		wpgb.element.scrollIntoView();

		pp_offcanvas_oijtr5hndzls._close(); // Close PowerPack Menu On Facet Reset

	});

});

shortcode.txt

[wpgb_facet id="1" grid="bb-module-5fb459dac4ae9"]
[wpgb_facet id="2" grid="bb-module-5fb459dac4ae9"]
[wpgb_facet id="3" grid="bb-module-5fb459dac4ae9"]
[wpgb_facet id="4" grid="bb-module-5fb459dac4ae9"]
[wpgb_facet id="5" grid="bb-module-5fb459dac4ae9"]

style.css

.fl-module-wpgb_facet .wpgb-facet button.wpgb-apply, 
.fl-module-wpgb_facet .wpgb-facet button.wpgb-reset,
.pp-offcanvas-body .wpgb-facet button.wpgb-apply, 
.pp-offcanvas-body .wpgb-facet button.wpgb-reset,
.pp-offcanvas-body .wpgb-facet button.wpgb-button  {
	background-color: #fff;
	color: #000;
	border: 1px solid #000;
	text-transform: uppercase;
	margin: 0 0 40px 0;
	padding: 8px 36px;
}

.fl-module-wpgb_facet .wpgb-facet button.wpgb-reset:hover,
.pp-offcanvas-body .wpgb-facet button.wpgb-apply:hover, 
.pp-offcanvas-body .wpgb-facet button.wpgb-reset:hover,
.pp-offcanvas-body .wpgb-facet button.wpgb-button:hover {
	background-color: #373866;
	color: #fff;
}

/* To add a loading spinner add some more CSS */

/* Add in custom CC class to posts module */
.post-grid-container {
	position: relative;
}

.fl-module-post-grid.wpgb-loading {
	opacity: 0.2;	
}

.fl-module-post-grid.wpgb-loading:after {
	border: 16px solid #c6c4c4; 
	border-top: 16px solid #f1f1f1; 
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	position: fixed;
	left: 50%;
	top: 25%;
	transform: translate(-50%, -50%);
	z-index: 99999;
	opacity: 1;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
} 

@media(max-width:767px) {
	.fl-module-post-grid.wpgb-loading:after {
	    left: 40%;
	    top: 50%;

	}
}