afiqzudinhadi/obsidian-media-db-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Modal keyboard navigation changes

Browse source
This commit is contained in:
mProjectsCode 2022-10-02 22:07:11 +02:00
parent 5aa9108509
commit 805d9d3fb8
6 changed files with 79 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/modals/MediaDbAdvancedSearchModal.ts
View file

@ -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;
});
}

16
src/modals/MediaDbFolderImportModal.ts
View file

@ -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() {

19
src/modals/MediaDbIdSearchModal.ts
View file

@ -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;
});
}

1
src/modals/MediaDbSearchResultModal.ts
View file

@ -59,6 +59,7 @@ export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
}
onClose() {
console.log('close');
this.closeCallback();
}
}

51
src/modals/SelectModal.ts
View file

@ -12,6 +12,8 @@ export abstract class SelectModal<T> extends Modal {
skipButton?: ButtonComponent;
submitButton?: ButtonComponent;
elementWrapper?: HTMLDivElement;
elements: T[];
selectModalElements: SelectModalElement<T>[];
@ -27,18 +29,28 @@ export abstract class SelectModal<T> 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<T> 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<T> 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() {

4
styles.css
View file

@ -105,4 +105,8 @@ small.media-db-plugin-list-text{
margin-bottom: 5px;
}
.media-db-plugin-button:focus {
outline: 1px solid white;
}
/* endregion */