440 lines
14 KiB
JavaScript
440 lines
14 KiB
JavaScript
import * as note from './note.js';
|
|
import { state } from './state.js';
|
|
import * as ref from './reference.js';
|
|
|
|
// Get the link element
|
|
var tabs = [];
|
|
let controller;
|
|
|
|
// Function to change the CSS file based on checkbox state
|
|
/**
|
|
* Method to toggle dark/light mode
|
|
*
|
|
* @param {*} event
|
|
*/
|
|
export function toggleDarkMode(event) {
|
|
let mainCssLink = $('link[data-css="mode"');
|
|
if(mainCssLink.length > 0) {
|
|
mainCssLink[0].href = (event.target.checked ? mainCssLink.data('dark') : mainCssLink.data('light'));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggles the visibility of the fields container and updates the active state of the show/hide button.
|
|
*
|
|
* @param Event e
|
|
* @param boolean forceShow
|
|
* @return {void}
|
|
*/
|
|
export function toggleFields(e, forceShow = false) {
|
|
const fieldsContainer = document.querySelector('.fields-container');
|
|
let showHideBtn = document.getElementById('show-hide-btn');
|
|
let mobileShowHideBtn = document.getElementById('mobile-show-hide-btn');
|
|
|
|
if (forceShow || !fieldsContainer.classList.contains('show')) {
|
|
fieldsContainer.classList.add('show');
|
|
fieldsContainer.style.display = 'flex';
|
|
showHideBtn.classList.add('active');
|
|
mobileShowHideBtn.classList.add('active');
|
|
} else {
|
|
fieldsContainer.classList.remove('show');
|
|
fieldsContainer.style.display = 'none';
|
|
showHideBtn.classList.remove('active');
|
|
mobileShowHideBtn.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Increases the font size of the element with the id 'ref' by 1 point.
|
|
*
|
|
* @return {void} This function does not return a value.
|
|
*/
|
|
export function increaseFont() {
|
|
var currentSize = document.querySelector('#ref-text').style.fontSize;
|
|
const newSize = parseInt(currentSize) + 1;
|
|
document.querySelector('#ref-text').style.fontSize = newSize + 'pt';
|
|
document.querySelector('#notes').style.fontSize = newSize + 'pt';
|
|
document.querySelector('#notePreview').style.fontSize = newSize + 'pt';
|
|
}
|
|
|
|
/**
|
|
* Decreases the font size of the element with the id 'ref' by 1 point.
|
|
*
|
|
* @return {void} This function does not return a value.
|
|
*/
|
|
export function decreaseFont() {
|
|
var currentSize = document.querySelector('#ref-text').style.fontSize;
|
|
const newSize = parseInt(currentSize) - 1;
|
|
document.querySelector('#ref-text').style.fontSize = newSize + 'pt';
|
|
document.querySelector('#notes').style.fontSize = newSize + 'pt';
|
|
document.querySelector('#notePreview').style.fontSize = newSize + 'pt';
|
|
}
|
|
|
|
/**
|
|
* Previews a note by rendering the markdown content of the note in a preview section.
|
|
* Toggles between the note text and preview sections.
|
|
*
|
|
* @return {void} This function does not return anything.
|
|
*/
|
|
export function previewNote() {
|
|
var noteText = document.querySelector('#notes');
|
|
var notePreview = document.querySelector('#notePreview');
|
|
var previewButton = document.querySelector('#previewBtn');
|
|
|
|
const title = document.querySelector('#noteTitle');
|
|
const speaker = document.querySelector('#speaker');
|
|
const passage = document.querySelector('#passage');
|
|
|
|
const markdownPreview = "# " + title.value + " - " +
|
|
speaker.options[speaker.selectedIndex].text + " - " + passage.value + "\n\n" + noteText.value;
|
|
|
|
notePreview.innerHTML = state.md.render(markdownPreview);
|
|
|
|
if (previewButton.classList.contains('active')) {
|
|
document.querySelector('.note-text').style.display = 'block';
|
|
notePreview.style.display = 'none';
|
|
previewButton.classList.remove('active');
|
|
} else {
|
|
document.querySelector('.note-text').style.display = 'none';
|
|
notePreview.style.display = 'block';
|
|
previewButton.classList.add('active');
|
|
}
|
|
|
|
note.findLinks();
|
|
}
|
|
|
|
/**
|
|
* Sets event listeners for keyup events on the document and the '#notes' element.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
export function setEventListeners() {
|
|
document.addEventListener('keyup', function (event) {
|
|
if (event.key == "F3") {
|
|
openRef(false);
|
|
}
|
|
});
|
|
|
|
document.querySelector('#notes').addEventListener('keyup', function (event) {
|
|
let key = event.keyCode;
|
|
|
|
if (key == 8 || key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
|
|
state.textDirty = true;
|
|
document.querySelector('.mobile-note-header h2').classList.add('dirty');
|
|
document.querySelector('.note-header h2').classList.add('dirty');
|
|
}
|
|
});
|
|
|
|
document.getElementById('dark-mode-checkbox').addEventListener('click', toggleDarkMode);
|
|
document.getElementById('mobile-dark-mode-checkbox').addEventListener('click', toggleDarkMode);
|
|
|
|
document.getElementById('show-hide-btn').addEventListener('click', toggleFields);
|
|
document.getElementById('mobile-show-hide-btn').addEventListener('click', toggleFields);
|
|
|
|
document.getElementById('increaseFont').addEventListener('click', increaseFont);
|
|
document.getElementById('decreaseFont').addEventListener('click', decreaseFont);
|
|
document.getElementById('open-ref').addEventListener('click', openRef, {closeSidebar: false});
|
|
document.getElementById('mobile-open-ref').addEventListener('click', openRef, {closeSidebar: false});
|
|
document.getElementById('previewBtn').addEventListener('click', previewNote);
|
|
|
|
document.getElementById('searchBtn').addEventListener('click', ref.queryRef);
|
|
document.getElementById('closeSearch').addEventListener('click', closeRef);
|
|
}
|
|
|
|
export function initHome() {
|
|
setBooks();
|
|
setEventListeners();
|
|
|
|
$('sidebar-link').on('click', function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
$('#sidebar').toggleClass('inactive');
|
|
});
|
|
|
|
$('sidebar').on('click', 'a', function(event) {
|
|
var $a = $(this), href = $a.attr('href'), target = $a.attr('target');
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
$('sidebar').addClass('inactive');
|
|
|
|
setTimeout(function() {
|
|
if (target == '_blank')
|
|
window.open(href);
|
|
else
|
|
window.location.href = href;
|
|
}, 500);
|
|
});
|
|
|
|
$('#note-table').DataTable({
|
|
paging: false,
|
|
ajax: {
|
|
url: '/get-notes',
|
|
type: 'POST'
|
|
},
|
|
columns: [
|
|
{ data: 'link' },
|
|
{ data: 'speaker.name' },
|
|
{ data: 'passage' },
|
|
{
|
|
data: 'date.date',
|
|
render: DataTable.render.date("L")
|
|
},
|
|
]
|
|
});
|
|
$('#shareBtn').on('click', note.openShareNote);
|
|
$('#modal-backdrop').on('click', note.closeShareNote);
|
|
|
|
state.md = new markdownit({
|
|
html: true,
|
|
linkify: true,
|
|
breaks: true
|
|
});
|
|
|
|
if ($('#noteDate')) {
|
|
$('#noteDate').datepicker();
|
|
}
|
|
|
|
if ($('#query')) {
|
|
document.querySelector('#query').addEventListener('keyup', function (event) {
|
|
if (event.key == "Enter") {
|
|
search();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Assuming 'to' and 'saveInterval' are declared globally elsewhere in your script
|
|
if (typeof state.to === 'undefined' || !state.to) {
|
|
state.to = setTimeout(note.saveNote, state.saveInterval);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fetches data from '/js/data.json', assigns it to BOOKS, and handles errors.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
export function setBooks() {
|
|
fetch('js/data.json')
|
|
.then((res) => {
|
|
if (!res.ok) {
|
|
throw new Error('HTTP Error: Status: ${res.status}');
|
|
}
|
|
return res.json();
|
|
})
|
|
.then((data) => {
|
|
state.BOOKS = data;
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Opens the reference with the option to close the sidebar.
|
|
*
|
|
* @param {boolean} closeSidebar - Indicates whether to close the sidebar when opening the reference.
|
|
*/
|
|
export function openRef(e, closeSidebar = true) {
|
|
document.querySelector('#open-ref').classList.add('active');
|
|
document.querySelector('#mobile-open-ref').classList.add('active');
|
|
|
|
let refQuery = document.querySelector('#refQuery');
|
|
refQuery.style.display = 'block';
|
|
|
|
let ref = document.querySelector('#ref-text');
|
|
refQuery.style.left = ref.offsetLeft + 'px';
|
|
refQuery.style.top = ref.offsetTop + 'px';
|
|
if (closeSidebar) {
|
|
document.querySelector('.toggle').click();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Closes the reference query and resets the reference search form.
|
|
*
|
|
* @return {void} This function does not return anything.
|
|
*/
|
|
export function closeRef() {
|
|
document.querySelector('#referenceSearch').value = '';
|
|
document.querySelector('#referenceSearch').style.display = '';
|
|
document.querySelector('#referenceType').value = '';
|
|
document.querySelector('#referenceBook').value = '';
|
|
document.querySelector('#referenceBook').style.display = 'none';
|
|
document.querySelector('#chapter-range').innerText = '';
|
|
document.querySelector('#verse-range').innerText = '';
|
|
|
|
document.querySelector('#refQuery').style.display = 'none';
|
|
document.querySelector('#open-ref').classList.remove('active');
|
|
document.querySelector('#mobile-open-ref').classList.remove('active');
|
|
}
|
|
|
|
/**
|
|
* 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<void>} 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.refs) {
|
|
references = result.refs;
|
|
}
|
|
|
|
const list = document.querySelector('#ref-list');
|
|
list.innerHTML = '';
|
|
var newList = null;
|
|
for (var x in references) {
|
|
var newList = document.createElement('li');
|
|
newList.className = 'tab';
|
|
var button = makeButton(x);
|
|
newList.appendChild(button);
|
|
list.appendChild(newList);
|
|
}
|
|
|
|
if (runOpen) {
|
|
note.openNote(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* A function to create a button element with the specified title and event listeners for click and double click actions.
|
|
*
|
|
* @param {string} title - The title to be displayed on the button.
|
|
* @return {Element} The created button element.
|
|
*/
|
|
export function makeButton(title) {
|
|
var btn = document.createElement('button');
|
|
btn.innerText = title;
|
|
btn.class = 'button';
|
|
btn.style = 'line-height:normal;'
|
|
btn.addEventListener('click', function () {
|
|
removeActiveRef();
|
|
document.querySelector('#ref-text').innerHTML = state.md.render(state.references[title]);
|
|
this.classList.add('active');
|
|
note.findRefLinks();
|
|
});
|
|
|
|
btn.addEventListener('dblclick', function () {
|
|
document.querySelector('#ref-text').innerHTML = '';
|
|
delete state.references[title];
|
|
var list = this.parentElement;
|
|
list.remove();
|
|
state.saved = false;
|
|
state.textDirty = true;
|
|
note.saveNote();
|
|
});
|
|
|
|
removeActiveRef();
|
|
btn.classList.add('active');
|
|
|
|
return btn;
|
|
}
|
|
|
|
/**
|
|
* Removes the 'active' class from all elements with the class 'active'.
|
|
*
|
|
* @return {void} This function does not return a value.
|
|
*/
|
|
export function removeActiveRef() {
|
|
tabs = document.querySelectorAll('#ref-list .active');
|
|
for (var t in tabs) {
|
|
if (isFinite(parseInt(t))) {
|
|
tabs[t].classList.remove('active');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generates a random UUIDv4 string.
|
|
*
|
|
* @return {string} The generated UUIDv4 string.
|
|
*/
|
|
export function uuidv4() {
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
|
|
.replace(/[xy]/g, function (c) {
|
|
const r = Math.random() * 16 | 0,
|
|
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
return v.toString(16);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Searches for notes based on the query entered in the search field.
|
|
* Sends a POST request to the '/search' endpoint with the query as a JSON payload.
|
|
* Updates the '#old-notes' element with the search results.
|
|
*
|
|
* @return {Promise} A Promise that resolves with the search results.
|
|
*/
|
|
export function search() {
|
|
query = document.querySelector('#query').value;
|
|
fetch('/search', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
'query': query
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(results => {
|
|
var oldNotes = document.querySelector('#old-notes');
|
|
oldNotes.innerHTML = '';
|
|
for (var n in results) {
|
|
var link = document.createElement('a');
|
|
link.href = '#';
|
|
link.setAttribute('onclick', "note.retrieveNote('" + results[n].id + "');note.openNote();");
|
|
link.innerHTML = results[n].title;
|
|
|
|
var p = document.createElement('p');
|
|
p.innerHTML = results[n].passage;
|
|
|
|
var article = document.createElement('article');
|
|
article.appendChild(link);
|
|
article.appendChild(p);
|
|
|
|
oldNotes.append(article);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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';
|
|
}
|