From 805d9d3fb83551630a57ba69e4bb3de9c6f2184d Mon Sep 17 00:00:00 2001 From: mProjectsCode Date: Sun, 2 Oct 2022 22:07:11 +0200 Subject: [PATCH] Modal keyboard navigation changes --- src/modals/MediaDbAdvancedSearchModal.ts | 19 +++++---- src/modals/MediaDbFolderImportModal.ts | 16 +++++++- src/modals/MediaDbIdSearchModal.ts | 19 +++++---- src/modals/MediaDbSearchResultModal.ts | 1 + src/modals/SelectModal.ts | 51 +++++++++++++++++------- styles.css | 4 ++ 6 files changed, 79 insertions(+), 31 deletions(-) diff --git a/src/modals/MediaDbAdvancedSearchModal.ts b/src/modals/MediaDbAdvancedSearchModal.ts index 3711e55..52c9786 100644 --- a/src/modals/MediaDbAdvancedSearchModal.ts +++ b/src/modals/MediaDbAdvancedSearchModal.ts @@ -96,14 +96,19 @@ export class MediaDbAdvancedSearchModal extends Modal { contentEl.createDiv({cls: 'media-db-plugin-spacer'}); new Setting(contentEl) - .addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close())) .addButton(btn => { - return (this.searchBtn = btn - .setButtonText('Ok') - .setCta() - .onClick(() => { - this.search(); - })); + btn.setButtonText('Cancel'); + btn.onClick(() => this.close()); + btn.buttonEl.addClass('media-db-plugin-button'); + }) + .addButton(btn => { + btn.setButtonText('Ok'); + btn.setCta(); + btn.onClick(() => { + this.search(); + }); + btn.buttonEl.addClass('media-db-plugin-button'); + this.searchBtn = btn; }); } diff --git a/src/modals/MediaDbFolderImportModal.ts b/src/modals/MediaDbFolderImportModal.ts index 415e4df..9c1f64a 100644 --- a/src/modals/MediaDbFolderImportModal.ts +++ b/src/modals/MediaDbFolderImportModal.ts @@ -76,8 +76,20 @@ export class MediaDbFolderImportModal extends Modal { contentEl.createDiv({cls: 'media-db-plugin-spacer'}); new Setting(contentEl) - .addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close())) - .addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.submit())); + .addButton(btn => { + btn.setButtonText('Cancel'); + btn.onClick(() => this.close()); + btn.buttonEl.addClass('media-db-plugin-button'); + }) + .addButton(btn => { + btn.setButtonText('Ok'); + btn.setCta(); + btn.onClick(() => { + this.submit(); + }); + btn.buttonEl.addClass('media-db-plugin-button'); + this.searchBtn = btn; + }); } onClose() { diff --git a/src/modals/MediaDbIdSearchModal.ts b/src/modals/MediaDbIdSearchModal.ts index 9437e2a..f53197a 100644 --- a/src/modals/MediaDbIdSearchModal.ts +++ b/src/modals/MediaDbIdSearchModal.ts @@ -84,14 +84,19 @@ export class MediaDbIdSearchModal extends Modal { contentEl.createDiv({cls: 'media-db-plugin-spacer'}); new Setting(contentEl) - .addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close())) .addButton(btn => { - return (this.searchBtn = btn - .setButtonText('Ok') - .setCta() - .onClick(() => { - this.search(); - })); + btn.setButtonText('Cancel'); + btn.onClick(() => this.close()); + btn.buttonEl.addClass('media-db-plugin-button'); + }) + .addButton(btn => { + btn.setButtonText('Ok'); + btn.setCta(); + btn.onClick(() => { + this.search(); + }); + btn.buttonEl.addClass('media-db-plugin-button'); + this.searchBtn = btn; }); } diff --git a/src/modals/MediaDbSearchResultModal.ts b/src/modals/MediaDbSearchResultModal.ts index 4ffe578..546c394 100644 --- a/src/modals/MediaDbSearchResultModal.ts +++ b/src/modals/MediaDbSearchResultModal.ts @@ -59,6 +59,7 @@ export class MediaDbSearchResultModal extends SelectModal { } onClose() { + console.log('close'); this.closeCallback(); } } diff --git a/src/modals/SelectModal.ts b/src/modals/SelectModal.ts index 07f189c..5f726ee 100644 --- a/src/modals/SelectModal.ts +++ b/src/modals/SelectModal.ts @@ -12,6 +12,8 @@ export abstract class SelectModal extends Modal { skipButton?: ButtonComponent; submitButton?: ButtonComponent; + elementWrapper?: HTMLDivElement; + elements: T[]; selectModalElements: SelectModalElement[]; @@ -27,18 +29,28 @@ export abstract class SelectModal extends Modal { this.skipButton = undefined; this.submitButton = undefined; + this.elementWrapper = undefined; + this.elements = elements; this.selectModalElements = []; - this.scope.register([], 'ArrowUp', () => { + this.scope.register([], 'ArrowUp', (evt) => { this.highlightUp(); + evt.preventDefault(); }); - this.scope.register([], 'ArrowDown', () => { + this.scope.register([], 'ArrowDown', (evt) => { this.highlightDown(); + evt.preventDefault(); }); this.scope.register([], 'ArrowRight', () => { this.activateHighlighted(); }); + this.scope.register([], ' ', (evt) => { + if (this.elementWrapper && this.elementWrapper === document.activeElement) { + this.activateHighlighted(); + evt.preventDefault(); + } + }); this.scope.register([], 'Enter', () => this.submit()); } @@ -67,24 +79,17 @@ export abstract class SelectModal extends Modal { async onOpen() { const {contentEl} = this; - /* - contentEl.id = 'media-db-plugin-modal' - - contentEl.on('keydown', '#' + contentEl.id, (ev, delegateTarget) => { - console.log(ev.key); - }); - */ - contentEl.createEl('h2', {text: this.title}); contentEl.createEl('p', {text: this.description}); contentEl.addClass('media-db-plugin-select-modal'); - const elementWrapper = contentEl.createDiv({cls: 'media-db-plugin-select-wrapper'}); + this.elementWrapper = contentEl.createDiv({cls: 'media-db-plugin-select-wrapper'}); + this.elementWrapper.tabIndex = 0; let i = 0; for (const element of this.elements) { - const selectModalElement = new SelectModalElement(element, elementWrapper, i, this, false); + const selectModalElement = new SelectModalElement(element, this.elementWrapper, i, this, false); this.selectModalElements.push(selectModalElement); @@ -96,11 +101,27 @@ export abstract class SelectModal extends Modal { this.selectModalElements.first()?.element.scrollIntoView(); const bottomSettingRow = new Setting(contentEl); - bottomSettingRow.addButton(btn => this.cancelButton = btn.setButtonText('Cancel').onClick(() => this.close())); + bottomSettingRow.addButton(btn => { + btn.setButtonText('Cancel'); + btn.onClick(() => this.close()); + btn.buttonEl.addClass('media-db-plugin-button'); + this.cancelButton = btn; + }); if (this.addSkipButton) { - bottomSettingRow.addButton(btn => this.skipButton = btn.setButtonText('Skip').onClick(() => this.skip())); + bottomSettingRow.addButton(btn => { + btn.setButtonText('Skip'); + btn.onClick(() => this.skip()); + btn.buttonEl.addClass('media-db-plugin-button'); + this.skipButton = btn; + }); } - bottomSettingRow.addButton(btn => this.submitButton = btn.setButtonText('Ok').setCta().onClick(() => this.submit())); + bottomSettingRow.addButton(btn => { + btn.setButtonText('Ok'); + btn.setCta(); + btn.onClick(() => this.submit()); + btn.buttonEl.addClass('media-db-plugin-button'); + this.submitButton = btn; + }); } activateHighlighted() { diff --git a/styles.css b/styles.css index afe1e39..3414a7c 100644 --- a/styles.css +++ b/styles.css @@ -105,4 +105,8 @@ small.media-db-plugin-list-text{ margin-bottom: 5px; } +.media-db-plugin-button:focus { + outline: 1px solid white; +} + /* endregion */