779 lines
22 KiB
TypeScript
779 lines
22 KiB
TypeScript
import { invoke } from "@tauri-apps/api/core";
|
|
import { save } from "@tauri-apps/plugin-dialog";
|
|
import { Note, Settings } from "./model";
|
|
import { createWorker } from "tesseract.js";
|
|
import { writeTextFile } from "@tauri-apps/plugin-fs";
|
|
import { homeDir } from "@tauri-apps/api/path";
|
|
|
|
let notesMsgEl: HTMLElement | null;
|
|
|
|
let createNoteContentEl: HTMLTextAreaElement | null;
|
|
let createNoteTagEl: HTMLInputElement | null;
|
|
|
|
let searchbarEl: HTMLInputElement | null;
|
|
let noteSidebarContainerEl: HTMLDivElement | null;
|
|
let searchbarContents = "";
|
|
|
|
let noteArray: Note[] = [];
|
|
|
|
/** ID of current note, if we're editing an existing note */
|
|
let currentNoteId: number | null = null;
|
|
/** reverse the order of note by id in the sidebar */
|
|
let reversed = true;
|
|
let idModalActive = false;
|
|
|
|
let typingTimer: number | null = null;
|
|
const AUTOSAVE_DELAY = 5000;
|
|
|
|
enum EditorState {
|
|
NEW,
|
|
EDITING,
|
|
}
|
|
|
|
enum SearchState {
|
|
EMPTY,
|
|
RESULTS,
|
|
}
|
|
|
|
/** Editor always initializes in the NEW state */
|
|
let editorState = EditorState.NEW;
|
|
let searchState = SearchState.EMPTY;
|
|
|
|
let settings: Settings | null = null;
|
|
|
|
/**
|
|
* Saves the note.
|
|
* Or updates an existing note depending on editor state
|
|
* TODO: save note when switching to prevent data loss
|
|
*/
|
|
async function saveNote() {
|
|
if (createNoteContentEl && createNoteTagEl) {
|
|
switch (editorState) {
|
|
case EditorState.NEW:
|
|
console.log("creating new note..");
|
|
await invoke("create_note", {
|
|
content: createNoteContentEl.value,
|
|
tag: createNoteTagEl.value,
|
|
});
|
|
//clearEditor();
|
|
refreshSidebarAndOpenLatestNote();
|
|
break;
|
|
case EditorState.EDITING:
|
|
console.log("updating existing note..");
|
|
if (currentNoteId !== null) {
|
|
await invoke("update_specific_note", {
|
|
id: currentNoteId,
|
|
content: createNoteContentEl.value,
|
|
tag: createNoteTagEl.value,
|
|
});
|
|
// do not clear the editor
|
|
//clearEditor();
|
|
} else {
|
|
console.error("No note is currently being edited");
|
|
}
|
|
break;
|
|
}
|
|
showNotes();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Retrieve Notes from DB and fill the sidebar with them.
|
|
*
|
|
* If there's something in the searchbar, do not clear that.
|
|
*/
|
|
async function showNotes() {
|
|
if (notesMsgEl) {
|
|
if (searchState == SearchState.EMPTY) {
|
|
const array: Array<any> = await retrieveNotes();
|
|
|
|
noteArray = array.map((jsonObj) => ({
|
|
id: jsonObj.id,
|
|
content: jsonObj.content,
|
|
date: jsonObj.date,
|
|
tag: jsonObj.tag,
|
|
}));
|
|
|
|
fillNoteSidebar(noteArray, reversed);
|
|
} else {
|
|
searchNote(searchbarContents);
|
|
}
|
|
}
|
|
}
|
|
async function retrieveNotes(): Promise<Array<JSON>> {
|
|
const notesString: string = await invoke("get_notes_list");
|
|
const notesJson = JSON.parse(notesString);
|
|
|
|
return notesJson;
|
|
}
|
|
|
|
/**
|
|
* Handle even listeners on load.
|
|
* This does not handle listeners for generated fields like
|
|
* the Notes in the sidebar.
|
|
* TODO: consistency
|
|
*/
|
|
window.addEventListener("DOMContentLoaded", async () => {
|
|
// settings
|
|
settings = await loadSettings();
|
|
// db
|
|
await invoke("init_db");
|
|
|
|
console.log("ACTUAL SETTINGS IN FRONTEND: ", settings.fontSize);
|
|
createNoteContentEl = document.querySelector("#create-input");
|
|
createNoteTagEl = document.querySelector("#create-tag");
|
|
searchbarEl = document.querySelector("#note-searchbar");
|
|
notesMsgEl = document.querySelector("#notes-list");
|
|
|
|
// apply font size
|
|
if (createNoteContentEl) {
|
|
createNoteContentEl.style.fontSize = settings.fontSize + "px";
|
|
}
|
|
|
|
showNotes();
|
|
document.querySelector("#save-button")?.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
saveNote();
|
|
showNotes();
|
|
});
|
|
document.querySelector("#new-button")?.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
clearEditor();
|
|
showNotes();
|
|
});
|
|
document
|
|
.querySelector("#show-notes-button")
|
|
?.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
showNotes();
|
|
});
|
|
document.querySelector("#export-button")?.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
exportNote(createNoteContentEl ? createNoteContentEl.value : null);
|
|
});
|
|
document.querySelector("#settings-button")?.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
handleOpenSettingsModal();
|
|
});
|
|
|
|
// Pressing TAB should insert intends in the editor.
|
|
// This could potentially cause issues later...
|
|
document
|
|
.querySelector("#create-input")
|
|
?.addEventListener("keydown", (event: Event) => {
|
|
const e = event as KeyboardEvent;
|
|
if (e.key === "Tab") {
|
|
e.preventDefault();
|
|
const target = e.target as HTMLTextAreaElement;
|
|
const start = target.selectionStart;
|
|
const end = target.selectionEnd;
|
|
|
|
const newValue =
|
|
target.value.substring(0, start) + "\t" + target.value.substring(end);
|
|
|
|
target.value = newValue;
|
|
|
|
target.setSelectionRange(start + 1, start + 1);
|
|
}
|
|
});
|
|
|
|
// searchbar event listener
|
|
|
|
document
|
|
.querySelector("#note-searchbar")
|
|
?.addEventListener("input", (event: Event) => {
|
|
const target = event.target as HTMLInputElement;
|
|
const input = target.value;
|
|
|
|
if (target.value == "") {
|
|
searchState = SearchState.EMPTY;
|
|
} else {
|
|
searchState = SearchState.RESULTS;
|
|
}
|
|
searchbarContents = input;
|
|
|
|
searchNote(input);
|
|
});
|
|
|
|
// sidebar reverse toggle
|
|
|
|
let reverseIconAscEl = document.querySelector(
|
|
"#reverse-icon-asc"
|
|
) as HTMLImageElement | null;
|
|
let reverseIconDescEl = document.querySelector(
|
|
"#reverse-icon-desc"
|
|
) as HTMLImageElement | null;
|
|
if (reverseIconAscEl && reverseIconDescEl) {
|
|
reverseIconDescEl.style.display = "none";
|
|
|
|
const toggle = () => {
|
|
toggleReverse(
|
|
reverseIconAscEl as HTMLImageElement,
|
|
reverseIconDescEl as HTMLImageElement
|
|
);
|
|
};
|
|
|
|
reverseIconAscEl.addEventListener("click", toggle);
|
|
reverseIconDescEl.addEventListener("click", toggle);
|
|
}
|
|
|
|
// auto-save timer
|
|
createNoteContentEl?.addEventListener("keyup", () => {
|
|
if (editorState === EditorState.EDITING) {
|
|
if (typingTimer) {
|
|
clearTimeout(typingTimer);
|
|
}
|
|
typingTimer = window.setTimeout(() => saveNote(), AUTOSAVE_DELAY);
|
|
}
|
|
});
|
|
|
|
if (createNoteContentEl) {
|
|
createNoteContentEl.style.fontSize = settings.fontSize;
|
|
}
|
|
|
|
// OCR
|
|
const uploadOcrImageButtonEl = document.getElementById(
|
|
"image-button"
|
|
) as HTMLButtonElement;
|
|
const ocrFileInputEl = document.getElementById(
|
|
"fileInput"
|
|
) as HTMLInputElement;
|
|
|
|
uploadOcrImageButtonEl.addEventListener("click", () => {
|
|
ocrFileInputEl.click(); // Simulate click on the file input
|
|
});
|
|
|
|
ocrFileInputEl.addEventListener("change", (event) => {
|
|
const files = (event.target as HTMLInputElement).files;
|
|
if (files) {
|
|
console.log("Selected file:", files[0].name);
|
|
ocrFileInputEl.src = URL.createObjectURL(files[0]);
|
|
(async () => {
|
|
// TODO: change ocr language in settings
|
|
const worker = await createWorker(
|
|
settings ? settings.ocrLanguage : "eng"
|
|
);
|
|
const ret = await worker.recognize(files[0]);
|
|
console.log(ret.data.text);
|
|
if (createNoteContentEl) [(createNoteContentEl.value += ret.data.text)];
|
|
await worker.terminate();
|
|
})();
|
|
}
|
|
});
|
|
|
|
// Resizable Sidebar
|
|
const sidebar = document.querySelector(".sidebar") as HTMLDivElement;
|
|
const resizableHandle = document.querySelector(
|
|
".resizable-handle"
|
|
) as HTMLDivElement;
|
|
|
|
let isResizing = false;
|
|
|
|
resizableHandle.addEventListener("mousedown", () => {
|
|
isResizing = true;
|
|
document.body.style.cursor = "ew-resize";
|
|
});
|
|
|
|
document.addEventListener("mousemove", (e) => {
|
|
if (!isResizing) return;
|
|
const newWidth = e.clientX - sidebar.getBoundingClientRect().left;
|
|
sidebar.style.width = `${newWidth}px`;
|
|
});
|
|
|
|
document.addEventListener("mouseup", () => {
|
|
isResizing = false;
|
|
document.body.style.cursor = "default";
|
|
});
|
|
|
|
refreshContextMenuElements();
|
|
});
|
|
|
|
async function loadSettings(): Promise<Settings> {
|
|
const defaultSettings: Settings = {
|
|
fontSize: "16px",
|
|
ocrLanguage: "eng",
|
|
};
|
|
|
|
try {
|
|
let loadedSettingsString: string = await invoke("load_settings");
|
|
console.log(loadedSettingsString);
|
|
|
|
if (loadedSettingsString === "") {
|
|
await invoke("init_settings");
|
|
return defaultSettings;
|
|
}
|
|
|
|
const loadedSettings = JSON.parse(loadedSettingsString);
|
|
return loadedSettings as Settings;
|
|
} catch (error) {
|
|
console.error("An error occurred while loading settings:", error);
|
|
return defaultSettings;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* We need to add new event listeners every time we refresh the note list
|
|
*/
|
|
function refreshContextMenuElements() {
|
|
const elements: NodeListOf<HTMLElement> = document.querySelectorAll(
|
|
".rightclick-element"
|
|
);
|
|
const contextMenu = document.getElementById("contextMenu");
|
|
|
|
if (contextMenu) {
|
|
elements.forEach((element) => {
|
|
element.addEventListener("contextmenu", (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
|
|
// get the position with mouse and everything
|
|
const mouseX = e.clientX;
|
|
const mouseY = e.clientY;
|
|
|
|
// Calculate the position of the context menu relative to the mouse cursor
|
|
const menuWidth = contextMenu.offsetWidth;
|
|
const menuHeight = contextMenu.offsetHeight;
|
|
const viewportWidth = window.innerWidth;
|
|
const viewportHeight = window.innerHeight;
|
|
|
|
let posX =
|
|
mouseX + menuWidth > viewportWidth ? mouseX - menuWidth : mouseX;
|
|
let posY =
|
|
mouseY + menuHeight > viewportHeight ? mouseY - menuHeight : mouseY;
|
|
|
|
contextMenu.style.display = "block";
|
|
contextMenu.style.left = `${posX}px`;
|
|
contextMenu.style.top = `${posY}px`;
|
|
|
|
const noteIdElement = element.querySelector(".sidebar-note-id");
|
|
if (noteIdElement) {
|
|
const noteIdStr = noteIdElement.textContent;
|
|
if (noteIdStr) {
|
|
const noteId: Number = parseInt(noteIdStr);
|
|
showNoteSidebarContextMenu(noteId);
|
|
}
|
|
} else {
|
|
console.error(".sidebar-note-id element not found within the note.");
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function fillNoteSidebar(noteArray: Note[], reverse: boolean) {
|
|
noteSidebarContainerEl = document.querySelector("#note-sidebar-container");
|
|
|
|
if (noteSidebarContainerEl) {
|
|
// clear previously existing elements
|
|
noteSidebarContainerEl.innerHTML = "";
|
|
|
|
reverse ? noteArray.reverse() : noteArray;
|
|
|
|
noteArray.forEach((note) => {
|
|
// Create HTML elements for each note
|
|
const noteEl: HTMLDivElement = document.createElement("div");
|
|
noteEl.classList.add("sidebar-note");
|
|
noteEl.classList.add("rightclick-element");
|
|
noteEl.addEventListener(
|
|
"click",
|
|
() => handleSidebarNoteClick(note.id),
|
|
false
|
|
);
|
|
|
|
const idSpan: HTMLSpanElement = document.createElement("span");
|
|
idSpan.classList.add("sidebar-note-id");
|
|
idSpan.textContent = note.id.toString();
|
|
|
|
const contentSpan: HTMLSpanElement = document.createElement("span");
|
|
contentSpan.classList.add("sidebar-note-content");
|
|
|
|
// Show ... when text is too long
|
|
contentSpan.textContent =
|
|
note.content.length > 80
|
|
? note.content.substring(0, 80) + "..."
|
|
: (note.content as string);
|
|
contentSpan.title = note.content as string;
|
|
|
|
const tagSpan: HTMLSpanElement = document.createElement("span");
|
|
tagSpan.classList.add("sidebar-note-tag");
|
|
tagSpan.textContent =
|
|
note.tag.length > 9
|
|
? note.tag.substring(0, 11) + ".."
|
|
: (note.tag as string);
|
|
|
|
noteEl.appendChild(idSpan);
|
|
noteEl.appendChild(contentSpan);
|
|
noteEl.appendChild(tagSpan);
|
|
|
|
// Append noteEl to the container, if it still exists?
|
|
noteSidebarContainerEl
|
|
? noteSidebarContainerEl.appendChild(noteEl)
|
|
: null;
|
|
});
|
|
|
|
refreshContextMenuElements();
|
|
}
|
|
}
|
|
|
|
function handleSidebarNoteClick(id: Number): any {
|
|
console.log("clicked note " + id);
|
|
if (createNoteContentEl && createNoteTagEl) {
|
|
// search for note
|
|
let n: Note = {
|
|
id: 0,
|
|
content: "undefined",
|
|
date: "undefined",
|
|
tag: "undefined",
|
|
};
|
|
|
|
noteArray.forEach((note) => {
|
|
if (note.id === id) {
|
|
n = note;
|
|
}
|
|
});
|
|
|
|
if (n) {
|
|
// save if there's something in the editor currently
|
|
// before we open the new note to prevent data loss
|
|
if (createNoteContentEl.value != "") {
|
|
saveNote();
|
|
}
|
|
|
|
openNote(n);
|
|
} else {
|
|
// don't destory currently editing note if this fails
|
|
console.error("Error fetching note");
|
|
}
|
|
}
|
|
}
|
|
|
|
function showNoteSidebarContextMenu(noteId: Number) {
|
|
const contextMenu = document.getElementById("contextMenu");
|
|
const deleteButton = document.getElementById("deleteButton");
|
|
|
|
if (contextMenu && deleteButton) {
|
|
deleteButton.addEventListener("click", async function () {
|
|
console.log("Deleting...");
|
|
await invoke("delete_specific_note", {
|
|
id: noteId,
|
|
});
|
|
// hide after delete
|
|
contextMenu.style.display = "none";
|
|
showNotes();
|
|
});
|
|
|
|
// hide when clicking outside of it
|
|
document.addEventListener("click", function (event) {
|
|
if (!contextMenu.contains(event.target as Node)) {
|
|
contextMenu.style.display = "none";
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* When a note is opened, the editor will switch to the EDITING state and get filled with
|
|
* Note content
|
|
*/
|
|
function openNote(note: Note) {
|
|
if (createNoteContentEl && createNoteTagEl) {
|
|
createNoteContentEl.value = note.content as string;
|
|
createNoteTagEl.value = note.tag as string;
|
|
currentNoteId = note.id as number;
|
|
// switch state
|
|
editorState = EditorState.EDITING;
|
|
createNoteContentEl.focus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* When new note is clicked, clear the editor content and switch Editor state
|
|
*/
|
|
function clearEditor() {
|
|
if (createNoteContentEl && createNoteTagEl) {
|
|
createNoteContentEl.value = "";
|
|
createNoteTagEl.value = "";
|
|
currentNoteId = null;
|
|
editorState = EditorState.NEW;
|
|
}
|
|
}
|
|
|
|
// Listen for global key presses
|
|
document.addEventListener("keydown", (e) => handleKeyboardShortcuts(e));
|
|
|
|
/**
|
|
* Handle global keyboard shortcuts like save, search, new
|
|
*/
|
|
function handleKeyboardShortcuts(event: KeyboardEvent) {
|
|
// save
|
|
if (event.ctrlKey && event.key === "s") {
|
|
event.preventDefault();
|
|
saveNote();
|
|
}
|
|
// new
|
|
if (event.ctrlKey && event.key === "n") {
|
|
event.preventDefault();
|
|
clearEditor();
|
|
}
|
|
// refresh
|
|
if (event.ctrlKey && event.key === "r") {
|
|
event.preventDefault();
|
|
showNotes();
|
|
}
|
|
// focus searchbox
|
|
if (event.ctrlKey && event.key === "f") {
|
|
event.preventDefault();
|
|
if (searchbarEl) {
|
|
searchbarEl.focus();
|
|
} else {
|
|
console.error("failed to focus on searchbar");
|
|
}
|
|
}
|
|
// open by id: open modal
|
|
if (event.ctrlKey && event.key === "t") {
|
|
event.preventDefault();
|
|
const modalBg = document.getElementById("id-modal-bg");
|
|
const modal = document.getElementById("id-modal-container");
|
|
const idSearchBar = document.getElementById("id-search");
|
|
if (modalBg && modal && idSearchBar) {
|
|
modalBg.style.display = "block";
|
|
modal.style.display = "block";
|
|
idSearchBar.focus();
|
|
(idSearchBar as HTMLInputElement).value = "";
|
|
idModalActive = true;
|
|
|
|
modalBg.addEventListener("click", () => {
|
|
modal.style.display = "none";
|
|
modalBg.style.display = "none";
|
|
idModalActive = false;
|
|
});
|
|
|
|
idSearchBar.addEventListener("keydown", async (event: KeyboardEvent) => {
|
|
if (event.key === "Enter" && idModalActive) {
|
|
let value = (idSearchBar as HTMLInputElement).value;
|
|
console.log("value: " + value);
|
|
if (await openNoteById(value)) {
|
|
modal.style.display = "none";
|
|
modalBg.style.display = "none";
|
|
idModalActive = false;
|
|
} else {
|
|
(idSearchBar as HTMLInputElement).value = "";
|
|
(idSearchBar as HTMLInputElement).placeholder =
|
|
"no Note found for ID";
|
|
}
|
|
}
|
|
if (event.key === "Escape" && idModalActive) {
|
|
modal.style.display = "none";
|
|
modalBg.style.display = "none";
|
|
idModalActive = false;
|
|
}
|
|
});
|
|
} else {
|
|
console.error("failed to get modal");
|
|
}
|
|
}
|
|
// quick switch note 1-9
|
|
}
|
|
|
|
/**
|
|
* Searches for note and displays the results accordingly
|
|
*/
|
|
async function searchNote(input: string) {
|
|
if (notesMsgEl) {
|
|
const array: Array<any> = await getSearchResults(input);
|
|
|
|
noteArray = array.map((jsonObj) => ({
|
|
id: jsonObj.id,
|
|
content: jsonObj.content,
|
|
date: jsonObj.date,
|
|
tag: jsonObj.tag,
|
|
}));
|
|
|
|
fillNoteSidebar(noteArray, reversed);
|
|
}
|
|
}
|
|
|
|
async function getSearchResults(input: string): Promise<Array<JSON>> {
|
|
const resultsString: string = await invoke("search_notes", {
|
|
query: input,
|
|
});
|
|
const resultsJson = JSON.parse(resultsString);
|
|
return resultsJson;
|
|
}
|
|
|
|
/**
|
|
* When we save a new note, we want to keep that note
|
|
* in the editor, so we switch out the New note for
|
|
* Editing an existing note (the latest one, the one
|
|
* we just created)
|
|
*/
|
|
async function refreshSidebarAndOpenLatestNote() {
|
|
showNotes();
|
|
|
|
const noteString = await invoke("get_latest_note");
|
|
const noteJson = JSON.parse(noteString as string);
|
|
|
|
const latestNote: Note = {
|
|
id: noteJson[0].id,
|
|
content: noteJson[0].content,
|
|
date: noteJson[0].date,
|
|
tag: noteJson[0].tag,
|
|
};
|
|
|
|
openNote(latestNote);
|
|
}
|
|
|
|
function toggleReverse(
|
|
reverseIconAscEl: HTMLImageElement | null,
|
|
reverseIconDescEl: HTMLImageElement | null
|
|
) {
|
|
reversed = !reversed;
|
|
|
|
if (reverseIconAscEl && reverseIconDescEl) {
|
|
if (reverseIconAscEl.style.display !== "none") {
|
|
reverseIconAscEl.style.display = "none";
|
|
reverseIconDescEl.style.display = "block";
|
|
} else {
|
|
reverseIconAscEl.style.display = "block";
|
|
reverseIconDescEl.style.display = "none";
|
|
}
|
|
}
|
|
|
|
showNotes();
|
|
}
|
|
|
|
async function openNoteById(value: string): Promise<boolean> {
|
|
const id: Number | null = parseInt(value);
|
|
if (id) {
|
|
const noteString = await invoke("get_note_by_id", {
|
|
id: id,
|
|
});
|
|
console.log("id called: " + id);
|
|
console.log("note string: " + noteString);
|
|
const noteJson = JSON.parse(noteString as string);
|
|
|
|
if (noteJson.length == 0) {
|
|
return false;
|
|
}
|
|
|
|
const foundNote: Note = {
|
|
id: noteJson[0].id,
|
|
content: noteJson[0].content,
|
|
date: noteJson[0].date,
|
|
tag: noteJson[0].tag,
|
|
};
|
|
|
|
openNote(foundNote);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
async function exportNote(contents: string | null) {
|
|
if (contents) {
|
|
const title = contents.slice(0, 10).trim();
|
|
const filePath = await save({
|
|
defaultPath: (await homeDir()) + "/" + title + ".md",
|
|
filters: [
|
|
{
|
|
name: "Text",
|
|
extensions: ["txt", "md"],
|
|
},
|
|
],
|
|
});
|
|
if (filePath) {
|
|
await writeTextFile(filePath, contents);
|
|
} else {
|
|
console.error("Failed to get filePath");
|
|
}
|
|
} else {
|
|
// TODO: have some kind of error banner at the bottom for
|
|
// these notifications
|
|
console.error("Export note: failed to get note contents");
|
|
}
|
|
}
|
|
|
|
function handleOpenSettingsModal() {
|
|
const modalBg = document.getElementById("id-modal-bg");
|
|
const setingsModalContainer = document.getElementById(
|
|
"settings-modal-container"
|
|
);
|
|
const settingsFontsizeInput = document.getElementById(
|
|
"fontsize-setting-input"
|
|
) as HTMLInputElement;
|
|
const settingsOcrLanguageInput = document.getElementById(
|
|
"ocr-language-setting-input"
|
|
) as HTMLInputElement;
|
|
const settingsSaveButton = document.getElementById("save-settings-button");
|
|
if (modalBg && setingsModalContainer && settingsFontsizeInput) {
|
|
modalBg.style.display = "block";
|
|
setingsModalContainer.style.display = "block";
|
|
settingsFontsizeInput.focus();
|
|
settingsFontsizeInput.value = settings ? settings.fontSize : "16";
|
|
settingsOcrLanguageInput.value = settings ? settings.ocrLanguage : "eng";
|
|
|
|
modalBg.addEventListener("click", () => {
|
|
setingsModalContainer.style.display = "none";
|
|
modalBg.style.display = "none";
|
|
});
|
|
|
|
settingsFontsizeInput.addEventListener(
|
|
"keydown",
|
|
async (event: KeyboardEvent) => {
|
|
if (event.key === "Enter") {
|
|
console.log("saving settings..");
|
|
settings = {
|
|
fontSize: settingsFontsizeInput.value,
|
|
ocrLanguage:
|
|
settingsOcrLanguageInput.value === ""
|
|
? "eng"
|
|
: settingsOcrLanguageInput.value,
|
|
};
|
|
await invoke("save_settings", {
|
|
settings: JSON.stringify(settings),
|
|
});
|
|
if (createNoteContentEl) {
|
|
createNoteContentEl.style.fontSize =
|
|
settingsFontsizeInput.value + "px";
|
|
} else {
|
|
console.error("failed to get createNoteContentEl");
|
|
}
|
|
setingsModalContainer.style.display = "none";
|
|
modalBg.style.display = "none";
|
|
}
|
|
if (event.key === "Escape") {
|
|
setingsModalContainer.style.display = "none";
|
|
modalBg.style.display = "none";
|
|
}
|
|
}
|
|
);
|
|
|
|
if (settingsSaveButton) {
|
|
settingsSaveButton.addEventListener("click", async () => {
|
|
console.log("saving settings..");
|
|
settings = {
|
|
fontSize: settingsFontsizeInput.value,
|
|
ocrLanguage:
|
|
settingsOcrLanguageInput.value === ""
|
|
? "eng"
|
|
: settingsOcrLanguageInput.value,
|
|
};
|
|
await invoke("save_settings", {
|
|
settings: JSON.stringify(settings),
|
|
});
|
|
if (createNoteContentEl) {
|
|
createNoteContentEl.style.fontSize =
|
|
settingsFontsizeInput.value + "px";
|
|
} else {
|
|
console.error("failed to get createNoteContentEl");
|
|
}
|
|
setingsModalContainer.style.display = "none";
|
|
modalBg.style.display = "none";
|
|
});
|
|
} else {
|
|
console.error("Failed to get Settings Modal save button.");
|
|
}
|
|
} else {
|
|
console.error("Failed to get Settings Modal elements.");
|
|
}
|
|
}
|