@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/CloudImageEditorActivity/CloudImageEditorActivity.js

@@ -0,0 +1,113 @@
+// @ts-check
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { CloudImageEditorBlock } from '../CloudImageEditor/index.js';
+
+export class CloudImageEditorActivity extends UploaderBlock {
+  couldBeCtxOwner = true;
+  activityType = ActivityBlock.activities.CLOUD_IMG_EDIT;
+
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      cdnUrl: null,
+    };
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this.registerActivity(this.activityType, {
+      onActivate: () => this.mountEditor(),
+      onDeactivate: () => this.unmountEditor(),
+    });
+
+    this.sub('*focusedEntry', (/** @type {import('../../abstract/TypedData.js').TypedData} */ entry) => {
+      if (!entry) {
+        return;
+      }
+      this.entry = entry;
+
+      this.entry.subscribe('cdnUrl', (cdnUrl) => {
+        if (cdnUrl) {
+          this.$.cdnUrl = cdnUrl;
+        }
+      });
+    });
+
+    this.subConfigValue('cropPreset', (cropPreset) => {
+      if (this._instance && this._instance.getAttribute('crop-preset') !== cropPreset) {
+        this._instance.setAttribute('crop-preset', cropPreset);
+      }
+    });
+
+    this.subConfigValue('cloudImageEditorTabs', (tabs) => {
+      if (this._instance && this._instance.getAttribute('tabs') !== tabs) {
+        this._instance.setAttribute('tabs', tabs);
+      }
+    });
+  }
+
+  /** @param {CustomEvent<import('../CloudImageEditor/src/types.js').ApplyResult>} e */
+  handleApply(e) {
+    if (!this.entry) {
+      return;
+    }
+    let result = e.detail;
+    this.entry.setMultipleValues({
+      cdnUrl: result.cdnUrl,
+      cdnUrlModifiers: result.cdnUrlModifiers,
+    });
+    this.historyBack();
+  }
+
+  handleCancel() {
+    this.historyBack();
+  }
+
+  mountEditor() {
+    const instance = new CloudImageEditorBlock();
+    const cdnUrl = this.$.cdnUrl;
+    const cropPreset = this.cfg.cropPreset;
+    const tabs = this.cfg.cloudImageEditorTabs;
+
+    instance.setAttribute('ctx-name', this.ctxName);
+    instance.setAttribute('cdn-url', cdnUrl);
+
+    if (cropPreset) {
+      instance.setAttribute('crop-preset', cropPreset);
+    }
+    if (tabs) {
+      instance.setAttribute('tabs', tabs);
+    }
+
+    instance.addEventListener('apply', (e) => {
+      const customEvent = /** @type {CustomEvent<import('../CloudImageEditor/src/types.js').ApplyResult>} */ (e);
+      this.handleApply(customEvent);
+      this.debugPrint(`editor event "apply"`, customEvent.detail);
+    });
+    instance.addEventListener('cancel', (e) => {
+      const customEvent = /** @type {CustomEvent<void>} */ (e);
+      this.handleCancel();
+      this.debugPrint(`editor event "cancel"`, customEvent.detail);
+    });
+    instance.addEventListener('change', (e) => {
+      const customEvent = /** @type {CustomEvent<import('../CloudImageEditor/src/types.js').ChangeResult>} */ (e);
+      this.debugPrint(`editor event "change"`, customEvent.detail);
+    });
+
+    this.innerHTML = '';
+    this.appendChild(instance);
+    this._mounted = true;
+
+    /** @private */
+    this._instance = instance;
+  }
+
+  unmountEditor() {
+    this._instance = undefined;
+    this.innerHTML = '';
+  }
+}

package/blocks/CloudImageEditorActivity/index.css

@@ -0,0 +1,13 @@
+uc-cloud-image-editor-activity {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--uc-background);
+}
+
+[uc-modal] uc-cloud-image-editor-activity {
+  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
+  height: var(--modal-content-height-fill, 100%);
+}

package/blocks/CloudImageEditorActivity/test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test.d.ts.map

package/blocks/CloudImageEditorActivity/test.d.ts.map

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

package/blocks/CloudImageEditorActivity/test.js

@@ -0,0 +1,9 @@
+import { ifRef } from '../../utils/ifRef.js';
+import * as blocks from '../../index.js';
+
+ifRef(() => {
+  blocks.registerBlocks(blocks);
+  document.querySelector(blocks.CloudImageEditorBlock.is)?.addEventListener('apply', (e) => {
+    console.log(e);
+  });
+});

package/blocks/Config/Config.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Config keys that can't be passed as attribute (because they are object or function)
+ *
+ * @type {[
+ *   'metadata',
+ *   'localeDefinitionOverride',
+ *   'secureUploadsSignatureResolver',
+ *   'secureDeliveryProxyUrlResolver',
+ *   'iconHrefResolver',
+ *   'fileValidators',
+ *   'collectionValidators',
+ * ]}
+ */
+export const complexConfigKeys: [
+    'metadata',
+    'localeDefinitionOverride',
+    'secureUploadsSignatureResolver',
+    'secureDeliveryProxyUrlResolver',
+    'iconHrefResolver',
+    'fileValidators',
+    'collectionValidators'
+];
+export type Config = import('../../utils/mixinClass.js').MixinClass<typeof ConfigClass, import('../../types').ConfigType>;
+/** @typedef {import('../../utils/mixinClass.js').MixinClass<typeof ConfigClass, import('../../types').ConfigType>} Config */
+export const Config: Config;
+declare class ConfigClass extends Block {
+    /**
+     * @private
+     * @param {keyof import('../../types').ConfigType} key
+     * @param {unknown} value
+     */
+    private _flushValueToAttribute;
+    /**
+     * @private
+     * @param {keyof import('../../types').ConfigType} key
+     * @param {unknown} value
+     */
+    private _flushValueToState;
+    /**
+     * @private
+     * @param {keyof import('../../types').ConfigType} key
+     * @param {unknown} value
+     */
+    private _setValue;
+    /**
+     * @private
+     * @param {keyof import('../../types').ConfigType} key
+     */
+    private _getValue;
+    /**
+     * @param {string} key
+     * @param {unknown} previousValue
+     * @param {unknown} nextValue
+     */
+    _assertSameValueDifferentReference(key: string, previousValue: unknown, nextValue: unknown): void;
+    /**
+     * @param {keyof typeof attrStateMapping} name
+     * @param {string} oldVal
+     * @param {string} newVal
+     */
+    attributeChangedCallback(name: keyof typeof attrStateMapping, oldVal: string, newVal: string): void;
+}
+import { Block } from '../../abstract/Block.js';
+/** Mapping of attribute names to state */
+declare const attrStateMapping: Record<"multiple" | "pubkey" | "accept" | "store" | "debug" | "secure-expire" | "crop-preset" | "multiple-min" | "multiple-max" | "confirm-upload" | "img-only" | "external-sources-preferred-types" | "camera-mirror" | "camera-capture" | "source-list" | "max-local-file-size-bytes" | "thumb-size" | "show-empty-list" | "use-local-image-editor" | "use-cloud-image-editor" | "cloud-image-editor-tabs" | "remove-copyright" | "image-shrink" | "modal-scroll-lock" | "modal-backdrop-strokes" | "source-list-wrap" | "remote-tab-session-key" | "cdn-cname" | "base-url" | "social-base-url" | "secure-signature" | "secure-delivery-proxy" | "retry-throttled-request-max-times" | "multipart-min-file-size" | "multipart-chunk-size" | "max-concurrent-requests" | "multipart-max-concurrent-requests" | "multipart-max-attempts" | "check-for-url-duplicates" | "save-url-for-recurrent-uploads" | "group-output" | "user-agent-integration" | "locale-name" | "secure-uploads-expire-threshold" | "secureexpire" | "croppreset" | "multiplemin" | "multiplemax" | "confirmupload" | "imgonly" | "externalsourcespreferredtypes" | "cameramirror" | "cameracapture" | "sourcelist" | "maxlocalfilesizebytes" | "thumbsize" | "showemptylist" | "uselocalimageeditor" | "usecloudimageeditor" | "cloudimageeditortabs" | "removecopyright" | "imageshrink" | "modalscrolllock" | "modalbackdropstrokes" | "sourcelistwrap" | "remotetabsessionkey" | "cdncname" | "baseurl" | "socialbaseurl" | "securesignature" | "securedeliveryproxy" | "retrythrottledrequestmaxtimes" | "multipartminfilesize" | "multipartchunksize" | "maxconcurrentrequests" | "multipartmaxconcurrentrequests" | "multipartmaxattempts" | "checkforurlduplicates" | "saveurlforrecurrentuploads" | "groupoutput" | "useragentintegration" | "localename" | "secureuploadsexpirethreshold", string>;
+export {};
+//# sourceMappingURL=Config.d.ts.map

package/blocks/Config/Config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.js"],"names":[],"mappings":"AAYA;;;;;;;;;;;;GAYG;AACH,gCAVU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;CACvB,CAUF;qBAiNY,OAAO,2BAA2B,EAAE,UAAU,CAAC,kBAAkB,EAAE,OAAO,aAAa,EAAE,UAAU,CAAC;AAAlH,6HAA6H;AAG7H,4BAAmF;AAvLnF;IAkBE;;;;OAIG;IACH,+BAYC;IAED;;;;OAIG;IACH,2BAQC;IAED;;;;OAIG;IACH,kBAiBC;IAED;;;OAGG;IACH,kBAIC;IAED;;;;OAIG;IACH,wCAJW,MAAM,iBACN,OAAO,aACP,OAAO,QAoBjB;IA0CD;;;;OAIG;IACH,+BAJW,MAAM,uBAAuB,UAC7B,MAAM,UACN,MAAM,QAahB;CACF;sBArOqB,yBAAyB;AAoD/C,0CAA0C;AAC1C,qzDAGG"}

package/blocks/Config/Config.js

@@ -0,0 +1,246 @@
+// @ts-check
+import { Block } from '../../abstract/Block.js';
+import { initialConfig } from './initialConfig.js';
+import { sharedConfigKey } from '../../abstract/sharedConfigKey.js';
+import { toKebabCase } from '../../utils/toKebabCase.js';
+import { normalizeConfigValue } from './normalizeConfigValue.js';
+
+const allConfigKeys = /** @type {(keyof import('../../types').ConfigType)[]} */ ([
+  // "debug" option should go first to be able to print debug messages from the very beginning
+  ...new Set(['debug', ...Object.keys(initialConfig)]),
+]);
+
+/**
+ * Config keys that can't be passed as attribute (because they are object or function)
+ *
+ * @type {[
+ *   'metadata',
+ *   'localeDefinitionOverride',
+ *   'secureUploadsSignatureResolver',
+ *   'secureDeliveryProxyUrlResolver',
+ *   'iconHrefResolver',
+ *   'fileValidators',
+ *   'collectionValidators',
+ * ]}
+ */
+export const complexConfigKeys = [
+  'metadata',
+  'localeDefinitionOverride',
+  'secureUploadsSignatureResolver',
+  'secureDeliveryProxyUrlResolver',
+  'iconHrefResolver',
+  'fileValidators',
+  'collectionValidators',
+];
+
+/** @type {(key: keyof import('../../types').ConfigType) => key is keyof import('../../types').ConfigComplexType} */
+const isComplexKey = (key) => complexConfigKeys.includes(key);
+
+/** Config keys that can be passed as attribute */
+const plainConfigKeys = /** @type {(keyof import('../../types').ConfigPlainType)[]} */ (
+  allConfigKeys.filter((key) => !isComplexKey(key))
+);
+
+/**
+ * Mapping of attribute names to config keys Kebab-case and lowercase are supported. lowercase could be used by
+ * frameworks like vue and react.
+ */
+const attrKeyMapping =
+  /** @type {Record<keyof import('../../types').ConfigAttributesType, keyof import('../../types').ConfigPlainType>} */ ({
+    ...Object.fromEntries(plainConfigKeys.map((key) => [toKebabCase(key), key])),
+    ...Object.fromEntries(plainConfigKeys.map((key) => [key.toLowerCase(), key])),
+  });
+
+/** Mapping of attribute names to state */
+const attrStateMapping = /** @type {Record<keyof import('../../types').ConfigAttributesType, string>} */ ({
+  ...Object.fromEntries(plainConfigKeys.map((key) => [toKebabCase(key), sharedConfigKey(key)])),
+  ...Object.fromEntries(plainConfigKeys.map((key) => [key.toLowerCase(), sharedConfigKey(key)])),
+});
+
+/** @param {string} key */
+const getLocalPropName = (key) => '__' + key;
+
+class ConfigClass extends Block {
+  requireCtxName = true;
+
+  constructor() {
+    super();
+
+    /** @type {Block['init$'] & import('../../types').ConfigType} */
+    this.init$ = {
+      ...this.init$,
+      ...Object.fromEntries(
+        Object.entries(initialConfig).map(([key, value]) => [
+          sharedConfigKey(/** @type {keyof import('../../types').ConfigType} */ (key)),
+          value,
+        ]),
+      ),
+    };
+  }
+
+  /**
+   * @private
+   * @param {keyof import('../../types').ConfigType} key
+   * @param {unknown} value
+   */
+  _flushValueToAttribute(key, value) {
+    if (plainConfigKeys.includes(key)) {
+      // Flush the value to the DOM attributes
+      const attrs = [...new Set([toKebabCase(key), key.toLowerCase()])];
+      for (const attr of attrs) {
+        if (typeof value === 'undefined' || value === null) {
+          this.removeAttribute(attr);
+        } else if (this.getAttribute(attr) !== value.toString()) {
+          this.setAttribute(attr, value.toString());
+        }
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {keyof import('../../types').ConfigType} key
+   * @param {unknown} value
+   */
+  _flushValueToState(key, value) {
+    if (this.$[sharedConfigKey(key)] !== value) {
+      if (typeof value === 'undefined' || value === null) {
+        this.$[sharedConfigKey(key)] = initialConfig[key];
+      } else {
+        this.$[sharedConfigKey(key)] = value;
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {keyof import('../../types').ConfigType} key
+   * @param {unknown} value
+   */
+  _setValue(key, value) {
+    const anyThis = /** @type {typeof this & any} */ (this);
+
+    const normalizedValue = normalizeConfigValue(key, value);
+
+    const localPropName = getLocalPropName(key);
+    if (anyThis[localPropName] === normalizedValue) return;
+
+    this._assertSameValueDifferentReference(key, anyThis[localPropName], normalizedValue);
+
+    anyThis[localPropName] = normalizedValue;
+
+    // Flush the value to the state
+    this._flushValueToAttribute(key, normalizedValue);
+    this._flushValueToState(key, normalizedValue);
+
+    this.debugPrint(`[uc-config] "${key}"`, normalizedValue);
+  }
+
+  /**
+   * @private
+   * @param {keyof import('../../types').ConfigType} key
+   */
+  _getValue(key) {
+    const anyThis = /** @type {typeof this & any} */ (this);
+    const localPropName = getLocalPropName(key);
+    return anyThis[localPropName];
+  }
+
+  /**
+   * @param {string} key
+   * @param {unknown} previousValue
+   * @param {unknown} nextValue
+   */
+  _assertSameValueDifferentReference(key, previousValue, nextValue) {
+    if (this.cfg.debug) {
+      if (
+        nextValue !== previousValue &&
+        typeof nextValue === 'object' &&
+        typeof previousValue === 'object' &&
+        JSON.stringify(nextValue) === JSON.stringify(previousValue)
+      ) {
+        console.warn(
+          `[uc-config] Option "${key}" value is the same as the previous one but the reference is different`,
+        );
+        console.warn(
+          `[uc-config] You should avoid changing the reference of the object to prevent unnecessary calculations`,
+        );
+        console.warn(`[uc-config] "${key}" previous value:`, previousValue);
+        console.warn(`[uc-config] "${key}" new value:`, nextValue);
+      }
+    }
+  }
+
+  initCallback() {
+    super.initCallback();
+    const anyThis = /** @type {typeof this & any} */ (this);
+
+    // Subscribe to the state changes and update the local properties and attributes.
+    // Initial callback call is disabled to prevent the initial value to be set here.
+    // Initial value will be set below, skipping the default values.
+    for (const key of plainConfigKeys) {
+      this.sub(
+        sharedConfigKey(key),
+        (value) => {
+          this._setValue(key, value);
+        },
+        false,
+      );
+    }
+
+    for (const key of allConfigKeys) {
+      // Flush the initial value to the state.
+      // Initial value is taken from the DOM property if it was set before the element was initialized.
+      // If no DOM property was set, the initial value is taken from the initialConfig.
+      const initialValue = anyThis[key] ?? this.$[sharedConfigKey(key)];
+      if (initialValue !== initialConfig[key]) {
+        this._setValue(key, initialValue);
+      }
+
+      // Define DOM property setters and getters
+      // They will be used in the userland directly or by the frameworks
+      Object.defineProperty(this, key, {
+        /** @param {unknown} value */
+        set: (value) => {
+          this._setValue(key, value);
+        },
+        get: () => {
+          return this._getValue(key);
+        },
+      });
+    }
+  }
+
+  /**
+   * @param {keyof typeof attrStateMapping} name
+   * @param {string} oldVal
+   * @param {string} newVal
+   */
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+
+    const anyThis = /** @type {typeof this & any} */ (this);
+    const key = attrKeyMapping[name];
+    // attributeChangedCallback could be called before the initCallback
+    // so we set the DOM property instead of calling this._setValue.
+    // If the block was initialized, the value will be handled by the setter.
+    // If the block was not initialized, the value will be set to the DOM property
+    // and handled on initialization.
+    anyThis[key] = newVal;
+  }
+}
+
+ConfigClass.bindAttributes(attrStateMapping);
+
+/**
+ * Define empty DOM properties for all config keys on the Custom Element class prototype to make them checkable using
+ * `key in element` syntax. This is required for the frameworks DOM property bindings to work.
+ */
+for (const key of allConfigKeys) {
+  /** @type {any} */ (ConfigClass.prototype)[key] = undefined;
+}
+
+/** @typedef {import('../../utils/mixinClass.js').MixinClass<typeof ConfigClass, import('../../types').ConfigType>} Config */
+
+// This is workaround for jsdoc that allows us to export extended class type along with the class itself
+export const Config = /** @type {Config} */ (/** @type {unknown} */ (ConfigClass));

package/blocks/Config/config.css

@@ -0,0 +1,3 @@
+uc-config {
+  display: none;
+}

package/blocks/Config/initialConfig.d.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_CDN_CNAME: "https://ucarecdn.com";
+export const DEFAULT_BASE_URL: "https://upload.uploadcare.com";
+export const DEFAULT_SOCIAL_BASE_URL: "https://social.uploadcare.com";
+/** @type {import('../../types/exported').ConfigType} */
+export const initialConfig: import('../../types/exported').ConfigType;
+//# sourceMappingURL=initialConfig.d.ts.map

package/blocks/Config/initialConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,sEAAuE;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CA2DlD"}

package/blocks/Config/initialConfig.js

@@ -0,0 +1,69 @@
+// @ts-check
+
+import { ALL_TABS } from '../CloudImageEditor/src/toolbar-constants.js';
+import { serializeCsv } from '../utils/comma-separated.js';
+
+export const DEFAULT_CDN_CNAME = 'https://ucarecdn.com';
+export const DEFAULT_BASE_URL = 'https://upload.uploadcare.com';
+export const DEFAULT_SOCIAL_BASE_URL = 'https://social.uploadcare.com';
+
+/** @type {import('../../types/exported').ConfigType} */
+export const initialConfig = {
+  pubkey: '',
+  multiple: true,
+  multipleMin: 0,
+  multipleMax: Number.MAX_SAFE_INTEGER,
+
+  confirmUpload: false,
+  imgOnly: false,
+  accept: '',
+  externalSourcesPreferredTypes: '',
+  store: 'auto',
+  cameraMirror: false,
+  cameraCapture: '',
+  sourceList: 'local, url, camera, dropbox, gdrive',
+  cloudImageEditorTabs: serializeCsv(ALL_TABS),
+  maxLocalFileSizeBytes: 0,
+  thumbSize: 76,
+  showEmptyList: false,
+  useLocalImageEditor: false,
+  useCloudImageEditor: true,
+  removeCopyright: false,
+  cropPreset: '',
+  imageShrink: '',
+
+  modalScrollLock: true,
+  modalBackdropStrokes: false,
+
+  sourceListWrap: true,
+
+  remoteTabSessionKey: '',
+  cdnCname: DEFAULT_CDN_CNAME,
+  baseUrl: DEFAULT_BASE_URL,
+  socialBaseUrl: DEFAULT_SOCIAL_BASE_URL,
+  secureSignature: '',
+  secureExpire: '',
+  secureDeliveryProxy: '',
+  retryThrottledRequestMaxTimes: 1,
+  multipartMinFileSize: 26214400,
+  multipartChunkSize: 5242880,
+  maxConcurrentRequests: 10,
+  multipartMaxConcurrentRequests: 4,
+  multipartMaxAttempts: 3,
+  checkForUrlDuplicates: false,
+  saveUrlForRecurrentUploads: false,
+
+  groupOutput: false,
+  userAgentIntegration: '',
+  debug: false,
+
+  metadata: null,
+  localeName: 'en',
+  localeDefinitionOverride: null,
+  secureUploadsExpireThreshold: 10 * 60 * 1000,
+  secureUploadsSignatureResolver: null,
+  secureDeliveryProxyUrlResolver: null,
+  iconHrefResolver: null,
+  fileValidators: [],
+  collectionValidators: [],
+};

package/blocks/Config/normalizeConfigValue.d.ts

@@ -0,0 +1,3 @@
+export function asBoolean(value: unknown): boolean;
+export function normalizeConfigValue<T extends keyof import("../../types").ConfigType>(key: T, value: unknown): import("../../types").ConfigType[T] | undefined;
+//# sourceMappingURL=normalizeConfigValue.d.ts.map

package/blocks/Config/normalizeConfigValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAeO,iCADK,OAAO,WAWlB;AA4IM,sGAHI,OAAO,mDAcjB"}