From ca6e566ef502acb5d17c1111d5f4b1d6bd1c66a8 Mon Sep 17 00:00:00 2001 From: nd0ut Date: Mon, 13 Nov 2023 16:24:59 +0300 Subject: [PATCH] fix: cancel button behaviour --- abstract/ActivityBlock.js | 14 +++- abstract/UploaderBlock.js | 71 ++++++++++--------- blocks/UploadList/UploadList.js | 5 +- blocks/themes/lr-basic/l10n.css | 1 + .../inline/FileUploaderInline.js | 28 ++++++-- solutions/file-uploader/minimal/index.css | 1 - .../regular/FileUploaderRegular.js | 2 +- 7 files changed, 80 insertions(+), 42 deletions(-) diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js index e09e1d2be..abb1c7f1a 100644 --- 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} */ + 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 index 91e23aadb..91e11eacb 100644 --- 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 index 9e34f4988..1ba126abd 100644 --- 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; @@ -199,6 +198,10 @@ export class UploadList extends UploaderBlock { return localizedText('total'); } + get couldOpenActivity() { + return this.cfg.showEmptyList || this.uploadCollection.size > 0; + } + initCallback() { super.initCallback(); diff --git a/blocks/themes/lr-basic/l10n.css b/blocks/themes/lr-basic/l10n.css index 8fa2f26ea..c9397ef52 100644 --- 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 index 8b99406db..1629e76e6 100644 --- a/solutions/file-uploader/inline/FileUploaderInline.js +++ b/solutions/file-uploader/inline/FileUploaderInline.js @@ -8,9 +8,27 @@ export class FileUploaderInline extends SolutionBlock { this.init$ = { ...this.init$, - couldBackHistory: false, + couldCancel: false, + cancel: () => { + debugger; + 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 +47,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 +58,9 @@ FileUploaderInline.template = /* HTML */ ` diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index 8a293fe9f..3eb687bc7 100644 --- 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 index a563eaed9..d3c7e3af6 100644 --- a/solutions/file-uploader/regular/FileUploaderRegular.js +++ b/solutions/file-uploader/regular/FileUploaderRegular.js @@ -9,7 +9,7 @@ FileUploaderRegular.template = /* HTML */ ` - +