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

cancel and skip buttons #26

Browse source
This commit is contained in:
mProjectsCode 2022-06-11 15:12:24 +02:00
parent 038d473a4f
commit aa7659ee1f
9 changed files with 144 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modals/MediaDbAdvancedSearchModal.ts
View file

@ -81,6 +81,7 @@ export class MediaDbAdvancedSearchModal extends Modal {
contentEl.appendChild(searchComponent.inputEl);
searchComponent.inputEl.focus();
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createEl('h3', {text: 'APIs to search'});
const apiToggleComponents: Component[] = [];
@ -102,6 +103,7 @@ export class MediaDbAdvancedSearchModal extends Modal {
apiToggleComponentWrapper.appendChild(apiToggleComponent.toggleEl);
}
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
new Setting(contentEl)
.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))

40
src/modals/MediaDbFolderImportModal.ts
View file

@ -1,14 +1,15 @@
import {App, ButtonComponent, DropdownComponent, Modal, Setting, TextComponent} from 'obsidian';
import {App, ButtonComponent, DropdownComponent, Modal, Setting, TextComponent, ToggleComponent} from 'obsidian';
import MediaDbPlugin from '../main';
export class MediaDbFolderImportModal extends Modal {
plugin: MediaDbPlugin;
onSubmit: (selectedAPI: string, titleFieldName: string) => void;
onSubmit: (selectedAPI: string, titleFieldName: string, appendContent: boolean) => void;
selectedApi: string;
searchBtn: ButtonComponent;
titleFieldName: string;
appendContent: boolean;
constructor(app: App, plugin: MediaDbPlugin, onSubmit: (selectedAPI: string, titleFieldName: string) => void) {
constructor(app: App, plugin: MediaDbPlugin, onSubmit: (selectedAPI: string, titleFieldName: string, appendContent: boolean) => void) {
super(app);
this.plugin = plugin;
this.onSubmit = onSubmit;
@ -16,7 +17,7 @@ export class MediaDbFolderImportModal extends Modal {
}
submit() {
this.onSubmit(this.selectedApi, this.titleFieldName);
this.onSubmit(this.selectedApi, this.titleFieldName, this.appendContent);
this.close();
}
@ -39,14 +40,41 @@ export class MediaDbFolderImportModal extends Modal {
apiSelectorWrapper.appendChild(apiSelectorComponent.selectEl);
const placeholder = 'Title metadata field name';
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createEl('h3', {text: 'Append note content to Media DB entry.'});
const appendContentToggleElementWrapper = contentEl.createEl('div', {cls: 'media-db-plugin-list-wrapper'});
const appendContentToggleTextWrapper = appendContentToggleElementWrapper.createEl('div', {cls: 'media-db-plugin-list-text-wrapper'});
appendContentToggleTextWrapper.createEl('span', {
text: 'If this is enabled, the plugin will override meta data fields with the same name.',
cls: 'media-db-plugin-list-text',
});
const appendContentToggleComponentWrapper = appendContentToggleElementWrapper.createEl('div', {cls: 'media-db-plugin-list-toggle'});
const appendContentToggle = new ToggleComponent(appendContentToggleElementWrapper);
appendContentToggle.setValue(false);
appendContentToggle.onChange(value => this.appendContent = value);
appendContentToggleComponentWrapper.appendChild(appendContentToggle.toggleEl);
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createEl('h3', {text: 'The name of the mata data field that should be used as the title to query'});
const placeholder = 'title';
const titleFieldNameComponent = new TextComponent(contentEl);
titleFieldNameComponent.inputEl.style.width = '100%';
titleFieldNameComponent.setPlaceholder(placeholder);
titleFieldNameComponent.onChange(value => this.titleFieldName = value);
titleFieldNameComponent.inputEl.addEventListener('keydown', (ke) => {
if (ke.key === 'Enter') {
this.submit();
}
});
contentEl.appendChild(titleFieldNameComponent.inputEl);
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()));

4
src/modals/MediaDbIdSearchModal.ts
View file

@ -75,6 +75,8 @@ export class MediaDbIdSearchModal extends Modal {
contentEl.appendChild(searchComponent.inputEl);
searchComponent.inputEl.focus();
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
const apiSelectorWrapper = contentEl.createEl('div', {cls: 'media-db-plugin-list-wrapper'});
const apiSelectorTExtWrapper = apiSelectorWrapper.createEl('div', {cls: 'media-db-plugin-list-text-wrapper'});
apiSelectorTExtWrapper.createEl('span', {text: 'API to search', cls: 'media-db-plugin-list-text'});
@ -88,6 +90,8 @@ export class MediaDbIdSearchModal extends Modal {
}
apiSelectorWrapper.appendChild(apiSelectorComponent.selectEl);
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
new Setting(contentEl)
.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))
.addButton(btn => {

28
src/modals/MediaDbSearchResultModal.ts
View file

@ -6,17 +6,24 @@ import {SelectModal} from './SelectModal';
export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
plugin: MediaDbPlugin;
heading: string;
onChoose: (error: Error, result: MediaTypeModel[]) => void;
onSubmit: (error: Error, result: MediaTypeModel[]) => void;
onCancel: () => void;
onSkip: () => void;
constructor(app: App, plugin: MediaDbPlugin, elements: MediaTypeModel[], onChoose: (error: Error, result: MediaTypeModel[]) => void, onCancel: () => void) {
sendCallback: boolean;
constructor(app: App, plugin: MediaDbPlugin, elements: MediaTypeModel[], skipButton: boolean, onSubmit: (error: Error, result: MediaTypeModel[]) => void, onCancel: () => void, onSkip?: () => void) {
super(app, elements);
this.plugin = plugin;
this.onChoose = onChoose;
this.onSubmit = onSubmit;
this.onCancel = onCancel;
this.onSkip = onSkip;
this.title = 'Search Results';
this.description = 'Select one or multiple search results.';
this.skipButton = skipButton;
this.sendCallback = false;
}
// Renders each suggestion item.
@ -27,12 +34,21 @@ export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
}
// Perform action on the selected suggestion.
onSubmit() {
this.onChoose(null, this.selectModalElements.filter(x => x.isActive()).map(x => x.value));
submit() {
this.onSubmit(null, this.selectModalElements.filter(x => x.isActive()).map(x => x.value));
this.sendCallback = true;
this.close();
}
skip() {
this.onSkip();
this.sendCallback = true;
this.close();
}
onClose() {
this.onCancel();
if (!this.sendCallback) {
this.onCancel();
}
}
}

45
src/modals/SelectModal.ts
View file

@ -2,27 +2,33 @@ import {App, Modal, Setting} from 'obsidian';
import {SelectModalElement} from './SelectModalElement';
export abstract class SelectModal<T> extends Modal {
multiSelect: boolean;
allowMultiSelect: boolean;
title: string;
description: string;
skipButton: boolean;
elements: T[];
selectModalElements: SelectModalElement<T>[];
constructor(app: App, elements: T[]) {
protected constructor(app: App, elements: T[]) {
super(app);
this.elements = elements;
this.allowMultiSelect = true;
this.title = '';
this.description = '';
this.skipButton = false;
this.elements = elements;
this.selectModalElements = [];
}
abstract renderElement(value: T, el: HTMLElement): any;
abstract onSubmit(): void;
abstract submit(): void;
abstract skip(): void;
disableAllOtherElements(elementId: number) {
for (const selectModalElement of this.selectModalElements) {
@ -35,23 +41,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});
if (this.allowMultiSelect) {
new Setting(contentEl)
.setName('Select Multiple')
.addToggle(cb => {
cb.setValue(this.multiSelect);
cb.onChange(value => {
this.multiSelect = value;
for (const selectModalElement of this.selectModalElements) {
selectModalElement.setActive(false);
}
});
});
}
const elementWrapper = contentEl.createDiv({cls: 'media-db-plugin-select-wrapper'});
let i = 0;
@ -65,8 +65,11 @@ export abstract class SelectModal<T> extends Modal {
i += 1;
}
new Setting(contentEl)
.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()))
.addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.onSubmit()));
const bottomSetting = new Setting(contentEl);
bottomSetting.addButton(btn => btn.setButtonText('Cancel').onClick(() => this.close()));
if (this.skipButton) {
bottomSetting.addButton(btn => btn.setButtonText('Skip').onClick(() => this.skip()));
}
bottomSetting.addButton(btn => btn.setButtonText('Ok').setCta().onClick(() => this.submit()));
}
}

2
src/modals/SelectModalElement.ts
View file

@ -24,7 +24,7 @@ export class SelectModalElement<T> {
this.element.id = this.getHTMLId();
this.element.on('click', '#' + this.getHTMLId(), () => {
this.setActive(!this.active);
if (!this.selectModal.allowMultiSelect || !this.selectModal.multiSelect) {
if (!this.selectModal.allowMultiSelect) {
this.selectModal.disableAllOtherElements(this.id);
}
});