From 537940e394bf862da845637490c38e398dac7e54 Mon Sep 17 00:00:00 2001 From: Ryan Prather Date: Sat, 13 Jun 2026 12:14:36 -0400 Subject: [PATCH] upd: note.js migrate from old to new --- assets/js/note.js | 144 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 119 insertions(+), 25 deletions(-) diff --git a/assets/js/note.js b/assets/js/note.js index 3e4e904..aba9337 100644 --- a/assets/js/note.js +++ b/assets/js/note.js @@ -1,5 +1,65 @@ import { state } from './state.js'; -import { toggleFields } from './home.js'; +import { toggleFields, makeButton } from './home.js'; + +var failureCount = state.saveFailureCount; + +/** + * Retrieves a note from the server based on the provided ID. + * + * @param {string} id - The ID of the note to retrieve. + * @param {boolean} [runOpen=true] - Whether to open the note sidebar after retrieving the note. + * @return {Promise} A promise that resolves when the note is successfully retrieved and the UI is updated. + */ +export function retrieveNote(id, runOpen = true) { + fetch('/get-note', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + 'id': id + }) + }) + .then(response => response.json()) + .then(result => { + var dt = new Date(result.date.date); + + document.querySelector('#notes').value = result.text; + document.querySelector('#passage').value = result.passage; + document.querySelector('#series').value = result.series.id; + document.querySelector('#speaker').value = result.speaker.id; + document.querySelector('#noteTitle').value = result.title; + document.querySelector('#noteDate').value = ''; + document.querySelector('#noteDate').value = + (dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '/' + + (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()) + '/' + + dt.getFullYear(); + document.querySelector('#noteId').value = result.id; + + if (result.recording) { + document.querySelector('#recording').value = result.recording; + } + + if (result.refs) { + state.references = result.refs; + } + + const list = document.querySelector('#ref-list'); + list.innerHTML = ''; + var newList = null; + for (var x in state.references) { + var newList = document.createElement('li'); + newList.className = 'tab'; + var button = makeButton(x); + newList.appendChild(button); + list.appendChild(newList); + } + + if (runOpen) { + note.openNote(false); + } + }); +} /** * Toggles the visibility of the note list and reference elements. @@ -9,7 +69,7 @@ import { toggleFields } from './home.js'; */ export function openNote(openSidebar = true) { const noteList = document.querySelector('#note-list'); - const refs = document.querySelector('#ref'); + const refs = document.querySelector('#ref-text'); if (noteList.style.display == 'block') { noteList.style.display = 'none'; @@ -19,8 +79,8 @@ export function openNote(openSidebar = true) { refs.style.display = 'none'; } - if (openSidebar) { - document.querySelector('.toggle').click(); + if (openSidebar && !document.querySelector('.container').classList.contains('sidebar-collapsed')) { + document.querySelector('.container').classList.add('sidebar-collapsed'); } } @@ -51,7 +111,7 @@ export function showSave() { // Schedule the animation to run every 1 second (which is equivalent to a 1-second delay between each iteration) var si = setInterval(function () { // Increment the opacity of the checkmark by 0.01 each time - op = parseFloat(checkmark.style.opacity); + let op = parseFloat(checkmark.style.opacity); checkmark.style.opacity = op - 0.1; // If the opacity is greater than or equal to 1, reset it back to 0 and stop the animation @@ -144,9 +204,9 @@ export function newNote() { state.references = {}; state.saved = true; state.textDirty = false; - document.querySelector('#note-header-left h2').classList.remove('dirty'); + document.querySelector('.note-header-column h2').classList.remove('dirty'); - dt = new Date(); + var dt = new Date(); document.querySelector('#noteDate').value = dt.getFullYear() + '-' + (dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '-' + (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()); @@ -159,8 +219,8 @@ export function newNote() { document.querySelector('#noteId').value = ''; document.querySelector('#ref-list').innerHTML = ''; - document.querySelector('#ref').innerHTML = ''; - document.querySelector('.toggle').click(); + document.querySelector('#ref-text').innerHTML = ''; + document.querySelector('.container').classList.add('sidebar-collapsed'); } /** @@ -208,7 +268,7 @@ export function saveNote(event) { passage: document.querySelector('#passage').value, note: document.querySelector('#notes').value, recording: document.querySelector('#recording').value, - refs: references + refs: state.references }; $.ajax({ url: '/save-note', @@ -220,14 +280,13 @@ export function saveNote(event) { }) .done(function (data) { if (data.msg == 'saved' && !state.saved) { - state.saveFailureCount = SAVE_FAILURE_LIMIT; saveCheck.classList.remove('saving', 'error', 'fa-times-circle', 'fa-save'); showSave(); if (noteText == document.querySelector('#notes').value) { state.saved = true; state.textDirty = false; - document.querySelector('note-header h2').classList.remove('dirty'); - document.querySelector('mobile-note-header h2').classList.remove('dirty'); + document.querySelector('.note-header h2').classList.remove('dirty'); + document.querySelector('.mobile-note-header h2').classList.remove('dirty'); } if (data.new) { @@ -236,7 +295,7 @@ export function saveNote(event) { } }) .fail(function (xhr, status, error) { - state.saveFailureCount--; + state.failureCount--; saveCheck.classList.remove('saving', 'fa-save'); saveCheck.classList.add('fa-times-circle', 'error'); console.error(error); @@ -246,11 +305,11 @@ export function saveNote(event) { saveCheck.classList.remove('saving', 'fa-save'); saveCheck.classList.add('error', 'fa-times-circle'); } - clearTimeout(to); - if (state.saveFailureCount > 0) { + clearTimeout(state.to); + if (state.failureCount > 0) { state.to = setTimeout(saveNote, state.saveInterval); } else { - state.saveFailureCount = SAVE_FAILURE_LIMIT; + state.failureCount = state.saveFailureCount; } }); } @@ -281,6 +340,8 @@ export function findRefLinks() { }) .then(response => response.text()) .then(result => { + let psg, book, cv; + passage = passage.replace(/\+/g, ' '); psg = passage.split(' '); if (psg.length > 2) { @@ -292,8 +353,8 @@ export function findRefLinks() { } showPassage( e, - "  " + - "
" + + "  " + + "
" + result); }); }); @@ -339,30 +400,63 @@ export function findLinks() { } showPassage( e, - "  " + - "
" + + "  " + + "
" + result); }); }); } } +/** + * Shows a passage in a popup element relative to the cursor position. + * + * @param {Event} event - The event that triggered the function. + * @param {string} text - The text to be displayed in the popup. + * @return {void} This function does not return a value. + */ +export function showPassage(event, text) { + // Create a new div element for the popup + const popup = document.querySelector('#passage-popup'); + popup.innerHTML = state.md.render(text); + + // Position the popup relative to the cursor + let x = event.clientX + window.scrollX; + let y = event.clientY + window.scrollY; + + // Set the position of the popup element + popup.style.top = `${y}px`; + popup.style.left = `${x}px`; + popup.style.display = 'block'; +} + +/** + * Closes the passage popup by clearing its content and hiding it. + * + * @return {void} This function does not return anything. + */ +export function closePopup() { + const popup = document.querySelector('#passage-popup'); + popup.innerHTML = ''; + popup.style.display = 'none'; +} + /** * Opens the share note functionality. */ export function openShareNote() { - var id = document.querySelector('#noteId').value; + let id = document.querySelector('#noteId').value; if (!id) { alert('No Open Note Found'); return; } - bd = document.querySelector('#modal-backdrop'); + let bd = document.querySelector('#modal-backdrop'); bd.style.display = 'block'; - cont = document.querySelector('#modal-container'); + let cont = document.querySelector('#modal-container'); cont.style.display = bd.style.display; - emailCont = document.querySelector('#modal-container'); + let emailCont = document.querySelector('#modal-container'); emailCont.style.left = ((window.innerWidth / 2) - (emailCont.clientWidth / 2)) + 'px'; emailCont.style.top = ((window.innerHeight / 2) - (emailCont.clientHeight / 2)) + 'px'; }