fix: cancel button behaviour

uploadcare · Nov 13, 2023 · d723e90 · d723e90
1 parent 6990cd4
commit d723e90
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 48 deletions.
diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js
@@ -70,7 +70,7 @@ export class ActivityBlock extends Block {
       if (history.length > 10) {
         history = history.slice(history.length - 11, history.length - 1);
       }
-      if (this.historyTracked) {
+      if (this.historyTracked && history[history.length - 1] !== this.activityType) {
         history.push(this.activityType);
       }
       this.$['*history'] = history;
@@ -93,6 +93,10 @@ export class ActivityBlock extends Block {
     return this[ACTIVE_PROP];
   }
 
+  get couldOpenActivity() {
+    return true;
+  }
+
   /**
    * TODO: remove name argument
    *
@@ -157,6 +161,14 @@ export class ActivityBlock extends Block {
       while (nextActivity === this.activityType) {
         nextActivity = history.pop();
       }
+      let couldOpenActivity = !!nextActivity;
+      if (nextActivity) {
+        /** @type {Set<ActivityBlock>} */
+        let blocksRegistry = this.$['*blocksRegistry'];
+        const nextActivityBlock = [...blocksRegistry].find((block) => block.activityType === nextActivity);
+        couldOpenActivity = nextActivityBlock?.couldOpenActivity ?? false;
+      }
+      nextActivity = couldOpenActivity ? nextActivity : undefined;
       this.$['*currentActivity'] = nextActivity;
       this.$['*history'] = history;
       if (!nextActivity) {

diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
@@ -19,8 +19,7 @@ import { TypedCollection } from './TypedCollection.js';
 import { uploadEntrySchema } from './uploadEntrySchema.js';
 
 export class UploaderBlock extends ActivityBlock {
-  couldBeUploadCollectionOwner = false;
-  isUploadCollectionOwner = false;
+  isCtxOwner = false;
 
   init$ = uploaderBlockCtx(this);
 
@@ -58,6 +57,15 @@ export class UploaderBlock extends ActivityBlock {
     }
   }
 
+  get hasCtxOwner() {
+    return this.hasBlockInCtx((block) => {
+      if (block instanceof UploaderBlock) {
+        return block.isCtxOwner && block.isConnected && block !== this;
+      }
+      return false;
+    });
+  }
+
   initCallback() {
     super.initCallback();
 
@@ -76,47 +84,42 @@ export class UploaderBlock extends ActivityBlock {
       this.add('*uploadCollection', uploadCollection);
     }
 
-    const hasUploadCollectionOwner = () =>
-      this.hasBlockInCtx((block) => {
-        if (block instanceof UploaderBlock) {
-          return block.isUploadCollectionOwner && block.isConnected && block !== this;
-        }
-        return false;
-      });
-
-    if (this.couldBeUploadCollectionOwner && !hasUploadCollectionOwner()) {
-      this.isUploadCollectionOwner = true;
+    if (!this.hasCtxOwner) {
+      this.initCtxOwner();
+    }
+  }
 
-      /** @private */
-      this._unobserveCollection = this.uploadCollection.observeCollection(this._handleCollectonUpdate);
+  destroyCallback() {
+    super.destroyCallback();
+    if (this.isCtxOwner) {
+      this._unobserveCollectionProperties?.();
+      this._unobserveCollection?.();
+    }
+  }
 
-      /** @private */
-      this._unobserveCollectionProperties = this.uploadCollection.observeProperties(
-        this._handleCollectionPropertiesUpdate
-      );
+  initCtxOwner() {
+    this.isCtxOwner = true;
 
-      this.subConfigValue('maxLocalFileSizeBytes', () => this._debouncedRunValidators());
-      this.subConfigValue('multipleMin', () => this._debouncedRunValidators());
-      this.subConfigValue('multipleMax', () => this._debouncedRunValidators());
-      this.subConfigValue('multiple', () => this._debouncedRunValidators());
-      this.subConfigValue('imgOnly', () => this._debouncedRunValidators());
-      this.subConfigValue('accept', () => this._debouncedRunValidators());
-    }
+    /** @private */
+    this._unobserveCollection = this.uploadCollection.observeCollection(this._handleCollectonUpdate);
 
-    if (this.__initialUploadMetadata) {
-      this.$['*uploadMetadata'] = this.__initialUploadMetadata;
-    }
+    /** @private */
+    this._unobserveCollectionProperties = this.uploadCollection.observeProperties(
+      this._handleCollectionPropertiesUpdate
+    );
 
+    this.subConfigValue('maxLocalFileSizeBytes', () => this._debouncedRunValidators());
+    this.subConfigValue('multipleMin', () => this._debouncedRunValidators());
+    this.subConfigValue('multipleMax', () => this._debouncedRunValidators());
+    this.subConfigValue('multiple', () => this._debouncedRunValidators());
+    this.subConfigValue('imgOnly', () => this._debouncedRunValidators());
+    this.subConfigValue('accept', () => this._debouncedRunValidators());
     this.subConfigValue('maxConcurrentRequests', (value) => {
       this.$['*uploadQueue'].concurrency = Number(value) || 1;
     });
-  }
 
-  destroyCallback() {
-    super.destroyCallback();
-    if (this.isUploadCollectionOwner) {
-      this._unobserveCollectionProperties?.();
-      this._unobserveCollection?.();
+    if (this.__initialUploadMetadata) {
+      this.$['*uploadMetadata'] = this.__initialUploadMetadata;
     }
   }
 

diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js
@@ -16,7 +16,6 @@ import { debounce } from '../utils/debounce.js';
  */
 
 export class UploadList extends UploaderBlock {
-  couldBeUploadCollectionOwner = true;
   historyTracked = true;
   activityType = ActivityBlock.activities.UPLOAD_LIST;
 
@@ -60,11 +59,7 @@ export class UploadList extends UploaderBlock {
     this._updateUploadsState();
     this._updateCountLimitMessage();
 
-    if (
-      this.$['*uploadList']?.length === 0 &&
-      !this.cfg.showEmptyList &&
-      this.$['*currentActivity'] === this.activityType
-    ) {
+    if (!this.couldOpenActivity && this.$['*currentActivity'] === this.activityType) {
       this.historyBack();
     }
   }, 0);
@@ -199,6 +194,10 @@ export class UploadList extends UploaderBlock {
     return localizedText('total');
   }
 
+  get couldOpenActivity() {
+    return this.cfg.showEmptyList || this.uploadCollection.size > 0;
+  }
+
   initCallback() {
     super.initCallback();
 
@@ -209,7 +208,7 @@ export class UploadList extends UploaderBlock {
     this.subConfigValue('multipleMax', this._debouncedHandleCollectionUpdate);
 
     this.sub('*currentActivity', (currentActivity) => {
-      if (this.uploadCollection?.size === 0 && !this.cfg.showEmptyList && currentActivity === this.activityType) {
+      if (!this.couldOpenActivity && currentActivity === this.activityType) {
         this.$['*currentActivity'] = this.initActivity;
       }
     });

diff --git a/blocks/themes/lr-basic/l10n.css b/blocks/themes/lr-basic/l10n.css
@@ -12,6 +12,7 @@
   --l10n-upload: 'Upload';
   --l10n-add-more: 'Add more';
   --l10n-cancel: 'Cancel';
+  --l10n-start-from-cancel: var(--l10n-cancel);
   --l10n-clear: 'Clear';
   --l10n-camera-shot: 'Shot';
   --l10n-upload-url: 'Import';

diff --git a/solutions/file-uploader/inline/FileUploaderInline.js b/solutions/file-uploader/inline/FileUploaderInline.js
@@ -8,9 +8,26 @@ export class FileUploaderInline extends SolutionBlock {
 
     this.init$ = {
       ...this.init$,
-      couldBackHistory: false,
+      couldCancel: false,
+      cancel: () => {
+        if (this.couldHistoryBack) {
+          this.$['*historyBack']();
+        } else if (this.couldShowList) {
+          this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+        }
+      },
     };
   }
+
+  get couldHistoryBack() {
+    const history = this.$['*history'];
+    return history.length > 1 && history[history.length - 1] !== ActivityBlock.activities.START_FROM;
+  }
+
+  get couldShowList() {
+    return this.cfg.showEmptyList || this.$['*uploadList'].length > 0;
+  }
+
   shadowReadyCallback() {
     /** @type {import('../../../abstract/UploaderBlock.js').UploaderBlock} */
     const uBlock = this.ref.uBlock;
@@ -29,7 +46,9 @@ export class FileUploaderInline extends SolutionBlock {
       }
     });
 
-    this.sub('*history', (history) => (this.$['couldBackHistory'] = history.length > 1));
+    this.sub('*history', () => {
+      this.$['couldCancel'] = this.couldHistoryBack || this.couldShowList;
+    });
   }
 }
 
@@ -38,9 +57,9 @@ FileUploaderInline.template = /* HTML */ ` <lr-start-from>
     <lr-source-list wrap></lr-source-list>
     <button
       type="button"
-      l10n="cancel"
+      l10n="start-from-cancel"
       class="cancel-btn secondary-btn"
-      set="onclick: *historyBack; @hidden: !couldBackHistory"
+      set="onclick: cancel; @hidden: !couldCancel"
     ></button>
     <lr-copyright></lr-copyright>
   </lr-start-from>

diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css
@@ -69,7 +69,6 @@ lr-drop-area {
   text-align: center;
   background-color: var(--clr-background);
   border-radius: var(--border-radius-frame);
-  cursor: pointer;
 }
 
 lr-upload-list lr-activity-header {

diff --git a/solutions/file-uploader/regular/FileUploaderRegular.js b/solutions/file-uploader/regular/FileUploaderRegular.js
@@ -9,7 +9,7 @@ FileUploaderRegular.template = /* HTML */ `
     <lr-start-from>
       <lr-drop-area with-icon clickable></lr-drop-area>
       <lr-source-list wrap></lr-source-list>
-      <button type="button" l10n="cancel" class="secondary-btn" set="onclick: *historyBack"></button>
+      <button type="button" l10n="start-from-cancel" class="secondary-btn" set="onclick: *historyBack"></button>
       <lr-copyright></lr-copyright>
     </lr-start-from>
     <lr-upload-list></lr-upload-list>