Merge pull request #7 from OfficerHalf/folder-suggest

feat: add folder suggester for selecting folder path

src/folder-suggest.ts

@@ -1,9 +1,11 @@
 import { App, FuzzySuggestModal, TFolder } from 'obsidian';
 
 export class FolderSuggestModal extends FuzzySuggestModal<TFolder> {
+  items: TFolder[] = [];
+  callback: (folder: TFolder) => void | undefined;
   selectedFolder: TFolder | null = null;
 
-  constructor(app: App, private readonly input: HTMLInputElement, private readonly items: TFolder[]) {
+  constructor(app: App) {
     super(app);
   }
 
@@ -16,8 +18,9 @@ export class FolderSuggestModal extends FuzzySuggestModal<TFolder> {
   }
 
   onChooseItem(item: TFolder): void {
-    this.input.value = item.path;
-    this.selectedFolder = item;
+    if (this.callback) {
+      this.callback(item);
+    }
     this.close();
   }
 }

src/settings.ts

@@ -1,8 +1,11 @@
-import { App, PluginSettingTab } from 'obsidian';
+import { App, PluginSettingTab, setIcon, TFolder } from 'obsidian';
+import { FolderSuggestModal } from './folder-suggest';
 import { AutoClassPluginSettings } from './interfaces';
 import { AutoClassPlugin } from './plugin';
 
 export class AutoClassPluginSettingsTab extends PluginSettingTab {
+  private readonly folderSuggestModal: FolderSuggestModal = new FolderSuggestModal(this.app);
+
   constructor(readonly app: App, private readonly plugin: AutoClassPlugin) {
     super(app, plugin);
   }
@@ -52,12 +55,28 @@ export class AutoClassPluginSettingsTab extends PluginSettingTab {
       cls: ['auto-class-settings__table-row', 'auto-class-settings__input-row']
     });
     const pathCell = inputRow.createEl('td');
-    const pathInput = pathCell.createEl('input', {
+    const pathCellFlexContainer = pathCell.createDiv({ cls: 'auto-class-settings__flex-container' });
+    const pathButton = pathCellFlexContainer.createEl('button', { cls: 'auto-class-settings__input-button' });
+    setIcon(pathButton, 'folder');
+    const folders: TFolder[] = this.app.vault.getAllLoadedFiles().filter((f) => f instanceof TFolder) as TFolder[];
+    pathButton.addEventListener('click', () => {
+      this.folderSuggestModal.selectedFolder = null;
+      this.folderSuggestModal.items = folders;
+      this.folderSuggestModal.callback = (folder: TFolder) => {
+        pathInput.value = folder.path;
+      };
+      this.folderSuggestModal.open();
+    });
+    // const pathInputContainer = pathCell.createDiv();
+    const pathInput = pathCellFlexContainer.createEl('input', {
       attr: { placeholder: 'Folder', type: 'text' }
     });
 
     const classCell = inputRow.createEl('td');
-    const classInput = classCell.createEl('input', { attr: { placeholder: 'class1, class2', type: 'text' } });
+    const classCellFlexContainer = classCell.createDiv({ cls: 'auto-class-settings__flex-container' });
+    const classInput = classCellFlexContainer.createEl('input', {
+      attr: { placeholder: 'class1, class2', type: 'text' }
+    });
 
     const addCell = inputRow.createEl('td', { cls: 'auto-class-settings__button-cell' });
     const addButton = addCell.createEl('button', { cls: 'mod-cta', text: 'Add' });

src/styles.scss

@@ -13,9 +13,12 @@
     }
   }
   &__input-row {
-    border-bottom: 1px solid var(--background-modifier-border);
+    box-shadow: 0px 1px var(--background-modifier-border);
+  }
+  &__flex-container {
+    display: flex;
     input {
-      width: 150px;
+      flex-grow: 1;
       background-color: transparent;
       border: 0;
       padding: 0;