From 9bf7ea4b11ed9b19f0d076cf646b2d09556c277e Mon Sep 17 00:00:00 2001
From: Monica Mateiu <monica.mateiu@shopify.com>
Date: Wed, 28 Sep 2022 09:09:07 +0100
Subject: [PATCH] default to lightbox on mobile when hover selected

---
 assets/magnify.js                 |  18 +++--
 assets/section-main-product.css   |  13 +++-
 assets/theme-editor.js            |  10 +++
 sections/featured-product.liquid  | 105 +++++++++++++++++++-----------
 sections/main-product.liquid      |   9 ++-
 snippets/product-thumbnail.liquid |  20 +++---
 6 files changed, 115 insertions(+), 60 deletions(-)

diff --git a/assets/magnify.js b/assets/magnify.js
index 82842faff35..b318c22c2c2 100644
--- a/assets/magnify.js
+++ b/assets/magnify.js
@@ -1,5 +1,5 @@
 // create a container and set the full-size image as its background
-const createOverlay = (image) => {
+function createOverlay(image) {
   overlay = document.createElement('div');
   overlay.setAttribute('class', 'image--full-size');
   overlay.setAttribute('aria-hidden', 'true');
@@ -7,7 +7,7 @@ const createOverlay = (image) => {
   return overlay;
 };
 
-const moveWithHover = (image, event, zoomRatio) => {
+function moveWithHover(image, event, zoomRatio) {
   // calculate mouse position
   const ratio = image.height / image.width;
   const container = event.target.getBoundingClientRect();
@@ -21,17 +21,21 @@ const moveWithHover = (image, event, zoomRatio) => {
   overlay.style.backgroundSize = `${image.width * zoomRatio}px`;
 };
 
-const magnify = (image, zoomRatio) => {
+function magnify(image, zoomRatio) {
   // add full-size image on top of original
   const overlay = createOverlay(image);
   image.parentElement.insertBefore(overlay, image);
 
   overlay.onclick = () => overlay.remove();
   overlay.onmousemove = (event) => moveWithHover(image, event, zoomRatio);
+  overlay.onmouseleave = () => overlay.remove();
 }
 
-const images = document.querySelectorAll('.image--original');
+function enableZoomOnHover() {
+  const images = document.querySelectorAll('.image--hover');
+  images && images.forEach(image => {
+    image.onclick = () => magnify(image, 2);
+  });
+}
 
-images.forEach(image => {
-  image.onclick = () => magnify(image, 3);
-});
+enableZoomOnHover();
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index 032c9a1e734..c16fd1efe67 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -1145,12 +1145,23 @@ a.product__text {
 .image--full-size {
   cursor: zoom-out;
   z-index: 1;
+  margin: 0;
 }
 
-.image--original {
+.image--hover {
   cursor: zoom-in;
 }
 
+.lightbox-button--none {
+  pointer-events: none;
+}
+
+@media (hover: hover) {
+  .lightbox-button--hover {
+    pointer-events: none;
+  }
+}
+
 .product__media-container {
   overflow: hidden !important;
 }
diff --git a/assets/theme-editor.js b/assets/theme-editor.js
index c847f7a9e69..10b33c5fe19 100644
--- a/assets/theme-editor.js
+++ b/assets/theme-editor.js
@@ -18,3 +18,13 @@ document.addEventListener('shopify:block:deselect', function(event) {
   const parentSlideshowComponent = event.target.closest('slideshow-component');
   if (parentSlideshowComponent.autoplayButtonIsSetToPlay) parentSlideshowComponent.play();
 });
+
+document.addEventListener('shopify:section:load', () => {
+  const zoomOnHoverScript = document.querySelector('[id^=enableZoomOnHover]');
+  if (!zoomOnHoverScript) return;
+  if (zoomOnHoverScript) {
+    const newScriptTag = document.createElement('script');
+    newScriptTag.src = zoomOnHoverScript.src;
+    zoomOnHoverScript.parentNode.replaceChild(newScriptTag, zoomOnHoverScript);
+  }
+});
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index a44b3e83525..0aadfc9c00a 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -625,52 +625,54 @@
         </div>
       {%- endif -%}
     </div>
-    <product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
-      <div
-        class="product-media-modal__dialog"
-        role="dialog"
-        aria-label="{{ 'products.modal.label' | t }}"
-        aria-modal="true"
-        tabindex="-1"
-      >
-        <button
-          id="ModalClose-{{ section.id }}"
-          type="button"
-          class="product-media-modal__toggle"
-          aria-label="{{ 'accessibility.close' | t }}"
-        >
-          {% render 'icon-close' %}
-        </button>
-
+    {% if section.settings.image_zoom == 'lightbox' %}
+      <product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
         <div
-          class="product-media-modal__content color-background-1 gradient"
-          role="document"
+          class="product-media-modal__dialog"
+          role="dialog"
           aria-label="{{ 'products.modal.label' | t }}"
-          tabindex="0"
+          aria-modal="true"
+          tabindex="-1"
         >
-          {%- liquid
-            if product.selected_or_first_available_variant.featured_media != null
-              assign media = product.selected_or_first_available_variant.featured_media
-              render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
-            endif
-          -%}
+          <button
+            id="ModalClose-{{ section.id }}"
+            type="button"
+            class="product-media-modal__toggle"
+            aria-label="{{ 'accessibility.close' | t }}"
+          >
+            {% render 'icon-close' %}
+          </button>
 
-          {%- for media in product.media -%}
+          <div
+            class="product-media-modal__content color-background-1 gradient"
+            role="document"
+            aria-label="{{ 'products.modal.label' | t }}"
+            tabindex="0"
+          >
             {%- liquid
-              if section.settings.hide_variants and media_to_render contains media.id
-                assign variant_image = true
-              else
-                assign variant_image = false
+              if product.selected_or_first_available_variant.featured_media != null
+                assign media = product.selected_or_first_available_variant.featured_media
+                render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
               endif
-
-              unless media.id == product.selected_or_first_available_variant.featured_media.id
-                render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
-              endunless
             -%}
-          {%- endfor -%}
+
+            {%- for media in product.media -%}
+              {%- liquid
+                if section.settings.hide_variants and media_to_render contains media.id
+                  assign variant_image = true
+                else
+                  assign variant_image = false
+                endif
+
+                unless media.id == product.selected_or_first_available_variant.featured_media.id
+                  render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
+                endunless
+              -%}
+            {%- endfor -%}
+          </div>
         </div>
-      </div>
-    </product-modal>
+      </product-modal>
+    {% endif %}
   </div>
 </section>
 
@@ -681,6 +683,12 @@
   </script>
   <script src="{{ 'product-model.js' | asset_url }}" defer></script>
 {%- endif -%}
+{% if section.settings.image_zoom == 'hover' %}
+  <script id="enableZoomOnHover-featured" src="{{ 'magnify.js' | asset_url }}" defer="defer"></script>
+{% endif %}
+{%- if request.design_mode and section.settings.image_zoom != 'hover' -%}
+  <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
+{%- endif -%}
 
 {%- liquid
   if product.selected_or_first_available_variant.featured_media
@@ -1603,6 +1611,27 @@
       "label": "t:sections.featured-product.settings.media_position.label",
       "info": "t:sections.featured-product.settings.media_position.info"
     },
+    {
+      "type": "select",
+      "id": "image_zoom",
+      "options": [
+        {
+          "value": "lightbox",
+          "label": "t:sections.main-product.settings.image_zoom.options__1.label"
+        },
+        {
+          "value": "hover",
+          "label": "t:sections.main-product.settings.image_zoom.options__2.label"
+        },
+        {
+          "value": "none",
+          "label": "t:sections.main-product.settings.image_zoom.options__3.label"
+        }
+      ],
+      "default": "lightbox",
+      "label": "t:sections.main-product.settings.image_zoom.label",
+      "info": "t:sections.main-product.settings.image_zoom.info"
+    },
     {
       "type": "checkbox",
       "id": "hide_variants",
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 51ef06d5301..776a75ea60a 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -27,6 +27,12 @@
   {%- endstyle -%}
 
   <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
+  {% if section.settings.image_zoom == 'hover' %}
+    <script id="enableZoomOnHover-main" src="{{ 'magnify.js' | asset_url }}" defer="defer"></script>
+  {% endif %}
+  {%- if request.design_mode and section.settings.image_zoom != 'hover' -%}
+    <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
+  {%- endif -%}
 
   {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}
   {%- if first_3d_model -%}
@@ -1146,9 +1152,6 @@
           endif
         -%}
 
-        {% if section.settings.image_zoom == 'hover' %}
-          <script src="{{ 'magnify.js' | asset_url }}" defer="defer"></script>
-        {% endif %}
         {%- for media in product.media -%}
           {%- liquid
             if section.settings.hide_variants and variant_images contains media.src
diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid
index bfa1c0ffed2..e596df4ace4 100644
--- a/snippets/product-thumbnail.liquid
+++ b/snippets/product-thumbnail.liquid
@@ -38,8 +38,8 @@
     assign mobile_columns = 2
   endif
 
-  if section.settings.image_zoom == 'hover'
-    assign image_class = 'image--original'
+  if media.media_type == 'image'
+    assign image_class = 'image--' | append: section.settings.image_zoom
   endif
 -%}
 
@@ -74,7 +74,7 @@
 </noscript>
 
 <modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
-  {%- if section.settings.image_zoom == 'lightbox' %}
+  {% if media.media_type != 'image' or section.settings.image_zoom == 'lightbox' %}
     <span class="product__media-icon motion-reduce quick-add-hidden" aria-hidden="true">
       {%- liquid
         case media.media_type
@@ -87,7 +87,7 @@
         endcase
       -%}
     </span>
-  {%- endif %}
+  {% endif %}
 
   <div class="product__media product__media-container media media--transparent gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
     {{ media.preview_image | image_url: width: 1946 | image_tag:
@@ -98,13 +98,11 @@
       alt: media.preview_image.alt | escape
     }}
   </div>
-  {% if section.settings.image_zoom == 'lightbox' %}
-    <button class="product__media-toggle quick-add-hidden" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
-      <span class="visually-hidden">
-        {{ 'products.product.media.open_media' | t: index: position }}
-      </span>
-    </button>
-  {% endif %}
+  <button class="product__media-toggle quick-add-hidden lightbox-button--{{ section.settings.image_zoom }}" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
+    <span class="visually-hidden">
+      {{ 'products.product.media.open_media' | t: index: position }}
+    </span>
+  </button>
 </modal-opener>
 
 {%- if media.media_type != 'image' -%}