@lancom/shared 0.0.218 → 0.0.219

package/components/product/gallery/gallery.scss

@@ -135,6 +135,7 @@
     }
   }
   &__small {
+    display: flex;
     &-image {
       cursor: pointer;
       margin-top: 30px;

package/components/product/gallery/gallery.vue

@@ -1,94 +1,69 @@
 <template>
-  <div
-    class="Gallery__wrapper"
-    @click="canLoadImages = true">
+  <div class="Gallery__wrapper">
     <div class="Gallery__big">
-      <!-- <vue-slick-carousel
-        ref="bigCarousel"
-        :key="updateCarouselTime"
-        :arrows="true"
-        :dots="true"
-        :infinite="false"
-        :swipe="false"
-        :speed="800"
-        @beforeChange="onChange">
+      <div class="Gallery__big-image">
+        <img
+          :src="staticLink(currentImage.large)"
+          :alt="product.name"
+          class="Gallery__big-image-src" />
         <div
-          v-for="(image, index) in filteredImages"
-          :key="image.large"
-          v-hammer:press="onPanstart"
-          v-hammer:pan="onPan"
-          v-hammer:pressup="onPanend"
-          v-hammer:panend="onPanend"
-          class="Gallery__big-image"
-          :style="{
-            // 'background-image': `url(${staticLink(image.large)}`,
-            // 'background-size': backgroundSize,
-            // 'background-position': backgroundPosition,
-            'touch-action': zoomEnable ? 'none' : 'auto'
-          }"
-          @mousedown="onMouseDown"
-          @mouseenter="onMouseEnter"
-          @mouseleave="onMouseLeave"
-          @mousemove="onMouseMove">
-          <img
-            v-if="index === 0 || canLoadImages"
-            :src="staticLink(image.large)"
-            :alt="product.name"
-            class="Gallery__big-image-src" />
+          v-if="currentImage.print"
+          class="Gallery__big-print">
+          <div class="Gallery__big-print-name">
+            {{ currentImage.print.name }}
+          </div>
           <div
-            v-if="image.print"
-            class="Gallery__big-print">
-            <div class="Gallery__big-print-name">
-              {{ image.print.name }}
-            </div>
-            <div
-              v-if="image.print.pricing"
-              class="Gallery__big-print-price">
-              Printing at <price :price="image.print.pricing.price" /> for ({{ image.print.pricing.min || 1 }}+)
-            </div>
-            <div class="Gallery__big-print-price-info">
-              example only
-            </div>
+            v-if="currentImage.print.pricing"
+            class="Gallery__big-print-price">
+            Printing at <price :price="currentImage.print.pricing.price" /> for ({{ image.print.pricing.min || 1 }}+)
+          </div>
+          <div class="Gallery__big-print-price-info">
+            example only
           </div>
         </div>
-      </vue-slick-carousel> -->
-      <div
-        v-if="!isTouch"
-        class="Gallery__zoom"
-        @click="onMouseDown($event)">
-        <i :class="zoomEnable ? 'icon-zoom-out' : 'icon-zoom-in'"></i>
       </div>
+      <button
+        type="button"
+        class="slick-arrow slick-prev slick-disabled"
+        @click="goToPrev()">
+        Previous
+      </button>
+      <button
+        type="button"
+        class="slick-arrow slick-next"
+        @click="goToNext()">
+        Next
+      </button>
     </div>
     <div class="Gallery__small">
-      <!-- <vue-slick-carousel
-        ref="smallCarousel"
-        :key="updateCarouselTime"
-        :slides-per-row="slidesPerRow"
-        :arrows="true"
-        :infinite="false"
-        :dots="true"
-        :speed="800">
-        <div
-          v-for="(image, index) in filteredImages"
-          :key="image.large"
-          class="Gallery__small-image"
-          :class="{
-            'Gallery__small-image--active': index === activeIndex
-          }"
-          @click="goToSlideAndChangeColor(index)"
-          :style="{
-            // 'background-image': `url(${staticLink(image.small)}` 
-          }">
-          <img
-            v-if="index < 6 || canLoadImages"
-            :src="staticLink(image.small)"
-            :alt="product.name"
-            class="Gallery__small-image-src" />
-          <div class="Gallery__small-printed">
-            {{ image.printType ? 'Printed' : (product.prePrint ? product.prePrintText : image.colorName || 'Blank') }}
-          </div>
+      <div
+        v-for="(image, index) in visibleImages"
+        :key="image.large"
+        class="Gallery__small-image"
+        :class="{
+          'Gallery__small-image--active': (visibleImagesFrom + index) === activeIndex
+        }"
+        @click="goToSlideAndChangeColor(visibleImagesFrom + index)">
+        <img
+          :src="staticLink(image.small)"
+          :alt="product.name"
+          class="Gallery__small-image-src" />
+        <div class="Gallery__small-printed">
+          {{ image.printType ? 'Printed' : (product.prePrint ? product.prePrintText : image.colorName || 'Blank') }}
         </div>
