From 3f409eb20bbcf9ff52395f14cf3c2c51494965ce Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 20 Mar 2020 16:31:43 +0100
Subject: [PATCH] wip #3511 @0.5

---
 package.json                                  |  1 +
 resources/js/product-details.js               | 13 ++++
 .../styles/components/product-gallery.styl    |  4 +-
 .../views/partials/product-gallery.blade.php  | 66 ++++++++++---------
 4 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index c93b589..edbcfb3 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "devDependencies": {
         "@trevoreyre/autocomplete-vue": "^2.0.2",
         "axios": "^0.18",
+        "blueimp-gallery": "^2.36.0",
         "browser-sync": "^2.26.5",
         "browser-sync-webpack-plugin": "2.0.1",
         "cash-dom": "^4.1.5",
diff --git a/resources/js/product-details.js b/resources/js/product-details.js
index 76f5aa5..e8c7162 100644
--- a/resources/js/product-details.js
+++ b/resources/js/product-details.js
@@ -18,3 +18,16 @@ tippy('[data-tooltip]', {
         }
     },
 });
+
+import blueimp from 'blueimp-gallery';
+
+document.getElementById('product-gallery').onclick = function (event) {
+    event = event || window.event;
+    var target = event.target || event.srcElement,
+        link = target.src ? target.parentNode : target,
+        options = {index: link, event: event, closeOnSlideClick: true, carrousel: true},
+        links = this.querySelectorAll('a.g');
+
+    blueimp(links, options);
+};
+
diff --git a/resources/styles/components/product-gallery.styl b/resources/styles/components/product-gallery.styl
index 7e5f044..9b17a3f 100644
--- a/resources/styles/components/product-gallery.styl
+++ b/resources/styles/components/product-gallery.styl
@@ -1,7 +1,7 @@
 .product-gallery
 
   &-main
-    @apply bg-white relative border-gray-100 border-4 pb-100p mb-4 cursor-zoom-in
+    @apply bg-white relative border-gray-100 border-4 pb-100p mb-4 cursor-zoom-in block
 
   &-main-image
     @apply absolute bg-contain bg-center bg-no-repeat
@@ -11,7 +11,7 @@
     left: 15%
 
   &-thumb
-    @apply w-full bg-center bg-cover border-4 border-grey-100 cursor-zoom-in
+    @apply w-full bg-center bg-cover border-4 border-grey-100 cursor-zoom-in  block
 
   &-current
     @apply border-grey-300
diff --git a/resources/views/partials/product-gallery.blade.php b/resources/views/partials/product-gallery.blade.php
index 2e665c8..fafe228 100644
--- a/resources/views/partials/product-gallery.blade.php
+++ b/resources/views/partials/product-gallery.blade.php
@@ -1,37 +1,43 @@
 @php
-    $images=$product->getImagesData('images');
+    $images = $product->getImagesData('images','',null,$product->getEntity()->image_alt);
+    array_shift($images);
 @endphp
 
-<div class="product-gallery flex-grow" style="max-width: 348px;">
+<div id="product-gallery" class="product-gallery flex-grow" style="max-width: 348px;">
     <div class="product-gallery-main">
-        <div class="product-gallery-main-image">
+        <a href="{{$product->getEntity()->image}}" alt="{{$product->getEntity()->image_alt}}"
+           class="product-gallery-main-image g">
             <img src="{{$product->getEntity()->image}}" alt="{{$product->getEntity()->image_alt}}" class="bgimg"/>
-        </div>
-    </div>
-    <div class="grid grid-cols-3 grid-gap-sm">
-        @foreach($images as $image)
-            <div class="product-gallery-thumb">
-                <img src="{{$image['url']}}" alt="{{$image['alt']}}" class="bgimg cover"/>
-            </div>
-        @endforeach
+        </a>
     </div>
-    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls " style="display: none;">
-        <div class="slides" style="width: 7680px;"></div>
-        <h3 class="title"></h3>
-        <p class="description"></p> <a class="prev">
-            <svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
-                <g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
-                    <path d="M13.414 25l-12-12 12-12"></path>
-                    <path d="M1.413 13h36.001"></path>
-                </g>
-            </svg>
-        </a> <a class="next">
-            <svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
-                <g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
-                    <path d="M25 1l12 12-12 12"></path>
-                    <path d="M37.001 13H1"></path>
-                </g>
-            </svg>
-        </a> <a class="close">×</a>
-        <ol class="indicator"></ol> <!----></div>
+    @if(count($images)>0)
+        <div class="grid grid-cols-3 grid-gap-sm">
+            @foreach($images as $image)
+                <a href="{{$image['url']}}" title="{{$image['alt']}}" class="g product-gallery-thumb">
+                    <img src="{{$image['url']}}" alt="{{$image['alt']}}" class="bgimg cover"/>
+                </a>
+            @endforeach
+        </div>
+    @endif
+
+</div>
+<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls " style="display: none;">
+    <div class="slides" style="width: 7680px;"></div>
+    <h3 class="title"></h3>
+    <p class="description"></p> <a class="prev">
+        <svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
+                <path d="M13.414 25l-12-12 12-12"></path>
+                <path d="M1.413 13h36.001"></path>
+            </g>
+        </svg>
+    </a> <a class="next">
+        <svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
+                <path d="M25 1l12 12-12 12"></path>
+                <path d="M37.001 13H1"></path>
+            </g>
+        </svg>
+    </a> <a class="close">×</a>
+    <ol class="indicator"></ol> <!---->
 </div>
-- 
2.39.5