From 7f0d0486c484b0d5d85aea174548ca0cf5b3eba7 Mon Sep 17 00:00:00 2001
From: "Lucas Vermeulen (luve)" <luve@odoo.com>
Date: Tue, 29 Nov 2022 14:11:48 +0000
Subject: [PATCH] [IMP] e-commerce : click and drag for the category filmstrip

In order to display all the category of the filmstrip, It was possible to use either the small bar by clicking on it and dragging, or to use the sliding move on the track pad. Since the bar to be dragged is very small, it was difficult to use it. Being able to click and drag everywhere on the filmstrip makes the move easier for the user.

task-3056398

closes odoo/odoo#106795

Signed-off-by: William Braeckman (wbr) <wbr@odoo.com>
---
 .../static/src/js/website_sale.js             | 44 +++++++++++++++++++
 .../static/src/scss/website_sale.scss         |  9 ++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index c963c1b0ef3..44f405d9c26 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -229,6 +229,11 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
         'change .js_main_product [data-attribute_exclusions]': 'onChangeVariant',
         'change oe_advanced_configurator_modal [data-attribute_exclusions]': 'onChangeVariant',
         'click .o_product_page_reviews_link': '_onClickReviewsLink',
+        'mousedown .o_wsale_filmstip_wrapper': '_onMouseDown',
+        'mouseleave .o_wsale_filmstip_wrapper': '_onMouseLeave',
+        'mouseup .o_wsale_filmstip_wrapper': '_onMouseUp',
+        'mousemove .o_wsale_filmstip_wrapper': '_onMouseMove',
+        'click .o_wsale_filmstip_wrapper' : '_onClickHandler',
     }),
 
     /**
@@ -241,6 +246,10 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
         this._changeCountry = _.debounce(this._changeCountry.bind(this), 500);
 
         this.isWebsite = true;
+        this.filmStripStartX = 0;
+        this.filmStripIsDown = false;
+        this.filmStripScrollLeft = 0;
+        this.filmStripMoved = false;
 
         delete this.events['change .main_product:not(.in_cart) input.js_quantity'];
         delete this.events['change [data-attribute_exclusions]'];
@@ -301,6 +310,41 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, car
     // Private
     //--------------------------------------------------------------------------
 
+    _onMouseDown: function (ev) {
+        this.filmStripIsDown = true;
+        this.filmStripStartX = ev.pageX - ev.currentTarget.offsetLeft;
+        this.filmStripScrollLeft = ev.currentTarget.scrollLeft;
+        this.formerTarget = ev.target;
+        this.filmStripMoved = false;
+    },
+    _onMouseLeave: function (ev) {
+        if (!this.filmStripIsDown) {
+            return;
+        }
+        ev.currentTarget.classList.remove('activeDrag');
+        this.filmStripIsDown = false
+    },
+    _onMouseUp: function (ev) {
+        this.filmStripIsDown = false;
+        ev.currentTarget.classList.remove('activeDrag');
+    },
+    _onMouseMove: function (ev) {
+        if (!this.filmStripIsDown) {
+            return;
+        }
+        ev.preventDefault();
+        ev.currentTarget.classList.add('activeDrag');
+        this.filmStripMoved = true;
+        const x = ev.pageX - ev.currentTarget.offsetLeft;
+        const walk = (x - this.filmStripStartX) * 2;
+        ev.currentTarget.scrollLeft = this.filmStripScrollLeft - walk;
+    },
+    _onClickHandler: function(ev) {
+        if(this.filmStripMoved) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    },
     _applyHash: function () {
         var hash = window.location.hash.substring(1);
         if (hash) {
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 6cbb54f6aaf..8ca1b473b2a 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -84,13 +84,14 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
 
         .o_wsale_filmstip {
             transform: translateX(0);
-
-            li {
-                scroll-snap-align: start;
-            }
         }
     }
 
+    .activeDrag * {
+        cursor: grabbing !important;
+        cursor: -webkit-grabbing;
+    }
+
     .o_payment_form .card {
         border-radius: 4px !important;
     }