@uploadcare/file-uploader 1.22.0 → 1.24.0-alpha.0

package/blocks/Img/ImgBase.js

@@ -1,408 +0,0 @@
-import { applyTemplateData } from '../../utils/template-utils.js';
-import { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
-import { stringToArray } from '../../utils/stringToArray.js';
-import { uniqueArray } from '../../utils/uniqueArray.js';
-import { parseObjectToString } from './utils/parseObjectToString.js';
-import { ImgConfig } from './ImgConfig.js';
-import {
-  DEV_MODE,
-  HI_RES_K,
-  ULTRA_RES_K,
-  UNRESOLVED_ATTR,
-  MAX_WIDTH,
-  MAX_WIDTH_JPG,
-  ImgTypeEnum,
-} from './configurations.js';
-
-export class ImgBase extends ImgConfig {
-  _img = new Image();
-  _imgPreview = new Image();
-
-  /**
-   * @private
-   * @param {String} src
-   */
-  _fmtAbs(src) {
-    let isRel = !src.includes('//');
-    if (isRel && !DEV_MODE) {
-      src = new URL(src, document.baseURI).href;
-    }
-    return src;
-  }
-
-  /**
-   * Validate size
-   *
-   * @param {String} [size]
-   * @returns {String | Number}
-   */
-  _validateSize(size) {
-    if (size?.trim() !== '') {
-      // Extract numeric part
-      let numericPart = size.match(/\d+/)[0];
-
-      // Extract alphabetic part
-      let alphabeticPart = size.match(/[a-zA-Z]+/)[0];
-
-      const bp = parseInt(numericPart, 10);
-
-      if (Number(bp) > MAX_WIDTH_JPG && this.hasFormatJPG) {
-        return MAX_WIDTH_JPG + alphabeticPart;
-      } else if (Number(bp) > MAX_WIDTH && !this.hasFormatJPG) {
-        return MAX_WIDTH + alphabeticPart;
-      }
-    }
-
-    return size;
-  }
-
-  /**
-   * Image operations
-   *
-   * @param {String} [size]
-   * @param {String} [blur]
-   */
-  _getCdnModifiers(size, blur) {
-    const params = {
-      format: this.$$('format'),
-      quality: this.$$('quality'),
-      resize: this._validateSize(size),
-      blur,
-      'cdn-operations': this.$$('cdn-operations'),
-      analytics: this.analyticsParams(),
-    };
-
-    return createCdnUrlModifiers(...parseObjectToString(params));
-  }
-
-  /**
-   * @private
-   * @param {String} [size]
-   * @param {String} [blur]
-   * @returns {any}
-   */
-  _getUrlBase(size = '', blur = '') {
-    if (this.$$('src').startsWith('data:') || this.$$('src').startsWith('blob:')) {
-      return this.$$('src');
-    }
-
-    // Localhost + relative image path (DO NOTHING):
-    if (DEV_MODE && this.$$('src') && !this.$$('src').includes('//')) {
-      return this._proxyUrl(this.$$('src'));
-    }
-
-    let cdnModifiers = this._getCdnModifiers(size, blur);
-
-    if (this.$$('src').startsWith(this.$$('cdn-cname'))) {
-      return createCdnUrl(this.$$('src'), cdnModifiers);
-    }
-
-    // Alternative CDN name:
-    if (this.$$('cdn-cname') && this.$$('uuid')) {
-      return this._proxyUrl(
-        createCdnUrl(
-          //
-          createOriginalUrl(this.$$('cdn-cname'), this.$$('uuid')),
-          cdnModifiers,
-        ),
-      );
-    }
-
-    // UUID only:
-    if (this.$$('uuid')) {
-      return this._proxyUrl(
-        createCdnUrl(
-          //
-          createOriginalUrl(this.$$('cdn-cname'), this.$$('uuid')),
-          cdnModifiers,
-        ),
-      );
-    }
-
-    // Alternative proxy name:
-    if (this.$$('proxy-cname')) {
-      return this._proxyUrl(
-        createCdnUrl(
-          //
-          this.$$('proxy-cname'),
-          cdnModifiers,
-          this._fmtAbs(this.$$('src')),
-        ),
-      );
-    }
-
-    // Project pubkey only:
-    if (this.$$('pubkey')) {
-      return this._proxyUrl(
-        createCdnUrl(
-          //
-          `https://${this.$$('pubkey')}.ucr.io/`,
-          cdnModifiers,
-          this._fmtAbs(this.$$('src')),
-        ),
-      );
-    }
-  }
-
-  /**
-   * @private
-   * @param {String} url
-   * @returns {String}
-   */
-  _proxyUrl(url) {
-    let previewProxy = this.$$('secure-delivery-proxy');
-    if (!previewProxy) {
-      return url;
-    }
-    return applyTemplateData(
-      this.$$('secure-delivery-proxy'),
-      { previewUrl: url },
-      { transform: (value) => window.encodeURIComponent(value) },
-    );
-  }
-
-  /**
-   * @param {HTMLElement} el
-   * @param {Number} [k]
-   * @param {Boolean} [wOnly]
-   */
-  _getElSize(el, k = 1, wOnly = true) {
-    let rect = el.getBoundingClientRect();
-    let w = k * Math.round(rect.width);
-    let h = wOnly ? '' : k * Math.round(rect.height);
-
-    if (w || h) {
-      return `${w ? w : ''}x${h ? h : ''}`;
-    } else {
-      return null;
-    }
-  }
-
-  /** @param {HTMLImageElement} img */
-  _setupEventProxy(img) {
-    /** @param {Event} e */
-    let proxifyEvent = (e) => {
-      e.stopPropagation();
-      let event = new Event(e.type, e);
-      this.dispatchEvent(event);
-    };
-    let EVENTS = ['load', 'error'];
-    for (let event of EVENTS) {
-      img.addEventListener(event, proxifyEvent);
-    }
-  }
-
-  /** @type {HTMLImageElement} */
-  get img() {
-    if (!this.hasPreviewImage) {
-      this._setupConfigForImage({ elNode: this._img });
-      this.appendChild(this._img);
-    }
-    return this._img;
-  }
-
-  get currentImg() {
-    return this.hasPreviewImage
-      ? {
-          type: ImgTypeEnum.PREVIEW,
-          img: this._imgPreview,
-        }
-      : {
-          type: ImgTypeEnum.MAIN,
-          img: this.img,
-        };
-  }
-
-  get hasPreviewImage() {
-    return this.$$('is-preview-blur');
-  }
-
-  get bgSelector() {
-    return this.$$('is-background-for');
-  }
-
-  get breakpoints() {
-    if (this.$$('breakpoints')) {
-      const list = stringToArray(this.$$('breakpoints'));
-      return uniqueArray(list.map((bp) => parseInt(bp, 10)));
-    } else {
-      return null;
-    }
-  }
-
-  get hasFormatJPG() {
-    return this.$$('format').toLowerCase() === 'jpeg';
-  }
-
-  /** @param {HTMLElement} el */
-  renderBg(el) {
-    let imgSet = new Set();
-
-    imgSet.add(`url("${this._getUrlBase(this._getElSize(el))}") 1x`);
-    if (this.$$('hi-res-support')) {
-      imgSet.add(`url("${this._getUrlBase(this._getElSize(el, HI_RES_K))}") ${HI_RES_K}x`);
-    }
-
-    if (this.$$('ultra-res-support')) {
-      imgSet.add(`url("${this._getUrlBase(this._getElSize(el, ULTRA_RES_K))}") ${ULTRA_RES_K}x`);
-    }
-
-    let iSet = `image-set(${[...imgSet].join(', ')})`;
-    el.style.setProperty('background-image', iSet);
-    el.style.setProperty('background-image', '-webkit-' + iSet);
-  }
-
-  getSrcset() {
-    let srcset = new Set();
-    if (this.breakpoints) {
-      this.breakpoints.forEach((bp) => {
-        srcset.add(this._getUrlBase(bp + 'x') + ` ${this._validateSize(bp + 'w')}`);
-        if (this.$$('hi-res-support')) {
-          srcset.add(this._getUrlBase(bp * HI_RES_K + 'x') + ` ${this._validateSize(bp * HI_RES_K + 'w')}`);
-        }
-        if (this.$$('ultra-res-support')) {
-          srcset.add(this._getUrlBase(bp * ULTRA_RES_K + 'x') + ` ${this._validateSize(bp * ULTRA_RES_K + 'w')}`);
-        }
-      });
-    } else {
-      srcset.add(this._getUrlBase(this._getElSize(this.currentImg.img)) + ' 1x');
-      if (this.$$('hi-res-support')) {
-        srcset.add(this._getUrlBase(this._getElSize(this.currentImg.img, 2)) + ' 2x');
-      }
-      if (this.$$('ultra-res-support')) {
-        srcset.add(this._getUrlBase(this._getElSize(this.currentImg.img, 3)) + ' 3x');
-      }
-    }
-    return [...srcset].join();
-  }
-
-  getSrc() {
-    return this._getUrlBase();
-  }
-
-  get srcUrlPreview() {
-    return this._getUrlBase('100x', '100');
-  }
-
-  renderBackground() {
-    [...document.querySelectorAll(this.bgSelector)].forEach((el) => {
-      if (this.$$('intersection')) {
-        this.initIntersection(el, () => {
-          this.renderBg(el);
-        });
-      } else {
-        this.renderBg(el);
-      }
-    });
-  }
-
-  _appendURL({ elNode, src, srcset }) {
-    if (src) {
-      elNode.src = src;
-    }
-
-    if (srcset) {
-      elNode.srcset = srcset;
-    }
-  }
-
-  _setupConfigForImage({ elNode }) {
-    this._setupEventProxy(elNode);
-    this.initAttributes(elNode);
-  }
-
-  loaderImage({ src, srcset, elNode }) {
-    return new Promise((resolve, reject) => {
-      this._setupConfigForImage({ elNode });
-
-      elNode.setAttribute(UNRESOLVED_ATTR, '');
-
-      elNode.addEventListener('load', () => {
-        elNode.removeAttribute(UNRESOLVED_ATTR);
-        resolve(elNode);
-      });
-
-      elNode.addEventListener('error', () => {
-        reject(false);
-      });
-
-      this._appendURL({
-        elNode,
-        src,
-        srcset,
-      });
-    });
-  }
-
-  async renderImage() {
-    if (this.$$('intersection')) {
-      if (this.hasPreviewImage) {
-        this._setupConfigForImage({ elNode: this._imgPreview });
-        this.appendChild(this._imgPreview);
-      }
-
-      this.initIntersection(this.currentImg.img, async () => {
-        if (this.hasPreviewImage) {
-          this._imgPreview.src = this.srcUrlPreview;
-        }
-
-        try {
-          await this.loaderImage({
-            src: this.getSrc(),
-            srcset: this.getSrcset(),
-            elNode: this._img,
-          });
-
-          if (this.hasPreviewImage) {
-            await this._imgPreview.remove();
-          }
-
-          this.appendChild(this._img);
-        } catch (e) {
-          if (this.hasPreviewImage) {
-            await this._imgPreview?.remove();
-          }
-          this.appendChild(this._img);
-        }
-      });
-
-      return;
-    }
-
-    try {
-      if (this.hasPreviewImage) {
-        await this.loaderImage({
-          src: this.srcUrlPreview,
-          elNode: this._imgPreview,
-        });
-
-        this.appendChild(this._imgPreview);
-      }
-
-      await this.loaderImage({
-        src: this.getSrc(),
-        srcset: this.getSrcset(),
-        elNode: this._img,
-      });
-
-      if (this.hasPreviewImage) {
-        await this._imgPreview?.remove();
-      }
-
-      this.appendChild(this._img);
-    } catch (e) {
-      if (this.hasPreviewImage) {
-        await this._imgPreview?.remove();
-      }
-      this.appendChild(this._img);
-    }
-  }
-
-  init() {
-    if (this.bgSelector) {
-      this.renderBackground();
-    } else {
-      this.renderImage();
-    }
-  }
-}

package/blocks/Img/ImgConfig.d.ts

@@ -1,31 +0,0 @@
-export class ImgConfig extends BaseComponent<any> {
-    static get observedAttributes(): string[];
-    constructor();
-    cssInit$: any;
-    /**
-     * @param {String} key
-     * @returns {any}
-     */
-    $$(key: string): any;
-    /** @param {Object<String, String | Number>} kvObj */
-    set$$(kvObj: any): void;
-    /**
-     * @param {String} key
-     * @param {(val: any) => void} kbFn
-     */
-    sub$$(key: string, kbFn: (val: any) => void): void;
-    analyticsParams(): string;
-    initAttributes(el: any): void;
-    /**
-     * @param {HTMLElement} el
-     * @param {() => void} cbkFn
-     */
-    initIntersection(el: HTMLElement, cbkFn: () => void): void;
-    /** @private */
-    private _isnObserver;
-    /** @private */
-    private _observed;
-    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
-}
-import { BaseComponent } from '@symbiotejs/symbiote';
-//# sourceMappingURL=ImgConfig.d.ts.map

package/blocks/Img/ImgConfig.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImgConfig.d.ts","sourceRoot":"","sources":["ImgConfig.js"],"names":[],"mappings":"AAUA;IAkFE,0CAEC;;IAnFD,cAAqB;IAErB;;;OAGG;IACH,iBAFa,GAAG,CAIf;IAED,qDAAqD;IACrD,wBAIC;IAED;;;OAGG;IACH,yBAFW,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,QAW5B;IAED,0BAEC;IAED,8BAMC;IAED;;;OAGG;IACH,qBAHW,WAAW,SACX,MAAM,IAAI,QAsBpB;IAfC,eAAe;IACf,qBAOQ;IAGN,eAAe;IACf,kBAA0B;IAoB9B,oEAIC;CACF;8BArGmC,sBAAsB"}

package/blocks/Img/ImgConfig.js

@@ -1,102 +0,0 @@
-import { BaseComponent, Data } from '@symbiotejs/symbiote';
-import { PROPS_MAP } from './props-map.js';
-import { CSS_PREF } from './configurations.js';
-import { PACKAGE_NAME, PACKAGE_VERSION } from '../../env.js';
-
-const CSS_PROPS = Object.create(null);
-for (let prop in PROPS_MAP) {
-  CSS_PROPS[CSS_PREF + prop] = PROPS_MAP[prop]?.default || '';
-}
-
-export class ImgConfig extends BaseComponent {
-  cssInit$ = CSS_PROPS;
-
-  /**
-   * @param {String} key
-   * @returns {any}
-   */
-  $$(key) {
-    return this.$[CSS_PREF + key];
-  }
-
-  /** @param {Object<String, String | Number>} kvObj */
-  set$$(kvObj) {
-    for (let key in kvObj) {
-      this.$[CSS_PREF + key] = kvObj[key];
-    }
-  }
-
-  /**
-   * @param {String} key
-   * @param {(val: any) => void} kbFn
-   */
-  sub$$(key, kbFn) {
-    this.sub(CSS_PREF + key, (val) => {
-      // null comes from CSS context property
-      // empty string comes from attribute value
-      if (val === null || val === '') {
-        return;
-      }
-      kbFn(val);
-    });
-  }
-
-  analyticsParams() {
-    return `-/@clib/${PACKAGE_NAME}/${PACKAGE_VERSION}/uc-img/`;
-  }
-
-  initAttributes(el) {
-    [...this.attributes].forEach((attr) => {
-      if (!PROPS_MAP[attr.name]) {
-        el.setAttribute(attr.name, attr.value);
-      }
-    });
-  }
-
-  /**
-   * @param {HTMLElement} el
-   * @param {() => void} cbkFn
-   */
-  initIntersection(el, cbkFn) {
-    let opts = {
-      root: null,
-      rootMargin: '0px',
-    };
-    /** @private */
-    this._isnObserver = new IntersectionObserver((entries) => {
-      entries.forEach((ent) => {
-        if (ent.isIntersecting) {
-          cbkFn();
-          this._isnObserver.unobserve(el);
-        }
-      });
-    }, opts);
-    this._isnObserver.observe(el);
-    if (!this._observed) {
-      /** @private */
-      this._observed = new Set();
-    }
-    this._observed.add(el);
-  }
-
-  destroyCallback() {
-    super.destroyCallback();
-    if (this._isnObserver) {
-      this._observed.forEach((el) => {
-        this._isnObserver.unobserve(el);
-      });
-      this._isnObserver = null;
-    }
-    Data.deleteCtx(this);
-  }
-
-  static get observedAttributes() {
-    return Object.keys(PROPS_MAP);
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    window.setTimeout(() => {
-      this.$[CSS_PREF + name] = newVal;
-    });
-  }
-}

package/blocks/Img/configurations.d.ts

@@ -1,12 +0,0 @@
-export const CSS_PREF: "--uc-img-";
-export const UNRESOLVED_ATTR: "unresolved";
-export const HI_RES_K: 2;
-export const ULTRA_RES_K: 3;
-export const DEV_MODE: boolean;
-export const MAX_WIDTH: 3000;
-export const MAX_WIDTH_JPG: 5000;
-export const ImgTypeEnum: Readonly<{
-    PREVIEW: "PREVIEW";
-    MAIN: "MAIN";
-}>;
-//# sourceMappingURL=configurations.d.ts.map

package/blocks/Img/configurations.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"configurations.d.ts","sourceRoot":"","sources":["configurations.js"],"names":[],"mappings":"AAAA,uBAAwB,WAAW,CAAC;AACpC,8BAA+B,YAAY,CAAC;AAC5C,uBAAwB,CAAC,CAAC;AAC1B,0BAA2B,CAAC,CAAC;AAC7B,+BACuH;AAEvH,wBAAyB,IAAI,CAAC;AAC9B,4BAA6B,IAAI,CAAC;AAElC;;;GAGG"}

package/blocks/Img/configurations.js

@@ -1,14 +0,0 @@
-export const CSS_PREF = '--uc-img-';
-export const UNRESOLVED_ATTR = 'unresolved';
-export const HI_RES_K = 2;
-export const ULTRA_RES_K = 3;
-export const DEV_MODE =
-  !window.location.host.trim() || window.location.host.includes(':') || window.location.hostname.includes('localhost');
-
-export const MAX_WIDTH = 3000;
-export const MAX_WIDTH_JPG = 5000;
-
-export const ImgTypeEnum = Object.freeze({
-  PREVIEW: 'PREVIEW',
-  MAIN: 'MAIN',
-});

package/blocks/Img/props-map.d.ts

@@ -1,29 +0,0 @@
-export const PROPS_MAP: Readonly<{
-    'dev-mode': {};
-    pubkey: {};
-    uuid: {};
-    src: {};
-    lazy: {
-        default: number;
-    };
-    intersection: {};
-    breakpoints: {};
-    'cdn-cname': {
-        default: string;
-    };
-    'proxy-cname': {};
-    'secure-delivery-proxy': {};
-    'hi-res-support': {
-        default: number;
-    };
-    'ultra-res-support': {};
-    format: {};
-    'cdn-operations': {};
-    progressive: {};
-    quality: {};
-    'is-background-for': {};
-    'is-preview-blur': {
-        default: number;
-    };
-}>;
-//# sourceMappingURL=props-map.d.ts.map

