@varlet/ui/es/lazy/index.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
import { call, doubleRaf, inViewport, removeItem, throttle } from "@varlet/shared";
import { getAllParentScroller } from "../utils/elements.mjs";
import { createCache } from "../utils/shared.mjs";
const BACKGROUND_IMAGE_ARG_NAME = "background-image";
const LAZY_LOADING = "lazy-loading";
const LAZY_ERROR = "lazy-error";
const LAZY_ATTEMPT = "lazy-attempt";
const EVENTS = ["scroll", "wheel", "mousewheel", "resize", "animationend", "transitionend", "touchmove"];
const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
const lazyElements = [];
const listenTargets = [];
const imageCache = createCache(100);
const defaultLazyOptions = {
  loading: PIXEL,
  error: PIXEL,
  attempt: 3,
  throttleWait: 300,
  events: EVENTS
};
let checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait);
function setSRC(el, src) {
  if (el._lazy.arg === BACKGROUND_IMAGE_ARG_NAME) {
    el.style.backgroundImage = `url(${src})`;
  } else {
    el.setAttribute("src", src);
  }
}
function setLoading(el) {
  el._lazy.loading && setSRC(el, el._lazy.loading);
  checkAll();
}
function setError(el) {
  el._lazy.error && setSRC(el, el._lazy.error);
  el._lazy.state = "error";
  clear(el);
  checkAll();
}
function setSuccess(el, attemptSRC) {
  setSRC(el, attemptSRC);
  el._lazy.state = "success";
  clear(el);
  checkAll();
}
function bindEvents(listenTarget) {
  var _a;
  if (listenTargets.includes(listenTarget)) {
    return;
  }
  listenTargets.push(listenTarget);
  (_a = defaultLazyOptions.events) == null ? void 0 : _a.forEach((event) => {
    listenTarget.addEventListener(event, checkAllWithThrottle, { passive: true });
  });
}
function unbindEvents() {
  listenTargets.forEach((listenTarget) => {
    var _a;
    (_a = defaultLazyOptions.events) == null ? void 0 : _a.forEach((event) => {
      listenTarget.removeEventListener(event, checkAllWithThrottle);
    });
  });
  listenTargets.length = 0;
}
function createLazy(el, binding) {
  var _a, _b;
  const lazyOptions = {
    loading: (_a = el.getAttribute(LAZY_LOADING)) != null ? _a : defaultLazyOptions.loading,
    error: (_b = el.getAttribute(LAZY_ERROR)) != null ? _b : defaultLazyOptions.error,
    attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt
  };
  el._lazy = __spreadValues({
    src: binding.value,
    arg: binding.arg,
    currentAttempt: 0,
    state: "pending",
    attemptLock: false
  }, lazyOptions);
  setSRC(el, PIXEL);
  call(defaultLazyOptions.filter, el._lazy);
}
function createImage(el, attemptSRC) {
  const image = new Image();
  image.src = attemptSRC;
  el._lazy.preloadImage = image;
  image.addEventListener("load", () => {
    el._lazy.attemptLock = false;
    imageCache.add(attemptSRC);
    setSuccess(el, attemptSRC);
  });
  image.addEventListener("error", () => {
    el._lazy.attemptLock = false;
    el._lazy.currentAttempt >= el._lazy.attempt ? setError(el) : attemptLoad(el);
  });
}
function attemptLoad(el) {
  if (el._lazy.attemptLock) {
    return;
  }
  el._lazy.attemptLock = true;
  el._lazy.currentAttempt++;
  const { src: attemptSRC } = el._lazy;
  if (imageCache.has(attemptSRC)) {
    setSuccess(el, attemptSRC);
    el._lazy.attemptLock = false;
    return;
  }
  setLoading(el);
  createImage(el, attemptSRC);
}
function check(el) {
  return __async(this, null, function* () {
    yield doubleRaf();
    if (inViewport(el)) {
      attemptLoad(el);
    }
  });
}
function checkAll() {
  lazyElements.forEach((el) => check(el));
}
function add(el) {
  return __async(this, null, function* () {
    !lazyElements.includes(el) && lazyElements.push(el);
    getAllParentScroller(el).forEach(bindEvents);
    yield check(el);
  });
}
function clear(el) {
  removeItem(lazyElements, el);
  lazyElements.length === 0 && unbindEvents();
}
function diff(el, binding) {
  const { src, arg } = el._lazy;
  return src !== binding.value || arg !== binding.arg;
}
function mounted(el, binding) {
  return __async(this, null, function* () {
    createLazy(el, binding);
    yield add(el);
  });
}
function updated(el, binding) {
  return __async(this, null, function* () {
    if (!diff(el, binding)) {
      lazyElements.includes(el) && (yield check(el));
      return;
    }
    yield mounted(el, binding);
  });
}
function mergeLazyOptions(lazyOptions = {}) {
  const { events, loading, error, attempt, throttleWait, filter } = lazyOptions;
  defaultLazyOptions.events = events != null ? events : defaultLazyOptions.events;
  defaultLazyOptions.loading = loading != null ? loading : defaultLazyOptions.loading;
  defaultLazyOptions.error = error != null ? error : defaultLazyOptions.error;
  defaultLazyOptions.attempt = attempt != null ? attempt : defaultLazyOptions.attempt;
  defaultLazyOptions.throttleWait = throttleWait != null ? throttleWait : defaultLazyOptions.throttleWait;
  defaultLazyOptions.filter = filter;
}
const Lazy = {
  mounted,
  unmounted: clear,
  updated,
  install(app, lazyOptions) {
    mergeLazyOptions(lazyOptions);
    checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait);
    app.directive("lazy", this);
  }
};
const _LazyComponent = Lazy;
var stdin_default = Lazy;
export {
  PIXEL,
  _LazyComponent,
  stdin_default as default,
  defaultLazyOptions,
  imageCache
};