Merge branch 'release/3.4.0' of github.com:bigboxwc/bigbox into release/3.4.0

Author: spencerfinnell

app/integrations/facetwp/template-functions.php

@@ -24,6 +24,7 @@ function bigbox_facetwp_wp_enqueue_scripts() {
 
 	$deps = [
 		$stylesheet,
+		( $stylesheet . '-simplebar' ),
 		'jquery',
 	];
 

app/integrations/woocommerce/template-functions.php

@@ -40,6 +40,7 @@ function bigbox_woocommerce_wp_enqueue_scripts() {
 
 	$deps = [
 		$stylesheet,
+		( $stylesheet . '-simplebar' ),
 		'wp-util',
 		'woocommerce',
 	];

app/integrations/woocommerce/wc-template-functions.php

@@ -78,6 +78,7 @@ function woocommerce_output_product_categories( $args = [] ) {
 	if ( $total > 5 ) {
 		$product_categories = array_slice( $product_categories, 0, 5 );
 	}
+
 	// End modification.
 	if ( ! $product_categories ) {
 		return false;

app/theme/assets.php

@@ -73,11 +73,21 @@ function bigbox_enqueue_scripts() {
 	$version    = bigbox_get_theme_version();
 	$stylesheet = bigbox_get_theme_name();
 
+	// SimpleBar.
+	wp_enqueue_script(
+		$stylesheet . '-simplebar',
+		get_template_directory_uri() . '/public/js/simplebar.min.js',
+		array(),
+		'4.1.0',
+		true
+	);
+
 	$deps = [
 		'hoverIntent',
+		( $stylesheet . '-simplebar' ),
 	];
 
-	// Combined application scripts.
+	// Application script.
 	wp_enqueue_script(
 		$stylesheet,
 		get_template_directory_uri() . '/public/js/app.min.js',

package-lock.json

@@ -36,6 +36,7 @@
 		"postcss-loader": "3.0.0",
 		"raw-loader": "3.1.0",
 		"sass-loader": "7.2.0",
+		"simplebar": "4.1.0",
 		"stylelint": "10.1.0",
 		"stylelint-config-wordpress": "14.0.0",
 		"svg-sprite-loader": "4.1.6",

package.json

@@ -1,3 +1,5 @@
+/* global SimpleBar */
+
 /**
  * Scroll a horizontal menu to the active item.
  *
@@ -11,6 +13,8 @@ const horizontalMenu = ( menuClass, activeClass ) => {
 		return;
 	}
 
+	// Custom scrolling.
+	const simpleBar = new SimpleBar( menu );
 	const activeLink = document.querySelector( `${ menuClass } ${ activeClass }` );
 
 	if ( ! activeLink ) {
@@ -20,7 +24,7 @@ const horizontalMenu = ( menuClass, activeClass ) => {
 	const activeOffset = activeLink.getBoundingClientRect();
 	const menuOffset = menu.getBoundingClientRect();
 
-	menu.scrollLeft = activeOffset.x + ( activeOffset.width / 2 ) + menu.scrollLeft - ( menuOffset.width / 2 );
+	simpleBar.getScrollElement().scrollLeft = activeOffset.x + ( activeOffset.width / 2 ) + menu.scrollLeft - ( menuOffset.width / 2 );
 };
 
 export default horizontalMenu;

resources/assets/js/app/horizontal-menu.js

@@ -8,4 +8,4 @@ import domReady from '@wordpress/dom-ready';
  */
 import horizontalMenu from './../app/horizontal-menu.js';
 
-domReady( horizontalMenu( '.woocommerce-MyAccount-navigation ul', '.is-active' ) );
+domReady( horizontalMenu( '.woocommerce-MyAccount-navigation', '.is-active' ) );

resources/assets/js/woocommerce/account-menu.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Internal dependencies.
+ */
+import horizontalMenu from './../app/horizontal-menu.js';
+
+domReady( horizontalMenu( '.woocommerce-product-categories-wrapper' ) );

resources/assets/js/woocommerce/category-menu.js

@@ -17,3 +17,4 @@ import './checkout.js';
 import './products.js';
 import './lazyload.js';
 import './account-menu.js';
+import './category-menu.js';

resources/assets/js/woocommerce/index.js

@@ -20,6 +20,9 @@
 @import "~bootstrap/scss/mixins/grid";
 @import "~bootstrap/scss/grid";
 
+// SimpleBar
+@import "~simplebar/src/simplebar.css";
+
 /**
  * Internal dependencies
  */

resources/assets/scss/_config.scss

@@ -1,11 +1,15 @@
-// [1] Give any potential scrollbar more room so it does not overlap.
+.woocommerce-product-categories-wrapper {
+	-webkit-overflow-scrolling: touch;
+	margin-bottom: $spacer;
+}
+
 .woocommerce-page ul.products-categories,
 .woocommerce ul.products-categories {
 	display: flex;
-	overflow-x: scroll;
-	-webkit-overflow-scrolling: touch;
 	position: relative;
-	padding-bottom: $spacer; // [1]
+
+	@include reset-list();
+
 	padding-left: 2px;
 	padding-right: 2px;
 
@@ -17,10 +21,7 @@
 			border-radius: $border-radius;
 		}
 
-
 		@include gray("background", "200");
-		bottom: $spacer;
-		height: calc(100% - #{$spacer});
 	}
 
 	@include vertical-spacing("margin", "down", (

resources/assets/scss/modules/products-categories.scss

@@ -1,7 +1,8 @@
-// [1] Give any potential scrollbar more room so it does not overlap.
 .woocommerce-MyAccount-navigation {
 	margin: -($spacer) 0 $spacer;
+	padding: 0 0 $spacer;
 	position: relative;
+	-webkit-overflow-scrolling: touch;
 
 	&::after {
 		content: "";
@@ -21,11 +22,9 @@
 
 		@include reset-list();
 
-		padding: 0 0 $spacer; // [1]
+		margin: 0;
+		padding: 0;
 		display: flex;
-		overflow-x: scroll;
-		overflow-y: hidden;
-		-webkit-overflow-scrolling: touch;
 
 		li {
 			flex: 1 0 auto;

resources/assets/scss/modules/woocommerce-account.scss

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Product Loop End
+ *
+ * This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-end.php.
+ *
+ * HOWEVER, on occasion WooCommerce will need to update template files and you
+ * (the theme developer) will need to copy the new files to your theme to
+ * maintain compatibility. We try to do this as little as possible, but it does
+ * happen. When this occurs the version of the template file will be bumped and
+ * the readme will list any important changes.
+ *
+ * @see 	    https://docs.woocommerce.com/document/template-structure/
+ * @package 	WooCommerce/Templates
+ * @version     2.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$main = 'main' === wc_get_loop_prop( 'products-loop' );
+?>
+
+</ul>
+
+<?php if ( ! $main ) : ?>
+</div>
+<?php endif; ?>

resources/views/integrations/woocommerce/loop/loop-end.php

@@ -38,6 +38,10 @@
 );
 ?>
 
+<?php if ( ! $main ) : ?>
+<div class="woocommerce-product-categories-wrapper">
+<?php endif; ?>
+
 <ul class="<?php echo esc_attr( $classes ); ?>">
 
 <?php if ( bigbox_is_integration_active( 'facetwp' ) && $main ) : ?>

resources/views/integrations/woocommerce/loop/loop-start.php

@@ -114,6 +114,7 @@ const config = {
 		jquery: 'jQuery',
 		$: 'jQuery',
 		'@wordpress/element': 'wp.element',
+		simplebar: 'window.SimpleBar',
 	},
 	plugins: [
 		new SpritePlugin(),
@@ -122,6 +123,10 @@ const config = {
 				from: 'resources/assets/images/icons',
 				to: 'public/images/icons',
 			},
+			{
+				from: './node_modules/simplebar/dist/simplebar.min.js',
+				to: 'public/js/simplebar.min.js',
+			},
 		] ),
 		new MiniCssExtractPlugin( {
 			filename: './public/css/[name].min.css',