@zkwq/business 0.0.1

package/src/components/base/ui/image/image-viewer.vue

@@ -0,0 +1,302 @@
+<template>
+  <transition name="viewer-fade">
+    <div tabindex="-1" ref="base-image-viewer__wrapper" class="base-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+      <div class="base-image-viewer__mask"></div>
+      <!-- CLOSE -->
+      <span class="base-image-viewer__btn base-image-viewer__close" @click="hide">
+        <i class="base-icon-close"></i>
+      </span>
+      <!-- ARROW -->
+      <template v-if="!isSingle">
+        <span
+          class="base-image-viewer__btn base-image-viewer__prev"
+          :class="{ 'is-disabled': !infinite && isFirst }"
+          @click="prev">
+          <i class="base-icon-arrow-left"/>
+        </span>
+        <span
+          class="base-image-viewer__btn base-image-viewer__next"
+          :class="{ 'is-disabled': !infinite && isLast }"
+          @click="next">
+          <i class="base-icon-arrow-right"/>
+        </span>
+      </template>
+      <!-- ACTIONS -->
+      <div class="base-image-viewer__btn base-image-viewer__actions">
+        <div class="base-image-viewer__actions__inner">
+          <i class="base-icon-zoom-out" @click="handleActions('zoomOut')"></i>
+          <i class="base-icon-zoom-in" @click="handleActions('zoomIn')"></i>
+          <i class="base-image-viewer__actions__divider"></i>
+          <i :class="mode.icon" @click="toggleMode"></i>
+          <i class="base-image-viewer__actions__divider"></i>
+          <i class="base-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
+          <i class="base-icon-refresh-right" @click="handleActions('clocelise')"></i>
+        </div>
+      </div>
+      <!-- CANVAS -->
+      <div class="base-image-viewer__canvas">
+        <img
+          v-for="(url, i) in urlList"
+          v-if="i === index"
+          ref="img"
+          class="base-image-viewer__img"
+          :key="url"
+          :src="currentImg"
+          :style="imgStyle"
+          @load="handleImgLoad"
+          @error="handleImgError"
+          @mousedown="handleMouseDown">
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { on, off } from '../util/dom';
+import { rafThrottle, isFirefox } from '../util';
+
+const Mode = {
+  CONTAIN: {
+    name: 'contain',
+    icon: 'base-icon-full-screen'
+  },
+  ORIGINAL: {
+    name: 'original',
+    icon: 'base-icon-c-scale-to-original'
+  }
+};
+
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+
+export default {
+  name: 'elImageViewer',
+
+  props: {
+    urlList: {
+      type: Array,
+      default: () => []
+    },
+    zIndex: {
+      type: Number,
+      default: 2000
+    },
+    onSwitch: {
+      type: Function,
+      default: () => {}
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    };
+  },
+  computed: {
+    isSingle() {
+      return this.urlList.length <= 1;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1;
+    },
+    currentImg() {
+      return this.urlList[this.index];
+    },
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? 'transform .3s' : '',
+        'margin-left': `${offsetX}px`,
+        'margin-top': `${offsetY}px`
+      };
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = '100%';
+      }
+      return style;
+    }
+  },
+  watch: {
+    index: {
+      handler: function(val) {
+        this.reset();
+        this.onSwitch(val);
+      }
+    },
+    currentImg(val) {
+      this.$nextTick(_ => {
+        const $img = this.$refs.img[0];
+        if (!$img.complete) {
+          this.loading = true;
+        }
+      });
+    }
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall();
+      this.onClose();
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = rafThrottle(e => {
+        const keyCode = e.keyCode;
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide();
+            break;
+          // SPACE
+          case 32:
+            this.toggleMode();
+            break;
+          // LEFT_ARROW
+          case 37:
+            this.prev();
+            break;
+          // UP_ARROW
+          case 38:
+            this.handleActions('zoomIn');
+            break;
+          // RIGHT_ARROW
+          case 39:
+            this.next();
+            break;
+          // DOWN_ARROW
+          case 40:
+            this.handleActions('zoomOut');
+            break;
+        }
+      });
+      this._mouseWheelHandler = rafThrottle(e => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+        if (delta > 0) {
+          this.handleActions('zoomIn', {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        } else {
+          this.handleActions('zoomOut', {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        }
+      });
+      on(document, 'keydown', this._keyDownHandler);
+      on(document, mousewheelEventName, this._mouseWheelHandler);
+    },
+    deviceSupportUninstall() {
+      off(document, 'keydown', this._keyDownHandler);
+      off(document, mousewheelEventName, this._mouseWheelHandler);
+      this._keyDownHandler = null;
+      this._mouseWheelHandler = null;
+    },
+    handleImgLoad(e) {
+      this.loading = false;
+    },
+    handleImgError(e) {
+      this.loading = false;
+      e.target.alt = '加载失败';
+    },
+    handleMouseDown(e) {
+      if (this.loading || e.button !== 0) return;
+
+      const { offsetX, offsetY } = this.transform;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      this._dragHandler = rafThrottle(ev => {
+        this.transform.offsetX = offsetX + ev.pageX - startX;
+        this.transform.offsetY = offsetY + ev.pageY - startY;
+      });
+      on(document, 'mousemove', this._dragHandler);
+      on(document, 'mouseup', ev => {
+        off(document, 'mousemove', this._dragHandler);
+      });
+
+      e.preventDefault();
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    },
+    toggleMode() {
+      if (this.loading) return;
+
+      const modeNames = Object.keys(Mode);
+      const modeValues = Object.values(Mode);
+      const index = modeValues.indexOf(this.mode);
+      const nextIndex = (index + 1) % modeNames.length;
+      this.mode = Mode[modeNames[nextIndex]];
+      this.reset();
+    },
+    prev() {
+      if (this.isFirst && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index - 1 + len) % len;
+    },
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index + 1) % len;
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      const { transform } = this;
+      switch (action) {
+        case 'zoomOut':
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+          }
+          break;
+        case 'zoomIn':
+          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+          break;
+        case 'clocelise':
+          transform.deg += rotateDeg;
+          break;
+        case 'anticlocelise':
+          transform.deg -= rotateDeg;
+          break;
+      }
+      transform.enableTransition = enableTransition;
+    }
+  },
+  mounted() {
+    this.deviceSupportInstall();
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['base-image-viewer__wrapper'].focus();
+  }
+};
+</script>

