@uploadcare/file-uploader 1.11.0-alpha.0 → 1.11.0-alpha.2

package/blocks/ExternalSource/ExternalSource.js

@@ -5,12 +5,31 @@ import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { stringToArray } from '../../utils/stringToArray.js';
 import { wildcardRegexp } from '../../utils/wildcardRegexp.js';
-import { buildThemeDefinition } from './buildThemeDefinition.js';
-import { MessageBridge } from './MessageBridge.js';
+import { buildStyles } from './buildStyles.js';
+import { registerMessage, unregisterMessage } from './messages.js';
 import { queryString } from './query-string.js';
 
 /** @typedef {{ externalSourceType: string }} ActivityParams */
 
+/**
+ * @typedef {{
+ *   type: 'file-selected';
+ *   obj_type: 'selected_file';
+ *   filename: string;
+ *   url: string;
+ *   alternatives?: Record<string, string>;
+ * }} SelectedFileMessage
+ */
+
+/**
+ * @typedef {{
+ *   type: 'embed-css';
+ *   style: string;
+ * }} EmbedCssMessage
+ */
+
+/** @typedef {SelectedFileMessage | EmbedCssMessage} Message */
+
 export class ExternalSource extends UploaderBlock {
   couldBeCtxOwner = true;
   activityType = ActivityBlock.activities.EXTERNAL;
@@ -22,20 +41,12 @@ export class ExternalSource extends UploaderBlock {
       ...this.init$,
       activityIcon: '',
       activityCaption: '',
-
-      /** @type {import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']} */
       selectedList: [],
-      total: 0,
-
-      isSelectionReady: false,
-      couldSelectAll: false,
-      couldDeselectAll: false,
-      showSelectionStatus: false,
-      counterText: '',
-
+      counter: 0,
+      multiple: false,
       onDone: () => {
         for (const message of this.$.selectedList) {
-          const url = this.extractUrlFromSelectedFile(message);
+          const url = this.extractUrlFromMessage(message);
           const { filename } = message;
           const { externalSourceType } = this.activityParams;
           this.api.addFileFromUrl(url, { fileName: filename, source: externalSourceType });
@@ -46,14 +57,6 @@ export class ExternalSource extends UploaderBlock {
       onCancel: () => {
         this.historyBack();
       },
-
-      onSelectAll: () => {
-        this._messageBridge?.send({ type: 'select-all' });
-      },
-
-      onDeselectAll: () => {
-        this._messageBridge?.send({ type: 'deselect-all' });
-      },
     };
   }
 
@@ -66,6 +69,12 @@ export class ExternalSource extends UploaderBlock {
     throw new Error(`External Source activity params not found`);
   }
 
+  /**
+   * @private
+   * @type {HTMLIFrameElement | null}
+   */
+  _iframe = null;
+
   initCallback() {
     super.initCallback();
     this.registerActivity(this.activityType, {
@@ -99,25 +108,24 @@ export class ExternalSource extends UploaderBlock {
         this.unmountIframe();
       }
     });
-    this.subConfigValue('multiple', (multiple) => {
-      this.$.showSelectionStatus = multiple;
+    this.sub('selectedList', (list) => {
+      this.$.counter = list.length;
     });
-
-    this.subConfigValue('localeName', (val) => {
-      this.setupL10n();
+    this.subConfigValue('multiple', (multiple) => {
+      this.$.multiple = multiple;
     });
   }
 
   /**
    * @private
-   * @param {NonNullable<import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']>[number]} selectedFile
+   * @param {SelectedFileMessage} message
    */
-  extractUrlFromSelectedFile(selectedFile) {
-    if (selectedFile.alternatives) {
+  extractUrlFromMessage(message) {
+    if (message.alternatives) {
       const preferredTypes = stringToArray(this.cfg.externalSourcesPreferredTypes);
       for (const preferredType of preferredTypes) {
         const regexp = wildcardRegexp(preferredType);
-        for (const [type, typeUrl] of Object.entries(selectedFile.alternatives)) {
+        for (const [type, typeUrl] of Object.entries(message.alternatives)) {
           if (regexp.test(type)) {
             return typeUrl;
           }
@@ -125,71 +133,81 @@ export class ExternalSource extends UploaderBlock {
       }
     }
 
-    return selectedFile.url;
+    return message.url;
   }
 
   /**
    * @private
-   * @param {import('./types.js').InputMessageMap['selected-files-change']} message
+   * @param {Message} message
    */
-  async handleSelectedFilesChange(message) {
-    if (this.cfg.multiple !== message.isMultipleMode) {
-      console.error('Multiple mode mismatch');
+  sendMessage(message) {
+    this._iframe?.contentWindow?.postMessage(JSON.stringify(message), '*');
+  }
+
+  /**
+   * @private
+   * @param {SelectedFileMessage} message
+   */
+  async handleFileSelected(message) {
+    if (!this.$.multiple && this.$.selectedList.length) {
       return;
     }
 
-    this.bindL10n('counterText', () =>
-      this.l10n('selected-count', {
-        count: message.selectedCount,
-        total: message.total,
-      }),
-    );
-
-    this.set$({
-      isSelectionReady: message.isReady,
-      showSelectionStatus: message.isMultipleMode && message.total > 0,
-      couldSelectAll: message.selectedCount < message.total,
-      couldDeselectAll: message.selectedCount === message.total,
-      selectedList: message.selectedFiles,
-    });
+    this.$.selectedList = [...this.$.selectedList, message];
+
+    if (!this.$.multiple) {
+      this.$.onDone();
+    }
   }
 
   /** @private */
   handleIframeLoad() {
     this.applyStyles();
-    this.setupL10n();
   }
 
-  /** @private */
-  applyStyles() {
-    this._messageBridge?.send({
-      type: 'set-theme-definition',
-      theme: buildThemeDefinition(this),
-    });
+  /**
+   * @private
+   * @param {string} propName
+   */
+  getCssValue(propName) {
+    let style = window.getComputedStyle(this);
+    return style.getPropertyValue(propName).trim();
   }
 
   /** @private */
-  setupL10n() {
-    this._messageBridge?.send({
-      type: 'set-locale-definition',
-      localeDefinition: this.cfg.localeName,
+  applyStyles() {
+    let colors = {
+      radius: this.getCssValue('--uc-radius'),
+      backgroundColor: this.getCssValue('--uc-background'),
+      textColor: this.getCssValue('--uc-foreground'),
+      secondaryColor: this.getCssValue('--uc-secondary'),
+      secondaryForegroundColor: this.getCssValue('--uc-secondary-foreground'),
+      secondaryHover: this.getCssValue('--uc-secondary-hover'),
+      linkColor: this.getCssValue('--uc-primary'),
+      linkColorHover: this.getCssValue('--uc-primary-hover'),
+      fontFamily: this.getCssValue('--uc-font-family'),
+      fontSize: this.getCssValue('--uc-font-size'),
+    };
+
+    this.sendMessage({
+      type: 'embed-css',
+      style: buildStyles(colors),
     });
   }
 
   /** @private */
   remoteUrl() {
-    const { pubkey, remoteTabSessionKey, socialBaseUrl, multiple } = this.cfg;
+    const { pubkey, remoteTabSessionKey, socialBaseUrl } = this.cfg;
     const { externalSourceType } = this.activityParams;
     const lang = this.l10n('social-source-lang')?.split('-')?.[0] || 'en';
     const params = {
       lang,
       public_key: pubkey,
       images_only: false.toString(),
+      pass_window_open: false,
       session_key: remoteTabSessionKey,
-      wait_for_theme: true,
-      multiple: multiple.toString(),
     };
-    const url = new URL(`/window4/${externalSourceType}`, socialBaseUrl);
+    const url = new URL(`/window3/${externalSourceType}`, socialBaseUrl);
     url.search = queryString(params);
     return url.toString();
   }
@@ -213,43 +231,31 @@ export class ExternalSource extends UploaderBlock {
     this.ref.iframeWrapper.innerHTML = '';
     this.ref.iframeWrapper.appendChild(iframe);
 
-    if (!iframe.contentWindow) {
-      return;
-    }
-
-    this._messageBridge?.destroy();
-
-    /** @private */
-    this._messageBridge = new MessageBridge(iframe.contentWindow);
-    this._messageBridge.on('selected-files-change', this.handleSelectedFilesChange.bind(this));
+    registerMessage('file-selected', iframe.contentWindow, this.handleFileSelected.bind(this));
 
-    this.resetSelectionStatus();
+    this._iframe = iframe;
+    this.$.selectedList = [];
   }
 
   /** @private */
   unmountIframe() {
-    this._messageBridge?.destroy();
-    this._messageBridge = undefined;
+    this._iframe && unregisterMessage('file-selected', this._iframe.contentWindow);
     this.ref.iframeWrapper.innerHTML = '';
-
-    this.resetSelectionStatus();
-  }
-
-  /** @private */
-  resetSelectionStatus() {
-    this.set$({
-      selectedList: [],
-      total: 0,
-      isSelectionReady: false,
-      couldSelectAll: false,
-      couldDeselectAll: false,
-      showSelectionStatus: false,
-    });
+    this._iframe = null;
+    this.$.selectedList = [];
+    this.$.counter = 0;
   }
 }
 
 ExternalSource.template = /* HTML */ `
   <uc-activity-header>
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack" l10n="@title:back">
+      <uc-icon name="back"></uc-icon>
+    </button>
+    <div>
+      <uc-icon set="@name: activityIcon"></uc-icon>
+      <span>{{activityCaption}}</span>
+    </div>
     <button
       type="button"
       class="uc-mini-btn uc-close-btn"
@@ -263,15 +269,12 @@ ExternalSource.template = /* HTML */ `
     <div ref="iframeWrapper" class="uc-iframe-wrapper"></div>
     <div class="uc-toolbar">
       <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel" l10n="cancel"></button>
-      <div set="@hidden: !showSelectionStatus" class="uc-selection-status-box">
-        <span>{{counterText}}</span>
-        <button type="button" set="onclick: onSelectAll; @hidden: !couldSelectAll" l10n="select-all"></button>
-        <button type="button" set="onclick: onDeselectAll; @hidden: !couldDeselectAll" l10n="deselect-all"></button>
-      </div>
+      <div></div>
+      <div set="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
       <button
         type="button"
         class="uc-done-btn uc-primary-btn"
-        set="onclick: onDone; @disabled: !isSelectionReady"
+        set="onclick: onDone; @disabled: !counter"
         l10n="done"
       ></button>
     </div>

package/blocks/ExternalSource/buildStyles.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @param {{
+ *   textColor: string;
+ *   backgroundColor: string;
+ *   linkColor: string;
+ *   linkColorHover: string;
+ *   secondaryColor: string;
+ *   secondaryHover: string;
+ *   secondaryForegroundColor: string;
+ *   fontFamily: string;
+ *   fontSize: string;
+ *   radius: string;
+ * }} options
+ */
+export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHover, secondaryColor, secondaryHover, secondaryForegroundColor, fontFamily, fontSize, radius, }: {
+    textColor: string;
+    backgroundColor: string;
+    linkColor: string;
+    linkColorHover: string;
+    secondaryColor: string;
+    secondaryHover: string;
+    secondaryForegroundColor: string;
+    fontFamily: string;
+    fontSize: string;
+    radius: string;
+}): string;
+//# sourceMappingURL=buildStyles.d.ts.map

package/blocks/ExternalSource/buildStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildStyles.d.ts","sourceRoot":"","sources":["buildStyles.js"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;GAaG;AACH,gLAbW;IACV,SAAa,EAAE,MAAM,CAAC;IACtB,eAAmB,EAAE,MAAM,CAAC;IAC5B,SAAa,EAAE,MAAM,CAAC;IACtB,cAAkB,EAAE,MAAM,CAAC;IAC3B,cAAkB,EAAE,MAAM,CAAC;IAC3B,cAAkB,EAAE,MAAM,CAAC;IAC3B,wBAA4B,EAAE,MAAM,CAAC;IACrC,UAAc,EAAE,MAAM,CAAC;IACvB,QAAY,EAAE,MAAM,CAAC;IACrB,MAAU,EAAE,MAAM,CAAC;CAChB,UAsGH"}

package/blocks/ExternalSource/buildStyles.js

@@ -0,0 +1,133 @@
+// @ts-check
+
+/**
+ * @param {Record<string, Record<string, string>>} style
+ * @returns
+ */
+const styleToCss = (style) => {
+  const css = Object.keys(style).reduce((acc, selector) => {
+    const propertiesObj = style[selector];
+    const propertiesStr = Object.keys(propertiesObj).reduce((acc, prop) => {
+      const value = propertiesObj[prop];
+      return acc + `${prop}: ${value};`;
+    }, '');
+    return acc + `${selector}{${propertiesStr}}`;
+  }, '');
+  return css;
+};
+
+/**
+ * @param {{
+ *   textColor: string;
+ *   backgroundColor: string;
+ *   linkColor: string;
+ *   linkColorHover: string;
+ *   secondaryColor: string;
+ *   secondaryHover: string;
+ *   secondaryForegroundColor: string;
+ *   fontFamily: string;
+ *   fontSize: string;
+ *   radius: string;
+ * }} options
+ */
+export function buildStyles({
+  textColor,
+  backgroundColor,
+  linkColor,
+  linkColorHover,
+  secondaryColor,
+  secondaryHover,
+  secondaryForegroundColor,
+  fontFamily,
+  fontSize,
+  radius,
+}) {
+  const border = `solid 1px ${secondaryColor}`;
+
+  // TODO: we need to update source source styles, add css custom properties to control theme
+  return styleToCss({
+    body: {
+      color: textColor,
+      'background-color': backgroundColor,
+      'font-family': fontFamily,
+      'font-size': fontSize,
+    },
+    '.side-bar': {
+      background: 'inherit',
+      'border-right': border,
+    },
+    '.main-content': {
+      background: 'inherit',
+    },
+    '.main-content-header': {
+      background: 'inherit',
+    },
+    '.main-content-footer': {
+      background: 'inherit',
+    },
+    '.list-table-row': {
+      color: 'inherit',
+    },
+    '.list-table-row:hover': {
+      background: secondaryColor,
+    },
+    '.list-table-row .list-table-cell-a, .list-table-row .list-table-cell-b': {
+      'border-top': border,
+    },
+    '.list-table-body .list-items': {
+      'border-bottom': border,
+    },
+    '.bread-crumbs a': {
+      color: linkColor,
+    },
+    '.bread-crumbs a:hover': {
+      color: linkColorHover,
+    },
+    '.main-content.loading': {
+      background: `${backgroundColor} url(/static/images/loading_spinner.gif) center no-repeat`,
+      'background-size': '25px 25px',
+    },
+    '.list-icons-item': {
+      'background-color': secondaryColor,
+    },
+    '.source-gdrive .side-bar-menu a, .source-gphotos .side-bar-menu a': {
+      color: linkColor,
+    },
+    '.source-gdrive .side-bar-menu a, .source-gphotos .side-bar-menu a:hover': {
+      color: linkColorHover,
+    },
+    '.side-bar-menu a': {
+      color: linkColor,
+    },
+    '.side-bar-menu a:hover': {
+      color: linkColorHover,
+    },
+    '.source-gdrive .side-bar-menu .current, .source-gdrive .side-bar-menu a:hover, .source-gphotos .side-bar-menu .current, .source-gphotos .side-bar-menu a:hover':
+      {
+        color: linkColorHover,
+      },
+    '.source-vk .side-bar-menu a': {
+      color: linkColor,
+    },
+    '.source-vk .side-bar-menu a:hover': {
+      color: linkColorHover,
+      background: 'none',
+    },
+    'input[type=submit], .button, button': {
+      color: secondaryForegroundColor,
+      background: secondaryColor,
+      'box-shadow': 'none',
+      border: 'none',
+      'border-radius': radius,
+    },
+    'input[type=submit]:hover, .button:hover, button:hover': {
+      background: secondaryHover,
+    },
+    '.text-field, input[type=search], input[type=text], input[type=url], textarea': {
+      color: secondaryForegroundColor,
+      'border-radius': radius,
+      background: secondaryColor,
+      border,
+    },
+  });
+}

package/blocks/ExternalSource/external-source.css

@@ -5,12 +5,15 @@ uc-external-source {
   height: 100%;
   background-color: var(--uc-background);
   overflow: hidden;
-  position: relative;
 }
 
-[uc-modal] > dialog:has(uc-external-source[active]) {
-  width: 100%;
-  height: 100%;
+[uc-modal] uc-external-source {
+  width: min(
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2)
+  );
+  height: var(--modal-content-height-fill, 100%);
+  max-height: var(--modal-max-content-height);
 }
 
 uc-external-source > .uc-content {
@@ -20,6 +23,13 @@ uc-external-source > .uc-content {
   grid-template-rows: 1fr min-content;
 }
 
+@media only screen and (max-width: 430px) {
+  uc-external-source {
+    width: calc(100vw - var(--uc-padding) * 2);
+    height: var(--modal-content-height-fill, 100%);
+  }
+}
+
 uc-external-source iframe {
   display: block;
   width: 100%;
@@ -32,11 +42,11 @@ uc-external-source .uc-iframe-wrapper {
 }
 
 uc-external-source .uc-toolbar {
-  display: flex;
-  width: 100%;
+  display: grid;
   grid-gap: var(--uc-padding);
+  grid-template-columns: max-content 1fr max-content max-content;
   align-items: center;
-  justify-content: space-between;
+  width: 100%;
   padding: var(--uc-padding);
   border-top: 1px solid var(--uc-border);
 }
@@ -45,36 +55,11 @@ uc-external-source .uc-back-btn {
   padding-left: 0;
 }
 
-uc-external-source .uc-selection-status-box {
-  color: var(--uc-foreground);
+uc-external-source .uc-selected-counter {
   display: flex;
-  flex-direction: column;
+  grid-gap: var(--uc-padding);
   align-items: center;
-  justify-content: center;
-}
-
-uc-external-source .uc-selection-status-box button {
-  color: var(--uc-primary);
-  height: auto;
-  padding: 0;
-  background: none;
-}
-
-uc-external-source .uc-selection-status-box button:hover {
-  text-decoration: underline;
-}
-
-uc-external-source uc-activity-header {
-  position: absolute;
-  width: 100%;
-  justify-content: flex-end;
-  z-index: 1;
-  left: 0;
-  top: 0;
-  right: 0;
-  pointer-events: none;
-}
-
-uc-external-source uc-activity-header .uc-close-btn {
-  pointer-events: auto;
+  justify-content: space-between;
+  padding: var(--uc-padding);
+  color: var(--uc-muted-foreground);
 }

package/blocks/ExternalSource/messages.d.ts

@@ -0,0 +1,3 @@
+export function registerMessage(type: any, sender: any, callback: any): void;
+export function unregisterMessage(type: any, sender: any): void;
+//# sourceMappingURL=messages.d.ts.map

package/blocks/ExternalSource/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["messages.js"],"names":[],"mappings":"AAoBA,6EAMC;AAED,gEAIC"}

package/blocks/ExternalSource/messages.js

@@ -0,0 +1,35 @@
+let cbMapping = {};
+
+window.addEventListener('message', (e) => {
+  let message;
+  try {
+    message = JSON.parse(e.data);
+  } catch (err) {
+    return;
+  }
+
+  if (message?.type in cbMapping) {
+    let cbList = cbMapping[message.type];
+    for (let [sender, callback] of cbList) {
+      if (e.source === sender) {
+        callback(message);
+      }
+    }
+  }
+});
+
+const registerMessage = function (type, sender, callback) {
+  if (!(type in cbMapping)) {
+    cbMapping[type] = [];
+  }
+
+  cbMapping[type].push([sender, callback]);
+};
+
+const unregisterMessage = function (type, sender) {
+  if (type in cbMapping) {
+    cbMapping[type] = cbMapping[type].filter((item) => item[0] !== sender);
+  }
+};
+
+export { registerMessage, unregisterMessage };

package/blocks/LocalEditorImage/LocalEditorImage.d.ts

@@ -0,0 +1,22 @@
+export class LocalEditorImage extends UploaderBlock {
+    activityType: any;
+    /**
+     * @private
+     * @type {import('../../abstract/TypedData.js').TypedData | undefined}
+     */
+    private _entry;
+    /**
+     * @private
+     * @type {undefined}
+     */
+    private _instance;
+    get activityParams(): import("../CloudImageEditorActivity/CloudImageEditorActivity.js").ActivityParams;
+    mounted(): void;
+    _applyButton(): void;
+    unmounted(): void;
+}
+export namespace LocalEditorImage {
+    let template: string;
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=LocalEditorImage.d.ts.map

package/blocks/LocalEditorImage/LocalEditorImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalEditorImage.d.ts","sourceRoot":"","sources":["LocalEditorImage.js"],"names":[],"mappings":"AAoCA;IAGE,kBAA2D;IAE3D;;;OAGG;IACH,eAAO;IAEP;;;OAGG;IACH,kBAAU;IAEV,uGAMC;IAYD,gBA2BC;IAED,qBA4BC;IAED,kBAKC;CACF;;;;8BAtI6B,iCAAiC"}