Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active July 5, 2023 03:41
Show Gist options
  • Save neilgee/a2b2dd490d33602a120f60083b5f10ca to your computer and use it in GitHub Desktop.
Save neilgee/a2b2dd490d33602a120f60083b5f10ca to your computer and use it in GitHub Desktop.
gridbuilderWP with PowerPack Off-Canvas Menu - auto close menu on facet refresh/change
<?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;
}
// 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();
} );
} );
} );
// 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
});
});
[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"]
.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%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment