@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["Icon.js"],"names":[],"mappings":"AAGA;IAII;;;;MAKC;CAmBJ;;;;sBA9BqB,yBAAyB"}

package/blocks/Icon/Icon.js

@@ -0,0 +1,44 @@
+// @ts-check
+import { Block } from '../../abstract/Block.js';
+
+export class Icon extends Block {
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      name: '',
+      href: '',
+      title: '',
+    };
+  }
+
+  initCallback() {
+    super.initCallback();
+    this.sub('name', (val) => {
+      if (!val) {
+        return;
+      }
+      let iconHref = `#uc-icon-${val}`;
+      this.subConfigValue('iconHrefResolver', (iconHrefResolver) => {
+        if (iconHrefResolver) {
+          const customIconHref = iconHrefResolver(val);
+          iconHref = customIconHref ?? iconHref;
+        }
+        this.$.href = iconHref;
+      });
+    });
+  }
+}
+
+Icon.template = /* HTML */ `
+  <svg ref="svg" xmlns="http://www.w3.org/2000/svg">
+    <title>{{title}}</title>
+    <use set="@href: href;"></use>
+  </svg>
+`;
+
+Icon.bindAttributes({
+  name: 'name',
+  title: 'title',
+});

package/blocks/Icon/icon.css

@@ -0,0 +1,12 @@
+uc-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--uc-button-size);
+  height: var(--uc-button-size);
+}
+
+uc-icon svg {
+  width: calc(var(--uc-button-size) / 2);
+  height: calc(var(--uc-button-size) / 2);
+}

package/blocks/Img/Img.d.ts

@@ -0,0 +1,4 @@
+export class Img extends ImgBase {
+}
+import { ImgBase } from './ImgBase.js';
+//# sourceMappingURL=Img.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Img.d.ts","sourceRoot":"","sources":["Img.js"],"names":[],"mappings":"AAEA;CAkBC;wBApBuB,cAAc"}

package/blocks/Img/Img.js

@@ -0,0 +1,21 @@
+import { ImgBase } from './ImgBase.js';
+
+export class Img extends ImgBase {
+  initCallback() {
+    super.initCallback();
+
+    this.sub$$('src', () => {
+      this.init();
+    });
+
+    this.sub$$('uuid', () => {
+      this.init();
+    });
+
+    this.sub$$('lazy', (val) => {
+      if (!this.$$('is-background-for') && !this.$$('is-preview-blur')) {
+        this.img.loading = val ? 'lazy' : 'eager';
+      }
+    });
+  }
+}

package/blocks/Img/ImgBase.d.ts

@@ -0,0 +1,80 @@
+export class ImgBase extends ImgConfig {
+    _img: HTMLImageElement;
+    _imgPreview: HTMLImageElement;
+    /**
+     * @private
+     * @param {String} src
+     */
+    private _fmtAbs;
+    /**
+     * Validate size
+     *
+     * @param {String} [size]
+     * @returns {String | Number}
+     */
+    _validateSize(size?: string | undefined): string | number;
+    /**
+     * Image operations
+     *
+     * @param {String} [size]
+     * @param {String} [blur]
+     */
+    _getCdnModifiers(size?: string | undefined, blur?: string | undefined): string;
+    /**
+     * @private
+     * @param {String} [size]
+     * @param {String} [blur]
+     * @returns {any}
+     */
+    private _getUrlBase;
+    /**
+     * @private
+     * @param {String} url
+     * @returns {String}
+     */
+    private _proxyUrl;
+    /**
+     * @param {HTMLElement} el
+     * @param {Number} [k]
+     * @param {Boolean} [wOnly]
+     */
+    _getElSize(el: HTMLElement, k?: number | undefined, wOnly?: boolean | undefined): string | null;
+    /** @param {HTMLImageElement} img */
+    _setupEventProxy(img: HTMLImageElement): void;
+    /** @type {HTMLImageElement} */
+    get img(): HTMLImageElement;
+    get currentImg(): {
+        type: "PREVIEW";
+        img: HTMLImageElement;
+    } | {
+        type: "MAIN";
+        img: HTMLImageElement;
+    };
+    get hasPreviewImage(): any;
+    get bgSelector(): any;
+    get breakpoints(): number[] | null;
+    get hasFormatJPG(): boolean;
+    /** @param {HTMLElement} el */
+    renderBg(el: HTMLElement): void;
+    getSrcset(): string;
+    getSrc(): any;
+    get srcUrlPreview(): any;
+    renderBackground(): void;
+    _appendURL({ elNode, src, srcset }: {
+        elNode: any;
+        src: any;
+        srcset: any;
+    }): void;
+    _setupConfigForImage({ elNode }: {
+        elNode: any;
+    }): void;
+    loaderImage({ src, srcset, elNode }: {
+        src: any;
+        srcset: any;
+        elNode: any;
+    }): Promise<any>;
+    renderImage(): Promise<void>;
+    init(): void;
+}
+import { ImgConfig } from './ImgConfig.js';
+//# sourceMappingURL=ImgBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImgBase.d.ts","sourceRoot":"","sources":["ImgBase.js"],"names":[],"mappings":"AAgBA;IACE,uBAAmB;IACnB,8BAA0B;IAE1B;;;OAGG;IACH,gBAMC;IAED;;;;;OAKG;IACH,0CAFa,eAAe,CAoB3B;IAED;;;;;OAKG;IACH,+EAWC;IAED;;;;;OAKG;IACH,oBA6DC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;;OAIG;IACH,eAJW,WAAW,sEAcrB;IAED,oCAAoC;IACpC,sBADY,gBAAgB,QAY3B;IAED,+BAA+B;IAC/B,4BAMC;IAED;;;;;;MAUC;IAED,2BAEC;IAED,sBAEC;IAED,mCAOC;IAED,4BAEC;IAED,8BAA8B;IAC9B,aADY,WAAW,QAgBtB;IAED,oBAsBC;IAED,cAEC;IAED,yBAEC;IAED,yBAUC;IAED;;;;aAQC;IAED;;aAGC;IAED;;;;qBAqBC;IAED,6BA8DC;IAED,aAMC;CACF;0BAlZyB,gBAAgB"}

package/blocks/Img/ImgBase.js

@@ -0,0 +1,408 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"ImgConfig.d.ts","sourceRoot":"","sources":["ImgConfig.js"],"names":[],"mappings":"AAUA;IAkFE,0CAEC;IAlDgD,cACjD;IAlCA,cAAqB;IAErB;;;OAGG;IACH,iBAFa,GAAG,CAIf;IAED,qDAAqD;IACrD,wBAIC;IAED;;;OAGG;IACH,+BAFiB,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"}