@lancom/shared 0.0.62 → 0.0.66

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -0,0 +1,344 @@
+<template>
+  <div
+    class="EditorWorkspaceSide__wrapper"
+    :style="{
+      'background-color': backgroundColor
+    }"
+    :class="{
+      'EditorWorkspaceSide__wrapper--zoom-in': isZoomed
+    }"
+    @mouseover="toogleBoundBox(true)"
+    @mouseleave="toogleBoundBox(false)">
+    <div
+      v-if="deleteButtonPos"
+      :style="deleteButtonPosition"
+      class="EditorWorkspaceSide__delete-object"
+      @click="removeSelected">
+      <i class="icon-cancel"></i>
+    </div>
+    <div>
+      <div class="EditorWorkspaceSide__background-container">
+        <canvas ref="background"></canvas>
+      </div>
+      <div class="EditorWorkspaceSide__editor-container">
+        <canvas ref="editor"></canvas>
+      </div>
+    </div>
+    <div
+      v-if="!editableLayers.length && fabricHelper"
+      class="EditorWorkspaceSide__placeholder"
+      :class="{ tighten: printAreaIsSmall }"
+      ignore-document-click
+      :style="positionPlaceholder"
+      @click="createTextLayer">
+    </div>
+    <div
+      v-show="isVisibleOverlay"
+      class="EditorWorkspaceSide__overlay"
+      @mousedown="$emit('zoom-in')"></div>
+    <transition-group
+      name="fade"
+      appear
+      tag="div"
+      class="EditorWorkspaceSide__alert-container">
+      <div
+        v-if="showErrorAboutSmallImage"
+        key="imageError"
+        class="EditorWorkspaceSide__alert-error view-transition"
+        @click="adjustSelectedArtDPI">
+        <i class="icon-attention-circled"></i>
+        Your image doesn't meet our print requirements.
+      </div>
+      <div
+        v-else-if="showRecommendationToUseLargerImage"
+        key="imageRecommendation"
+        class="EditorWorkspaceSide__alert-warning view-transition">
+        <i class="icon-info-circled"></i>
+        we recommend using a higher quality image.
+      </div>
+      <div
+        v-if="offsetWarningVisible"
+        key="offset"
+        class="EditorWorkspaceSide__alert-error view-transition">
+        <i class="icon-attention-circled"></i>
+        Part of your design layer is outside the print area.
+        <!-- <i
+          class="icon-cancel EditorWorkspaceSide__offset-warning-close"
+          @click="offsetWarningVisible = false"></i> -->
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import { fabric } from 'fabric';
+import { mapGetters, mapMutations, mapActions } from 'vuex';
+import throttle from 'lodash.throttle';
+import debounce from 'lodash.debounce';
+import { getLargeColorImage } from '@lancom/shared/assets/js/utils/colors';
+import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
+import FabricHelper from '@lancom/shared/assets/js/utils/fabric-helper';
+import { findParentByPredicate } from '@lancom/shared/assets/js/utils/dom';
+import Breakpoints from '@lancom/shared/assets/js/utils/breakpoints';
+
+export default {
+  name: 'EditorWorkspaceSide',
+  props: {
+    side: {
+      type: String,
+      default: null
+    },
+    printArea: {
+      type: String,
+      required: true
+    },
+    zoomSize: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      fabricHelper: null,
+      redrawWithThrottle: throttle(this.redraw, 100, { trailing: false }),
+      saveLayersAsImageWithDebounce: debounce(this.saveLayersAsImage, 100),
+      onResize: debounce(this.handleWorkspaceSize, 1000),
+      backgroundImage: null,
+      backgroundImageUrl: null,
+      backgroundImageLoaded: false,
+      deleteButtonPos: null,
+      offsetWarningVisible: false,
+      drawingInProcess: false,
+      breakpoints: new Breakpoints()
+    };
+  },
+  computed: {
+    ...mapGetters('product', [
+      'product',
+      'layers',
+      'editableColor',
+      'editableLayers',
+      'selectedLayer',
+      'editorSize'
+    ]),
+    deleteButtonPosition() {
+      return this.deleteButtonPos ? {
+        top: `${this.deleteButtonPos.y}px`,
+        left: `${this.deleteButtonPos.x}px`
+      } : null;
+    },
+    positionPlaceholder() {
+      const { center } = this.fabricHelper.printAreaRect;
+      const ratio = this.calcWorkspaceSize() / this.editorSize.width;
+      return {
+        top: `${center.top * ratio}px`,
+        left: `${center.left * ratio}px`
+      };
+    },
+    showRecommendationToUseLargerImage() {
+      return (
+        this.selectedLayer &&
+        this.selectedLayer.type === 'art' &&
+        this.selectedLayer.dpi >= 38 &&
+        this.selectedLayer.dpi <= 120
+      );
+    },
+    showErrorAboutSmallImage() {
+      return (
+        this.selectedLayer &&
+        this.selectedLayer.type === 'art' &&
+        this.selectedLayer.dpi < 38
+      );
+    },
+    printAreaIsSmall() {
+      return ['rect10_l', 'rect10_r'].includes(this.printArea);
+    },
+    backgroundColor() {
+      return this.backgroundImageLoaded && this.editableColor.rgb;
+    },
+    isZoomed() {
+      return !!this.zoomSize;
+    },
+    isVisibleOverlay() {
+      return !this.isZoomed && this.breakpoints.is === 'xs';
+    }
+  },
+  watch: {
+    editableColor() {
+      this.updateBackgroundImage();
+    },
+    layers() {
+      this.redrawWithThrottle();
+    },
+    selectedLayer() {
+      this.redrawWithThrottle();
+    },
+    printArea(value) {
+      this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
+      this.redraw();
+    },
+    zoomSize() {
+      this.handleWorkspaceSize();
+    }
+  },
+  mounted() {
+    this.initEventsListeners();
+    this.initCanvas();
+    this.handleWorkspaceSize();
+    this.$watch(
+      () => this.breakpoints.is,
+      () => this.handleWorkspaceSize()
+    );
+  },
+  beforeDestroy() {
+    this.clearEventsListeners();
+  },
+  methods: {
+    ...mapActions('product', ['createLayer']),
+    ...mapMutations('product', [
+      'setSelectedLayerField',
+      'setSelectedLayer',
+      'removeTemplateLayer'
+    ]),
+    ...mapMutations('layers', [
+      'setLayersThumbnail'
+    ]),
+    adjustSelectedArtDPI() {
+      const measure = this.fabricHelper.getEditorDPI();
+      const scale = measure / 75;
+      this.setSelectedLayerField({ field: 'dpi', value: 75 });
+      this.setSelectedLayerField({ field: 'scaleX', value: scale });
+      this.setSelectedLayerField({ field: 'scaleY', value: scale });
+      this.saveLayersAsImageWithDebounce();
+    },
+    calcWorkspaceSize() {
+      const sizes = {
+        xs: 296,
+        sm: 580,
+        md: 430,
+        lg: 600,
+        xl: 720
+      };
+      return this.zoomSize || sizes[this.breakpoints.is] || 430;
+    },
+    handleWorkspaceSize() {
+      const size = this.calcWorkspaceSize();
+      this.fabricHelper.scaleWorkspace({ width: size, height: size });
+    },
+    initEventsListeners() {
+      document.addEventListener('click', this.onDocumentClick);
+      window.addEventListener('resize', this.onResize);
+    },
+    clearEventsListeners() {
+      document.removeEventListener('click', this.onDocumentClick);
+      window.removeEventListener('resize', this.onResize);
+    },
+    onDocumentClick({ target }) {
+      // todo: replace by click outside plugin?
+      const isCanvasElement = target.tagName === 'CANVAS';
+      const isIgnoreClick = !!findParentByPredicate(target, element => element.hasAttribute('ignore-document-click'));
+      if (!isCanvasElement && !isIgnoreClick) {
+        this.fabricHelper.discardActiveObjects();
+        this.setSelectedLayer(null);
+      }
+    },
+    initCanvas() {
+      this.fabricHelper = new FabricHelper({
+        editor: this.$refs.editor,
+        background: this.$refs.background,
+        size: this.editorSize
+      });
+      this.fabricHelper.setPrintArea(this.printArea, this.editorSize, this.product);
+      this.fabricHelper.on('setField', data => {
+        this.setSelectedLayerField(data);
+        this.saveLayersAsImageWithDebounce();
+      });
+      this.fabricHelper.on('selectLayer', this.setSelectedLayer);
+      this.fabricHelper.on('removeLayer', this.removeTemplateLayer);
+      this.fabricHelper.on('setDeleteButtonPosition', this.setDeleteButtonPosition);
+      this.fabricHelper.on('outOfPrintArea', this.setOffsetWarningVisibility);
+      // todo center to print area
+      this.updateBackgroundImage();
+      this.redrawWithThrottle();
+    },
+    async redraw() {
+      if (this.drawingInProcess) {
+        return;
+      }
+      this.drawingInProcess = true;
+      this.fabricHelper.clear();
+      this.fabricHelper.addBoundingArea();
+      await this.addLayersToCanvas();
+      this.drawingInProcess = false;
+      this.saveLayersAsImageWithDebounce();
+      this.checkBoundingIntersection();
+    },
+    addLayersToCanvas() {
+      return this.editableLayers.reduce(async (promise, layer) => {
+        await promise;
+        return new Promise(resolve => {
+          this.fabricHelper.createObject({
+            layer,
+            active: this.isLayerSelected(layer)
+          }).then(obj => {
+            resolve();
+          });
+        });
+      }, Promise.resolve());
+    },
+    checkBoundingIntersection() {
+      this.fabricHelper.checkAnyBoundingIntersection();
+    },
+    isLayerSelected(layer) {
+      return this.selectedLayer && this.selectedLayer.createdAt === layer.createdAt;
+    },
+    updateBackgroundImage() {
+      const type = this.side === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
+      const imageUrl = getLargeColorImage(this.product, type, this.editableColor);
+      if (this.backgroundImage && this.backgroundImageUrl === imageUrl) {
+        return this.fabricHelper.setBackgroundImage(this.backgroundImage);
+      }
+
+      this.backgroundImageLoaded = false;
+      fabric.Image.fromURL(imageUrl, image => {
+        image.scale(this.editorSize.width / image.width);
+        this.backgroundImage = image;
+        this.backgroundImageUrl = imageUrl;
+        this.backgroundImageLoaded = true;
+        this.fabricHelper.setBackgroundImage(this.backgroundImage);
+      });
+    },
+    removeSelected() {
+      this.removeTemplateLayer(this.selectedLayer);
+    },
+    saveLayersAsImage() {
+      const image = this.fabricHelper.getLayersAsImage();
+      this.setLayersThumbnail({ side: this.side, value: image });
+    },
+    createTextLayer() {
+      this.createLayer({ type: 'text', isEditMode: true });
+    },
+    setDeleteButtonPosition(pos) {
+      this.deleteButtonPos = pos;
+    },
+    setOffsetWarningVisibility(visible) {
+      // this.offsetWarningVisible = visible;
+    },
+    toogleBoundBox(state, printArea) {
+      if (!this.fabricHelper || this.breakpoints.is === 'xs') {
+        return;
+      }
+
+      if (printArea) {
+        const area = state ? printArea.value : this.printArea;
+        this.fabricHelper.setPrintArea(area, this.editorSize, this.product);
+      }
+
+      this.fabricHelper.background.toggleBorder(state);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-workspace-side.scss';
+</style>

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.scss

@@ -0,0 +1,103 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.MobileEditorProductDetails {
+  &__menu {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 78px;
+    z-index: 105;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    background-color: $white_high_emphasis;
+    box-shadow: 5px 0px 30px rgba(124, 124, 124, 0.1);
+
+    &-action {
+      @extend .lc_medium18;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $grey_1;
+      border: 1px solid $grey_4;
+
+      @media (max-width: $bp-extra-small-max) {
+        flex-direction: column;
+        font-size: 14px;
+      }
+
+      &.active {
+        color: $black;
+        background-color: $grey_4;
+      }
+
+      &.cart {
+        color: $white_high_emphasis;
+        background-color: $green;
+        border-color: $green;
+      }
+
+      &.cart &-icon {
+        @media (min-width: $bp-small-min) {
+          display: none;
+        }
+      }
+
+      &-icon {
+        font-size: 26px;
+
+        @media (max-width: $bp-extra-small-max) {
+          font-size: 22px;
+        }
+      }
+    }
+  }
+
+  &__container {
+    width: 100vw;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    background: #FFF;
+    box-shadow: $elevation2;
+    overflow: hidden;
+    z-index: 104;
+    padding-bottom: 78px;
+    transition: transform .4s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  &__backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, .3);
+    z-index: 103;
+    transition: opacity .4s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  &__close {
+    font-size: 34px;
+    color: $dark_blue;
+    cursor: pointer;
+  }
+  &__header {
+    height: 50px;
+    padding: 0px 0px 0px 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-title {
+      @extend .lc_semibold22;
+    }
+  }
+  &__content {
+    padding: 0 24px 24px 24px;
+    max-height: calc(100vh - 118px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="MobileEditorProductDetails__wrapper">
+    <div class="MobileEditorProductDetails__menu">
+      <div
+        class="MobileEditorProductDetails__menu-action"
+        :class="{ active: currentTab === 'details' }"
+        @click="show('details')">
+        <i class="icon-product MobileEditorProductDetails__menu-action-icon"></i>
+        <span class="MobileEditorProductDetails__menu-action-label">
+          Product
+        </span>
+      </div>
+      <div
+        class="MobileEditorProductDetails__menu-action"
+        :class="{ active: currentTab === 'layers' }"
+        @click="showLayers">
+        <i class="icon-edit MobileEditorProductDetails__menu-action-icon"></i>
+        <span class="MobileEditorProductDetails__menu-action-label">
+          Text & Art
+        </span>
+      </div>
+      <div
+        class="MobileEditorProductDetails__menu-action cart"
+        :class="{ invalidate: addToCartDisabled }"
+        @click="addToCart">
+        <i class="icon-bag MobileEditorProductDetails__menu-action-icon"></i>
+        <span class="MobileEditorProductDetails__menu-action-label">
+          Add to Cart
+        </span>
+      </div>
+    </div>
+    <transition-group
+      appear
+      name="appear-from-bottom"
+      tag="div">
+      <div
+        v-if="isOpen"
+        key="backdrop"
+        class="MobileEditorProductDetails__backdrop"
+        @click="hide">
+      </div>
+      <div
+        v-if="isOpen"
+        key="container"
+        class="MobileEditorProductDetails__container"
+        @close="hide">
+        <div class="MobileEditorProductDetails__header">
+          <div
+            v-if="currentTab === 'details'"
+            class="MobileEditorProductDetails__header-title">
+            &nbsp;
+          </div>
+          <div
+            v-if="currentTab === 'layers'"
+            class="MobileEditorProductDetails__header-title">
+            Text & Art
+          </div>
+          <i
+            class="icon-cancel MobileEditorProductDetails__close"
+            @click="hide"></i>
+        </div>
+        <div class="MobileEditorProductDetails__content custom-scrollbar-container">
+          <editor-product-details v-if="currentTab === 'details'" />
+          <editor-layers v-if="currentTab === 'layers'" />
+        </div>
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
+import EditorProductDetails from '../editor_product_details/editor-product-details';
+import EditorLayers from '../editor_layers/editor-layers';
+
+const { mapMutations } = createNamespacedHelpers('product');
+
+export default {
+  name: 'MobileEditorProductDetails',
+
+  components: {
+    EditorProductDetails,
+    EditorLayers
+  },
+
+  props: {
+    addToCartDisabled: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      isOpen: false,
+      currentTab: null
+    };
+  },
+
+  mounted() {
+    EventBus.$on('focus-on-default-product', this.focusOnDefaultProduct);
+  },
+
+  beforeDestroy() {
+    EventBus.$off('focus-on-default-product', this.focusOnDefaultProduct);
+  },
+
+  methods: {
+    ...mapMutations(['setEditModeSelectedLayer']),
+    focusOnDefaultProduct() {
+      this.show('details');
+    },
+    showLayers() {
+      this.setEditModeSelectedLayer(false);
+      this.show('layers');
+    },
+    show(tab) {
+      if (tab === this.currentTab) {
+        return;
+      }
+      if (this.isOpen) {
+        this.hide();
+      }
+      this.$nextTick(() => {
+        this.isOpen = true;
+        this.currentTab = tab;
+      });
+    },
+    hide() {
+      this.isOpen = false;
+      this.currentTab = null;
+    },
+    addToCart() {
+      if (this.addToCartDisabled) {
+        return;
+      }
+      this.hide();
+      this.$emit('add-to-cart');
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'mobile-editor-product-details';
+</style>

package/components/errors/404.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="error-404">
+    <div class="mt-10 mb-10 image">
+      <img src="/images/tee.svg" width="250px" />
+      <div class="code">
+        404
+      </div>
+    </div>
+    <h1 class="lc_h3 lc_black mb-8">
+      This page doesn’t exist
+    </h1>
+    <p class="mb-10">
+      The link you clicked on may be broken or no longer exist.
+    </p>
+    <div class="mt-10">
+      <nuxt-link
+        to="/"
+        class="form-button btn-green">
+        Home page
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Error404',
+  props: {
+    error: {
+      type: Object,
+      default: () => {}
+    }
+  }
+};
+</script>
+
+<style scoped>
+.error-404 {
+  text-align: center;
+}
+.image {
+  position: relative;
+  min-height: 253px;
+}
+.code {
+    position: absolute;
+    top: 60px;
+    text-align: center;
+    color: white;
+    font-size: 45px;
+    left: -4px;
+    right: 0;
+    text-shadow: 0 0 3px grey;
+}
+</style>

package/components/errors/500.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="error-500">
+    <div class="mt-10 mb-10 image">
+      <img src="/images/tee.svg" width="250px" />
+      <div class="code">
+        500
+      </div>
+    </div>
+    <h1 class="lc_h3 lc_black mb-8">
+      Error 500
+    </h1>
+    <p class="mb-10">
+      Internal Server Error
+    </p>
+    <div class="mt-10">
+      <nuxt-link
+        to="/"
+        class="form-button btn-green">
+        Home page
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Error500',
+  props: {
+    error: {
+      type: Object,
+      default: () => {}
+    }
+  }
+};
+</script>
+
+<style scoped>
+.error-500 {
+  text-align: center;
+}
+.image {
+  position: relative;
+  min-height: 253px;
+}
+.code {
+    position: absolute;
+    top: 60px;
+    text-align: center;
+    color: white;
+    font-size: 45px;
+    left: -4px;
+    right: 0;
+    text-shadow: 0 0 3px grey;
+}
+</style>