package/blocks/Img/props-map.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"props-map.d.ts","sourceRoot":"","sources":["props-map.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG"}

package/blocks/Img/props-map.js

@@ -1,34 +0,0 @@
-const DEFAULT_CDN_BASE = 'https://ucarecdn.com';
-
-export const PROPS_MAP = Object.freeze({
-  'dev-mode': {},
-  pubkey: {},
-  uuid: {},
-  src: {},
-  // alt: {},
-  // 'placeholder-src': {}, // available via CSS
-  lazy: {
-    default: 1,
-  },
-  intersection: {},
-  breakpoints: {
-    // '200, 300, 400'
-  },
-  'cdn-cname': {
-    default: DEFAULT_CDN_BASE,
-  },
-  'proxy-cname': {},
-  'secure-delivery-proxy': {},
-  'hi-res-support': {
-    default: 1,
-  },
-  'ultra-res-support': {}, // ?
-  format: {},
-  'cdn-operations': {},
-  progressive: {},
-  quality: {},
-  'is-background-for': {},
-  'is-preview-blur': {
-    default: 1,
-  },
-});

package/blocks/Img/test.css

@@ -1,16 +0,0 @@
-uc-img {
-  --uc-img-pubkey: '364c0864158c27472ffe';
-  --uc-img-test: 'TEST';
-
-  display: contents;
-}
-
-uc-img > img {
-  transition: 1s;
-}
-
-uc-img > img[unresolved] {
-  transform: scale(0.8);
-  opacity: 0;
-  transition: 1s;
-}

package/blocks/Img/utils/parseObjectToString.d.ts

@@ -1,2 +0,0 @@
-export function parseObjectToString(params: any): any[];
-//# sourceMappingURL=parseObjectToString.d.ts.map

package/blocks/Img/utils/parseObjectToString.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"parseObjectToString.d.ts","sourceRoot":"","sources":["parseObjectToString.js"],"names":[],"mappings":"AAAO,wDAYD"}

package/blocks/Img/utils/parseObjectToString.js

@@ -1,13 +0,0 @@
-export const parseObjectToString = (params) =>
-  Object.entries(params)
-    .filter(([key, value]) => value !== undefined && value !== '')
-    .map(([key, value]) => {
-      if (key === 'cdn-operations') {
-        return value;
-      }
-      if (key === 'analytics') {
-        return value;
-      }
-
-      return `${key}/${value}`;
-    });