fix: rework history

uploadcare · Sep 20, 2022 · f7e39f9 · f7e39f9
1 parent 15e567d
commit f7e39f9
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 76 deletions.
diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js
@@ -1,3 +1,4 @@
+import { debounce } from '../blocks/utils/debounce.js';
 import { Block } from './Block.js';
 import { activityBlockCtx } from './CTX.js';
 
@@ -7,6 +8,8 @@ const ACTIVE_PROP = '___ACTIVITY_IS_ACTIVE___';
 export class ActivityBlock extends Block {
   ctxInit = activityBlockCtx();
 
+  _debouncedHistoryFlush = debounce(this._historyFlush.bind(this), 10);
+
   initCallback() {
     super.initCallback();
     if (this.hasAttribute('current-activity')) {
@@ -33,22 +36,31 @@ export class ActivityBlock extends Block {
           /** @private */
           this[ACTIVE_PROP] = true;
           this.setAttribute(ACTIVE_ATTR, '');
+          this.setForCtxTarget('lr-modal', '*modalCloseCallback', actDesc?.modalCloseCallback);
           actDesc?.activateCallback?.();
           // console.log(`Activity "${this.activityType}" activated`);
 
-          let history = this.$['*history'];
-          if (history) {
-            if (history.length > 10) {
-              history = history.slice(history.length - 11, history.length - 1);
-            }
-            history.push(this.activityType);
-            this.$['*history'] = history;
-          }
+          this._debouncedHistoryFlush();
+        }
+
+        if (!val) {
+          this.$['*history'] = [];
         }
       });
     }
   }
 
+  _historyFlush() {
+    let history = this.$['*history'];
+    if (history) {
+      if (history.length > 10) {
+        history = history.slice(history.length - 11, history.length - 1);
+      }
+      history.push(this.activityType);
+      this.$['*history'] = history;
+    }
+  }
+
   /**
    * @private
    * @type {{ String: { activateCallback: Function; deactivateCallback: Function } }}
@@ -61,17 +73,21 @@ export class ActivityBlock extends Block {
 
   /**
    * @param {String} name
-   * @param {() => void} [activateCallback]
-   * @param {() => void} [deactivateCallback]
+   * @param {Object} [options]
+   * @param {() => void} [options.onActivate]
+   * @param {() => void} [options.onDeactivate]
+   * @param {() => void} [options.onClose]
    */
