mazey-element-ui 2.0.1 → 2.15.16

package/packages/image/src/main.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="el-image">
+    <slot v-if="loading" name="placeholder">
+      <div class="el-image__placeholder"></div>
+    </slot>
+    <slot v-else-if="error" name="error">
+      <div class="el-image__error">{{ t('el.image.error') }}</div>
+    </slot>
+    <img
+      v-else
+      class="el-image__inner"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @click="clickHandler"
+      :src="src"
+      :style="imageStyle"
+      :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
+    <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 'mazey-element-ui/src/mixins/locale';
+  import { on, off, getScrollContainer, isInContainer } from 'mazey-element-ui/src/utils/dom';
+  import { isString, isHtmlElement } from 'mazey-element-ui/src/utils/types';
+  import throttle from 'throttle-debounce/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: 'ElImage',
+
+    mixins: [Locale],
+    inheritAttrs: false,
+
+    components: {
+      ImageViewer
+    },
+
+    props: {
+      src: String,
+      fit: String,
+      lazy: Boolean,
+      scrollContainer: {},
+      previewSrcList: {
+        type: Array,
+        default: () => []
+      },
+      zIndex: {
+        type: Number,
+        default: 2000
+      },
+      initialIndex: Number
+    },
+
+    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 initialIndex = this.initialIndex;
+        if (initialIndex >= 0) {
+          previewIndex = initialIndex;
+          return previewIndex;
+        }
+        const srcIndex = this.previewSrcList.indexOf(this.src);
+        if (srcIndex >= 0) {
+          previewIndex = srcIndex;
+          return previewIndex;
+        }
+        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 imageAspectRatio = imageWidth / imageHeight;
+        const containerAspectRatio = containerWidth / containerHeight;
+
+        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 (imageAspectRatio < containerAspectRatio) ? { width: 'auto' } : { height: 'auto' };
+          case ObjectFit.COVER:
+            return (imageAspectRatio < containerAspectRatio) ? { 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>

package/packages/infinite-scroll/index.js

@@ -0,0 +1,8 @@
+import InfiniteScroll from './src/main.js';
+
+/* istanbul ignore next */
+InfiniteScroll.install = function(Vue) {
+  Vue.directive(InfiniteScroll.name, InfiniteScroll);
+};
+
+export default InfiniteScroll;

package/packages/infinite-scroll/src/main.js

@@ -0,0 +1,150 @@
+import throttle from 'throttle-debounce/debounce';
+import {
+  isHtmlElement,
+  isFunction,
+  isUndefined,
+  isDefined
+} from 'mazey-element-ui/src/utils/types';
+import {
+  getScrollContainer
+} from 'mazey-element-ui/src/utils/dom';
+
+const getStyleComputedProperty = (element, property) => {
+  if (element === window) {
+    element = document.documentElement;
+  }
+
+  if (element.nodeType !== 1) {
+    return [];
+  }
+  // NOTE: 1 DOM access here
+  const css = window.getComputedStyle(element, null);
+  return property ? css[property] : css;
+};
+
+const entries = (obj) => {
+  return Object.keys(obj || {})
+    .map(key => ([key, obj[key]]));
+};
+
+const getPositionSize = (el, prop) => {
+  return el === window || el === document
+    ? document.documentElement[prop]
+    : el[prop];
+};
+
+const getOffsetHeight = el => {
+  return getPositionSize(el, 'offsetHeight');
+};
+
+const getClientHeight = el => {
+  return getPositionSize(el, 'clientHeight');
+};
+
+const scope = 'ElInfiniteScroll';
+const attributes = {
+  delay: {
+    type: Number,
+    default: 200
+  },
+  distance: {
+    type: Number,
+    default: 0
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  immediate: {
+    type: Boolean,
+    default: true
+  }
+};
+
+const getScrollOptions = (el, vm) => {
+  if (!isHtmlElement(el)) return {};
+
+  return entries(attributes).reduce((map, [key, option]) => {
+    const { type, default: defaultValue } = option;
+    let value = el.getAttribute(`infinite-scroll-${key}`);
+    value = isUndefined(vm[value]) ? value : vm[value];
+    switch (type) {
+      case Number:
+        value = Number(value);
+        value = Number.isNaN(value) ? defaultValue : value;
+        break;
+      case Boolean:
+        value = isDefined(value) ? value === 'false' ? false : Boolean(value) : defaultValue;
+        break;
+      default:
+        value = type(value);
+    }
+    map[key] = value;
+    return map;
+  }, {});
+};
+
+const getElementTop = el => el.getBoundingClientRect().top;
+
+const handleScroll = function(cb) {
+  const { el, vm, container, observer } = this[scope];
+  const { distance, disabled } = getScrollOptions(el, vm);
+
+  if (disabled) return;
+
+  const containerInfo = container.getBoundingClientRect();
+  if (!containerInfo.width && !containerInfo.height) return;
+
+  let shouldTrigger = false;
+
+  if (container === el) {
+    // be aware of difference between clientHeight & offsetHeight & window.getComputedStyle().height
+    const scrollBottom = container.scrollTop + getClientHeight(container);
+    shouldTrigger = container.scrollHeight - scrollBottom <= distance;
+  } else {
+    const heightBelowTop = getOffsetHeight(el) + getElementTop(el) - getElementTop(container);
+    const offsetHeight = getOffsetHeight(container);
+    const borderBottom = Number.parseFloat(getStyleComputedProperty(container, 'borderBottomWidth'));
+    shouldTrigger = heightBelowTop - offsetHeight + borderBottom <= distance;
+  }
+
+  if (shouldTrigger && isFunction(cb)) {
+    cb.call(vm);
+  } else if (observer) {
+    observer.disconnect();
+    this[scope].observer = null;
+  }
+
+};
+
+export default {
+  name: 'InfiniteScroll',
+  inserted(el, binding, vnode) {
+    const cb = binding.value;
+
+    const vm = vnode.context;
+    // only include vertical scroll
+    const container = getScrollContainer(el, true);
+    const { delay, immediate } = getScrollOptions(el, vm);
+    const onScroll = throttle(delay, handleScroll.bind(el, cb));
+
+    el[scope] = { el, vm, container, onScroll };
+
+    if (container) {
+      container.addEventListener('scroll', onScroll);
+
+      if (immediate) {
+        const observer = el[scope].observer = new MutationObserver(onScroll);
+        observer.observe(container, { childList: true, subtree: true });
+        onScroll();
+      }
+    }
+  },
+  unbind(el) {
+    const { container, onScroll } = el[scope];
+    if (container) {
+      container.removeEventListener('scroll', onScroll);
+    }
+  }
+};
+