From d4bad789bacc6de50d71a9fcf118d6c93841d410 Mon Sep 17 00:00:00 2001 From: Noah Boos Date: Tue, 8 Jul 2025 18:54:27 +0200 Subject: [PATCH] Refactoring - Added GenerateTagsSection() --- src/modals/AddNoteFromCodeBlockModal.ts | 51 ++---------------- src/modals/AddNoteFromMetadataModal.ts | 46 ++-------------- src/modals/modalsUtils.ts | 72 ++++++++++++++++++++++++- 3 files changed, 78 insertions(+), 91 deletions(-) diff --git a/src/modals/AddNoteFromCodeBlockModal.ts b/src/modals/AddNoteFromCodeBlockModal.ts index 4f220da..5a0caf3 100644 --- a/src/modals/AddNoteFromCodeBlockModal.ts +++ b/src/modals/AddNoteFromCodeBlockModal.ts @@ -19,7 +19,7 @@ import { ReadFileContent } from "../utils"; import {ProcessAddNote} from "../AnkiConnect"; -import {GenerateDeckSelector, GenerateModelSelector} from "./modalsUtils"; +import {GenerateDeckSelector, GenerateModelSelector, GenerateTagsSection} from "./modalsUtils"; import {Drop} from "esbuild"; /** @@ -81,52 +81,9 @@ export class AddNoteFromCodeBlockModal extends Modal { const modelSelector: DropdownComponent = GenerateModelSelector(dropdownContainer, ankiData); - /** - * @type {HTMLDivElement} tagsHeader - * @description A container serving as the head part of the tags section. - */ - const tagsHeader: HTMLDivElement = AddContainer(contentEl, [ - "ankiIntegrationModal__container--flex-row", - "ankiIntegrationModal__container--flex-align-center", - "ankiIntegrationModal__container--flex-justify-space-between", - ]); - AddSubtitle(tagsHeader, "Tags"); - /** - * @type {ButtonComponent} addTagFieldButton - * @description Button used by the user to add a tag field in the pop-up. - */ - let addTagFieldButton: ButtonComponent = AddButton(tagsHeader, "", "circle-plus"); - addTagFieldButton.buttonEl.removeClasses([ - "ankiIntegrationModal__button--default-width", - "ankiIntegrationModal__button--default-margin", - "ankiIntegrationModal__button--default-padding" - ]); - /** - * @type {HTMLDivElement} tagsBody - * @description A container serving as the body of the tags section. - */ - const tagsBody: HTMLDivElement = AddContainer(contentEl); - tagsBody.addClasses([ - "ankiIntegrationModal__container--flex-row", - "ankiIntegrationModal__container--flex-wrap", - "ankiIntegrationModal__container--gap-16px" - ]) - - const tagsBodyParagraph: HTMLElement = AddParagraph(tagsBody, "No tags will be added to this note, click the \"+\" button to add a new one."); - - /** - * @description addTagFieldButton's onClick() event listener used to add a tag input group in tagsBody. - */ - addTagFieldButton.onClick(async () => { - if (tagsBody.firstChild == tagsBodyParagraph) { - tagsBody.removeChild(tagsBodyParagraph); - } - /** - * @type {HTMLDivElement} inputGroup - * @description A container storing the input field and the delete input field button. - */ - const tagInputGroup: HTMLDivElement = AddTagInputGroup(tagsBody, tagsBodyParagraph); - }); + const tagsContainer: HTMLDivElement = GenerateTagsSection(contentEl); + const tagsBody: HTMLDivElement = tagsContainer.querySelector('#tagsBody'); + const tagsBodyParagraph: HTMLElement = tagsContainer.querySelector('#tagsBodyTip'); AddSubtitle(contentEl, "Fields"); diff --git a/src/modals/AddNoteFromMetadataModal.ts b/src/modals/AddNoteFromMetadataModal.ts index a7dd60b..7953152 100644 --- a/src/modals/AddNoteFromMetadataModal.ts +++ b/src/modals/AddNoteFromMetadataModal.ts @@ -17,7 +17,7 @@ import { AddTitle, AutoAssignDeck, AutoAssignModel, AutoGenerateFields, BuildTagsArray, CreateFieldsGroupData, FetchModelByName } from "../utils"; -import {GenerateDeckSelector, GenerateModelSelector} from "./modalsUtils"; +import {GenerateDeckSelector, GenerateModelSelector, GenerateTagsSection} from "./modalsUtils"; /** * A modal dialog for creating a new Anki note by using metadata as pre-filled values. @@ -91,38 +91,9 @@ export class AddNoteFromMetadataModal extends Modal { const modelSelector: DropdownComponent = GenerateModelSelector(dropdownContainer, ankiData); - /** - * @type {HTMLDivElement} tagsHeader - * @description A container serving as the head part of the tags section. - */ - const tagsHeader: HTMLDivElement = AddContainer(contentEl, [ - "ankiIntegrationModal__container--flex-row", - "ankiIntegrationModal__container--flex-align-center", - "ankiIntegrationModal__container--flex-justify-space-between", - ]); - AddSubtitle(tagsHeader, "Tags"); - /** - * @type {ButtonComponent} addTagFieldButton - * @description Button used by the user to add a tag field in the pop-up. - */ - let addTagFieldButton: ButtonComponent = AddButton(tagsHeader, "", "circle-plus"); - addTagFieldButton.buttonEl.removeClasses([ - "ankiIntegrationModal__button--default-width", - "ankiIntegrationModal__button--default-margin", - "ankiIntegrationModal__button--default-padding" - ]); - /** - * @type {HTMLDivElement} tagsBody - * @description A container serving as the body of the tags section. - */ - const tagsBody: HTMLDivElement = AddContainer(contentEl); - tagsBody.addClasses([ - "ankiIntegrationModal__container--flex-row", - "ankiIntegrationModal__container--flex-wrap", - "ankiIntegrationModal__container--gap-16px" - ]); - - const tagsBodyParagraph: HTMLElement = AddParagraph(tagsBody, "No tags will be added to this note, click the \"+\" button to add a new one."); + const tagsContainer: HTMLDivElement = GenerateTagsSection(contentEl); + const tagsBody: HTMLDivElement = tagsContainer.querySelector('#tagsBody'); + const tagsBodyParagraph: HTMLElement = tagsContainer.querySelector('#tagsBodyTip'); if (yaml != null && yaml["cardTags"] != null) { tagsBody.removeChild(tagsBodyParagraph); @@ -130,15 +101,6 @@ export class AddNoteFromMetadataModal extends Modal { AddTagInputGroup(tagsBody, tagsBodyParagraph, yaml["cardTags"][i]); } } - /** - * @description addTagFieldButton's onClick() event listener used to add a tag input group in tagsBody. - */ - addTagFieldButton.onClick(async () => { - if (tagsBody.firstChild == tagsBodyParagraph) { - tagsBody.removeChild(tagsBodyParagraph); - } - const tagInputGroup: HTMLDivElement = AddTagInputGroup(tagsBody, tagsBodyParagraph); - }); // Add the "Fields" section subtitle. AddSubtitle(contentEl, "Fields"); diff --git a/src/modals/modalsUtils.ts b/src/modals/modalsUtils.ts index a583950..c4ac416 100644 --- a/src/modals/modalsUtils.ts +++ b/src/modals/modalsUtils.ts @@ -1,5 +1,13 @@ -import {DropdownComponent} from "obsidian"; -import {AddDropdown, AddOptionsToDropdownFromDataset} from "../utils"; +import {ButtonComponent, DropdownComponent} from "obsidian"; +import { + AddButton, + AddContainer, + AddDropdown, + AddOptionsToDropdownFromDataset, + AddParagraph, + AddSubtitle, + AddTagInputGroup +} from "../utils"; export function GenerateDeckSelector(parent: HTMLDivElement, ankiData: Object) { /** @@ -33,4 +41,64 @@ export function GenerateModelSelector(parent: HTMLDivElement, ankiData: Object) AddOptionsToDropdownFromDataset(modelSelector, modelKeys, "name", "name", ankiData["modelsData"]); return modelSelector; +} + +export function GenerateTagsSection(parent: HTMLElement) { + /** + * + */ + const tagsContainer: HTMLDivElement = AddContainer(parent, [ + "ankiIntegrationModal__container--flex-column" + ]) + /** + * @type {HTMLDivElement} tagsHeader + * @description A container serving as the head part of the tags section. + */ + const tagsHeader: HTMLDivElement = AddContainer(tagsContainer, [ + "ankiIntegrationModal__container--flex-row", + "ankiIntegrationModal__container--flex-align-center", + "ankiIntegrationModal__container--flex-justify-space-between", + ]); + AddSubtitle(tagsHeader, "Tags"); + /** + * @type {ButtonComponent} addTagFieldButton + * @description Button used by the user to add a tag field in the pop-up. + */ + let addTagFieldButton: ButtonComponent = AddButton(tagsHeader, "", "circle-plus"); + addTagFieldButton.buttonEl.removeClasses([ + "ankiIntegrationModal__button--default-width", + "ankiIntegrationModal__button--default-margin", + "ankiIntegrationModal__button--default-padding" + ]); + /** + * @type {HTMLDivElement} tagsBody + * @description A container serving as the body of the tags section. + */ + const tagsBody: HTMLDivElement = AddContainer( + tagsContainer, + [ + "ankiIntegrationModal__container--flex-row", + "ankiIntegrationModal__container--flex-wrap", + "ankiIntegrationModal__container--gap-16px" + ], + "tagsBody") + ; + + const tagsBodyParagraph: HTMLElement = AddParagraph(tagsBody, "No tags will be added to this note, click the \"+\" button to add a new one.", [], "tagsBodyTip"); + + /** + * @description addTagFieldButton's onClick() event listener used to add a tag input group in tagsBody. + */ + addTagFieldButton.onClick(async () => { + if (tagsBody.firstChild == tagsBodyParagraph) { + tagsBody.removeChild(tagsBodyParagraph); + } + /** + * @type {HTMLDivElement} inputGroup + * @description A container storing the input field and the delete input field button. + */ + const tagInputGroup: HTMLDivElement = AddTagInputGroup(tagsBody, tagsBodyParagraph); + }); + + return tagsContainer; } \ No newline at end of file