@lancom/shared 0.0.217 → 0.0.219

package/assets/js/api/index.js

@@ -1,6 +1,8 @@
 
 import { _get, _post, _put, _delete, _patch } from './helpers';
 import adminApi from './admin';
+import { unminifySimpleProducts } from './utils/simple-products';
+import { unminifyProduct } from './utils/product';
 
 const api = {
   fetchClientSettings(shop, params) {
@@ -48,8 +50,8 @@ const api = {
   fetchPricingProducts(shop, params) {
     return _get(`shop/${shop}/products/pricing-products`, params);
   },
-  fetchProduct(shop, alias, params) {
-    return _get(`shop/${shop}/products/${alias}`, params);
+  async fetchProduct(shop, alias, params) {
+    return unminifyProduct(await _get(`shop/${shop}/products/${alias}`, params));
   },
   fetchCouponByCode(shop, code) {
     return _get(`shop/${shop}/coupons/${code}`);
@@ -72,8 +74,8 @@ const api = {
   fetchNewsTag(shop, alias) {
     return _get(`shop/${shop}/news-tag/${alias}`);
   },
-  fetchProductDetails(shop, alias, params) {
-    return _get(`shop/${shop}/products/${alias}/simple-products`, params);
+  async fetchProductDetails(shop, alias, params) {
+    return unminifySimpleProducts(await _get(`shop/${shop}/products/${alias}/simple-products`, params));
   },
   fetchRelatedProducts(shop, alias, params) {
     return _get(`shop/${shop}/products/${alias}/related-products`, params);

package/assets/js/api/utils/product.js

@@ -0,0 +1,65 @@
+export function unminifyProduct(product) {
+  const { mapPrintTypes, mapPrintAreas, mapPrintSizes } = product;
+
+  product.printTypes = (product.printTypes || []).map(pt => {
+    return mapPrintTypes.find(({ _id }) => _id === pt);
+  });
+  if (product.productType) {
+    product.productType.printTypes = (product.productType.printTypes || []).map(pt => {
+      return mapPrintTypes.find(({ _id }) => _id === pt);
+    });
+  }
+  
+
+  product.printAreas = (product.printAreas || []).map(pa => {
+    return mapPrintAreas.find(({ _id }) => _id === pa || _id === pa?._id);
+  });
+  if (product.productType) {
+    product.productType.printAreas = (product.productType.printAreas || []).map(pa => {
+      return mapPrintAreas.find(({ _id }) => _id === pa || _id === pa?._id);
+    });
+  }
+
+
+  (product.printAreas || []).forEach(pa => {
+    if (pa.printSize) {
+      pa.printSize = mapPrintSizes.find(({ _id }) => _id === pa.printSize || _id === pa.printSize?._id);
+    }
+    (pa.sizes || []).forEach(size => {
+      if (size.printSize) {
+        size.printSize = mapPrintSizes.find(({ _id }) => _id === size.printSize || _id === size.printSize?._id);
+      }
+    });
+  });
+  (product.printTypes || []).forEach(pt => {
+    (pt.printAreas || []).forEach(pa => {
+      pa.printSizes = (pa.printSizes || []).map(size => {
+        return mapPrintSizes.find(({ _id }) => _id === size || _id === size?._id);
+      });
+    });
+  });
+  if (product.productType) {
+    (product.productType.printAreas || []).forEach(pa => {
+      if (pa.printSize) {
+        pa.printSize = mapPrintSizes.find(({ _id }) => _id === pa.printSize || _id === pa.printSize?._id);
+      }
+      (pa.sizes || []).forEach(size => {
+        if (size.printSize) {
+          size.printSize = mapPrintSizes.find(({ _id }) => _id === size.printSize || _id === size.printSize?._id);
+        }
+      });
+    });
+    (product.productType.printTypes || []).forEach(pt => {
+      (pt.printAreas || []).forEach(pa => {
+        pa.printSizes = (pa.printSizes || []).map(size => {
+          return mapPrintSizes.find(({ _id }) => _id === size || _id === size?._id);
+      });
+      });
+    });
+  }
+
+
+  
+
+  return product;
+}

package/assets/js/api/utils/simple-products.js

@@ -0,0 +1,7 @@
+export function unminifySimpleProducts({ simpleProducts, colors, sizes }) {
+  simpleProducts.forEach(sp => {
+    sp.color = colors.find(c => c._id === sp.color);
+    sp.size = sizes.find(s => s._id === sp.size);
+  });
+  return simpleProducts;
+}

package/components/common/file_uploader.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { Power3, TimelineLite } from 'gsap';
+// import { Power3, TimelineLite } from 'gsap';
 import api from '@lancom/shared/assets/js/api';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import FailedConversionModal from '@lancom/shared/components/modals/failed_conversion_modal/failed-conversion-modal';
@@ -48,7 +48,7 @@ export default {
       rendered: null,
       error: null,
       progress: 0,
-      timelineLite: new TimelineLite()
+      // timelineLite: new TimelineLite()
     };
   },
   methods: {
@@ -96,8 +96,8 @@ export default {
       }
     },
     onProgress(progress) {
-      const duration = progress ? 0.1 : 0;
-      this.timelineLite.to(this, duration, { progress, ease: Power3.easeIn });
+      // const duration = progress ? 0.1 : 0;
+      // this.timelineLite.to(this, duration, { progress, ease: Power3.easeIn });
     },
     toggle() {
       this.$refs.fileUploaderField.click();

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/mixins/modals.js

@@ -1,8 +1,3 @@
-import CartModal from '@lancom/shared/components/modals/cart_modal/cart-modal';
-import OrderModal from '@lancom/shared/components/modals/order_modal/order-modal';
-import PaymentModal from '@lancom/shared/components/modals/payment_modal/payment-modal';
-import LayersTemplatesModal from '@lancom/shared/components/modals/editor_layers_templates/editor-layers-templates';
-
 const modals = {
   data() {
     return {
@@ -30,7 +25,8 @@ const modals = {
         this.switchModalTo = null;
       }
     },
-    showCartModal(onclose) {
+    async showCartModal(onclose) {
+      const CartModal = await import('@lancom/shared/components/modals/cart_modal/cart-modal');
       this.openedModal = 'cart-modal';
       this.onclose = onclose;
       this.$modal.show(
@@ -52,7 +48,9 @@ const modals = {
         }
       );
     },
-    showOrderModal() {
+    async showOrderModal() {
+      const OrderModal = await import('@lancom/shared/components/modals/order_modal/order-modal');
+
       this.openedModal = 'order-modal';
       this.$modal.show(
         OrderModal,
@@ -73,7 +71,8 @@ const modals = {
         }
       );
     },
-    showPaymentModal() {
+    async showPaymentModal() {
+      const PaymentModal = await import('@lancom/shared/components/modals/payment_modal/payment-modal');
       this.openedModal = 'payment-modal';
       this.$modal.show(
         PaymentModal,
@@ -97,7 +96,9 @@ const modals = {
         }
       );
     },
-    openPrintTemplates() {
+    async openPrintTemplates() {
+      const LayersTemplatesModal = await import('@lancom/shared/components/modals/editor_layers_templates/editor-layers-templates');
+
       this.$modal.show(
         LayersTemplatesModal,
         {},

package/package.json

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

package/plugins/vue-hummer.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import { VueHammer } from 'vue2-hammer';
+// import { VueHammer } from 'vue2-hammer';
 
-VueHammer.config.pan = {
-  threshold: 5
-};
-Vue.use(VueHammer);
+// VueHammer.config.pan = {
+//   threshold: 5
+// };
+// Vue.use(VueHammer);