[IMP] website, website_sale: improve magnify feature

Move zoom next the original picture
Disable it if same img and max size with ratio < 1.5
Allow to enable zoom automatically
...

Task-33499

Co-authored-by: Jérémy Kersten <jke@odoo.com>

addons/website/static/src/js/content/zoomodoo.js

@@ -27,7 +27,7 @@ var defaults = {
     linkAttribute: 'data-zoom-image',
 
     // event to trigger zoom
-    event: 'click', //or mousenter
+    event: 'click', //or mouseenter
 
     // Prevent clicks on the zoom image link.
     preventClicks: true,
@@ -83,7 +83,7 @@ ZoomOdoo.prototype._init = function () {
         }
         $attach.parent().on('mousemove.zoomodoo touchmove.zoomodoo', $.proxy(this._onMove, this));
         $attach.parent().on('mouseleave.zoomodoo touchend.zoomodoo', $.proxy(this._onLeave, this));
-        this.$target.parent().on(this.opts.event + '.zoomodoo touchstart.zoomodoo', $.proxy(this._onEnter, this));
+        this.$target.on(this.opts.event + '.zoomodoo touchstart.zoomodoo', $.proxy(this._onEnter, this));
 
         if (this.opts.preventClicks) {
             this.$target.on('click.zoomodoo', function (e) { e.preventDefault(); });

addons/website/static/src/less/website.zoomodoo.less

@@ -17,19 +17,18 @@
     z-index: 100;
     overflow: hidden;
     background: #FFF;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    img {
+        max-width: 500%;
+    }
 }
 
 .zoomodoo-hover .zoomodoo-flyout {
-    top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
 }
 
 .zoomodoo-next .zoomodoo-flyout {
-    top: 0;
     left: 100%;
-    width: 100%;
-    height: 100%;
-    margin-left: 20px;
 }

addons/website_sale/static/src/js/website_sale.js

@@ -482,8 +482,24 @@ odoo.define('website_sale.website_sale', function (require) {
         }
     });
 
-    // Deactivate image zoom for mobile devices, since it might prevent users to scroll
+    // Do not activate image zoom for mobile devices, since it might prevent users from scrolling the page
     if (!config.device.isMobile) {
-        $('.ecom-zoomable img[data-zoom]').zoomOdoo({ attach: '#o-carousel-product'});
+
+        var autoZoom = $('.ecom-zoomable').data('ecom-zoom-auto') || false,
+        factorZoom = parseFloat($('.ecom-zoomable').data('ecom-zoom-factor')) || 1.5,
+        attach = '#o-carousel-product';
+        _.each($('.ecom-zoomable img[data-zoom]'), function (el) {
+            var $img = $(el);
+            $img.load(function(e) {
+                var el = e.currentTarget;
+                if (!_.str.endsWith(el.src, el.dataset.zoomImage) || // if zoom-img != img
+                    el.naturalWidth >= $(attach).width() * factorZoom || el.naturalHeight >= $(attach).height() * factorZoom) {
+                    $img.zoomOdoo({event: autoZoom ? 'mouseenter' : 'click', attach: attach});
+                }
+                else {
+                    $img.removeAttr('data-zoom');  // remove cursor
+                }
+            });
+        });
     }
 });

addons/website_sale/static/src/less/website_sale.less

@@ -782,12 +782,11 @@ a.no-decoration {
 }
 
 #o-carousel-product {
-    .carousel-inner div.item {
+    .carousel-inner div.item, .carousel-control {
         height: 400px;
-
-        img {
-            max-height: 100%;
-        }
+    }
+    .carousel-inner div.item img {
+        max-height: 100%;
     }
 
     .carousel-control {
@@ -829,8 +828,15 @@ a.no-decoration {
 }
 
 .ecom-zoomable {
-    img[data-zoom] {
-        cursor: zoom-in;
+    &:not(.ecom-autozoom) {
+        img[data-zoom] {
+            cursor: zoom-in;
+        }
+    }
+    &.ecom-autozoom {
+        img[data-zoom] {
+            cursor: crosshair;
+        }
     }
     .o_editable img[data-zoom] {
         cursor: pointer;

addons/website_sale/views/templates.xml

@@ -420,7 +420,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-sm-7">
+                        <div class="col-sm-6">
                             <span itemprop="image" t-attf-content="{{request.httprequest.url_root}}web/image/product.template/{{product.id}}/image" t-field="product.image" t-options="{'widget': 'image', 'class': 'product_detail_img', 'alt-field': 'name', 'zoom': 'image'}" groups="!website_sale.group_website_multi_image"/>
                             <t groups="website_sale.group_website_multi_image">
                                 <t t-set="variant_img" t-value="any(product.mapped('product_variant_ids.image_variant'))"/>
@@ -463,7 +463,7 @@
                                 </div>
                             </t>
                         </div>
-                        <div class="col-sm-5 col-lg-4 col-lg-offset-1" id="product_details">
+                        <div class="col-sm-6 col-lg-4 col-lg-offset-1" id="product_details">
                             <h1 itemprop="name" t-field="product.name">Product Name</h1>
                             <span itemprop="url" style="display:none;" t-esc="'%sshop/product/%s' % (request.httprequest.url_root, slug(product))"/>
                             <form action="/shop/cart/update" method="POST">
@@ -513,7 +513,13 @@
 
     <template inherit_id='website_sale.product' id="product_picture_magnify" customize_show="True" name="Activate Magnify">
         <xpath expr='//div[hasclass("js_sale")]' position='attributes'>
-            <attribute name="class" separator=" " add="ecom-zoomable zoomodoo-hover" />
+            <attribute name="class" separator=" " add="ecom-zoomable zoomodoo-next" />
+        </xpath>
+    </template>
+
+    <template inherit_id='website_sale.product_picture_magnify' id="product_picture_magnify_auto" active="False" customize_show="True" name="Auto Zoom">
+        <xpath expr='//div[hasclass("js_sale")]' position='attributes'>
+            <attribute name="data-ecom-zoom-auto">1</attribute>
         </xpath>
     </template>