@zkwq/business 0.0.4 → 0.0.6

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

@@ -1,302 +0,0 @@
-<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

@@ -1,248 +0,0 @@
-<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>