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

install prettier

Browse source
This commit is contained in:
mProjectsCode 2022-10-25 16:45:36 +02:00
parent 2662c78080
commit 9e2961421d
57 changed files with 2367 additions and 1162 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/modals/MediaDbAdvancedSearchModal.ts
View file

@ -1,7 +1,7 @@
import {ButtonComponent, Modal, Notice, Setting, TextComponent, ToggleComponent} from 'obsidian';
import {MediaTypeModel} from '../models/MediaTypeModel';
import { ButtonComponent, Modal, Notice, Setting, TextComponent, ToggleComponent } from 'obsidian';
import { MediaTypeModel } from '../models/MediaTypeModel';
import MediaDbPlugin from '../main';
import {ADVANCED_SEARCH_MODAL_DEFAULT_OPTIONS, AdvancedSearchModalData, AdvancedSearchModalOptions} from '../utils/ModalHelper';
import { ADVANCED_SEARCH_MODAL_DEFAULT_OPTIONS, AdvancedSearchModalData, AdvancedSearchModalOptions } from '../utils/ModalHelper';
export class MediaDbAdvancedSearchModal extends Modal {
plugin: MediaDbPlugin;
@ -9,14 +9,13 @@ export class MediaDbAdvancedSearchModal extends Modal {
query: string;
isBusy: boolean;
title: string;
selectedApis: { name: string, selected: boolean }[];
selectedApis: { name: string; selected: boolean }[];
searchBtn: ButtonComponent;
submitCallback?: (res: AdvancedSearchModalData) => void;
closeCallback?: (err?: Error) => void;
constructor(plugin: MediaDbPlugin, advancedSearchModalOptions: AdvancedSearchModalOptions) {
advancedSearchModalOptions = Object.assign({}, ADVANCED_SEARCH_MODAL_DEFAULT_OPTIONS, advancedSearchModalOptions);
super(plugin.app);
@ -27,7 +26,7 @@ export class MediaDbAdvancedSearchModal extends Modal {
this.query = advancedSearchModalOptions.prefilledSearchString;
for (const api of this.plugin.apiManager.apis) {
this.selectedApis.push({name: api.apiName, selected: advancedSearchModalOptions.preselectedAPIs.contains(api.apiName)});
this.selectedApis.push({ name: api.apiName, selected: advancedSearchModalOptions.preselectedAPIs.contains(api.apiName) });
}
}
@ -63,14 +62,14 @@ export class MediaDbAdvancedSearchModal extends Modal {
this.searchBtn.setDisabled(false);
this.searchBtn.setButtonText('Searching...');
this.submitCallback({query: this.query, apis: apis});
this.submitCallback({ query: this.query, apis: apis });
}
}
onOpen() {
const {contentEl} = this;
const { contentEl } = this;
contentEl.createEl('h2', {text: this.title});
contentEl.createEl('h2', { text: this.title });
const placeholder = 'Search by title';
const searchComponent = new TextComponent(contentEl);
@ -83,29 +82,29 @@ 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'});
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
contentEl.createEl('h3', { text: 'APIs to search' });
// const apiToggleComponents: Component[] = [];
for (const api of this.plugin.apiManager.apis) {
const apiToggleListElementWrapper = contentEl.createEl('div', {cls: 'media-db-plugin-list-wrapper'});
const apiToggleListElementWrapper = contentEl.createEl('div', { cls: 'media-db-plugin-list-wrapper' });
const apiToggleTextWrapper = apiToggleListElementWrapper.createEl('div', {cls: 'media-db-plugin-list-text-wrapper'});
apiToggleTextWrapper.createEl('span', {text: api.apiName, cls: 'media-db-plugin-list-text'});
apiToggleTextWrapper.createEl('small', {text: api.apiDescription, cls: 'media-db-plugin-list-text'});
const apiToggleTextWrapper = apiToggleListElementWrapper.createEl('div', { cls: 'media-db-plugin-list-text-wrapper' });
apiToggleTextWrapper.createEl('span', { text: api.apiName, cls: 'media-db-plugin-list-text' });
apiToggleTextWrapper.createEl('small', { text: api.apiDescription, cls: 'media-db-plugin-list-text' });
const apiToggleComponentWrapper = apiToggleListElementWrapper.createEl('div', {cls: 'media-db-plugin-list-toggle'});
const apiToggleComponentWrapper = apiToggleListElementWrapper.createEl('div', { cls: 'media-db-plugin-list-toggle' });
const apiToggleComponent = new ToggleComponent(apiToggleComponentWrapper);
apiToggleComponent.setTooltip(api.apiName);
apiToggleComponent.setValue(this.selectedApis.find(x => x.name === api.apiName).selected);
apiToggleComponent.onChange((value) => {
apiToggleComponent.onChange(value => {
this.selectedApis.find(x => x.name === api.apiName).selected = value;
});
apiToggleComponentWrapper.appendChild(apiToggleComponent.toggleEl);
}
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
new Setting(contentEl)
.addButton(btn => {
@ -126,8 +125,7 @@ export class MediaDbAdvancedSearchModal extends Modal {
onClose() {
this.closeCallback();
const {contentEl} = this;
const { contentEl } = this;
contentEl.empty();
}
}

38
src/modals/MediaDbFolderImportModal.ts
View file

@ -1,4 +1,4 @@
import {App, ButtonComponent, DropdownComponent, Modal, Setting, TextComponent, ToggleComponent} from 'obsidian';
import { App, ButtonComponent, DropdownComponent, Modal, Setting, TextComponent, ToggleComponent } from 'obsidian';
import MediaDbPlugin from '../main';
export class MediaDbFolderImportModal extends Modal {
@ -22,13 +22,13 @@ export class MediaDbFolderImportModal extends Modal {
}
onOpen() {
const {contentEl} = this;
const { contentEl } = this;
contentEl.createEl('h2', {text: 'Import folder as Media DB entries'});
contentEl.createEl('h2', { text: 'Import folder as Media DB entries' });
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'});
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' });
const apiSelectorComponent = new DropdownComponent(apiSelectorWrapper);
apiSelectorComponent.onChange((value: string) => {
@ -39,41 +39,39 @@ export class MediaDbFolderImportModal extends Modal {
}
apiSelectorWrapper.appendChild(apiSelectorComponent.selectEl);
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
contentEl.createEl('h3', { text: 'Append note content to Media DB entry.' });
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'});
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 metadata fields with the same name.',
cls: 'media-db-plugin-list-text',
});
const appendContentToggleComponentWrapper = appendContentToggleElementWrapper.createEl('div', {cls: 'media-db-plugin-list-toggle'});
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);
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 metadata field that should be used as the title to query.'});
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
contentEl.createEl('h3', { text: 'The name of the metadata 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) => {
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'});
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
new Setting(contentEl)
.addButton(btn => {
@ -93,7 +91,7 @@ export class MediaDbFolderImportModal extends Modal {
}
onClose() {
const {contentEl} = this;
const { contentEl } = this;
contentEl.empty();
}
}

26
src/modals/MediaDbIdSearchModal.ts
View file

@ -1,7 +1,7 @@
import {ButtonComponent, DropdownComponent, Modal, Notice, Setting, TextComponent} from 'obsidian';
import {MediaTypeModel} from '../models/MediaTypeModel';
import { ButtonComponent, DropdownComponent, Modal, Notice, Setting, TextComponent } from 'obsidian';
import { MediaTypeModel } from '../models/MediaTypeModel';
import MediaDbPlugin from '../main';
import {ID_SEARCH_MODAL_DEFAULT_OPTIONS, IdSearchModalData, IdSearchModalOptions} from '../utils/ModalHelper';
import { ID_SEARCH_MODAL_DEFAULT_OPTIONS, IdSearchModalData, IdSearchModalOptions } from '../utils/ModalHelper';
export class MediaDbIdSearchModal extends Modal {
plugin: MediaDbPlugin;
@ -16,7 +16,6 @@ export class MediaDbIdSearchModal extends Modal {
submitCallback?: (res: IdSearchModalData, err?: Error) => void;
closeCallback?: (err?: Error) => void;
constructor(plugin: MediaDbPlugin, idSearchModalOptions: IdSearchModalOptions) {
idSearchModalOptions = Object.assign({}, ID_SEARCH_MODAL_DEFAULT_OPTIONS, idSearchModalOptions);
super(plugin.app);
@ -56,14 +55,14 @@ export class MediaDbIdSearchModal extends Modal {
this.searchBtn.setDisabled(false);
this.searchBtn.setButtonText('Searching...');
this.submitCallback({query: this.query, api: this.selectedApi});
this.submitCallback({ query: this.query, api: this.selectedApi });
}
}
onOpen() {
const {contentEl} = this;
const { contentEl } = this;
contentEl.createEl('h2', {text: this.title});
contentEl.createEl('h2', { text: this.title });
const placeholder = 'Search by id';
const searchComponent = new TextComponent(contentEl);
@ -75,11 +74,11 @@ export class MediaDbIdSearchModal extends Modal {
contentEl.appendChild(searchComponent.inputEl);
searchComponent.inputEl.focus();
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
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'});
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' });
const apiSelectorComponent = new DropdownComponent(apiSelectorWrapper);
apiSelectorComponent.onChange((value: string) => {
@ -90,7 +89,7 @@ export class MediaDbIdSearchModal extends Modal {
}
apiSelectorWrapper.appendChild(apiSelectorComponent.selectEl);
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
new Setting(contentEl)
.addButton(btn => {
@ -111,8 +110,7 @@ export class MediaDbIdSearchModal extends Modal {
onClose() {
this.closeCallback();
const {contentEl} = this;
const { contentEl } = this;
contentEl.empty();
}
}

20
src/modals/MediaDbPreviewModal.ts
View file

@ -1,8 +1,8 @@
import {ButtonComponent, MarkdownRenderer, Modal, Setting} from 'obsidian';
import { ButtonComponent, MarkdownRenderer, Modal, Setting } from 'obsidian';
import MediaDbPlugin from 'src/main';
import {MediaTypeModel} from 'src/models/MediaTypeModel';
import {PREVIEW_MODAL_DEFAULT_OPTIONS, PreviewModalData, PreviewModalOptions} from '../utils/ModalHelper';
import {CreateNoteOptions} from '../utils/Utils';
import { MediaTypeModel } from 'src/models/MediaTypeModel';
import { PREVIEW_MODAL_DEFAULT_OPTIONS, PreviewModalData, PreviewModalOptions } from '../utils/ModalHelper';
import { CreateNoteOptions } from '../utils/Utils';
export class MediaDbPreviewModal extends Modal {
plugin: MediaDbPlugin;
@ -37,15 +37,15 @@ export class MediaDbPreviewModal extends Modal {
}
async preview(): Promise<void> {
let {contentEl} = this;
let { contentEl } = this;
contentEl.addClass('media-db-plugin-preview-modal');
contentEl.createEl('h2', {text: this.title});
contentEl.createEl('h2', { text: this.title });
const previewWrapper = contentEl.createDiv({cls: 'media-db-plugin-preview-wrapper'});
const previewWrapper = contentEl.createDiv({ cls: 'media-db-plugin-preview-wrapper' });
for (let result of this.elements) {
previewWrapper.createEl('h3', {text: result.englishTitle});
previewWrapper.createEl('h3', { text: result.englishTitle });
const fileDiv = previewWrapper.createDiv();
let fileContent = await this.plugin.generateMediaDbNoteContents(result, this.createNoteOptions);
@ -54,7 +54,7 @@ export class MediaDbPreviewModal extends Modal {
MarkdownRenderer.renderMarkdown(fileContent, fileDiv, null, null);
}
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
const bottomSettingRow = new Setting(contentEl);
bottomSettingRow.addButton(btn => {
@ -66,7 +66,7 @@ export class MediaDbPreviewModal extends Modal {
bottomSettingRow.addButton(btn => {
btn.setButtonText('Ok');
btn.setCta();
btn.onClick(() => this.submitCallback({confirmed: true}));
btn.onClick(() => this.submitCallback({ confirmed: true }));
btn.buttonEl.addClass('media-db-plugin-button');
this.submitButton = btn;
});

38
src/modals/MediaDbSearchModal.ts
View file

@ -1,5 +1,5 @@
import {ButtonComponent, Modal, Notice, Setting, TextComponent, ToggleComponent} from 'obsidian';
import {MediaTypeModel} from '../models/MediaTypeModel';
import { ButtonComponent, Modal, Notice, Setting, TextComponent, ToggleComponent } from 'obsidian';
import { MediaTypeModel } from '../models/MediaTypeModel';
import MediaDbPlugin from '../main';
import {
ADVANCED_SEARCH_MODAL_DEFAULT_OPTIONS,
@ -9,8 +9,8 @@ import {
SearchModalData,
SearchModalOptions,
} from '../utils/ModalHelper';
import {MEDIA_TYPES} from '../utils/MediaTypeManager';
import {unCamelCase} from '../utils/Utils';
import { MEDIA_TYPES } from '../utils/MediaTypeManager';
import { unCamelCase } from '../utils/Utils';
export class MediaDbSearchModal extends Modal {
plugin: MediaDbPlugin;
@ -18,14 +18,13 @@ export class MediaDbSearchModal extends Modal {
query: string;
isBusy: boolean;
title: string;
selectedTypes: { name: string, selected: boolean }[];
selectedTypes: { name: string; selected: boolean }[];
searchBtn: ButtonComponent;
submitCallback?: (res: SearchModalData) => void;
closeCallback?: (err?: Error) => void;
constructor(plugin: MediaDbPlugin, searchModalOptions: SearchModalOptions) {
searchModalOptions = Object.assign({}, SEARCH_MODAL_DEFAULT_OPTIONS, searchModalOptions);
super(plugin.app);
@ -36,7 +35,7 @@ export class MediaDbSearchModal extends Modal {
this.query = searchModalOptions.prefilledSearchString;
for (const mediaType of MEDIA_TYPES) {
this.selectedTypes.push({name: mediaType, selected: searchModalOptions.preselectedTypes.contains(mediaType)});
this.selectedTypes.push({ name: mediaType, selected: searchModalOptions.preselectedTypes.contains(mediaType) });
}
}
@ -72,14 +71,14 @@ export class MediaDbSearchModal extends Modal {
this.searchBtn.setDisabled(false);
this.searchBtn.setButtonText('Searching...');
this.submitCallback({query: this.query, types: types});
this.submitCallback({ query: this.query, types: types });
}
}
onOpen() {
const {contentEl} = this;
const { contentEl } = this;
contentEl.createEl('h2', {text: this.title});
contentEl.createEl('h2', { text: this.title });
const placeholder = 'Search by title';
const searchComponent = new TextComponent(contentEl);
@ -92,27 +91,27 @@ export class MediaDbSearchModal extends Modal {
contentEl.appendChild(searchComponent.inputEl);
searchComponent.inputEl.focus();
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createEl('h3', {text: 'APIs to search'});
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
contentEl.createEl('h3', { text: 'APIs to search' });
for (const mediaType of MEDIA_TYPES) {
const apiToggleListElementWrapper = contentEl.createEl('div', {cls: 'media-db-plugin-list-wrapper'});
const apiToggleListElementWrapper = contentEl.createEl('div', { cls: 'media-db-plugin-list-wrapper' });
const apiToggleTextWrapper = apiToggleListElementWrapper.createEl('div', {cls: 'media-db-plugin-list-text-wrapper'});
apiToggleTextWrapper.createEl('span', {text: unCamelCase(mediaType), cls: 'media-db-plugin-list-text'});
const apiToggleTextWrapper = apiToggleListElementWrapper.createEl('div', { cls: 'media-db-plugin-list-text-wrapper' });
apiToggleTextWrapper.createEl('span', { text: unCamelCase(mediaType), cls: 'media-db-plugin-list-text' });
const apiToggleComponentWrapper = apiToggleListElementWrapper.createEl('div', {cls: 'media-db-plugin-list-toggle'});
const apiToggleComponentWrapper = apiToggleListElementWrapper.createEl('div', { cls: 'media-db-plugin-list-toggle' });
const apiToggleComponent = new ToggleComponent(apiToggleComponentWrapper);
apiToggleComponent.setTooltip(unCamelCase(mediaType));
apiToggleComponent.setValue(this.selectedTypes.find(x => x.name === mediaType).selected);
apiToggleComponent.onChange((value) => {
apiToggleComponent.onChange(value => {
this.selectedTypes.find(x => x.name === mediaType).selected = value;
});
apiToggleComponentWrapper.appendChild(apiToggleComponent.toggleEl);
}
contentEl.createDiv({cls: 'media-db-plugin-spacer'});
contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
new Setting(contentEl)
.addButton(btn => {
@ -133,8 +132,7 @@ export class MediaDbSearchModal extends Modal {
onClose() {
this.closeCallback();
const {contentEl} = this;
const { contentEl } = this;
contentEl.empty();
}
}

16
src/modals/MediaDbSearchResultModal.ts
View file

@ -1,7 +1,7 @@
import {MediaTypeModel} from '../models/MediaTypeModel';
import { MediaTypeModel } from '../models/MediaTypeModel';
import MediaDbPlugin from '../main';
import {SelectModal} from './SelectModal';
import {SELECT_MODAL_OPTIONS_DEFAULT, SelectModalData, SelectModalOptions} from '../utils/ModalHelper';
import { SelectModal } from './SelectModal';
import { SELECT_MODAL_OPTIONS_DEFAULT, SelectModalData, SelectModalOptions } from '../utils/ModalHelper';
export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
plugin: MediaDbPlugin;
@ -13,7 +13,6 @@ export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
closeCallback: (err?: Error) => void;
skipCallback: () => void;
constructor(plugin: MediaDbPlugin, selectModalOptions: SelectModalOptions) {
selectModalOptions = Object.assign({}, SELECT_MODAL_OPTIONS_DEFAULT, selectModalOptions);
super(plugin.app, selectModalOptions.elements, selectModalOptions.multiSelect);
@ -42,9 +41,9 @@ export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
// Renders each suggestion item.
renderElement(item: MediaTypeModel, el: HTMLElement) {
el.createEl('div', {text: this.plugin.mediaTypeManager.getFileName(item)});
el.createEl('small', {text: `${item.getSummary()}\n`});
el.createEl('small', {text: `${item.type.toUpperCase() + (item.subType ? ` (${item.subType})` : '')} from ${item.dataSource}`});
el.createEl('div', { text: this.plugin.mediaTypeManager.getFileName(item) });
el.createEl('small', { text: `${item.getSummary()}\n` });
el.createEl('small', { text: `${item.type.toUpperCase() + (item.subType ? ` (${item.subType})` : '')} from ${item.dataSource}` });
}
// Perform action on the selected suggestion.
@ -52,7 +51,7 @@ export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
if (!this.busy) {
this.busy = true;
this.submitButton.setButtonText('Creating entry...');
this.submitCallback({selected: this.selectModalElements.filter(x => x.isActive()).map(x => x.value)});
this.submitCallback({ selected: this.selectModalElements.filter(x => x.isActive()).map(x => x.value) });
}
}
@ -62,7 +61,6 @@ export class MediaDbSearchResultModal extends SelectModal<MediaTypeModel> {
}
onClose() {
this.closeCallback();
}
}

22
src/modals/SelectModal.ts
View file

@ -1,6 +1,6 @@
import {App, ButtonComponent, Modal, Setting} from 'obsidian';
import {SelectModalElement} from './SelectModalElement';
import {mod} from '../utils/Utils';
import { App, ButtonComponent, Modal, Setting } from 'obsidian';
import { SelectModalElement } from './SelectModalElement';
import { mod } from '../utils/Utils';
export abstract class SelectModal<T> extends Modal {
allowMultiSelect: boolean;
@ -17,7 +17,6 @@ export abstract class SelectModal<T> extends Modal {
elements: T[];
selectModalElements: SelectModalElement<T>[];
protected constructor(app: App, elements: T[], allowMultiSelect: boolean = true) {
super(app);
this.allowMultiSelect = allowMultiSelect;
@ -34,18 +33,18 @@ export abstract class SelectModal<T> extends Modal {
this.elements = elements;
this.selectModalElements = [];
this.scope.register([], 'ArrowUp', (evt) => {
this.scope.register([], 'ArrowUp', evt => {
this.highlightUp();
evt.preventDefault();
});
this.scope.register([], 'ArrowDown', (evt) => {
this.scope.register([], 'ArrowDown', evt => {
this.highlightDown();
evt.preventDefault();
});
this.scope.register([], 'ArrowRight', () => {
this.activateHighlighted();
});
this.scope.register([], ' ', (evt) => {
this.scope.register([], ' ', evt => {
if (this.elementWrapper && this.elementWrapper === document.activeElement) {
this.activateHighlighted();
evt.preventDefault();
@ -77,13 +76,13 @@ export abstract class SelectModal<T> extends Modal {
}
async onOpen() {
const {contentEl, titleEl} = this;
const { contentEl, titleEl } = this;
titleEl.createEl('h2', {text: this.title});
titleEl.createEl('h2', { text: this.title });
contentEl.addClass('media-db-plugin-select-modal');
contentEl.createEl('p', {text: this.description});
contentEl.createEl('p', { text: this.description });
this.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;
@ -171,5 +170,4 @@ export abstract class SelectModal<T> extends Modal {
return this.selectModalElements.filter(x => x.id === nextId).first();
}
}

5
src/modals/SelectModalElement.ts
View file

@ -1,4 +1,4 @@
import {SelectModal} from './SelectModal';
import { SelectModal } from './SelectModal';
export class SelectModalElement<T> {
selectModal: SelectModal<T>;
@ -21,7 +21,7 @@ export class SelectModalElement<T> {
this.activeClass = 'media-db-plugin-select-element-selected';
this.hoverClass = 'media-db-plugin-select-element-hover';
this.element = parentElement.createDiv({cls: this.cssClass});
this.element = parentElement.createDiv({ cls: this.cssClass });
this.element.id = this.getHTMLId();
this.element.on('click', '#' + this.getHTMLId(), () => {
this.setActive(!this.active);
@ -83,5 +83,4 @@ export class SelectModalElement<T> {
this.element.removeClass(cssClass);
}
}
}