package/src/components/base/ui/image/main.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="base-image">
+    <slot v-if="loading" name="placeholder">
+      <div class="base-image__placeholder"></div>
+    </slot>
+    <slot v-else-if="error" name="error">
+      <div class="base-image__error">{{ t('base.image.error') }}</div>
+    </slot>
+    <img
+      v-else
+      class="base-image__inner"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @click.prevent.stop="clickHandler"
+      :src="src"
+      :style="imageStyle"
+      :class="{ 'base-image__inner--center': alignCenter, 'base-image__preview': preview, 'HoverImage':hoverScale }">
+    <template v-if="preview">
+      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
+    </template>
+  </div>
+</template>
+
+<script>
+  import ImageViewer from './image-viewer';
+  import Locale from '../mixin/locale';
+  import { on, off, getScrollContainer, isInContainer } from '../util/dom';
+  import { isString, isHtmlElement } from '../util/types';
+  import throttle from '../util/throttle';
+
+  const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
+
+  const ObjectFit = {
+    NONE: 'none',
+    CONTAIN: 'contain',
+    COVER: 'cover',
+    FILL: 'fill',
+    SCALE_DOWN: 'scale-down'
+  };
+
+  let prevOverflow = '';
+
+  export default {
+    name: 'BaseImage',
+
+    mixins: [Locale],
+    inheritAttrs: false,
+
+    components: {
+      ImageViewer
+    },
+
+    props: {
+      src: String,
+      fit: {
+        type: String,
+        default: 'cover'
+      },
+      lazy: Boolean,
+      scrollContainer: {},
+      previewSrcList: {
+        type: Array,
+        default: () => []
+      },
+      zIndex: {
+        type: Number,
+        default: 2000
+      },
+      hoverScale: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        loading: true,
+        error: false,
+        show: !this.lazy,
+        imageWidth: 0,
+        imageHeight: 0,
+        showViewer: false
+      };
+    },
+
+    computed: {
+      imageStyle() {
+        const { fit } = this;
+        if (!this.$isServer && fit) {
+          return isSupportObjectFit()
+            ? { 'object-fit': fit }
+            : this.getImageStyle(fit);
+        }
+        return {};
+      },
+      alignCenter() {
+        return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
+      },
+      preview() {
+        const { previewSrcList } = this;
+        return Array.isArray(previewSrcList) && previewSrcList.length > 0;
+      },
+      imageIndex() {
+        let previewIndex = 0;
+        const srcIndex = this.previewSrcList.indexOf(this.src);
+        if (srcIndex >= 0) {
+          previewIndex = srcIndex;
+        }
+        return previewIndex;
+      }
+    },
+
+    watch: {
+      src(val) {
+        this.show && this.loadImage();
+      },
+      show(val) {
+        val && this.loadImage();
+      }
+    },
+
+    mounted() {
+      if (this.lazy) {
+        this.addLazyLoadListener();
+      } else {
+        this.loadImage();
+      }
+    },
+
+    beforeDestroy() {
+      this.lazy && this.removeLazyLoadListener();
+    },
+
+    methods: {
+      loadImage() {
+        if (this.$isServer) return;
+
+        // reset status
+        this.loading = true;
+        this.error = false;
+
+        const img = new Image();
+        img.onload = e => this.handleLoad(e, img);
+        img.onerror = this.handleError.bind(this);
+
+        // bind html attrs
+        // so it can behave consistently
+        Object.keys(this.$attrs)
+          .forEach((key) => {
+            const value = this.$attrs[key];
+            img.setAttribute(key, value);
+          });
+        img.src = this.src;
+      },
+      handleLoad(e, img) {
+        this.imageWidth = img.width;
+        this.imageHeight = img.height;
+        this.loading = false;
+        this.error = false;
+      },
+      handleError(e) {
+        this.loading = false;
+        this.error = true;
+        this.$emit('error', e);
+      },
+      handleLazyLoad() {
+        if (isInContainer(this.$el, this._scrollContainer)) {
+          this.show = true;
+          this.removeLazyLoadListener();
+        }
+      },
+      addLazyLoadListener() {
+        if (this.$isServer) return;
+
+        const { scrollContainer } = this;
+        let _scrollContainer = null;
+
+        if (isHtmlElement(scrollContainer)) {
+          _scrollContainer = scrollContainer;
+        } else if (isString(scrollContainer)) {
+          _scrollContainer = document.querySelector(scrollContainer);
+        } else {
+          _scrollContainer = getScrollContainer(this.$el);
+        }
+
+        if (_scrollContainer) {
+          this._scrollContainer = _scrollContainer;
+          this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
+          on(_scrollContainer, 'scroll', this._lazyLoadHandler);
+          this.handleLazyLoad();
+        }
+      },
+      removeLazyLoadListener() {
+        const { _scrollContainer, _lazyLoadHandler } = this;
+
+        if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
+
+        off(_scrollContainer, 'scroll', _lazyLoadHandler);
+        this._scrollContainer = null;
+        this._lazyLoadHandler = null;
+      },
+      /**
+       * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
+       */
+      getImageStyle(fit) {
+        const { imageWidth, imageHeight } = this;
+        const {
+          clientWidth: containerWidth,
+          clientHeight: containerHeight
+        } = this.$el;
+
+        if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
+
+        const vertical = imageWidth / imageHeight < 1;
+
+        if (fit === ObjectFit.SCALE_DOWN) {
+          const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+          fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
+        }
+
+        switch (fit) {
+          case ObjectFit.NONE:
+            return { width: 'auto', height: 'auto' };
+          case ObjectFit.CONTAIN:
+            return vertical ? { width: 'auto' } : { height: 'auto' };
+          case ObjectFit.COVER:
+            return vertical ? { height: 'auto' } : { width: 'auto' };
+          default:
+            return {};
+        }
+      },
+      clickHandler() {
+        // don't show viewer when preview is false
+        if (!this.preview) {
+          return;
+        }
+        // prevent body scroll
+        prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        this.showViewer = true;
+      },
+      closeViewer() {
+        document.body.style.overflow = prevOverflow;
+        this.showViewer = false;
+      }
+    }
+  };
+</script>