[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>

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) {

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;
     }