-  registerActivity(name, activateCallback, deactivateCallback) {
+  registerActivity(name, options) {
+    const { onActivate, onDeactivate, onClose } = options;
     if (!ActivityBlock._activityRegistry) {
       ActivityBlock._activityRegistry = Object.create(null);
     }
     let actKey = this.ctxName + name;
     ActivityBlock._activityRegistry[actKey] = {
-      activateCallback,
-      deactivateCallback,
+      activateCallback: onActivate,
+      deactivateCallback: onDeactivate,
+      modalCloseCallback: onClose,
     };
   }
 

diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
@@ -131,14 +131,12 @@ export class UploaderBlock extends ActivityBlock {
   }
 
   cancelFlow() {
-    if (this.sourceList?.length === 1 || !this.$['*uploadList']?.length) {
-      this.$['*currentActivity'] = null;
+    this.set$({
+      '*currentActivity': this.doneActivity,
+      '*history': this.doneActivity ? [this.doneActivity] : [],
+    });
+    if (!this.$['*currentActivity']) {
       this.setForCtxTarget('lr-modal', '*modalActive', false);
-    } else {
-      this.historyBack();
-      if (!this.$['*currentActivity']) {
-        this.setForCtxTarget('lr-modal', '*modalActive', false);
-      }
     }
   }
 

diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js
@@ -27,7 +27,7 @@ export class CameraSource extends UploaderBlock {
       this._capture();
     },
     onCancel: () => {
-      this.cancelFlow();
+      this.historyBack();
     },
     onShot: () => {
       this._shot();
@@ -63,6 +63,11 @@ export class CameraSource extends UploaderBlock {
     this._stopCapture();
   };
 
+  /** @private */
+  _onClose = () => {
+    this.historyBack();
+  };
+
   /** @private */
   _handlePermissionsChange = () => {
     this._capture();
@@ -189,7 +194,11 @@ export class CameraSource extends UploaderBlock {
 
   async initCallback() {
     super.initCallback();
-    this.registerActivity(this.activityType, this._onActivate, this._onDeactivate);
+    this.registerActivity(this.activityType, {
+      onActivate: this._onActivate,
+      onDeactivate: this._onDeactivate,
+      onClose: this._onClose,
+    });
 
     this.sub('--cfg-camera-mirror', (val) => {
       this.$.videoTransformCss = val ? 'scaleX(-1)' : null;
@@ -234,7 +243,7 @@ CameraSource.template = /*html*/ `
     set="onclick: onCancel"
     l10n="cancel">
   </button>
-  <lr-select 
+  <lr-select
     set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange">
   </lr-select>
   <button

diff --git a/blocks/CloudImageEditor/CloudImageEditor.js b/blocks/CloudImageEditor/CloudImageEditor.js
@@ -14,12 +14,10 @@ export class CloudImageEditor extends UploaderBlock {
     super.initCallback();
     this.bindCssData('--cfg-pubkey');
 
-    this.sub('*currentActivity', (val) => {
-      if (val === ActivityBlock.activities.CLOUD_IMG_EDIT) {
-        this.mountEditor();
-      } else {
-        this.unmountEditor();
-      }
+    this.registerActivity(this.activityType, {
+      onActivate: () => this.mountEditor(),
+      onDeactivate: () => this.unmountEditor(),
+      onClose: () => this.historyBack(),
     });
 
     this.sub('*focusedEntry', (/** @type {import('../../abstract/TypedData.js').TypedData} */ entry) => {

diff --git a/blocks/ExternalSource/ExternalSource.js b/blocks/ExternalSource/ExternalSource.js
@@ -20,7 +20,7 @@ export class ExternalSource extends UploaderBlock {
       this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
     },
     onCancel: () => {
-      this.cancelFlow();
+      this.historyBack();
     },
   };
 
@@ -29,16 +29,19 @@ export class ExternalSource extends UploaderBlock {
 
   initCallback() {
     super.initCallback();
-    this.registerActivity(this.activityType, () => {
-      let { externalSourceType } = /** @type {ActivityParams} */ (this.activityParams);
+    this.registerActivity(this.activityType, {
+      onActivate: () => {
+        let { externalSourceType } = /** @type {ActivityParams} */ (this.activityParams);
 
-      this.set$({
-        '*activityCaption': `${externalSourceType?.[0].toUpperCase()}${externalSourceType?.slice(1)}`,
-        '*activityIcon': externalSourceType,
-      });
+        this.set$({
+          '*activityCaption': `${externalSourceType?.[0].toUpperCase()}${externalSourceType?.slice(1)}`,
+          '*activityIcon': externalSourceType,
+        });
 
-      this.$.counter = 0;
-      this.mountIframe();
+        this.$.counter = 0;
+        this.mountIframe();
+      },
+      onClose: () => this.historyBack(),
     });
     this.sub('*currentActivity', (val) => {
       if (val !== this.activityType) {

diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js
@@ -6,7 +6,12 @@ export class Modal extends Block {
     ...this.ctxInit,
     '*modalActive': false,
     '*modalHeaderHidden': false,
+    '*modalCloseCallback': null,
     closeClicked: () => {
+      if (this.$['*modalCloseCallback']) {
+        this.$['*modalCloseCallback']();
+        return;
+      }
       this.set$({
         '*modalActive': false,
         '*currentActivity': '',

diff --git a/blocks/StartFrom/StartFrom.js b/blocks/StartFrom/StartFrom.js
@@ -5,14 +5,16 @@ export class StartFrom extends ActivityBlock {
 
   initCallback() {
     super.initCallback();
-    this.registerActivity(this.activityType, () => {
-      this.add$(
-        {
-          '*activityCaption': this.l10n('select-file-source'),
-          '*activityIcon': 'default',
-        },
-        true
-      );
+    this.registerActivity(this.activityType, {
+      onActivate: () => {
+        this.add$(
+          {
+            '*activityCaption': this.l10n('select-file-source'),
+            '*activityIcon': 'default',
+          },
+          true
+        );
+      },
     });
   }
 }
diff --git a/blocks/UploadDetails/UploadDetails.js b/blocks/UploadDetails/UploadDetails.js
@@ -51,10 +51,13 @@ export class UploadDetails extends UploaderBlock {
     // Rendering is postponed for the CSS-context-properties usage in template:
     this.render();
     this.$.fileSize = this.l10n('file-size-unknown');
-    this.registerActivity(this.activityType, () => {
-      this.set$({
-        '*activityCaption': this.l10n('caption-edit-file'),
-      });
+    this.registerActivity(this.activityType, {
+      onActivate: () => {
+        this.set$({
+          '*activityCaption': this.l10n('caption-edit-file'),
+        });
+      },
+      onClose: () => this.historyBack(),
     });
     /** @type {import('../EditableCanvas/EditableCanvas.js').EditableCanvas} */
     // @ts-ignore

diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js
@@ -25,10 +25,7 @@ export class UploadList extends UploaderBlock {
       this._updateUploadsState();
     },
     onDone: () => {
-      this.set$({
-        '*currentActivity': this.doneActivity || '',
-      });
-      this.setForCtxTarget('lr-modal', '*modalActive', false);
+      this.cancelFlow();
     },
     onCancel: () => {
       let cfn = new UiConfirmation();
@@ -43,8 +40,8 @@ export class UploadList extends UploaderBlock {
             data,
           })
         );
-        this.cancelFlow();
         this.uploadCollection.clearAll();
+        this.historyBack();
       };
       cfn.denyAction = () => {
         this.historyBack();
@@ -142,50 +139,59 @@ export class UploadList extends UploaderBlock {
 
     this.set$({
       doneBtnHidden: !allUploaded,
-      doneBtnDisabled: !fitCountRestrictions || !fitValidation,
+      doneBtnDisabled: summary.total === 0 || !fitCountRestrictions || !fitValidation,
 
       uploadBtnHidden: allUploaded,
       uploadBtnDisabled:
         summary.uploading + summary.uploaded === summary.total || !fitCountRestrictions || !fitValidation,
 
-      addMoreBtnDisabled: tooMany || exact,
+      addMoreBtnDisabled: summary.total > 0 && (tooMany || exact),
       addMoreBtnHidden: exact && !this.getCssData('--cfg-multiple'),
     });
   }
 
   initCallback() {
     super.initCallback();
 
-    this.registerActivity(this.activityType, () => {
-      this.set$({
-        '*activityCaption': this.l10n('selected'),
-        '*activityIcon': 'local',
-      });
+    this.registerActivity(this.activityType, {
+      onActivate: () => {
+        this.set$({
+          '*activityCaption': this.l10n('selected'),
+          '*activityIcon': 'local',
+        });
+      },
     });
 
     this.sub('--cfg-multiple', () => this._handleCollectionUpdate());
     this.sub('--cfg-multiple-min', () => this._handleCollectionUpdate());
     this.sub('--cfg-multiple-max', () => this._handleCollectionUpdate());
 
+    this.sub('*currentActivity', (currentActivity) => {
+      if (
+        this.uploadCollection?.size === 0 &&
+        !this.getCssData('--cfg-show-empty-list') &&
+        currentActivity === this.activityType
+      ) {
+        this.$['*currentActivity'] = this.initActivity;
+      }
+    });
+
     // TODO: could be performance issue on many files
     // there is no need to update buttons state on every progress tick
     this.uploadCollection.observe(() => {
       this._handleCollectionUpdate();
     });
 
     this.sub('*uploadList', (list) => {
-      if (list?.length === 0 && !this.getCssData('--cfg-show-empty-list')) {
-        this.cancelFlow();
-        return;
-      }
-
       this._handleCollectionUpdate();
 
       this.set$({
         hasFiles: list.length > 0,
       });
 
-      this.setForCtxTarget('lr-modal', '*modalActive', true);
+      if (list?.length === 0 && !this.getCssData('--cfg-show-empty-list')) {
+        this.cancelFlow();
+      }
     });
   }
 }

diff --git a/blocks/UrlSource/UrlSource.js b/blocks/UrlSource/UrlSource.js
@@ -15,7 +15,7 @@ export class UrlSource extends UploaderBlock {
       this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
     },
     onCancel: () => {
-      this.cancelFlow();
+      this.historyBack();
     },
     onInput: (e) => {
       let value = /** @type {HTMLInputElement} */ (e.target).value;
@@ -25,11 +25,14 @@ export class UrlSource extends UploaderBlock {
 
   initCallback() {
     super.initCallback();
-    this.registerActivity(this.activityType, () => {
-      this.set$({
-        '*activityCaption': this.l10n('caption-from-url'),
-        '*activityIcon': 'url',
-      });
+    this.registerActivity(this.activityType, {
+      onActivate: () => {
+        this.set$({
+          '*activityCaption': this.l10n('caption-from-url'),
+          '*activityIcon': 'url',
+        });
+      },
+      onClose: () => this.historyBack(),
     });
   }
 }

diff --git a/blocks/themes/lr-basic/config.css b/blocks/themes/lr-basic/config.css
@@ -23,7 +23,7 @@
   --cfg-source-list-wrap: 1;
 
   --cfg-init-activity: 'start-from';
-  --cfg-done-activity: 'start-from';
+  --cfg-done-activity: '';
 
   --cfg-data-output-console: 1;
   --cfg-data-output-fire-events: 1;

diff --git a/get-started/configuration/README.md b/get-started/configuration/README.md
@@ -86,7 +86,7 @@ For example, this is the list of pre-defined parameters used by default in our [
   --cfg-source-list-wrap: 1;
 
   --cfg-init-activity: 'start-from';
-  --cfg-done-activity: 'start-from';
+  --cfg-done-activity: '';
 
   --cfg-data-output-console: 1;
   --cfg-data-output-fire-events: 1;