From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 9 Oct 2019 17:01:28 +0000 (+0200)
Subject: Large image popups + better image handling for products. WIP #3074
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=291084f51aba40bd30aa5c8dafbb00a75b600b11;p=pmi.git

Large image popups + better image handling for products. WIP #3074
---

diff --git a/app/Models/Product.php b/app/Models/Product.php
index 606eb69..54fce9b 100644
--- a/app/Models/Product.php
+++ b/app/Models/Product.php
@@ -8,6 +8,7 @@ use Cubist\Util\Json;
 use Illuminate\Support\Facades\App;
 use Illuminate\Support\Str;
 use Spatie\MediaLibrary\Models\Media;
+use Spatie\Image\Manipulations;
 
 class Product extends CubistMagicPageModel
 {
@@ -144,6 +145,20 @@ class Product extends CubistMagicPageModel
         $this->addSpecifications();
     }
 
+    // Image handling
+    public function registerMediaConversions(Media $media = null) {
+
+        parent::registerMediaConversions($media);
+
+        $this->addMediaConversion('thumb')
+            ->width(300)
+            ->height(300);
+
+        $this->addMediaConversion('large')
+            ->fit(Manipulations::FIT_MAX, 1200, 1000); // Don't enlarge small images
+    }
+
+
     protected static function _getRelatedEntities()
     {
         if (null === self::$_specifications) {
@@ -345,7 +360,7 @@ class Product extends CubistMagicPageModel
     {
         if ($this->images) {
 
-            $image = $this->getFirstMediaUrl($this->images);
+            $image = $this->getFirstMediaUrl($this->images, 'thumb');
 
             if ($image) {
                 return $image;
diff --git a/package.json b/package.json
index 3a73abb..41c7aa6 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
         "tippy.js": "^4.3.5",
         "unorm": "^1.6.0",
         "vue": "^2.6.10",
+        "vue-gallery": "^2.0.0",
         "vue-slide-up-down": "^1.7.2",
         "vue-slider-component": "^3.0.40",
         "vue-template-compiler": "^2.6.10"
diff --git a/public/images/vendor/blueimp-gallery/error.png b/public/images/vendor/blueimp-gallery/error.png
new file mode 100644
index 0000000..a5577c3
Binary files /dev/null and b/public/images/vendor/blueimp-gallery/error.png differ
diff --git a/public/images/vendor/blueimp-gallery/error.svg b/public/images/vendor/blueimp-gallery/error.svg
new file mode 100644
index 0000000..184206a
--- /dev/null
+++ b/public/images/vendor/blueimp-gallery/error.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
+	<circle cx="32" cy="32" r="25" stroke="red" stroke-width="7" fill="black" fill-opacity="0.2"/>
+	<rect x="28" y="7" width="8" height="50" fill="red" transform="rotate(45, 32, 32)"/>
+</svg>
diff --git a/public/images/vendor/blueimp-gallery/loading.gif b/public/images/vendor/blueimp-gallery/loading.gif
new file mode 100644
index 0000000..90f28cb
Binary files /dev/null and b/public/images/vendor/blueimp-gallery/loading.gif differ
diff --git a/public/images/vendor/blueimp-gallery/play-pause.png b/public/images/vendor/blueimp-gallery/play-pause.png
new file mode 100644
index 0000000..ece6cfb
Binary files /dev/null and b/public/images/vendor/blueimp-gallery/play-pause.png differ
diff --git a/public/images/vendor/blueimp-gallery/play-pause.svg b/public/images/vendor/blueimp-gallery/play-pause.svg
new file mode 100644
index 0000000..a7f1f50
--- /dev/null
+++ b/public/images/vendor/blueimp-gallery/play-pause.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="15">
+	<polygon points="2,1 2,14 13,7" stroke="black" stroke-width="1" fill="white"/>
+	<rect x="17" y="2" width="4" height="11" stroke="black" stroke-width="1" fill="white"/>
+	<rect x="24" y="2" width="4" height="11" stroke="black" stroke-width="1" fill="white"/>
+</svg>
diff --git a/public/images/vendor/blueimp-gallery/video-play.png b/public/images/vendor/blueimp-gallery/video-play.png
new file mode 100644
index 0000000..353e3a5
Binary files /dev/null and b/public/images/vendor/blueimp-gallery/video-play.png differ
diff --git a/public/images/vendor/blueimp-gallery/video-play.svg b/public/images/vendor/blueimp-gallery/video-play.svg
new file mode 100644
index 0000000..b5ea206
--- /dev/null
+++ b/public/images/vendor/blueimp-gallery/video-play.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
+	<circle cx="32" cy="32" r="25" stroke="white" stroke-width="7" fill="black" fill-opacity="0.2"/>
+	<polygon points="26,22 26,42 43,32" fill="white"/>
+</svg>
diff --git a/resources/js/components/ProductGallery.vue b/resources/js/components/ProductGallery.vue
index 6733217..3fc2570 100644
--- a/resources/js/components/ProductGallery.vue
+++ b/resources/js/components/ProductGallery.vue
@@ -1,32 +1,51 @@
 <template>
     <div class="product-gallery" v-show="images.length > 0">
         <div class="product-gallery-main">
-            <div class="product-gallery-main-image" :style="`background-image:url(${images[currentImage]})`"></div>
+            <div class="product-gallery-main-image cursor-zoom-in" :style="`background-image:url(${thumbnails[currentImage]})`" @click="lightboxImage = currentImage"></div>
         </div>
         <div class="grid grid-cols-3 grid-gap-sm" v-show="images.length > 1">
-            <div v-for="(image, i) in images"
+            <div v-for="(thumb, i) in thumbnails"
                  :key="i"
-                 :style="`background-image:url(${image})`"
+                 :style="`background-image:url(${thumb})`"
                  :class="{ 'product-gallery-current' : currentImage === i }"
                  class="product-gallery-thumb"
                  @click="currentImage = i"
             >
             </div>
         </div>
+        <!-- Options reference: https://github.com/blueimp/Gallery#options -->
+        <lightbox-gallery
+            :options="{ closeOnSlideClick: true }"
+            :images="images"
+            :index="lightboxImage"
+            @close="lightboxImage = null"
+        >
+            <template v-slot:close>×</template>
+        </lightbox-gallery>
     </div>
 </template>
 
 <script>
+    import VueGallery from 'vue-gallery';
 
     export default {
 
+        components: {
+            'lightbox-gallery': VueGallery
+        },
+
         props: {
             images: {
+                type: Array,
                 required: true,
+            },
+            thumbnails: {
+                type: Array
             }
         },
         data: () => ({
             currentImage: 0,
+            lightboxImage: null,
         }),
 
         computed: {
@@ -34,7 +53,8 @@
         },
 
         created() {
-
+            // Fallback to using images if thumbnails not passed
+            this.thumbnails = this.thumbnails || this.images;
         },
 
         mounted() {
diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index fff60f0..de17a7b 100644
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -24,7 +24,8 @@
 
             {{-- Product images --}}
             <product-gallery
-                :images='@json($product->getImageURLList('images', '', [$product->getEntity()->image_fallback]))'
+                :thumbnails='@json($product->getImageURLList('images', 'thumb', [$product->getEntity()->image_fallback]))'
+                :images='@json($product->getImageURLList('images', 'large', [$product->getEntity()->image_fallback]))'
                 class="flex-grow"
                 style="max-width: 348px">
             </product-gallery>
diff --git a/routes/backpack/custom.php b/routes/backpack/custom.php
index 53bcf04..63455e1 100644
--- a/routes/backpack/custom.php
+++ b/routes/backpack/custom.php
@@ -24,6 +24,11 @@ Route::group([
         Route::match(['delete'], 'page/{id}/media/{mediaId}', 'PageCrudController@deleteMedia');
         Route::match(['post'], 'page/{id}/media/reorder', 'PageCrudController@reorderMedia');
     });
+    CRUD::resource('product', 'ProductCrudController')->with(function () {
+        Route::match(['post'], 'product/{id}/media', 'ProductCrudController@uploadMedia');
+        Route::match(['delete'], 'product/{id}/media/{mediaId}', 'ProductCrudController@deleteMedia');
+        Route::match(['post'], 'product/{id}/media/reorder', 'ProductCrudController@reorderMedia');
+    });
     CRUD::resource('producttype', 'ProductTypeCrudController')->with(function () {
         Route::match(['post'], 'producttype/{id}/media', 'ProductTypeCrudController@uploadMedia');
         Route::match(['delete'], 'producttype/{id}/media/{mediaId}', 'ProductTypeCrudController@deleteMedia');
diff --git a/tailwind.config.js b/tailwind.config.js
index 304dfb0..fed49ec 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,9 @@ module.exports = {
                     'dark': '#6B7287',
                 }
             },
+            cursor: {
+                'zoom-in': 'zoom-in'
+            },
             fontSize: {
                 '6xl': '3.75rem' // Only override this value
             },
diff --git a/yarn.lock b/yarn.lock
index 58f3384..e84315d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1283,6 +1283,11 @@ bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.5.3:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
   integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
 
+blueimp-gallery@^2.33.0:
+  version "2.35.0"
+  resolved "https://registry.yarnpkg.com/blueimp-gallery/-/blueimp-gallery-2.35.0.tgz#96d5792138e3365ce83d0a4afd84a7f803612b29"
+  integrity sha512-/dT0K8Vh2FlmKW+PILbygoZ4ramOBM8x2e85JTHOXImI2v2flaBBInQNu7nPonCkWLFejfsf54oHdty1QQslog==
+
 blueimp-tmpl@^2.5.5:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/blueimp-tmpl/-/blueimp-tmpl-2.5.7.tgz#33fb12c139d65512ae40afbd8e2def8d9db96490"
@@ -8100,6 +8105,13 @@ vue-class-component@^7.0.1:
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.1.0.tgz#b33efcb10e17236d684f70b1e96f1946ec793e87"
   integrity sha512-G9152NzUkz0i0xTfhk0Afc8vzdXxDR1pfN4dTwE72cskkgJtdXfrKBkMfGvDuxUh35U500g5Ve4xL8PEGdWeHg==
 
+vue-gallery@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vue-gallery/-/vue-gallery-2.0.0.tgz#07d29e9169701d7d19b6b5f643038f1d50606329"
+  integrity sha512-6BCItrHwH0v0p2T8Pf6iAUGOi7sZtDt/WLn+DiRznfMec/WPPjT/udBABChkyGGzdn/FBHoF768ITAjLDXfMLw==
+  dependencies:
+    blueimp-gallery "^2.33.0"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"