vant 3.4.0 → 3.4.1

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

@@ -1,33 +1,51 @@
-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',
+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";
+const DEFAULT_URL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+const DEFAULT_EVENTS = [
+  "scroll",
+  "wheel",
+  "mousewheel",
+  "resize",
+  "animationend",
+  "transitionend",
+  "touchmove"
+];
+const DEFAULT_OBSERVER_OPTIONS = {
+  rootMargin: "0px",
   threshold: 0
 };
-export default function () {
+function stdin_default() {
   return class Lazy {
-    constructor(_ref) {
-      var {
-        preLoad,
-        error,
-        throttleWait,
-        preLoadTop,
-        dispatchEvent,
-        loading,
-        attempt,
-        silent = true,
-        scale,
-        listenEvents,
-        filter,
-        adapter,
-        observer,
-        observerOptions
-      } = _ref;
+    constructor({
+      preLoad,
+      error,
+      throttleWait,
+      preLoadTop,
+      dispatchEvent,
+      loading,
+      attempt,
+      silent = true,
+      scale,
+      listenEvents,
+      filter,
+      adapter,
+      observer,
+      observerOptions
+    }) {
       this.mode = modeType.event;
       this.listeners = [];
       this.targetIndex = 0;
@@ -50,90 +68,46 @@ export default function () {
         observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS
       };
       this.initEvent();
-      this.imageCache = new ImageCache({
-        max: 200
-      });
+      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 = {};
-      }
-
+    config(options = {}) {
       Object.assign(this.options, options);
     }
-    /**
-     * output listener's load performance
-     * @return {Array}
-     */
-
-
     performance() {
-      return this.listeners.map(item => item.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)) {
+      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;
+      const value = this.valueFormatter(binding.value);
+      let { 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;
-
+        const container = Object.keys(binding.modifiers)[0];
+        let $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 = vnode.context.$refs[container];
           $parent = $parent ? $parent.$el || $parent : document.getElementById(container);
         }
-
         if (!$parent) {
           $parent = getScrollParent(el);
         }
-
-        var newListener = new ReactiveListener({
+        const newListener = new ReactiveListener({
           bindType: binding.arg,
           $parent,
           el,
@@ -146,32 +120,19 @@ export default function () {
           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;
+      const value = this.valueFormatter(binding.value);
+      let { src } = value;
       src = getBestSelectionFromSrcset(el, this.options.scale) || src;
-      var exist = this.listeners.find(item => item.el === el);
-
+      const exist = this.listeners.find((item) => item.el === el);
       if (!exist) {
         this.add(el, binding, vnode);
       } else {
@@ -181,27 +142,18 @@ export default function () {
           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;
+      if (!el)
+        return;
       this.observer && this.observer.unobserve(el);
-      var existItem = this.listeners.find(item => item.el === el);
-
+      const existItem = this.listeners.find((item) => item.el === el);
       if (existItem) {
         this.removeListenerTarget(existItem.$parent);
         this.removeListenerTarget(window);
@@ -209,65 +161,42 @@ export default function () {
         existItem.$destroy();
       }
     }
-    /*
-     * remove lazy components form list
-     * @param  {Vue} vm Vue instance
-     * @return
-     */
-
-
     removeComponent(vm) {
-      if (!vm) return;
+      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
-
+      this.mode = mode;
       if (mode === modeType.event) {
         if (this.observer) {
-          this.listeners.forEach(listener => {
+          this.listeners.forEach((listener) => {
             this.observer.unobserve(listener.el);
           });
           this.observer = null;
         }
-
-        this.targets.forEach(target => {
+        this.targets.forEach((target) => {
           this.initListen(target.el, true);
         });
       } else {
-        this.targets.forEach(target => {
+        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 (!el)
+        return;
+      let target = this.targets.find((target2) => target2.el === el);
       if (!target) {
         target = {
           el,
@@ -280,21 +209,12 @@ export default function () {
       } 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);
@@ -303,21 +223,10 @@ export default function () {
         }
       });
     }
-    /*
-     * 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));
+      this.options.ListenEvents.forEach((evt) => (start ? on : off)(el, evt, this.lazyLoadHandler));
     }
-
     initEvent() {
-      var _this = this;
-
       this.Event = {
         listeners: {
           loading: [],
@@ -325,183 +234,123 @@ export default function () {
           error: []
         }
       };
-
       this.$on = (event, func) => {
-        if (!this.Event.listeners[event]) this.Event.listeners[event] = [];
+        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);
+        const on2 = (...args) => {
+          this.$off(event, on2);
+          func.apply(this, args);
         };
-
-        this.$on(event, on);
+        this.$on(event, on2);
       };
-
       this.$off = (event, func) => {
         if (!func) {
-          if (!this.Event.listeners[event]) return;
+          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));
+        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 => {
+      const freeList = [];
+      this.listeners.forEach((listener) => {
         if (!listener.el || !listener.el.parentNode) {
           freeList.push(listener);
         }
-
-        var catIn = listener.checkInView();
-        if (!catIn) return;
+        const catIn = listener.checkInView();
+        if (!catIn)
+          return;
         listener.load();
       });
-      freeList.forEach(item => {
+      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.listeners.forEach((listener) => {
           this.observer.observe(listener.el);
         });
       }
     }
-    /**
-     * init IntersectionObserver
-     * @return
-     */
-
-
     observerHandler(entries) {
-      entries.forEach(entry => {
+      entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          this.listeners.forEach(listener => {
+          this.listeners.forEach((listener) => {
             if (listener.el === entry.target) {
-              if (listener.state.loaded) return this.observer.unobserve(listener.el);
+              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;
-
+      if (!listener.el)
+        return;
+      const { el, bindType } = listener;
+      let src;
       switch (state) {
-        case 'loading':
+        case "loading":
           src = listener.loading;
           break;
-
-        case 'error':
+        case "error":
           src = listener.error;
           break;
-
         default:
-          ({
-            src
-          } = listener);
+          ({ src } = listener);
           break;
       }
-
       if (bindType) {
         el.style[bindType] = 'url("' + src + '")';
-      } else if (el.getAttribute('src') !== src) {
-        el.setAttribute('src', src);
+      } else if (el.getAttribute("src") !== src) {
+        el.setAttribute("src", src);
       }
-
-      el.setAttribute('lazy', state);
+      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, {
+        const 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
-
+      let src = value;
+      let { loading, error } = this.options;
       if (isObject(value)) {
-        if (process.env.NODE_ENV !== 'production' && !value.src && !this.options.silent) {
-          console.error('[@vant/lazyload] miss src with ' + value);
+        if (process.env.NODE_ENV !== "production" && !value.src && !this.options.silent) {
+          console.error("[@vant/lazyload] miss src with " + value);
         }
-
-        ({
-          src
-        } = value);
+        ({ src } = value);
         loading = value.loading || this.options.loading;
         error = value.error || this.options.error;
       }
-
       return {
         src,
         loading,
         error
       };
     }
-
   };
-}
+}
+export {
+  stdin_default as default
+};