vant 3.2.8 → 3.3.0

package/es/lazyload/vue-lazyload/lazy.js

@@ -0,0 +1,507 @@
+import { nextTick } from 'vue';
+import { inBrowser, getScrollParent } from '@vant/use';
+import { remove, on, off, throttle, supportWebp, getDPR, getBestSelectionFromSrcset, hasIntersectionObserver, modeType, ImageCache } from './util';
+import { isObject } from '../../utils';
+import ReactiveListener from './listener';
+var DEFAULT_URL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+var DEFAULT_EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'];
+var DEFAULT_OBSERVER_OPTIONS = {
+  rootMargin: '0px',
+  threshold: 0
+};
+export default function () {
+  return class Lazy {
+    constructor(_ref) {
+      var {
+        preLoad,
+        error,
+        throttleWait,
+        preLoadTop,
+        dispatchEvent,
+        loading,
+        attempt,
+        silent = true,
+        scale,
+        listenEvents,
+        filter,
+        adapter,
+        observer,
+        observerOptions
+      } = _ref;
+      this.mode = modeType.event;
+      this.listeners = [];
+      this.targetIndex = 0;
+      this.targets = [];
+      this.options = {
+        silent,
+        dispatchEvent: !!dispatchEvent,
+        throttleWait: throttleWait || 200,
+        preLoad: preLoad || 1.3,
+        preLoadTop: preLoadTop || 0,
+        error: error || DEFAULT_URL,
+        loading: loading || DEFAULT_URL,
+        attempt: attempt || 3,
+        scale: scale || getDPR(scale),
+        ListenEvents: listenEvents || DEFAULT_EVENTS,
+        supportWebp: supportWebp(),
+        filter: filter || {},
+        adapter: adapter || {},
+        observer: !!observer,
+        observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS
+      };
+      this.initEvent();
+      this.imageCache = new ImageCache({
+        max: 200
+      });
+      this.lazyLoadHandler = throttle(this.lazyLoadHandler.bind(this), this.options.throttleWait);
+      this.setMode(this.options.observer ? modeType.observer : modeType.event);
+    }
+    /**
+     * update config
+     * @param  {Object} config params
+     * @return
+     */
+
+
+    config(options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      Object.assign(this.options, options);
+    }
+    /**
+     * output listener's load performance
+     * @return {Array}
+     */
+
+
+    performance() {
+      return this.listeners.map(item => item.performance());
+    }
+    /*
+     * add lazy component to queue
+     * @param  {Vue} vm lazy component instance
+     * @return
+     */
+
+
+    addLazyBox(vm) {
+      this.listeners.push(vm);
+
+      if (inBrowser) {
+        this.addListenerTarget(window);
+        this.observer && this.observer.observe(vm.el);
+
+        if (vm.$el && vm.$el.parentNode) {
+          this.addListenerTarget(vm.$el.parentNode);
+        }
+      }
+    }
+    /*
+     * add image listener to queue
+     * @param  {DOM} el
+     * @param  {object} binding vue directive binding
+     * @param  {vnode} vnode vue directive vnode
+     * @return
+     */
+
+
+    add(el, binding, vnode) {
+      if (this.listeners.some(item => item.el === el)) {
+        this.update(el, binding);
+        return nextTick(this.lazyLoadHandler);
+      }
+
+      var value = this.valueFormatter(binding.value);
+      var {
+        src
+      } = value;
+      nextTick(() => {
+        src = getBestSelectionFromSrcset(el, this.options.scale) || src;
+        this.observer && this.observer.observe(el);
+        var container = Object.keys(binding.modifiers)[0];
+        var $parent;
+
+        if (container) {
+          $parent = vnode.context.$refs[container]; // if there is container passed in, try ref first, then fallback to getElementById to support the original usage
+
+          $parent = $parent ? $parent.$el || $parent : document.getElementById(container);
+        }
+
+        if (!$parent) {
+          $parent = getScrollParent(el);
+        }
+
+        var newListener = new ReactiveListener({
+          bindType: binding.arg,
+          $parent,
+          el,
+          src,
+          loading: value.loading,
+          error: value.error,
+          cors: value.cors,
+          elRenderer: this.elRenderer.bind(this),
+          options: this.options,
+          imageCache: this.imageCache
+        });
+        this.listeners.push(newListener);
+
+        if (inBrowser) {
+          this.addListenerTarget(window);
+          this.addListenerTarget($parent);
+        }
+
+        this.lazyLoadHandler();
+        nextTick(() => this.lazyLoadHandler());
+      });
+    }
+    /**
+     * update image src
+     * @param  {DOM} el
+     * @param  {object} vue directive binding
+     * @return
+     */
+
+
+    update(el, binding, vnode) {
+      var value = this.valueFormatter(binding.value);
+      var {
+        src
+      } = value;
+      src = getBestSelectionFromSrcset(el, this.options.scale) || src;
+      var exist = this.listeners.find(item => item.el === el);
+
+      if (!exist) {
+        this.add(el, binding, vnode);
+      } else {
+        exist.update({
+          src,
+          error: value.error,
+          loading: value.loading
+        });
+      }
+
+      if (this.observer) {
+        this.observer.unobserve(el);
+        this.observer.observe(el);
+      }
+
+      this.lazyLoadHandler();
+      nextTick(() => this.lazyLoadHandler());
+    }
+    /**
+     * remove listener form list
+     * @param  {DOM} el
+     * @return
+     */
+
+
+    remove(el) {
+      if (!el) return;
+      this.observer && this.observer.unobserve(el);
+      var existItem = this.listeners.find(item => item.el === el);
+
+      if (existItem) {
+        this.removeListenerTarget(existItem.$parent);
+        this.removeListenerTarget(window);
+        remove(this.listeners, existItem);
+        existItem.$destroy();
+      }
+    }
+    /*
+     * remove lazy components form list
+     * @param  {Vue} vm Vue instance
+     * @return
+     */
+
+
+    removeComponent(vm) {
+      if (!vm) return;
+      remove(this.listeners, vm);
+      this.observer && this.observer.unobserve(vm.el);
+
+      if (vm.$parent && vm.$el.parentNode) {
+        this.removeListenerTarget(vm.$el.parentNode);
+      }
+
+      this.removeListenerTarget(window);
+    }
+
+    setMode(mode) {
+      if (!hasIntersectionObserver && mode === modeType.observer) {
+        mode = modeType.event;
+      }
+
+      this.mode = mode; // event or observer
+
+      if (mode === modeType.event) {
+        if (this.observer) {
+          this.listeners.forEach(listener => {
+            this.observer.unobserve(listener.el);
+          });
+          this.observer = null;
+        }
+
+        this.targets.forEach(target => {
+          this.initListen(target.el, true);
+        });
+      } else {
+        this.targets.forEach(target => {
+          this.initListen(target.el, false);
+        });
+        this.initIntersectionObserver();
+      }
+    }
+    /*
+     *** Private functions ***
+     */
+
+    /*
+     * add listener target
+     * @param  {DOM} el listener target
+     * @return
+     */
+
+
+    addListenerTarget(el) {
+      if (!el) return;
+      var target = this.targets.find(target => target.el === el);
+
+      if (!target) {
+        target = {
+          el,
+          id: ++this.targetIndex,
+          childrenCount: 1,
+          listened: true
+        };
+        this.mode === modeType.event && this.initListen(target.el, true);
+        this.targets.push(target);
+      } else {
+        target.childrenCount++;
+      }
+
+      return this.targetIndex;
+    }
+    /*
+     * remove listener target or reduce target childrenCount
+     * @param  {DOM} el or window
+     * @return
+     */
+
+
+    removeListenerTarget(el) {
+      this.targets.forEach((target, index) => {
+        if (target.el === el) {
+          target.childrenCount--;
+
+          if (!target.childrenCount) {
+            this.initListen(target.el, false);
+            this.targets.splice(index, 1);
+            target = null;
+          }
+        }
+      });
+    }
+    /*
+     * add or remove eventlistener
+     * @param  {DOM} el DOM or Window
+     * @param  {boolean} start flag
+     * @return
+     */
+
+
+    initListen(el, start) {
+      this.options.ListenEvents.forEach(evt => (start ? on : off)(el, evt, this.lazyLoadHandler));
+    }
+
+    initEvent() {
+      var _this = this;
+
+      this.Event = {
+        listeners: {
+          loading: [],
+          loaded: [],
+          error: []
+        }
+      };
+
+      this.$on = (event, func) => {
+        if (!this.Event.listeners[event]) this.Event.listeners[event] = [];
+        this.Event.listeners[event].push(func);
+      };
+
+      this.$once = (event, func) => {
+        var on = function () {
+          _this.$off(event, on);
+
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          func.apply(_this, args);
+        };
+
+        this.$on(event, on);
+      };
+
+      this.$off = (event, func) => {
+        if (!func) {
+          if (!this.Event.listeners[event]) return;
+          this.Event.listeners[event].length = 0;
+          return;
+        }
+
+        remove(this.Event.listeners[event], func);
+      };
+
+      this.$emit = (event, context, inCache) => {
+        if (!this.Event.listeners[event]) return;
+        this.Event.listeners[event].forEach(func => func(context, inCache));
+      };
+    }
+    /**
+     * find nodes which in viewport and trigger load
+     * @return
+     */
+
+
+    lazyLoadHandler() {
+      var freeList = [];
+      this.listeners.forEach(listener => {
+        if (!listener.el || !listener.el.parentNode) {
+          freeList.push(listener);
+        }
+
+        var catIn = listener.checkInView();
+        if (!catIn) return;
+        listener.load();
+      });
+      freeList.forEach(item => {
+        remove(this.listeners, item);
+        item.$destroy();
+      });
+    }
+    /**
+     * init IntersectionObserver
+     * set mode to observer
+     * @return
+     */
+
+
+    initIntersectionObserver() {
+      if (!hasIntersectionObserver) {
+        return;
+      }
+
+      this.observer = new IntersectionObserver(this.observerHandler.bind(this), this.options.observerOptions);
+
+      if (this.listeners.length) {
+        this.listeners.forEach(listener => {
+          this.observer.observe(listener.el);
+        });
+      }
+    }
+    /**
+     * init IntersectionObserver
+     * @return
+     */
+
+
+    observerHandler(entries) {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.listeners.forEach(listener => {
+            if (listener.el === entry.target) {
+              if (listener.state.loaded) return this.observer.unobserve(listener.el);
+              listener.load();
+            }
+          });
+        }
+      });
+    }
+    /**
+     * set element attribute with image'url and state
+     * @param  {object} lazyload listener object
+     * @param  {string} state will be rendered
+     * @param  {bool} inCache  is rendered from cache
+     * @return
+     */
+
+
+    elRenderer(listener, state, cache) {
+      if (!listener.el) return;
+      var {
+        el,
+        bindType
+      } = listener;
+      var src;
+
+      switch (state) {
+        case 'loading':
+          src = listener.loading;
+          break;
+
+        case 'error':
+          src = listener.error;
+          break;
+
+        default:
+          ({
+            src
+          } = listener);
+          break;
+      }
+
+      if (bindType) {
+        el.style[bindType] = 'url("' + src + '")';
+      } else if (el.getAttribute('src') !== src) {
+        el.setAttribute('src', src);
+      }
+
+      el.setAttribute('lazy', state);
+      this.$emit(state, listener, cache);
+      this.options.adapter[state] && this.options.adapter[state](listener, this.options);
+
+      if (this.options.dispatchEvent) {
+        var event = new CustomEvent(state, {
+          detail: listener
+        });
+        el.dispatchEvent(event);
+      }
+    }
+    /**
+     * generate loading loaded error image url
+     * @param {string} image's src
+     * @return {object} image's loading, loaded, error url
+     */
+
+
+    valueFormatter(value) {
+      var src = value;
+      var {
+        loading,
+        error
+      } = this.options; // value is object
+
+      if (isObject(value)) {
+        if (process.env.NODE_ENV !== 'production' && !value.src && !this.options.silent) {
+          console.error('[@vant/lazyload] miss src with ' + value);
+        }
+
+        ({
+          src
+        } = value);
+        loading = value.loading || this.options.loading;
+        error = value.error || this.options.error;
+      }
+
+      return {
+        src,
+        loading,
+        error
+      };
+    }
+
+  };
+}