@meve/ui/es/lazy/index.js

Argon design system components library

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _extends from "@babel/runtime/helpers/esm/extends";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { getAllParentScroller, inViewport } from '../utils/elements';
import { createCache, removeItem, throttle } from '../utils/shared';
var BACKGROUND_IMAGE_ARG_NAME = 'background-image';
var LAZY_LOADING = 'lazy-loading';
var LAZY_ERROR = 'lazy-error';
var LAZY_ATTEMPT = 'lazy-attempt';
var EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'];
export var PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
var lazyElements = [];
var listenTargets = [];
export var imageCache = createCache(100);
export var defaultLazyOptions = {
  loading: PIXEL,
  error: PIXEL,
  attempt: 3,
  throttleWait: 300,
  events: EVENTS
};
var 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';
  unbind(el);
  checkAll();
}

function setSuccess(el, attemptSRC) {
  setSRC(el, attemptSRC);
  el._lazy.state = 'success';
  unbind(el);
  checkAll();
}

function bindEvents(listenTarget) {
  var _defaultLazyOptions$e;

  if (listenTargets.includes(listenTarget)) {
    return;
  }

  listenTargets.push(listenTarget);
  (_defaultLazyOptions$e = defaultLazyOptions.events) == null ? void 0 : _defaultLazyOptions$e.forEach(function (event) {
    listenTarget.addEventListener(event, checkAllWithThrottle, {
      passive: true
    });
  });
}

function unbindEvents() {
  listenTargets.forEach(function (listenTarget) {
    var _defaultLazyOptions$e2;

    (_defaultLazyOptions$e2 = defaultLazyOptions.events) == null ? void 0 : _defaultLazyOptions$e2.forEach(function (event) {
      listenTarget.removeEventListener(event, checkAllWithThrottle);
    });
  });
  listenTargets.length = 0;
}

function createLazy(el, binding) {
  var _el$getAttribute, _el$getAttribute2;

  var lazyOptions = {
    loading: (_el$getAttribute = el.getAttribute(LAZY_LOADING)) != null ? _el$getAttribute : defaultLazyOptions.loading,
    error: (_el$getAttribute2 = el.getAttribute(LAZY_ERROR)) != null ? _el$getAttribute2 : defaultLazyOptions.error,
    attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt
  };
  var lazyEl = Object.assign(el, {
    _lazy: _extends({
      src: binding.value,
      arg: binding.arg,
      currentAttempt: 0,
      state: 'pending',
      attemptLock: false
    }, lazyOptions)
  });
  setSRC(lazyEl, PIXEL);
  defaultLazyOptions.filter == null ? void 0 : defaultLazyOptions.filter(lazyEl._lazy);
  return lazyEl;
}

function createImage(el, attemptSRC) {
  var image = new Image();
  image.src = attemptSRC;
  el._lazy.preloadImage = image;
  image.addEventListener('load', function () {
    el._lazy.attemptLock = false;
    imageCache.add(attemptSRC);
    setSuccess(el, attemptSRC);
  });
  image.addEventListener('error', function () {
    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++;
  var attemptSRC = el._lazy.src;

  if (imageCache.has(attemptSRC)) {
    setSuccess(el, attemptSRC);
    el._lazy.attemptLock = false;
    return;
  }

  setLoading(el);
  createImage(el, attemptSRC);
}

function check(_x) {
  return _check.apply(this, arguments);
}

function _check() {
  _check = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(el) {
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            ;
            _context.next = 3;
            return inViewport(el);

          case 3:
            _context.t0 = _context.sent;

            if (!_context.t0) {
              _context.next = 6;
              break;
            }

            attemptLoad(el);

          case 6:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _check.apply(this, arguments);
}

function checkAll() {
  lazyElements.forEach(function (el) {
    return check(el);
  });
}

function add(_x2) {
  return _add.apply(this, arguments);
}

function _add() {
  _add = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(el) {
    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            !lazyElements.includes(el) && lazyElements.push(el);
            getAllParentScroller(el).forEach(bindEvents);
            _context2.next = 4;
            return check(el);

          case 4:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  }));
  return _add.apply(this, arguments);
}

function unbind(el) {
  removeItem(lazyElements, el);
  lazyElements.length === 0 && unbindEvents();
}

function diff(el, binding) {
  var _el$_lazy = el._lazy,
      src = _el$_lazy.src,
      arg = _el$_lazy.arg;
  return src !== binding.value || arg !== binding.arg;
}

function inserted(_x3, _x4) {
  return _inserted.apply(this, arguments);
}

function _inserted() {
  _inserted = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(el, binding) {
    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            _context3.next = 2;
            return add(createLazy(el, binding));

          case 2:
          case "end":
            return _context3.stop();
        }
      }
    }, _callee3);
  }));
  return _inserted.apply(this, arguments);
}

function update(_x5, _x6) {
  return _update.apply(this, arguments);
}

function _update() {
  _update = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(el, binding) {
    var lazyEl;
    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
      while (1) {
        switch (_context4.prev = _context4.next) {
          case 0:
            lazyEl = el;

            if (diff(lazyEl, binding)) {
              _context4.next = 7;
              break;
            }

            _context4.t0 = lazyElements.includes(lazyEl);

            if (!_context4.t0) {
              _context4.next = 6;
              break;
            }

            _context4.next = 6;
            return check(lazyEl);

          case 6:
            return _context4.abrupt("return");

          case 7:
            _context4.next = 9;
            return inserted(el, binding);

          case 9:
          case "end":
            return _context4.stop();
        }
      }
    }, _callee4);
  }));
  return _update.apply(this, arguments);
}

function mergeLazyOptions(lazyOptions) {
  if (lazyOptions === void 0) {
    lazyOptions = {};
  }

  var _lazyOptions = lazyOptions,
      events = _lazyOptions.events,
      loading = _lazyOptions.loading,
      error = _lazyOptions.error,
      attempt = _lazyOptions.attempt,
      throttleWait = _lazyOptions.throttleWait,
      filter = _lazyOptions.filter;
  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;
}

var Lazy = {
  inserted: inserted,
  unbind: unbind,
  update: update,
  install: function install(app, lazyOptions) {
    mergeLazyOptions(lazyOptions);
    checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait);
    app.directive('lazy', this);
  }
};
export var _LazyComponent = Lazy;
export default Lazy;