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

spencerfinnell · spencerfinnell · commit fa740f8034b2 · 2019-08-18T19:57:21.000-04:00
diff --git a/app/integrations/facetwp/template-functions.php b/app/integrations/facetwp/template-functions.php
@@ -24,6 +24,7 @@ function bigbox_facetwp_wp_enqueue_scripts() {
 
 	$deps = [
 		$stylesheet,
+		( $stylesheet . '-simplebar' ),
 		'jquery',
 	];
 
diff --git a/app/integrations/woocommerce/template-functions.php b/app/integrations/woocommerce/template-functions.php
@@ -40,6 +40,7 @@ function bigbox_woocommerce_wp_enqueue_scripts() {
 
 	$deps = [
 		$stylesheet,
+		( $stylesheet . '-simplebar' ),
 		'wp-util',
 		'woocommerce',
 	];
diff --git a/app/integrations/woocommerce/wc-template-functions.php b/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;
diff --git a/app/theme/assets.php b/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',
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",
diff --git a/resources/assets/js/app/horizontal-menu.js b/resources/assets/js/app/horizontal-menu.js
@@ -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;
diff --git a/resources/assets/js/woocommerce/account-menu.js b/resources/assets/js/woocommerce/account-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' ) );
diff --git a/resources/assets/js/woocommerce/category-menu.js b/resources/assets/js/woocommerce/category-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' ) );
diff --git a/resources/assets/js/woocommerce/index.js b/resources/assets/js/woocommerce/index.js
@@ -17,3 +17,4 @@ import './checkout.js';
 import './products.js';
 import './lazyload.js';
 import './account-menu.js';
+import './category-menu.js';
diff --git a/resources/assets/scss/_config.scss b/resources/assets/scss/_config.scss
@@ -20,6 +20,9 @@
 @import "~bootstrap/scss/mixins/grid";
 @import "~bootstrap/scss/grid";
 
+// SimpleBar
+@import "~simplebar/src/simplebar.css";
+
 /**
  * Internal dependencies
  */
diff --git a/resources/assets/scss/modules/products-categories.scss b/resources/assets/scss/modules/products-categories.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", (
diff --git a/resources/assets/scss/modules/woocommerce-account.scss b/resources/assets/scss/modules/woocommerce-account.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;
diff --git a/resources/views/integrations/woocommerce/loop/loop-end.php b/resources/views/integrations/woocommerce/loop/loop-end.php
@@ -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; ?>
diff --git a/resources/views/integrations/woocommerce/loop/loop-start.php b/resources/views/integrations/woocommerce/loop/loop-start.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 ) : ?>
diff --git a/webpack.config.js b/webpack.config.js
@@ -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',

Original file line number	Diff line number	Diff line change
`@@ -78,6 +78,7 @@ function woocommerce_output_product_categories( $args = [] ) {`
`78`	`78`	`if ( $total > 5 ) {`
`79`	`79`	`$product_categories = array_slice( $product_categories, 0, 5 );`
`80`	`80`	`}`
	`81`	`+`
`81`	`82`	`// End modification.`
`82`	`83`	`if ( ! $product_categories ) {`
`83`	`84`	`return false;`