obsidian-plugin/rifts-obsidian-laboratory_anki-integration
1
0
Fork 0
mirror of https://github.com/rifts-obsidian-laboratory/anki-integration.git synced 2026-07-22 05:42:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactoring - Added GenerateTagsSection()

Browse source
This commit is contained in:
Noah Boos 2025-07-08 18:54:27 +02:00
parent 01504871d3
commit d4bad789ba
3 changed files with 78 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/modals/AddNoteFromCodeBlockModal.ts
View file

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

46
src/modals/AddNoteFromMetadataModal.ts
View file

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

72
src/modals/modalsUtils.ts
View file

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