-      </vue-slick-carousel> -->
+      </div>
+      <button
+        type="button"
+        class="slick-arrow slick-prev slick-disabled"
+        @click="goToPrevPage()">
+        Previous
+      </button>
+      <button
+        type="button"
+        class="slick-arrow slick-next"
+        @click="goToNextPage()">
+        Next
+      </button>
     </div>
     <div
       v-if="hasValidFilters"
@@ -112,8 +87,6 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-// import VueSlickCarousel from 'vue-slick-carousel';
-// import 'vue-slick-carousel/dist/vue-slick-carousel.css';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import { isValidImageTypes } from '@lancom/shared/assets/js/utils/colors';
 import Price from '@lancom/shared/components/common/price';
@@ -121,7 +94,6 @@ import Price from '@lancom/shared/components/common/price';
 export default {
   name: 'Gallery',
   components: {
-    // VueSlickCarousel,
     Price
   },
   props: {
@@ -132,10 +104,8 @@ export default {
   },
   data() {
     return {
-      isTouch: ('ontouchstart' in window),
-      zoomEnable: false,
       activeIndex: 0,
-      canLoadImages: false,
+      thumbsPage: 0,
       updateCarouselTime: Date.now(),
       filters: [{
         name: 'FRONT / BACK',
@@ -162,6 +132,15 @@ export default {
     validFilters() {
       return this.filters.filter(filter => (this.images || []).some(i => this.isValidImageByFilter(filter, i)));
     },
+    currentImage() {
+      return this.filteredImages[this.activeIndex];
+    },
+    visibleImagesFrom() {
+      return this.thumbsPage * this.slidesPerRow;
+    },
+    visibleImages() {
+      return this.filteredImages.slice(this.visibleImagesFrom, this.visibleImagesFrom + this.slidesPerRow);
+    },
     filteredImages() {
       const images = this.filterType ? this.images.filter(i => this.isValidImageByFilter(this.filterType, i)) : this.images;
       return images.map(image => {
@@ -192,13 +171,6 @@ export default {
       this.skipUpdateGallery = false;
     }
   },
-  mounted() {
-    // const index = this.filteredImages.findIndex(i => i.color === this.editableColor?._id);
-    // if (index > -1) {
-    //   this.goToSlide(index, true);
-    // }
-    // console.log('filteredImages: ', this.filteredImages);
-  },
   methods: {
     ...mapActions('product', ['selectColor']),
     staticLink,
@@ -211,14 +183,10 @@ export default {
       }
     },
     goToSlide(index, dontAnimate = false) {
-      this.$refs.bigCarousel.goTo(index, dontAnimate);
+      this.activeIndex = Math.max(0, Math.min(this.filteredImages.length - 1, index));
+      this.recalculateThumbsPage();
       this.$emit('selected', this.filteredImages[index]);
     },
-    onChange(prev, current) {
-      this.activeIndex = current;
-      const smallIndex = Number.parseInt(current / this.slidesPerRow);
-      this.$refs.smallCarousel.goTo(smallIndex);
-    },
     isValidImageByFilter(filterType, image) {
       return filterType.filterBy ? filterType.filterBy(image) : isValidImageTypes(image, filterType.types);
     },
@@ -227,49 +195,20 @@ export default {
       this.updateCarouselTime = Date.now();
       this.activeIndex = 0;
     },
-    onPanstart(e) {
-      if (this.isTouch) {
-        this.zoomEnable = true;
-        this.onMouseEnter(e.srcEvent);
-      }
+    goToPrev() {
+      this.goToSlideAndChangeColor(this.activeIndex - 1);
     },
-    onPan(e) {
-      if (this.isTouch) {
-        this.onMouseMove(e.srcEvent);
-      }
+    goToNext() {
+      this.goToSlideAndChangeColor(this.activeIndex + 1);
     },
-    onPanend(e) {
-      if (this.isTouch) {
-        this.zoomEnable = false;
-        this.onMouseLeave(e.srcEvent);
-      }
+    recalculateThumbsPage() {
+      this.thumbsPage = Math.ceil((this.activeIndex + 1) / this.slidesPerRow) - 1;
     },
-    onMouseDown(e) {
-      if (!this.isTouch) {
-        this.zoomEnable = !this.zoomEnable;
-        if (this.zoomEnable) {
-          this.onMouseEnter(e);
-        } else {
-          this.onMouseLeave();
-        }
-      }
-    },
-    onMouseEnter(e) {
-      if (this.zoomEnable) {
-        this.backgroundSize = '1000px';
-        this.galerySize = e.target.getBoundingClientRect();
-      }
+    goToPrevPage() {
+      this.thumbsPage = Math.max(0, this.thumbsPage - 1);
     },
-    onMouseLeave() {
-      this.backgroundSize = null;
-      this.backgroundPosition = null;
-      this.galerySize = null;
-    },
-    onMouseMove({ offsetX, offsetY }) {
-      if (this.galerySize) {
-        const { width, height } = this.galerySize;
-        this.backgroundPosition = `${offsetX / width * 100}% ${offsetY / height * 100}%`;
-      }
+    goToNextPage() {
+      this.thumbsPage = Math.min(Math.ceil((this.filteredImages.length) / this.slidesPerRow) - 1, this.thumbsPage + 1);
     }
   }
 };

package/components/product/product_reviews/product-reviews.vue

@@ -6,15 +6,21 @@
     <div
       v-if="hasReviews"
       class="ProductReviews__carousel">
-      <!-- <vue-slick-carousel
-        :arrows="true"
-        :infinite="false"
-        :speed="800">
-        <product-review
-          v-for="review in reviews"
-          :key="review._id"
-          :review="review" />
-      </vue-slick-carousel> -->
+      <product-review
+        :key="currentReview._id"
+        :review="currentReview" />
+      <button
+        type="button"
+        class="slick-arrow slick-prev slick-disabled"
+        @click="goToPrev()">
+        Previous
+      </button>
+      <button
+        type="button"
+        class="slick-arrow slick-next"
+        @click="goToNext()">
+        Next
+      </button>
     </div>
     <div class="ProductReviews__add">
       <btn
@@ -27,15 +33,11 @@
 </template>
 
 <script>
-// import VueSlickCarousel from 'vue-slick-carousel';
-// import 'vue-slick-carousel/dist/vue-slick-carousel.css';
 import ProductReview from './product_review/product-review';
-import AddReviewModal from './add_review_modal/add-review-modal';
 
 export default {
   name: 'ProductReviews',
   components: {
-    // VueSlickCarousel,
     ProductReview
   },
   mixins: [],
@@ -45,6 +47,7 @@ export default {
     const mainReview = reviews.find(review => review._id === mainReviewId);
     console.log('mainReviewId: ', mainReviewId);
     return {
+      activeIndex: 0,
       scrollInterval: null,
       mainReview,
       reviews: [
@@ -60,35 +63,27 @@ export default {
     }
   },
   computed: {
+    currentReview() {
+      return this.reviews[this.activeIndex];
+    },
     hasReviews() {
       return this.reviews.length > 0;
     }
   },
-  mounted() {
-    setTimeout(() => {
-      if (this.mainReview) {
-        const [first, second] = document.querySelectorAll(`#review-${this.mainReview._id}`) || [];
-        const mainReviewEl = second || first;
-        let top = 0;
-        if (mainReviewEl) {
-          this.scrollInterval = setInterval(() => {
-            top += 50;
-            window.scroll(0, top);
-            const rect = mainReviewEl.getBoundingClientRect();
-            console.log('mainReviewEl: ', mainReviewEl, rect.top);
-            if (rect.top < 300) {
-              clearInterval(this.scrollInterval);
-            }
-          }, 50);
-        }
-      }
-    }, 100);
-  },
   destroyed() {
     clearInterval(this.scrollInterval);
   },
   methods: {
-    showAddReviewModal() {
+    goToPrev() {
+      this.goToSlide(this.activeIndex - 1);
+    },
+    goToNext() {
+      this.goToSlide(this.activeIndex + 1);
+    },
+    goToSlide(index) {
+      this.activeIndex = Math.max(0, Math.min(this.reviews.length - 1, index));
+    },
+    async showAddReviewModal() {
       const params = {
         name: 'add-review',
         root: this.$root,
@@ -98,6 +93,7 @@ export default {
         clickToClose: true,
         transition: 'from-right-to-left'
       };
+      const AddReviewModal = await import('./add_review_modal/add-review-modal');
       this.$modal.show(AddReviewModal, {
         product: this.product
       }, params);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.218",
+  "version": "0.0.219",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {