Fovway
f9ba1796dc
- Реализованы функции для закрепления и архивирования заметок, а также их восстановления. - Добавлены новые индексы в базу данных для улучшения производительности запросов. - Внедрено логирование действий пользователей, включая регистрацию, вход, создание, обновление и удаление заметок. - Обновлены интерфейсы для поддержки новых функций, включая кнопки для архивирования и закрепления заметок. - Оптимизированы стили и добавлены новые элементы управления для улучшения пользовательского опыта.
3163 lines
114 KiB
JavaScript
3163 lines
114 KiB
JavaScript
// DOM элементы
|
||
const noteInput = document.getElementById("noteInput");
|
||
const saveBtn = document.getElementById("saveBtn");
|
||
const notesList = document.getElementById("notes-container");
|
||
|
||
// Получаем кнопки markdown
|
||
const boldBtn = document.getElementById("boldBtn");
|
||
const italicBtn = document.getElementById("italicBtn");
|
||
const strikethroughBtn = document.getElementById("strikethroughBtn");
|
||
const colorBtn = document.getElementById("colorBtn");
|
||
const headerBtn = document.getElementById("headerBtn");
|
||
const headerDropdown = document.getElementById("headerDropdown");
|
||
const listBtn = document.getElementById("listBtn");
|
||
const numberedListBtn = document.getElementById("numberedListBtn");
|
||
const quoteBtn = document.getElementById("quoteBtn");
|
||
const codeBtn = document.getElementById("codeBtn");
|
||
const linkBtn = document.getElementById("linkBtn");
|
||
const checkboxBtn = document.getElementById("checkboxBtn");
|
||
const imageBtn = document.getElementById("imageBtn");
|
||
|
||
// Кнопка настроек
|
||
const settingsBtn = document.getElementById("settings-btn");
|
||
|
||
// Элементы для загрузки изображений
|
||
const imageInput = document.getElementById("imageInput");
|
||
const imagePreviewContainer = document.getElementById("imagePreviewContainer");
|
||
const imagePreviewList = document.getElementById("imagePreviewList");
|
||
const clearImagesBtn = document.getElementById("clearImagesBtn");
|
||
|
||
// Модальное окно для просмотра изображений
|
||
const imageModal = document.getElementById("imageModal");
|
||
const modalImage = document.getElementById("modalImage");
|
||
const modalClose = document.querySelector(".image-modal-close");
|
||
|
||
// Массив для хранения выбранных изображений
|
||
let selectedImages = [];
|
||
|
||
// Глобальные переменные для заметок и фильтрации
|
||
let allNotes = [];
|
||
let selectedDateFilter = null;
|
||
let selectedTagFilter = null;
|
||
let searchQuery = "";
|
||
let searchResults = [];
|
||
let notesCache = null; // Кэш для заметок
|
||
let lastLoadTime = 0; // Время последней загрузки
|
||
|
||
// Lazy loading для изображений
|
||
function initLazyLoading() {
|
||
// Проверяем поддержку Intersection Observer API
|
||
if ("IntersectionObserver" in window) {
|
||
const imageObserver = new IntersectionObserver(
|
||
(entries, observer) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
const img = entry.target;
|
||
// Если у изображения есть data-src, загружаем его
|
||
if (img.dataset.src) {
|
||
img.src = img.dataset.src;
|
||
img.removeAttribute("data-src");
|
||
}
|
||
img.classList.remove("lazy");
|
||
observer.unobserve(img);
|
||
}
|
||
});
|
||
},
|
||
{
|
||
rootMargin: "50px 0px", // Загружать изображения за 50px до появления в viewport
|
||
threshold: 0.01,
|
||
}
|
||
);
|
||
|
||
// Наблюдаем за всеми изображениями с классом lazy
|
||
document.querySelectorAll("img.lazy").forEach((img) => {
|
||
imageObserver.observe(img);
|
||
});
|
||
} else {
|
||
// Fallback для старых браузеров - просто показываем все изображения
|
||
document.querySelectorAll("img.lazy").forEach((img) => {
|
||
if (img.dataset.src) {
|
||
img.src = img.dataset.src;
|
||
img.removeAttribute("data-src");
|
||
}
|
||
img.classList.remove("lazy");
|
||
});
|
||
}
|
||
}
|
||
|
||
// Функция для получения текущей даты и времени
|
||
function getFormattedDateTime() {
|
||
let now = new Date();
|
||
let day = String(now.getDate()).padStart(2, "0");
|
||
let month = String(now.getMonth() + 1).padStart(2, "0");
|
||
let year = now.getFullYear();
|
||
let hours = String(now.getHours()).padStart(2, "0");
|
||
let minutes = String(now.getMinutes()).padStart(2, "0");
|
||
|
||
return {
|
||
date: `${day}.${month}.${year}`,
|
||
time: `${hours}:${minutes}`,
|
||
};
|
||
}
|
||
|
||
// Вспомогательные функции для корректной работы с временем (UTC -> локаль)
|
||
function parseSQLiteUtc(ts) {
|
||
return new Date(ts.replace(" ", "T") + "Z");
|
||
}
|
||
|
||
function formatLocalDateTime(date) {
|
||
return new Intl.DateTimeFormat("ru-RU", {
|
||
day: "2-digit",
|
||
month: "2-digit",
|
||
year: "numeric",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
}).format(date);
|
||
}
|
||
|
||
function formatLocalDateOnly(date) {
|
||
return new Intl.DateTimeFormat("ru-RU", {
|
||
day: "2-digit",
|
||
month: "2-digit",
|
||
year: "numeric",
|
||
}).format(date);
|
||
}
|
||
|
||
// Функция для авторасширения текстового поля
|
||
function autoExpandTextarea(textarea) {
|
||
textarea.style.height = "auto";
|
||
textarea.style.height = textarea.scrollHeight + "px";
|
||
}
|
||
|
||
// Функция для извлечения тегов из текста заметки
|
||
function extractTags(content) {
|
||
const tagRegex = /#([а-яё\w]+)/gi;
|
||
const tags = [];
|
||
let match;
|
||
|
||
while ((match = tagRegex.exec(content)) !== null) {
|
||
const matchIndex = match.index;
|
||
|
||
// Проверяем, не находится ли # внутри HTML-атрибута
|
||
const beforeContext = content.substring(
|
||
Math.max(0, matchIndex - 100),
|
||
matchIndex
|
||
);
|
||
const afterContext = content.substring(
|
||
matchIndex + match[0].length,
|
||
Math.min(content.length, matchIndex + match[0].length + 100)
|
||
);
|
||
|
||
// Проверяем, есть ли признаки HTML-атрибута (например, style="color: #...)
|
||
const lastOpenTag = beforeContext.lastIndexOf("<");
|
||
const lastCloseTag = beforeContext.lastIndexOf(">");
|
||
|
||
// Если внутри HTML-тега, пропускаем
|
||
if (lastOpenTag > lastCloseTag) {
|
||
continue;
|
||
}
|
||
|
||
// Проверяем наличие = и кавычки перед #
|
||
const lastQuote = Math.max(
|
||
beforeContext.lastIndexOf('"'),
|
||
beforeContext.lastIndexOf("'")
|
||
);
|
||
const lastEquals = beforeContext.lastIndexOf("=");
|
||
|
||
// Если перед # есть = и кавычка, и после есть закрывающая кавычка
|
||
if (lastEquals > -1 && lastQuote > lastEquals) {
|
||
const nextQuote = Math.min(
|
||
afterContext.indexOf('"') !== -1 ? afterContext.indexOf('"') : Infinity,
|
||
afterContext.indexOf("'") !== -1 ? afterContext.indexOf("'") : Infinity
|
||
);
|
||
if (nextQuote !== Infinity) {
|
||
continue; // Пропускаем, это часть HTML-атрибута
|
||
}
|
||
}
|
||
|
||
const tag = match[1].toLowerCase();
|
||
if (!tags.includes(tag)) {
|
||
tags.push(tag);
|
||
}
|
||
}
|
||
|
||
return tags;
|
||
}
|
||
|
||
// Функция для преобразования тегов в заметках в кликабельные элементы
|
||
function makeTagsClickable(content) {
|
||
// Сначала находим все теги, которые еще не обернуты в HTML
|
||
const tagRegex = /#([а-яё\w]+)/gi;
|
||
let result = content;
|
||
let match;
|
||
|
||
// Создаем массив всех совпадений с их позициями
|
||
const matches = [];
|
||
while ((match = tagRegex.exec(content)) !== null) {
|
||
matches.push({
|
||
fullMatch: match[0],
|
||
tag: match[1],
|
||
index: match.index,
|
||
});
|
||
}
|
||
|
||
// Обрабатываем совпадения в обратном порядке, чтобы не сбить индексы
|
||
for (let i = matches.length - 1; i >= 0; i--) {
|
||
const match = matches[i];
|
||
const beforeTag = result.substring(0, match.index);
|
||
const afterTag = result.substring(match.index + match.fullMatch.length);
|
||
|
||
// Проверяем, не находится ли тег уже внутри HTML-тега
|
||
const lastOpenTag = beforeTag.lastIndexOf("<");
|
||
const lastCloseTag = beforeTag.lastIndexOf(">");
|
||
|
||
// Если последний открывающий тег идет после последнего закрывающего, значит мы внутри HTML-тега
|
||
if (lastOpenTag > lastCloseTag) {
|
||
continue; // Пропускаем этот тег
|
||
}
|
||
|
||
// Дополнительная проверка: не находится ли # внутри HTML-атрибута (например, style="color: #ff0000")
|
||
// Ищем последний символ кавычки перед текущей позицией
|
||
const beforeContext = beforeTag.substring(Math.max(0, match.index - 100));
|
||
const lastQuote = Math.max(
|
||
beforeContext.lastIndexOf('"'),
|
||
beforeContext.lastIndexOf("'")
|
||
);
|
||
const lastEquals = beforeContext.lastIndexOf("=");
|
||
|
||
// Если перед # есть = и кавычка, и нет закрывающей кавычки после =, то # находится в атрибуте
|
||
if (lastEquals > -1 && lastQuote > lastEquals) {
|
||
const afterContext = afterTag.substring(
|
||
0,
|
||
Math.min(100, afterTag.length)
|
||
);
|
||
const nextQuote = Math.min(
|
||
afterContext.indexOf('"') !== -1 ? afterContext.indexOf('"') : Infinity,
|
||
afterContext.indexOf("'") !== -1 ? afterContext.indexOf("'") : Infinity
|
||
);
|
||
// Если нашли закрывающую кавычку, значит # внутри атрибута
|
||
if (nextQuote !== Infinity) {
|
||
continue; // Пропускаем этот тег
|
||
}
|
||
}
|
||
|
||
// Заменяем тег на кликабельный элемент
|
||
const replacement = `<span class="tag-in-note" data-tag="${match.tag}">${match.fullMatch}</span>`;
|
||
result = beforeTag + replacement + afterTag;
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
// Функция для получения всех уникальных тегов из заметок
|
||
function getAllTags(notes) {
|
||
const tagCounts = {};
|
||
|
||
notes.forEach((note) => {
|
||
const tags = extractTags(note.content);
|
||
tags.forEach((tag) => {
|
||
tagCounts[tag] = (tagCounts[tag] || 0) + 1;
|
||
});
|
||
});
|
||
|
||
return tagCounts;
|
||
}
|
||
|
||
// Функция для отображения тегов
|
||
function renderTags() {
|
||
const tagsContainer = document.getElementById("tagsContainer");
|
||
if (!tagsContainer) return;
|
||
|
||
const tagCounts = getAllTags(allNotes);
|
||
const sortedTags = Object.keys(tagCounts).sort();
|
||
|
||
if (sortedTags.length === 0) {
|
||
tagsContainer.innerHTML =
|
||
'<div style="font-size: 10px; color: #999; text-align: center;">Нет тегов</div>';
|
||
return;
|
||
}
|
||
|
||
tagsContainer.innerHTML = sortedTags
|
||
.map((tag) => {
|
||
const count = tagCounts[tag];
|
||
const isActive = selectedTagFilter === tag ? "active" : "";
|
||
return `<span class="tag ${isActive}" data-tag="${tag}">#${tag}<span class="tag-count">${count}</span></span>`;
|
||
})
|
||
.join("");
|
||
|
||
// Добавляем обработчики кликов для тегов
|
||
tagsContainer.querySelectorAll(".tag").forEach((tagElement) => {
|
||
tagElement.addEventListener(
|
||
"click",
|
||
async (event) => await handleTagClick(event)
|
||
);
|
||
});
|
||
}
|
||
|
||
// Обработчик клика на тег
|
||
async function handleTagClick(event) {
|
||
const clickedTag = event.target.closest(".tag").dataset.tag;
|
||
|
||
// Если кликнули на тот же тег, снимаем фильтр
|
||
if (selectedTagFilter === clickedTag) {
|
||
selectedTagFilter = null;
|
||
} else {
|
||
selectedTagFilter = clickedTag;
|
||
}
|
||
|
||
// Перерисовываем заметки и теги
|
||
await renderNotes(allNotes);
|
||
renderTags();
|
||
updateFilterIndicator();
|
||
}
|
||
|
||
// Привязываем авторасширение к текстовому полю для создания заметки
|
||
noteInput.addEventListener("input", function () {
|
||
autoExpandTextarea(noteInput);
|
||
});
|
||
|
||
// Изначально запускаем для установки правильной высоты
|
||
autoExpandTextarea(noteInput);
|
||
|
||
// Функция для вставки цветового тега
|
||
function insertColorTag() {
|
||
// Создаем диалог выбора цвета
|
||
const colorDialog = document.createElement("input");
|
||
colorDialog.type = "color";
|
||
colorDialog.style.display = "none";
|
||
document.body.appendChild(colorDialog);
|
||
|
||
// Обработчик изменения цвета
|
||
colorDialog.addEventListener("change", function () {
|
||
const selectedColor = this.value;
|
||
insertColorMarkdown(selectedColor);
|
||
document.body.removeChild(this);
|
||
});
|
||
|
||
// Обработчик отмены
|
||
colorDialog.addEventListener("cancel", function () {
|
||
document.body.removeChild(this);
|
||
});
|
||
|
||
// Показываем диалог выбора цвета
|
||
colorDialog.click();
|
||
}
|
||
|
||
// Функция для вставки цветового markdown
|
||
function insertColorMarkdown(color) {
|
||
const start = noteInput.selectionStart;
|
||
const end = noteInput.selectionEnd;
|
||
const text = noteInput.value;
|
||
|
||
const before = text.substring(0, start);
|
||
const selected = text.substring(start, end);
|
||
const after = text.substring(end);
|
||
|
||
let replacement;
|
||
if (selected.trim() === "") {
|
||
// Если текст не выделен, вставляем шаблон
|
||
replacement = `<span style="color: ${color}">Текст</span>`;
|
||
} else {
|
||
// Если текст выделен, оборачиваем его в цветовой тег
|
||
replacement = `<span style="color: ${color}">${selected}</span>`;
|
||
}
|
||
|
||
noteInput.value = before + replacement + after;
|
||
|
||
// Устанавливаем курсор после вставленного текста
|
||
const cursorPosition = start + replacement.length;
|
||
noteInput.setSelectionRange(cursorPosition, cursorPosition);
|
||
|
||
noteInput.focus();
|
||
}
|
||
|
||
// Функция для вставки markdown
|
||
function insertMarkdown(tag) {
|
||
const start = noteInput.selectionStart;
|
||
const end = noteInput.selectionEnd;
|
||
const text = noteInput.value;
|
||
|
||
const before = text.substring(0, start);
|
||
const selected = text.substring(start, end);
|
||
const after = text.substring(end);
|
||
|
||
// Мультистрочные преобразования списков (toggle)
|
||
if (
|
||
(tag === "1. " || tag === "- " || tag === "- [ ] ") &&
|
||
selected.includes("\n")
|
||
) {
|
||
const mode =
|
||
tag === "1. " ? "ordered" : tag === "- " ? "unordered" : "todo";
|
||
const transformed = transformSelection(noteInput, mode);
|
||
noteInput.value = transformed.newValue;
|
||
noteInput.setSelectionRange(transformed.newSelStart, transformed.newSelEnd);
|
||
noteInput.focus();
|
||
return;
|
||
}
|
||
|
||
if (selected.startsWith(tag) && selected.endsWith(tag)) {
|
||
// Если теги уже есть, удаляем их
|
||
noteInput.value = `${before}${selected.slice(
|
||
tag.length,
|
||
-tag.length
|
||
)}${after}`;
|
||
noteInput.setSelectionRange(start, end - 2 * tag.length);
|
||
} else if (selected.trim() === "") {
|
||
// Если текст не выделен
|
||
if (tag === "[Текст ссылки](URL)") {
|
||
// Для ссылок создаем шаблон с двумя кавычками
|
||
noteInput.value = `${before}[Текст ссылки](URL)${after}`;
|
||
const cursorPosition = start + 1; // Помещаем курсор внутрь текста ссылки
|
||
noteInput.setSelectionRange(cursorPosition, cursorPosition + 12);
|
||
} else if (
|
||
tag === "- " ||
|
||
tag === "1. " ||
|
||
tag === "> " ||
|
||
tag === "# " ||
|
||
tag === "- [ ] "
|
||
) {
|
||
// Для списка, цитаты, заголовка и чекбокса помещаем курсор после тега
|
||
noteInput.value = `${before}${tag}${after}`;
|
||
const cursorPosition = start + tag.length;
|
||
noteInput.setSelectionRange(cursorPosition, cursorPosition);
|
||
} else {
|
||
// Для остальных типов создаем два тега
|
||
noteInput.value = `${before}${tag}${tag}${after}`;
|
||
const cursorPosition = start + tag.length;
|
||
noteInput.setSelectionRange(cursorPosition, cursorPosition);
|
||
}
|
||
} else {
|
||
// Если текст выделен
|
||
if (tag === "[Текст ссылки](URL)") {
|
||
// Для ссылок используем выделенный текст вместо "Текст ссылки"
|
||
noteInput.value = `${before}[${selected}](URL)${after}`;
|
||
const cursorPosition = start + selected.length + 3; // Помещаем курсор в URL
|
||
noteInput.setSelectionRange(cursorPosition, cursorPosition + 3);
|
||
} else if (
|
||
tag === "- " ||
|
||
tag === "1. " ||
|
||
tag === "> " ||
|
||
tag === "# " ||
|
||
tag === "- [ ] "
|
||
) {
|
||
// Для списка, цитаты, заголовка и чекбокса добавляем тег перед выделенным текстом
|
||
noteInput.value = `${before}${tag}${selected}${after}`;
|
||
const cursorPosition = start + tag.length + selected.length;
|
||
noteInput.setSelectionRange(cursorPosition, cursorPosition);
|
||
} else {
|
||
// Для остальных типов оборачиваем выделенный текст
|
||
noteInput.value = `${before}${tag}${selected}${tag}${after}`;
|
||
const cursorPosition = start + tag.length + selected.length + tag.length;
|
||
noteInput.setSelectionRange(cursorPosition, cursorPosition);
|
||
}
|
||
}
|
||
|
||
noteInput.focus();
|
||
}
|
||
|
||
// Функция для вставки цветового тега в режиме редактирования
|
||
function insertColorTagForEdit(textarea) {
|
||
// Создаем диалог выбора цвета
|
||
const colorDialog = document.createElement("input");
|
||
colorDialog.type = "color";
|
||
colorDialog.style.display = "none";
|
||
document.body.appendChild(colorDialog);
|
||
|
||
// Обработчик изменения цвета
|
||
colorDialog.addEventListener("change", function () {
|
||
const selectedColor = this.value;
|
||
insertColorMarkdownForEdit(textarea, selectedColor);
|
||
document.body.removeChild(this);
|
||
});
|
||
|
||
// Обработчик отмены
|
||
colorDialog.addEventListener("cancel", function () {
|
||
document.body.removeChild(this);
|
||
});
|
||
|
||
// Показываем диалог выбора цвета
|
||
colorDialog.click();
|
||
}
|
||
|
||
// Функция для вставки цветового markdown в режиме редактирования
|
||
function insertColorMarkdownForEdit(textarea, color) {
|
||
const start = textarea.selectionStart;
|
||
const end = textarea.selectionEnd;
|
||
const text = textarea.value;
|
||
|
||
const before = text.substring(0, start);
|
||
const selected = text.substring(start, end);
|
||
const after = text.substring(end);
|
||
|
||
let replacement;
|
||
if (selected.trim() === "") {
|
||
// Если текст не выделен, вставляем шаблон
|
||
replacement = `<span style="color: ${color}">Текст</span>`;
|
||
} else {
|
||
// Если текст выделен, оборачиваем его в цветовой тег
|
||
replacement = `<span style="color: ${color}">${selected}</span>`;
|
||
}
|
||
|
||
textarea.value = before + replacement + after;
|
||
|
||
// Устанавливаем курсор после вставленного текста
|
||
const cursorPosition = start + replacement.length;
|
||
textarea.setSelectionRange(cursorPosition, cursorPosition);
|
||
|
||
textarea.focus();
|
||
}
|
||
|
||
// Функция для вставки markdown в режиме редактирования
|
||
function insertMarkdownForEdit(textarea, tag) {
|
||
const start = textarea.selectionStart;
|
||
const end = textarea.selectionEnd;
|
||
const text = textarea.value;
|
||
|
||
const before = text.substring(0, start);
|
||
const selected = text.substring(start, end);
|
||
const after = text.substring(end);
|
||
|
||
// Мультистрочные преобразования списков (toggle)
|
||
if (
|
||
(tag === "1. " || tag === "- " || tag === "- [ ] ") &&
|
||
selected.includes("\n")
|
||
) {
|
||
const mode =
|
||
tag === "1. " ? "ordered" : tag === "- " ? "unordered" : "todo";
|
||
const transformed = transformSelection(textarea, mode);
|
||
textarea.value = transformed.newValue;
|
||
textarea.setSelectionRange(transformed.newSelStart, transformed.newSelEnd);
|
||
textarea.focus();
|
||
return;
|
||
}
|
||
|
||
if (selected.startsWith(tag) && selected.endsWith(tag)) {
|
||
// Если теги уже есть, удаляем их
|
||
textarea.value = `${before}${selected.slice(
|
||
tag.length,
|
||
-tag.length
|
||
)}${after}`;
|
||
textarea.setSelectionRange(start, end - 2 * tag.length);
|
||
} else if (selected.trim() === "") {
|
||
// Если текст не выделен
|
||
if (tag === "[Текст ссылки](URL)") {
|
||
// Для ссылок создаем шаблон с двумя кавычками
|
||
textarea.value = `${before}[Текст ссылки](URL)${after}`;
|
||
const cursorPosition = start + 1; // Помещаем курсор внутрь текста ссылки
|
||
textarea.setSelectionRange(cursorPosition, cursorPosition + 12);
|
||
} else if (
|
||
tag === "- " ||
|
||
tag === "1. " ||
|
||
tag === "> " ||
|
||
tag === "# " ||
|
||
tag === "- [ ] "
|
||
) {
|
||
// Для списка, цитаты, заголовка и чекбокса помещаем курсор после тега
|
||
textarea.value = `${before}${tag}${after}`;
|
||
const cursorPosition = start + tag.length;
|
||
textarea.setSelectionRange(cursorPosition, cursorPosition);
|
||
} else {
|
||
// Для остальных типов создаем два тега
|
||
textarea.value = `${before}${tag}${tag}${after}`;
|
||
const cursorPosition = start + tag.length;
|
||
textarea.setSelectionRange(cursorPosition, cursorPosition);
|
||
}
|
||
} else {
|
||
// Если текст выделен
|
||
if (tag === "[Текст ссылки](URL)") {
|
||
// Для ссылок используем выделенный текст вместо "Текст ссылки"
|
||
textarea.value = `${before}[${selected}](URL)${after}`;
|
||
const cursorPosition = start + selected.length + 3; // Помещаем курсор в URL
|
||
textarea.setSelectionRange(cursorPosition, cursorPosition + 3);
|
||
} else if (
|
||
tag === "- " ||
|
||
tag === "1. " ||
|
||
tag === "> " ||
|
||
tag === "# " ||
|
||
tag === "- [ ] "
|
||
) {
|
||
// Для списка, цитаты, заголовка и чекбокса добавляем тег перед выделенным текстом
|
||
textarea.value = `${before}${tag}${selected}${after}`;
|
||
const cursorPosition = start + tag.length + selected.length;
|
||
textarea.setSelectionRange(cursorPosition, cursorPosition);
|
||
} else {
|
||
// Для остальных типов оборачиваем выделенный текст
|
||
textarea.value = `${before}${tag}${selected}${tag}${after}`;
|
||
const cursorPosition = start + tag.length + selected.length + tag.length;
|
||
textarea.setSelectionRange(cursorPosition, cursorPosition);
|
||
}
|
||
}
|
||
|
||
textarea.focus();
|
||
}
|
||
|
||
// ==================== МУЛЬТИСТРОЧНЫЕ СПИСКИ (TOGGLE) ====================
|
||
function transformSelection(textarea, mode) {
|
||
const fullText = textarea.value;
|
||
const selStart = textarea.selectionStart;
|
||
const selEnd = textarea.selectionEnd;
|
||
|
||
// Расширяем до границ строк
|
||
let blockStart = fullText.lastIndexOf("\n", selStart - 1);
|
||
blockStart = blockStart === -1 ? 0 : blockStart + 1;
|
||
let blockEnd = fullText.indexOf("\n", selEnd);
|
||
blockEnd = blockEnd === -1 ? fullText.length : blockEnd;
|
||
|
||
const block = fullText.substring(blockStart, blockEnd);
|
||
const lines = block.split("\n");
|
||
|
||
const orderedRe = /^(\s*)(\d+)\.\s/;
|
||
const unorderedRe = /^(\s*)([-*+])\s/;
|
||
const todoRe = /^(\s*)- \[( |x)\] \s?/i;
|
||
const anyListPrefixRe = /^(\s*)(- \[(?: |x)\]\s?|[-*+]\s|\d+\.\s)/i;
|
||
|
||
function stripAnyPrefix(line) {
|
||
const m = line.match(anyListPrefixRe);
|
||
if (!m) return line;
|
||
return line.slice((m[1] + (m[2] || "")).length);
|
||
}
|
||
|
||
function toggleOrdered(inputLines) {
|
||
const nonEmpty = inputLines.filter((l) => l.trim() !== "");
|
||
const allHave =
|
||
nonEmpty.length > 0 && nonEmpty.every((l) => orderedRe.test(l));
|
||
if (allHave) {
|
||
return inputLines.map((l) => {
|
||
if (!l.trim()) return l;
|
||
const m = l.match(orderedRe);
|
||
if (!m) return l;
|
||
return m[1] + l.slice(m[0].length);
|
||
});
|
||
}
|
||
let index = 1;
|
||
return inputLines.map((l) => {
|
||
if (!l.trim()) return l;
|
||
// Снимаем любые префиксы и нумеруем заново
|
||
const indent = l.match(/^\s*/)?.[0] || "";
|
||
const content = stripAnyPrefix(l.trimStart());
|
||
const numbered = `${indent}${index}. ${content}`;
|
||
index += 1;
|
||
return numbered;
|
||
});
|
||
}
|
||
|
||
function toggleUnordered(inputLines) {
|
||
const nonEmpty = inputLines.filter((l) => l.trim() !== "");
|
||
const allHave =
|
||
nonEmpty.length > 0 && nonEmpty.every((l) => unorderedRe.test(l));
|
||
if (allHave) {
|
||
return inputLines.map((l) => {
|
||
if (!l.trim()) return l;
|
||
const m = l.match(unorderedRe);
|
||
if (!m) return l;
|
||
return m[1] + l.slice(m[0].length);
|
||
});
|
||
}
|
||
return inputLines.map((l) => {
|
||
if (!l.trim()) return l;
|
||
const indent = l.match(/^\s*/)?.[0] || "";
|
||
const content = stripAnyPrefix(l.trimStart());
|
||
return `${indent}- ${content}`;
|
||
});
|
||
}
|
||
|
||
function toggleTodo(inputLines) {
|
||
const nonEmpty = inputLines.filter((l) => l.trim() !== "");
|
||
const allHave =
|
||
nonEmpty.length > 0 && nonEmpty.every((l) => todoRe.test(l));
|
||
if (allHave) {
|
||
return inputLines.map((l) => {
|
||
if (!l.trim()) return l;
|
||
const m = l.match(todoRe);
|
||
if (!m) return l;
|
||
return m[1] + l.slice(m[0].length);
|
||
});
|
||
}
|
||
return inputLines.map((l) => {
|
||
if (!l.trim()) return l;
|
||
const indent = l.match(/^\s*/)?.[0] || "";
|
||
const content = stripAnyPrefix(l.trimStart());
|
||
return `${indent}- [ ] ${content}`;
|
||
});
|
||
}
|
||
|
||
let newLines;
|
||
if (mode === "ordered") newLines = toggleOrdered(lines);
|
||
else if (mode === "unordered") newLines = toggleUnordered(lines);
|
||
else newLines = toggleTodo(lines);
|
||
|
||
const newBlock = newLines.join("\n");
|
||
const newValue =
|
||
fullText.slice(0, blockStart) + newBlock + fullText.slice(blockEnd);
|
||
const newSelStart = blockStart;
|
||
const newSelEnd = blockStart + newBlock.length;
|
||
return { newValue, newSelStart, newSelEnd };
|
||
}
|
||
|
||
// Обработчики для кнопок markdown
|
||
boldBtn.addEventListener("click", function () {
|
||
insertMarkdown("**");
|
||
});
|
||
|
||
italicBtn.addEventListener("click", function () {
|
||
insertMarkdown("*");
|
||
});
|
||
|
||
strikethroughBtn.addEventListener("click", function () {
|
||
insertMarkdown("~~");
|
||
});
|
||
|
||
colorBtn.addEventListener("click", function () {
|
||
insertColorTag();
|
||
});
|
||
|
||
// Обработчик кнопки заголовка - открываем выпадающее меню
|
||
headerBtn.addEventListener("click", function (event) {
|
||
event.stopPropagation();
|
||
headerDropdown.classList.toggle("show");
|
||
});
|
||
|
||
// Обработчики для пунктов выпадающего меню
|
||
headerDropdown.querySelectorAll("button").forEach((btn) => {
|
||
btn.addEventListener("click", function (event) {
|
||
event.stopPropagation();
|
||
const level = this.dataset.level;
|
||
const headerTag = "#".repeat(parseInt(level)) + " ";
|
||
insertMarkdown(headerTag);
|
||
headerDropdown.classList.remove("show");
|
||
});
|
||
});
|
||
|
||
// Закрытие выпадающего меню при клике вне его
|
||
document.addEventListener("click", function () {
|
||
headerDropdown.classList.remove("show");
|
||
});
|
||
|
||
listBtn.addEventListener("click", function () {
|
||
insertMarkdown("- ");
|
||
});
|
||
|
||
numberedListBtn.addEventListener("click", function () {
|
||
insertMarkdown("1. ");
|
||
});
|
||
|
||
quoteBtn.addEventListener("click", function () {
|
||
insertMarkdown("> ");
|
||
});
|
||
|
||
codeBtn.addEventListener("click", function () {
|
||
insertMarkdown("`");
|
||
});
|
||
|
||
linkBtn.addEventListener("click", function () {
|
||
insertMarkdown("[Текст ссылки](URL)");
|
||
});
|
||
|
||
checkboxBtn.addEventListener("click", function () {
|
||
insertMarkdown("- [ ] ");
|
||
});
|
||
|
||
// Обработчик для кнопки загрузки изображений
|
||
imageBtn.addEventListener("click", function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
imageInput.click();
|
||
});
|
||
|
||
// Дополнительный обработчик для touch событий на мобильных устройствах
|
||
imageBtn.addEventListener("touchend", function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
imageInput.click();
|
||
});
|
||
|
||
// Обработчик выбора файлов
|
||
imageInput.addEventListener("change", function (event) {
|
||
const files = Array.from(event.target.files);
|
||
let addedCount = 0;
|
||
|
||
files.forEach((file) => {
|
||
if (file.type.startsWith("image/")) {
|
||
// Проверяем размер файла (максимум 10MB)
|
||
if (file.size > 10 * 1024 * 1024) {
|
||
alert(`Файл "${file.name}" слишком большой. Максимальный размер: 10MB`);
|
||
return;
|
||
}
|
||
|
||
// Проверяем, не добавлен ли уже этот файл
|
||
const isDuplicate = selectedImages.some(
|
||
(existingFile) =>
|
||
existingFile.name === file.name && existingFile.size === file.size
|
||
);
|
||
|
||
if (!isDuplicate) {
|
||
selectedImages.push(file);
|
||
addedCount++;
|
||
}
|
||
} else {
|
||
alert(`Файл "${file.name}" не является изображением`);
|
||
}
|
||
});
|
||
|
||
if (addedCount > 0) {
|
||
updateImagePreview();
|
||
// Показываем уведомление о добавленных файлах
|
||
if (addedCount === 1) {
|
||
console.log(`Добавлено 1 изображение`);
|
||
} else {
|
||
console.log(`Добавлено ${addedCount} изображений`);
|
||
}
|
||
}
|
||
|
||
// Очищаем input для возможности повторного выбора тех же файлов
|
||
event.target.value = "";
|
||
});
|
||
|
||
// Обработчик очистки всех изображений
|
||
clearImagesBtn.addEventListener("click", function () {
|
||
selectedImages = [];
|
||
updateImagePreview();
|
||
imageInput.value = "";
|
||
});
|
||
|
||
// Обработчики модального окна
|
||
modalClose.addEventListener("click", function () {
|
||
imageModal.style.display = "none";
|
||
});
|
||
|
||
imageModal.addEventListener("click", function (event) {
|
||
if (event.target === imageModal) {
|
||
imageModal.style.display = "none";
|
||
}
|
||
});
|
||
|
||
// Закрытие модального окна по Escape
|
||
document.addEventListener("keydown", function (event) {
|
||
if (event.key === "Escape" && imageModal.style.display === "block") {
|
||
imageModal.style.display = "none";
|
||
}
|
||
});
|
||
|
||
// Функция для обновления превью изображений
|
||
function updateImagePreview() {
|
||
if (selectedImages.length === 0) {
|
||
imagePreviewContainer.style.display = "none";
|
||
return;
|
||
}
|
||
|
||
imagePreviewContainer.style.display = "block";
|
||
imagePreviewList.innerHTML = "";
|
||
|
||
selectedImages.forEach((file, index) => {
|
||
const reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
const previewItem = document.createElement("div");
|
||
previewItem.className = "image-preview-item";
|
||
|
||
// Форматируем размер файла
|
||
const fileSize = (file.size / 1024 / 1024).toFixed(2);
|
||
const fileName =
|
||
file.name.length > 20 ? file.name.substring(0, 20) + "..." : file.name;
|
||
|
||
previewItem.innerHTML = `
|
||
<img src="${e.target.result}" alt="Preview" loading="lazy">
|
||
<button class="remove-image-btn" data-index="${index}" title="Удалить изображение">×</button>
|
||
<div class="image-info">${fileName}<br>${fileSize} MB</div>
|
||
`;
|
||
|
||
imagePreviewList.appendChild(previewItem);
|
||
|
||
// Обработчик удаления изображения
|
||
const removeBtn = previewItem.querySelector(".remove-image-btn");
|
||
removeBtn.addEventListener("click", function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
selectedImages.splice(index, 1);
|
||
updateImagePreview();
|
||
});
|
||
|
||
// Дополнительный обработчик для touch событий
|
||
removeBtn.addEventListener("touchend", function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
selectedImages.splice(index, 1);
|
||
updateImagePreview();
|
||
});
|
||
};
|
||
|
||
reader.onerror = function () {
|
||
console.error("Ошибка чтения файла:", file.name);
|
||
alert(`Ошибка чтения файла: ${file.name}`);
|
||
};
|
||
|
||
reader.readAsDataURL(file);
|
||
});
|
||
}
|
||
|
||
// Функция для отображения изображения в модальном окне
|
||
function showImageModal(imageSrc) {
|
||
console.log("showImageModal called with:", imageSrc);
|
||
try {
|
||
modalImage.src = imageSrc;
|
||
imageModal.style.display = "block";
|
||
console.log("Modal opened successfully");
|
||
} catch (error) {
|
||
console.error("Error in showImageModal:", error);
|
||
}
|
||
}
|
||
|
||
// Функция для загрузки изображений на сервер
|
||
async function uploadImages(noteId) {
|
||
if (selectedImages.length === 0) {
|
||
return [];
|
||
}
|
||
|
||
const formData = new FormData();
|
||
selectedImages.forEach((file) => {
|
||
formData.append("images", file);
|
||
});
|
||
|
||
try {
|
||
// Показываем индикатор загрузки для мобильных устройств
|
||
const isMobile =
|
||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||
navigator.userAgent
|
||
) ||
|
||
(navigator.maxTouchPoints && navigator.maxTouchPoints > 2) ||
|
||
window.matchMedia("(max-width: 768px)").matches;
|
||
|
||
if (isMobile) {
|
||
// Создаем простое уведомление о загрузке
|
||
const loadingDiv = document.createElement("div");
|
||
loadingDiv.id = "mobile-upload-loading";
|
||
loadingDiv.style.cssText = `
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
z-index: 10000;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
`;
|
||
loadingDiv.innerHTML = `
|
||
<div>📤 Загрузка изображений...</div>
|
||
<div style="font-size: 12px; margin-top: 10px;">${selectedImages.length} файл(ов)</div>
|
||
`;
|
||
document.body.appendChild(loadingDiv);
|
||
}
|
||
|
||
const response = await fetch(`/api/notes/${noteId}/images`, {
|
||
method: "POST",
|
||
body: formData,
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка загрузки изображений");
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
// Удаляем индикатор загрузки
|
||
const loadingDiv = document.getElementById("mobile-upload-loading");
|
||
if (loadingDiv) {
|
||
loadingDiv.remove();
|
||
}
|
||
|
||
return result.images || [];
|
||
} catch (error) {
|
||
console.error("Ошибка загрузки изображений:", error);
|
||
|
||
// Удаляем индикатор загрузки в случае ошибки
|
||
const loadingDiv = document.getElementById("mobile-upload-loading");
|
||
if (loadingDiv) {
|
||
loadingDiv.remove();
|
||
}
|
||
|
||
// Показываем ошибку пользователю
|
||
alert(`Ошибка загрузки изображений: ${error.message}`);
|
||
return [];
|
||
}
|
||
}
|
||
|
||
// Функция для получения изображений заметки
|
||
async function getNoteImages(noteId) {
|
||
try {
|
||
const response = await fetch(`/api/notes/${noteId}/images`);
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка получения изображений");
|
||
}
|
||
return await response.json();
|
||
} catch (error) {
|
||
console.error("Ошибка получения изображений:", error);
|
||
return [];
|
||
}
|
||
}
|
||
|
||
// Функция для удаления изображения заметки
|
||
async function deleteNoteImage(noteId, imageId) {
|
||
try {
|
||
const response = await fetch(`/api/notes/${noteId}/images/${imageId}`, {
|
||
method: "DELETE",
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка удаления изображения");
|
||
}
|
||
|
||
return true;
|
||
} catch (error) {
|
||
console.error("Ошибка удаления изображения:", error);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// Функция для загрузки заметок с сервера
|
||
async function loadNotes(forceReload = false) {
|
||
const now = Date.now();
|
||
const CACHE_DURATION = 30000; // 30 секунд кэширования
|
||
|
||
// Используем кэш, если он не устарел и не требуется принудительная перезагрузка
|
||
if (!forceReload && notesCache && now - lastLoadTime < CACHE_DURATION) {
|
||
allNotes = notesCache;
|
||
await renderNotes(notesCache);
|
||
renderCalendar();
|
||
renderTags();
|
||
renderCalendarMobile();
|
||
renderTagsMobile();
|
||
return;
|
||
}
|
||
|
||
// Показываем индикатор загрузки
|
||
showLoadingIndicator();
|
||
|
||
try {
|
||
const response = await fetch("/api/notes");
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка загрузки заметок");
|
||
}
|
||
const notes = await response.json();
|
||
allNotes = notes; // Сохраняем все заметки в глобальную переменную
|
||
notesCache = notes; // Сохраняем в кэш
|
||
lastLoadTime = now;
|
||
await renderNotes(notes);
|
||
renderCalendar(); // Обновляем календарь после загрузки заметок
|
||
renderTags(); // Обновляем теги после загрузки заметок
|
||
renderCalendarMobile(); // Обновляем мобильный календарь после загрузки заметок
|
||
renderTagsMobile(); // Обновляем мобильные теги после загрузки заметок
|
||
} catch (error) {
|
||
console.error("Ошибка:", error);
|
||
notesList.innerHTML = "<p>Ошибка загрузки заметок</p>";
|
||
} finally {
|
||
// Скрываем индикатор загрузки
|
||
hideLoadingIndicator();
|
||
}
|
||
}
|
||
|
||
// Функция для показа индикатора загрузки
|
||
function showLoadingIndicator() {
|
||
if (!document.getElementById("loading-indicator")) {
|
||
const loadingDiv = document.createElement("div");
|
||
loadingDiv.id = "loading-indicator";
|
||
loadingDiv.innerHTML = `
|
||
<div style="
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
z-index: 10000;
|
||
font-size: 16px;
|
||
">
|
||
<div style="text-align: center;">
|
||
<div style="
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 4px solid #f3f3f3;
|
||
border-top: 4px solid #007bff;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 10px;
|
||
"></div>
|
||
Загрузка заметок...
|
||
</div>
|
||
</div>
|
||
<style>
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
</style>
|
||
`;
|
||
document.body.appendChild(loadingDiv);
|
||
}
|
||
}
|
||
|
||
// Функция для скрытия индикатора загрузки
|
||
function hideLoadingIndicator() {
|
||
const loadingIndicator = document.getElementById("loading-indicator");
|
||
if (loadingIndicator) {
|
||
loadingIndicator.remove();
|
||
}
|
||
}
|
||
|
||
// Функция для поиска заметок
|
||
async function searchNotes(query) {
|
||
if (!query || query.trim() === "") {
|
||
searchQuery = "";
|
||
searchResults = [];
|
||
await renderNotes(allNotes);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const params = new URLSearchParams();
|
||
params.append("q", query.trim());
|
||
|
||
// Добавляем фильтры, если они активны
|
||
if (selectedTagFilter) {
|
||
params.append("tag", selectedTagFilter);
|
||
}
|
||
if (selectedDateFilter) {
|
||
params.append("date", selectedDateFilter);
|
||
}
|
||
|
||
const response = await fetch(`/api/notes/search?${params}`);
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка поиска заметок");
|
||
}
|
||
|
||
searchResults = await response.json();
|
||
searchQuery = query.trim();
|
||
await renderNotes(searchResults);
|
||
} catch (error) {
|
||
console.error("Ошибка поиска:", error);
|
||
searchResults = [];
|
||
await renderNotes(allNotes);
|
||
}
|
||
}
|
||
|
||
// Функция для подсветки найденного текста
|
||
function highlightSearchText(content, query) {
|
||
if (!query || query.trim() === "") {
|
||
return content;
|
||
}
|
||
|
||
const regex = new RegExp(
|
||
`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
|
||
"gi"
|
||
);
|
||
return content.replace(regex, '<span class="search-highlight">$1</span>');
|
||
}
|
||
|
||
// Настройка marked.js для поддержки чекбоксов и strikethrough
|
||
const renderer = new marked.Renderer();
|
||
|
||
// Переопределяем рендеринг списков, чтобы чекбоксы были кликабельными (без disabled)
|
||
const originalListItem = renderer.listitem.bind(renderer);
|
||
renderer.listitem = function (text, task, checked) {
|
||
if (task) {
|
||
// Удаляем disabled чекбокс из текста, если он есть
|
||
let cleanText = text.replace(/<input[^>]*disabled[^>]*>/gi, "").trim();
|
||
// Создаем чекбокс БЕЗ disabled атрибута
|
||
return `<li class="task-list-item"><input type="checkbox" ${
|
||
checked ? "checked" : ""
|
||
}> ${cleanText}</li>\n`;
|
||
}
|
||
return originalListItem(text, task, checked);
|
||
};
|
||
|
||
marked.setOptions({
|
||
gfm: true, // GitHub Flavored Markdown (включает strikethrough)
|
||
breaks: true,
|
||
renderer: renderer,
|
||
html: true, // Разрешить HTML теги
|
||
});
|
||
|
||
// Функция для отображения заметок
|
||
async function renderNotes(notes) {
|
||
notesList.innerHTML = "";
|
||
|
||
// Фильтруем заметки по дате и тегам
|
||
let notesToDisplay = notes;
|
||
|
||
if (selectedDateFilter) {
|
||
notesToDisplay = notesToDisplay.filter((note) => {
|
||
if (note.created_at) {
|
||
return formatDateFromTimestamp(note.created_at) === selectedDateFilter;
|
||
}
|
||
return false;
|
||
});
|
||
}
|
||
|
||
if (selectedTagFilter) {
|
||
notesToDisplay = notesToDisplay.filter((note) => {
|
||
const tags = extractTags(note.content);
|
||
return tags.includes(selectedTagFilter);
|
||
});
|
||
}
|
||
|
||
// Если нет заметок для отображения
|
||
if (notesToDisplay.length === 0) {
|
||
let message = "Заметок пока нет";
|
||
|
||
if (selectedDateFilter && selectedTagFilter) {
|
||
message = `Нет заметок за ${selectedDateFilter} с тегом #${selectedTagFilter}`;
|
||
} else if (selectedDateFilter) {
|
||
message = `Нет заметок за выбранную дату (${selectedDateFilter})`;
|
||
} else if (selectedTagFilter) {
|
||
message = `Нет заметок с тегом #${selectedTagFilter}`;
|
||
}
|
||
|
||
notesList.innerHTML = `<div class="container"><p style="text-align: center; color: #999;">${message}</p></div>`;
|
||
return;
|
||
}
|
||
|
||
// Итерируемся по заметкам в обычном порядке, чтобы новые были сверху
|
||
for (const note of notesToDisplay) {
|
||
let contentToProcess = note.content;
|
||
|
||
// Сначала подсвечиваем найденный текст в исходном markdown
|
||
if (searchQuery) {
|
||
contentToProcess = highlightSearchText(contentToProcess, searchQuery);
|
||
}
|
||
|
||
// Затем преобразуем теги в кликабельные элементы
|
||
const contentWithClickableTags = makeTagsClickable(contentToProcess);
|
||
|
||
const parsedContent = marked.parse(contentWithClickableTags);
|
||
|
||
// Используем изображения, которые уже пришли с заметкой
|
||
const noteImages = Array.isArray(note.images) ? note.images : [];
|
||
let imagesHtml = "";
|
||
|
||
if (noteImages.length > 0) {
|
||
imagesHtml = '<div class="note-images-container">';
|
||
noteImages.forEach((image) => {
|
||
imagesHtml += `
|
||
<div class="note-image-item">
|
||
<img src="${image.file_path}" alt="${image.original_name}" class="note-image" data-image-src="${image.file_path}" loading="lazy">
|
||
<button class="remove-note-image-btn" data-note-id="${note.id}" data-image-id="${image.id}" title="Удалить изображение">×</button>
|
||
</div>
|
||
`;
|
||
});
|
||
imagesHtml += "</div>";
|
||
}
|
||
|
||
// Форматируем дату создания и изменения по локали устройства
|
||
let dateDisplay;
|
||
if (note.created_at) {
|
||
const created = parseSQLiteUtc(note.created_at);
|
||
if (note.updated_at && note.created_at !== note.updated_at) {
|
||
const updated = parseSQLiteUtc(note.updated_at);
|
||
dateDisplay = `Создано: ${formatLocalDateTime(
|
||
created
|
||
)} • Изменено: ${formatLocalDateTime(updated)}`;
|
||
} else {
|
||
dateDisplay = formatLocalDateTime(created);
|
||
}
|
||
} else {
|
||
// Фолбэк для старых записей
|
||
dateDisplay = `${note.date} ${note.time}`;
|
||
}
|
||
|
||
// Определяем класс для закрепленной заметки
|
||
const pinnedClass = note.is_pinned ? " note-pinned" : "";
|
||
const pinIndicator = note.is_pinned
|
||
? '<span class="pin-indicator"><span class="iconify" data-icon="mdi:pin"></span>Закреплено</span>'
|
||
: "";
|
||
|
||
const noteHtml = `
|
||
<div id="note" class="container${pinnedClass}" data-note-id="${note.id}">
|
||
<div class="date">
|
||
<span class="date-text">${dateDisplay}${pinIndicator}</span>
|
||
<div class="note-actions">
|
||
<div id="pinBtn" class="notesHeaderBtn" data-id="${note.id}" title="${note.is_pinned ? "Открепить" : "Закрепить"}">
|
||
<span class="iconify" data-icon="mdi:pin${note.is_pinned ? "-off" : ""}"></span>
|
||
</div>
|
||
<div id="archiveBtn" class="notesHeaderBtn" data-id="${note.id}" title="Архивировать">
|
||
<span class="iconify" data-icon="mdi:archive"></span>
|
||
</div>
|
||
<div id="editBtn" class="notesHeaderBtn" data-id="${note.id}">Ред.</div>
|
||
<div id="deleteBtn" class="notesHeaderBtn" data-id="${note.id}">Удал.</div>
|
||
</div>
|
||
</div>
|
||
<div class="textNote" data-original-content="${note.content.replace(
|
||
/"/g,
|
||
"""
|
||
)}">${parsedContent}</div>
|
||
${imagesHtml}
|
||
</div>
|
||
`;
|
||
notesList.insertAdjacentHTML("beforeend", noteHtml);
|
||
}
|
||
|
||
// Добавляем обработчики событий для кнопок редактирования и удаления
|
||
addNoteEventListeners();
|
||
|
||
// Добавляем обработчики кликов для тегов в заметках
|
||
addTagClickListeners();
|
||
|
||
// Добавляем обработчики для изображений в заметках
|
||
addImageEventListeners();
|
||
|
||
// Добавляем обработчики для чекбоксов в заметках
|
||
addCheckboxEventListeners();
|
||
|
||
// Обрабатываем длинные заметки
|
||
handleLongNotes();
|
||
|
||
// Инициализируем lazy loading для новых изображений
|
||
initLazyLoading();
|
||
}
|
||
|
||
// Функция для обработки длинных заметок
|
||
function handleLongNotes() {
|
||
const MAX_HEIGHT = 300; // Максимальная высота в пикселях
|
||
|
||
document.querySelectorAll(".textNote").forEach((noteElement) => {
|
||
// Проверяем высоту контента
|
||
const contentHeight = noteElement.scrollHeight;
|
||
|
||
if (contentHeight > MAX_HEIGHT) {
|
||
// Добавляем класс для сворачивания
|
||
noteElement.classList.add("collapsed");
|
||
|
||
// Создаем кнопку "Показать все"
|
||
const showMoreBtn = document.createElement("button");
|
||
showMoreBtn.classList.add("show-more-btn");
|
||
showMoreBtn.textContent = "Показать полностью";
|
||
showMoreBtn.setAttribute("data-expanded", "false");
|
||
|
||
// Вставляем кнопку после заметки
|
||
noteElement.parentElement.insertBefore(
|
||
showMoreBtn,
|
||
noteElement.nextSibling
|
||
);
|
||
|
||
// Обработчик клика на кнопку
|
||
showMoreBtn.addEventListener("click", function () {
|
||
const isExpanded = this.getAttribute("data-expanded") === "true";
|
||
|
||
if (isExpanded) {
|
||
// Сворачиваем
|
||
noteElement.classList.add("collapsed");
|
||
this.textContent = "Показать полностью";
|
||
this.setAttribute("data-expanded", "false");
|
||
} else {
|
||
// Разворачиваем
|
||
noteElement.classList.remove("collapsed");
|
||
this.textContent = "Свернуть";
|
||
this.setAttribute("data-expanded", "true");
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// Функция для добавления обработчиков событий к заметкам
|
||
function addNoteEventListeners() {
|
||
// Обработчик закрепления
|
||
document.querySelectorAll("#pinBtn").forEach((btn) => {
|
||
btn.addEventListener("click", async function (event) {
|
||
const noteId = event.target.closest("#pinBtn").dataset.id;
|
||
try {
|
||
const response = await fetch(`/api/notes/${noteId}/pin`, {
|
||
method: "PUT",
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка изменения закрепления");
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
// Перезагружаем заметки
|
||
await loadNotes(true);
|
||
} catch (error) {
|
||
console.error("Ошибка:", error);
|
||
alert("Ошибка изменения закрепления");
|
||
}
|
||
});
|
||
});
|
||
|
||
// Обработчик архивирования
|
||
document.querySelectorAll("#archiveBtn").forEach((btn) => {
|
||
btn.addEventListener("click", async function (event) {
|
||
const noteId = event.target.closest("#archiveBtn").dataset.id;
|
||
if (confirm("Архивировать эту заметку? Её можно будет восстановить из настроек.")) {
|
||
try {
|
||
const response = await fetch(`/api/notes/${noteId}/archive`, {
|
||
method: "PUT",
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка архивирования заметки");
|
||
}
|
||
|
||
// Перезагружаем заметки
|
||
await loadNotes(true);
|
||
} catch (error) {
|
||
console.error("Ошибка:", error);
|
||
alert("Ошибка архивирования заметки");
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// Обработчик удаления
|
||
document.querySelectorAll("#deleteBtn").forEach((btn) => {
|
||
btn.addEventListener("click", async function (event) {
|
||
const noteId = event.target.dataset.id;
|
||
if (confirm("Вы уверены, что хотите удалить эту заметку?")) {
|
||
try {
|
||
const response = await fetch(`/api/notes/${noteId}`, {
|
||
method: "DELETE",
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка удаления заметки");
|
||
}
|
||
|
||
// Перезагружаем заметки
|
||
await loadNotes(true);
|
||
} catch (error) {
|
||
console.error("Ошибка:", error);
|
||
alert("Ошибка удаления заметки");
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// Обработчик редактирования
|
||
document.querySelectorAll("#editBtn").forEach((btn) => {
|
||
btn.addEventListener("click", function (event) {
|
||
const noteId = event.target.dataset.id;
|
||
const noteContainer = event.target.closest("#note");
|
||
const noteContent = noteContainer.querySelector(".textNote");
|
||
|
||
// Разворачиваем заметку при редактировании
|
||
noteContent.classList.remove("collapsed");
|
||
|
||
// Скрываем кнопку "Показать полностью" если она есть
|
||
const showMoreBtn = noteContainer.querySelector(".show-more-btn");
|
||
if (showMoreBtn) {
|
||
showMoreBtn.style.display = "none";
|
||
}
|
||
|
||
// Создаем контейнер для markdown кнопок
|
||
const markdownButtonsContainer = document.createElement("div");
|
||
markdownButtonsContainer.classList.add("markdown-buttons");
|
||
|
||
// Создаем markdown кнопки
|
||
const markdownButtons = [
|
||
{ id: "editBoldBtn", icon: "mdi:format-bold", tag: "**" },
|
||
{ id: "editItalicBtn", icon: "mdi:format-italic", tag: "*" },
|
||
{ id: "editColorBtn", icon: "mdi:palette", tag: "color" },
|
||
{ id: "editHeaderBtn", icon: "mdi:format-header-1", tag: "# " },
|
||
{ id: "editListBtn", icon: "mdi:format-list-bulleted", tag: "- " },
|
||
{
|
||
id: "editNumberedListBtn",
|
||
icon: "mdi:format-list-numbered",
|
||
tag: "1. ",
|
||
},
|
||
{ id: "editQuoteBtn", icon: "mdi:format-quote-close", tag: "> " },
|
||
{ id: "editCodeBtn", icon: "mdi:code-tags", tag: "`" },
|
||
{ id: "editLinkBtn", icon: "mdi:link", tag: "[Текст ссылки](URL)" },
|
||
{
|
||
id: "editCheckboxBtn",
|
||
icon: "mdi:checkbox-marked-outline",
|
||
tag: "- [ ] ",
|
||
},
|
||
{ id: "editImageBtn", icon: "mdi:image-plus", tag: "image" },
|
||
];
|
||
|
||
markdownButtons.forEach((button) => {
|
||
const btn = document.createElement("button");
|
||
btn.classList.add("btnMarkdown");
|
||
btn.id = button.id;
|
||
btn.innerHTML = `<span class="iconify" data-icon="${button.icon}"></span>`;
|
||
markdownButtonsContainer.appendChild(btn);
|
||
});
|
||
|
||
// Создаем textarea с уже существующим классом textInput
|
||
const textarea = document.createElement("textarea");
|
||
textarea.classList.add("textInput");
|
||
// Получаем исходный markdown контент из data-атрибута или используем textContent как fallback
|
||
textarea.value =
|
||
noteContent.dataset.originalContent || noteContent.textContent;
|
||
|
||
// Привязываем авторасширение к textarea для редактирования
|
||
textarea.addEventListener("input", function () {
|
||
autoExpandTextarea(textarea);
|
||
});
|
||
|
||
// Добавляем обработчик клавиатуры для автоматического продолжения списков
|
||
textarea.addEventListener("keydown", function (event) {
|
||
if (event.key === "Enter") {
|
||
// Автоматическое продолжение списков в режиме редактирования
|
||
const start = textarea.selectionStart;
|
||
const text = textarea.value;
|
||
const lines = text.split("\n");
|
||
|
||
// Определяем текущую строку
|
||
let currentLineIndex = 0;
|
||
let currentLineStart = 0;
|
||
let currentLine = "";
|
||
|
||
for (let i = 0; i < lines.length; i++) {
|
||
const lineLength = lines[i].length;
|
||
if (currentLineStart + lineLength >= start) {
|
||
currentLineIndex = i;
|
||
currentLine = lines[i];
|
||
break;
|
||
}
|
||
currentLineStart += lineLength + 1; // +1 для символа новой строки
|
||
}
|
||
|
||
// Проверяем, является ли текущая строка списком
|
||
const listPatterns = [
|
||
/^(\s*)- \[ \] /, // Чекбокс (не отмечен): - [ ]
|
||
/^(\s*)- \[x\] /i, // Чекбокс (отмечен): - [x]
|
||
/^(\s*)- /, // Неупорядоченный список: -
|
||
/^(\s*)\* /, // Неупорядоченный список: *
|
||
/^(\s*)\+ /, // Неупорядоченный список: +
|
||
/^(\s*)(\d+)\. /, // Упорядоченный список: 1. 2. 3.
|
||
/^(\s*)(\w+)\. /, // Буквенный список: a. b. c.
|
||
];
|
||
|
||
let listMatch = null;
|
||
let listType = null;
|
||
|
||
for (const pattern of listPatterns) {
|
||
const match = currentLine.match(pattern);
|
||
if (match) {
|
||
listMatch = match;
|
||
if (pattern === listPatterns[0] || pattern === listPatterns[1]) {
|
||
listType = "checkbox";
|
||
} else if (
|
||
pattern === listPatterns[2] ||
|
||
pattern === listPatterns[3] ||
|
||
pattern === listPatterns[4]
|
||
) {
|
||
listType = "unordered";
|
||
} else if (pattern === listPatterns[7]) {
|
||
// Нумерованный список всегда начинается с 1.
|
||
listType = "numbered";
|
||
} else {
|
||
listType = "ordered";
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (listMatch) {
|
||
event.preventDefault();
|
||
|
||
const indent = listMatch[1] || ""; // Отступы перед маркером
|
||
const marker = listMatch[0].slice(indent.length); // Маркер списка без отступов
|
||
|
||
// Получаем текст после маркера
|
||
const afterMarker = currentLine.slice(listMatch[0].length);
|
||
|
||
if (afterMarker.trim() === "") {
|
||
// Если строка пустая после маркера, выходим из списка
|
||
const beforeCursor = text.substring(0, start);
|
||
const afterCursor = text.substring(start);
|
||
|
||
// Удаляем маркер и отступы текущей строки
|
||
const newBefore = beforeCursor.replace(
|
||
/\n\s*- \[ \] \s*$|\n\s*- \[x\] \s*$|\n\s*[-*+]\s*$|\n\s*\d+\.\s*$|\n\s*\w+\.\s*$/i,
|
||
"\n"
|
||
);
|
||
textarea.value = newBefore + afterCursor;
|
||
|
||
// Устанавливаем курсор после удаленного маркера
|
||
const newCursorPos = newBefore.length;
|
||
textarea.setSelectionRange(newCursorPos, newCursorPos);
|
||
} else {
|
||
// Продолжаем список
|
||
const beforeCursor = text.substring(0, start);
|
||
const afterCursor = text.substring(start);
|
||
|
||
let newMarker = "";
|
||
if (listType === "checkbox") {
|
||
// Для чекбоксов всегда создаем новый пустой чекбокс
|
||
newMarker = indent + "- [ ] ";
|
||
} else if (listType === "unordered") {
|
||
newMarker = indent + marker;
|
||
} else if (listType === "ordered") {
|
||
// Для упорядоченных списков увеличиваем номер
|
||
const number = parseInt(listMatch[2]);
|
||
const nextNumber = number + 1;
|
||
const numberStr = listMatch[2].replace(
|
||
/\d+/,
|
||
nextNumber.toString()
|
||
);
|
||
newMarker = indent + numberStr + ". ";
|
||
} else if (listType === "numbered") {
|
||
// Для нумерованного списка всегда начинаем с 1.
|
||
newMarker = indent + "1. ";
|
||
}
|
||
|
||
textarea.value = beforeCursor + "\n" + newMarker + afterCursor;
|
||
|
||
// Устанавливаем курсор после нового маркера
|
||
const newCursorPos = start + 1 + newMarker.length;
|
||
textarea.setSelectionRange(newCursorPos, newCursorPos);
|
||
}
|
||
|
||
// Обновляем высоту textarea
|
||
autoExpandTextarea(textarea);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Создаем элементы для загрузки изображений в режиме редактирования
|
||
const editImageInput = document.createElement("input");
|
||
editImageInput.type = "file";
|
||
editImageInput.accept = "image/*";
|
||
editImageInput.multiple = true;
|
||
editImageInput.style.display = "none";
|
||
editImageInput.id = `editImageInput-${noteId}`;
|
||
|
||
const editImagePreviewContainer = document.createElement("div");
|
||
editImagePreviewContainer.id = `editImagePreviewContainer-${noteId}`;
|
||
editImagePreviewContainer.classList.add("image-preview-container");
|
||
editImagePreviewContainer.style.display = "none";
|
||
|
||
const editImagePreviewHeader = document.createElement("div");
|
||
editImagePreviewHeader.classList.add("image-preview-header");
|
||
editImagePreviewHeader.innerHTML = `
|
||
<span>Новые изображения:</span>
|
||
<button type="button" class="clear-images-btn" id="editClearImagesBtn-${noteId}">Очистить все</button>
|
||
`;
|
||
|
||
const editImagePreviewList = document.createElement("div");
|
||
editImagePreviewList.id = `editImagePreviewList-${noteId}`;
|
||
editImagePreviewList.classList.add("image-preview-list");
|
||
|
||
editImagePreviewContainer.appendChild(editImagePreviewHeader);
|
||
editImagePreviewContainer.appendChild(editImagePreviewList);
|
||
|
||
// Массив для хранения новых изображений в режиме редактирования
|
||
const editSelectedImages = [];
|
||
|
||
// Контейнер для кнопки сохранения и подсказки
|
||
const saveButtonContainer = document.createElement("div");
|
||
saveButtonContainer.classList.add("save-button-container");
|
||
|
||
// Кнопка сохранить
|
||
const saveEditBtn = document.createElement("button");
|
||
saveEditBtn.textContent = "Сохранить";
|
||
saveEditBtn.classList.add("btnSave");
|
||
|
||
// Кнопка отмены
|
||
const cancelEditBtn = document.createElement("button");
|
||
cancelEditBtn.textContent = "Отмена";
|
||
cancelEditBtn.classList.add("btnSave");
|
||
cancelEditBtn.style.marginLeft = "8px";
|
||
|
||
// Подсказка о горячей клавише
|
||
const saveHint = document.createElement("span");
|
||
saveHint.classList.add("save-hint");
|
||
saveHint.textContent = "или нажмите Alt + Enter";
|
||
|
||
saveButtonContainer.appendChild(saveEditBtn);
|
||
saveButtonContainer.appendChild(cancelEditBtn);
|
||
saveButtonContainer.appendChild(saveHint);
|
||
|
||
// Функция обновления превью изображений для режима редактирования
|
||
const updateEditImagePreview = function () {
|
||
if (editSelectedImages.length === 0) {
|
||
editImagePreviewContainer.style.display = "none";
|
||
return;
|
||
}
|
||
|
||
editImagePreviewContainer.style.display = "block";
|
||
editImagePreviewList.innerHTML = "";
|
||
|
||
editSelectedImages.forEach((file, index) => {
|
||
const reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
const previewItem = document.createElement("div");
|
||
previewItem.className = "image-preview-item";
|
||
|
||
previewItem.innerHTML = `
|
||
<img src="${e.target.result}" alt="Preview" loading="lazy">
|
||
<button class="remove-image-btn" data-index="${index}">×</button>
|
||
<div class="image-info">${file.name}</div>
|
||
`;
|
||
|
||
editImagePreviewList.appendChild(previewItem);
|
||
|
||
// Обработчик удаления изображения
|
||
const removeBtn = previewItem.querySelector(".remove-image-btn");
|
||
removeBtn.addEventListener("click", function () {
|
||
editSelectedImages.splice(index, 1);
|
||
updateEditImagePreview();
|
||
});
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
};
|
||
|
||
// Функция загрузки изображений для режима редактирования
|
||
const uploadEditImages = async function (noteId) {
|
||
if (editSelectedImages.length === 0) {
|
||
return [];
|
||
}
|
||
|
||
const formData = new FormData();
|
||
editSelectedImages.forEach((file) => {
|
||
formData.append("images", file);
|
||
});
|
||
|
||
try {
|
||
const response = await fetch(`/api/notes/${noteId}/images`, {
|
||
method: "POST",
|
||
body: formData,
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка загрузки изображений");
|
||
}
|
||
|
||
const result = await response.json();
|
||
return result.images || [];
|
||
} catch (error) {
|
||
console.error("Ошибка загрузки изображений:", error);
|
||
return [];
|
||
}
|
||
};
|
||
|
||
// Функция сохранения для редактирования
|
||
const saveEditNote = async function () {
|
||
if (textarea.value.trim() !== "" || editSelectedImages.length > 0) {
|
||
try {
|
||
const response = await fetch(`/api/notes/${noteId}`, {
|
||
method: "PUT",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
content: textarea.value || " ", // Минимальный контент, если только изображения
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка сохранения заметки");
|
||
}
|
||
|
||
// Загружаем новые изображения, если они есть
|
||
if (editSelectedImages.length > 0) {
|
||
await uploadEditImages(noteId);
|
||
}
|
||
|
||
// Перезагружаем заметки
|
||
await loadNotes(true);
|
||
} catch (error) {
|
||
console.error("Ошибка:", error);
|
||
alert("Ошибка сохранения заметки");
|
||
}
|
||
}
|
||
};
|
||
|
||
// Функция отмены редактирования
|
||
const cancelEditNote = async function () {
|
||
const originalMarkdown = noteContent.dataset.originalContent || "";
|
||
const hasTextChanges = textarea.value !== originalMarkdown;
|
||
const hasNewImages = editSelectedImages.length > 0;
|
||
|
||
if (hasTextChanges || hasNewImages) {
|
||
const ok = confirm("Отменить изменения?");
|
||
if (!ok) return;
|
||
}
|
||
|
||
// Очистить выбранные новые изображения и превью
|
||
editSelectedImages.length = 0;
|
||
if (editImagePreviewContainer) {
|
||
editImagePreviewContainer.style.display = "none";
|
||
}
|
||
if (editImagePreviewList) {
|
||
editImagePreviewList.innerHTML = "";
|
||
}
|
||
if (editImageInput) {
|
||
editImageInput.value = "";
|
||
}
|
||
|
||
// Перерисовать заметки, вернув исходное состояние
|
||
await loadNotes(true);
|
||
};
|
||
|
||
// Обработчик горячей клавиши Alt+Enter для сохранения редактирования
|
||
textarea.addEventListener("keydown", function (event) {
|
||
if (event.altKey && event.key === "Enter") {
|
||
event.preventDefault();
|
||
saveEditNote();
|
||
} else if (event.key === "Escape") {
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
cancelEditNote();
|
||
}
|
||
});
|
||
|
||
// Обработчики для загрузки изображений в режиме редактирования
|
||
editImageInput.addEventListener("change", function (event) {
|
||
const files = Array.from(event.target.files);
|
||
files.forEach((file) => {
|
||
if (file.type.startsWith("image/")) {
|
||
editSelectedImages.push(file);
|
||
}
|
||
});
|
||
updateEditImagePreview();
|
||
});
|
||
|
||
// Обработчик очистки всех изображений в режиме редактирования
|
||
const editClearImagesBtn = editImagePreviewHeader.querySelector(
|
||
`#editClearImagesBtn-${noteId}`
|
||
);
|
||
editClearImagesBtn.addEventListener("click", function () {
|
||
editSelectedImages.length = 0;
|
||
updateEditImagePreview();
|
||
editImageInput.value = "";
|
||
});
|
||
|
||
// Очищаем текущий контент и вставляем markdown кнопки, textarea, элементы для изображений и контейнер с кнопкой сохранить
|
||
noteContent.innerHTML = "";
|
||
noteContent.appendChild(markdownButtonsContainer);
|
||
noteContent.appendChild(textarea);
|
||
noteContent.appendChild(editImageInput);
|
||
noteContent.appendChild(editImagePreviewContainer);
|
||
noteContent.appendChild(saveButtonContainer);
|
||
|
||
// Применяем авторасширение после добавления в DOM
|
||
setTimeout(() => {
|
||
autoExpandTextarea(textarea);
|
||
textarea.focus();
|
||
}, 0);
|
||
|
||
// Добавляем обработчики для markdown кнопок редактирования
|
||
markdownButtons.forEach((button) => {
|
||
const btn = document.getElementById(button.id);
|
||
btn.addEventListener("click", function () {
|
||
if (button.tag === "image") {
|
||
// Для кнопки изображения открываем диалог выбора файлов
|
||
editImageInput.click();
|
||
} else if (button.tag === "color") {
|
||
// Для кнопки цвета открываем диалог выбора цвета
|
||
insertColorTagForEdit(textarea);
|
||
} else {
|
||
insertMarkdownForEdit(textarea, button.tag);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Обработчик сохранения редактирования
|
||
saveEditBtn.addEventListener("click", saveEditNote);
|
||
|
||
// Обработчик отмены редактирования
|
||
cancelEditBtn.addEventListener("click", cancelEditNote);
|
||
});
|
||
});
|
||
}
|
||
|
||
// Функция для добавления обработчиков кликов на теги в заметках
|
||
function addTagClickListeners() {
|
||
document.querySelectorAll(".textNote .tag-in-note").forEach((tagElement) => {
|
||
tagElement.addEventListener("click", async function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const clickedTag = this.dataset.tag.toLowerCase();
|
||
|
||
// Если кликнули на тот же тег, снимаем фильтр
|
||
if (selectedTagFilter === clickedTag) {
|
||
selectedTagFilter = null;
|
||
} else {
|
||
selectedTagFilter = clickedTag;
|
||
}
|
||
|
||
// Перерисовываем заметки и теги
|
||
await renderNotes(allNotes);
|
||
renderTags();
|
||
updateFilterIndicator();
|
||
});
|
||
});
|
||
}
|
||
|
||
// Функция для добавления обработчиков для изображений в заметках
|
||
function addImageEventListeners() {
|
||
// Обработчики для кликов на изображения (открытие в модальном окне)
|
||
document.querySelectorAll(".note-image").forEach((imageElement) => {
|
||
// Проверяем, не добавлен ли уже обработчик
|
||
if (imageElement._clickHandler) {
|
||
return; // Пропускаем, если обработчик уже добавлен
|
||
}
|
||
|
||
// Создаем новый обработчик
|
||
imageElement._clickHandler = function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const imageSrc = this.dataset.imageSrc;
|
||
console.log("Image clicked, src:", imageSrc); // Для отладки
|
||
if (imageSrc) {
|
||
showImageModal(imageSrc);
|
||
}
|
||
};
|
||
|
||
imageElement.addEventListener("click", imageElement._clickHandler);
|
||
});
|
||
|
||
// Обработчики для кнопок удаления изображений
|
||
document
|
||
.querySelectorAll(".remove-note-image-btn")
|
||
.forEach((buttonElement) => {
|
||
// Удаляем старые обработчики, если они есть
|
||
if (buttonElement._clickHandler) {
|
||
buttonElement.removeEventListener("click", buttonElement._clickHandler);
|
||
}
|
||
|
||
// Создаем новый обработчик
|
||
buttonElement._clickHandler = async function (event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const noteId = this.dataset.noteId;
|
||
const imageId = this.dataset.imageId;
|
||
|
||
if (
|
||
noteId &&
|
||
imageId &&
|
||
confirm("Вы уверены, что хотите удалить это изображение?")
|
||
) {
|
||
const success = await deleteNoteImage(noteId, imageId);
|
||
if (success) {
|
||
await loadNotes(true); // Перезагружаем заметки
|
||
} else {
|
||
alert("Ошибка удаления изображения");
|
||
}
|
||
}
|
||
};
|
||
|
||
buttonElement.addEventListener("click", buttonElement._clickHandler);
|
||
});
|
||
}
|
||
|
||
// Функция для применения визуальных стилей к чекбоксу
|
||
function applyCheckboxStyles(checkbox, checked) {
|
||
const parentLi = checkbox.closest("li");
|
||
if (!parentLi) return;
|
||
|
||
if (checked) {
|
||
parentLi.style.opacity = "0.65";
|
||
// Находим все элементы кроме чекбокса
|
||
const textNodes = parentLi.querySelectorAll("*:not(input)");
|
||
textNodes.forEach((node) => {
|
||
node.style.textDecoration = "line-through";
|
||
node.style.color = "#999";
|
||
});
|
||
// Обрабатываем текстовые узлы
|
||
Array.from(parentLi.childNodes).forEach((node) => {
|
||
if (node.nodeType === 3 && node.textContent.trim()) {
|
||
const span = document.createElement("span");
|
||
span.style.textDecoration = "line-through";
|
||
span.style.color = "#999";
|
||
span.textContent = node.textContent;
|
||
parentLi.replaceChild(span, node);
|
||
}
|
||
});
|
||
} else {
|
||
parentLi.style.opacity = "1";
|
||
const textNodes = parentLi.querySelectorAll("*:not(input)");
|
||
textNodes.forEach((node) => {
|
||
node.style.textDecoration = "none";
|
||
node.style.color = "";
|
||
});
|
||
}
|
||
}
|
||
|
||
// Функция для добавления обработчиков для чекбоксов в заметках
|
||
function addCheckboxEventListeners() {
|
||
// Находим все чекбоксы в заметках
|
||
document
|
||
.querySelectorAll(".textNote input[type='checkbox']")
|
||
.forEach((checkbox) => {
|
||
// Применяем начальные стили для уже отмеченных чекбоксов
|
||
if (checkbox.checked) {
|
||
applyCheckboxStyles(checkbox, true);
|
||
}
|
||
|
||
// Удаляем старые обработчики, если они есть
|
||
if (checkbox._checkboxHandler) {
|
||
checkbox.removeEventListener("change", checkbox._checkboxHandler);
|
||
}
|
||
|
||
// Создаем новый обработчик
|
||
checkbox._checkboxHandler = async function (event) {
|
||
// Применяем визуальные эффекты сразу
|
||
applyCheckboxStyles(this, this.checked);
|
||
|
||
// Находим родительскую заметку
|
||
const noteContainer = this.closest("#note");
|
||
if (!noteContainer) return;
|
||
|
||
const noteId = noteContainer.dataset.noteId;
|
||
const textNoteElement = noteContainer.querySelector(".textNote");
|
||
|
||
// Получаем исходный markdown контент
|
||
let originalContent = textNoteElement.dataset.originalContent;
|
||
|
||
if (!originalContent) return;
|
||
|
||
// Находим индекс чекбокса в списке всех чекбоксов этой заметки
|
||
const allCheckboxes = textNoteElement.querySelectorAll(
|
||
"input[type='checkbox']"
|
||
);
|
||
const checkboxIndex = Array.from(allCheckboxes).indexOf(this);
|
||
|
||
// Находим все чекбоксы в markdown контенте
|
||
const checkboxRegex = /- \[([ x])\]/gi;
|
||
let matches = [];
|
||
let match;
|
||
while ((match = checkboxRegex.exec(originalContent)) !== null) {
|
||
matches.push({
|
||
index: match.index,
|
||
checked: match[1].toLowerCase() === "x",
|
||
fullMatch: match[0],
|
||
});
|
||
}
|
||
|
||
// Если нашли соответствующий чекбокс, изменяем его состояние
|
||
if (matches[checkboxIndex]) {
|
||
const targetMatch = matches[checkboxIndex];
|
||
const newState = this.checked ? "- [x]" : "- [ ]";
|
||
|
||
// Заменяем состояние чекбокса в исходном тексте
|
||
const beforeCheckbox = originalContent.substring(
|
||
0,
|
||
targetMatch.index
|
||
);
|
||
const afterCheckbox = originalContent.substring(
|
||
targetMatch.index + targetMatch.fullMatch.length
|
||
);
|
||
originalContent = beforeCheckbox + newState + afterCheckbox;
|
||
|
||
// Обновляем data-атрибут
|
||
textNoteElement.dataset.originalContent = originalContent;
|
||
|
||
// Автоматически сохраняем изменения на сервере
|
||
try {
|
||
const response = await fetch(`/api/notes/${noteId}`, {
|
||
method: "PUT",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
content: originalContent,
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка сохранения заметки");
|
||
}
|
||
|
||
// Обновляем кэш заметок
|
||
const noteInCache = allNotes.find((n) => n.id == noteId);
|
||
if (noteInCache) {
|
||
noteInCache.content = originalContent;
|
||
}
|
||
} catch (error) {
|
||
console.error("Ошибка автосохранения чекбокса:", error);
|
||
// Если не удалось сохранить, возвращаем чекбокс в прежнее состояние
|
||
this.checked = !this.checked;
|
||
alert("Ошибка сохранения изменений");
|
||
}
|
||
}
|
||
};
|
||
|
||
checkbox.addEventListener("change", checkbox._checkboxHandler);
|
||
});
|
||
}
|
||
|
||
// Функция сохранения заметки (вынесена отдельно для повторного использования)
|
||
async function saveNote() {
|
||
if (noteInput.value.trim() !== "" || selectedImages.length > 0) {
|
||
try {
|
||
const { date, time } = getFormattedDateTime();
|
||
|
||
// Показываем индикатор сохранения для мобильных устройств
|
||
const isMobile =
|
||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||
navigator.userAgent
|
||
) ||
|
||
(navigator.maxTouchPoints && navigator.maxTouchPoints > 2) ||
|
||
window.matchMedia("(max-width: 768px)").matches;
|
||
|
||
let savingIndicator = null;
|
||
if (isMobile) {
|
||
savingIndicator = document.createElement("div");
|
||
savingIndicator.id = "mobile-saving-indicator";
|
||
savingIndicator.style.cssText = `
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
z-index: 10000;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
`;
|
||
savingIndicator.innerHTML = `
|
||
<div>💾 Сохранение заметки...</div>
|
||
${
|
||
selectedImages.length > 0
|
||
? `<div style="font-size: 12px; margin-top: 10px;">+ ${selectedImages.length} изображений</div>`
|
||
: ""
|
||
}
|
||
`;
|
||
document.body.appendChild(savingIndicator);
|
||
}
|
||
|
||
const response = await fetch("/api/notes", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
content: noteInput.value || " ", // Минимальный контент, если только изображения
|
||
date: date,
|
||
time: time,
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error("Ошибка сохранения заметки");
|
||
}
|
||
|
||
const noteData = await response.json();
|
||
const noteId = noteData.id;
|
||
|
||
// Загружаем изображения, если они есть
|
||
if (selectedImages.length > 0) {
|
||
await uploadImages(noteId);
|
||
}
|
||
|
||
// Удаляем индикатор сохранения
|
||
if (savingIndicator) {
|
||
savingIndicator.remove();
|
||
}
|
||
|
||
// Очищаем поле ввода и изображения, перезагружаем заметки
|
||
noteInput.value = "";
|
||
noteInput.style.height = "auto";
|
||
selectedImages = [];
|
||
updateImagePreview();
|
||
imageInput.value = "";
|
||
await loadNotes(true);
|
||
|
||
// Показываем уведомление об успешном сохранении
|
||
if (isMobile) {
|
||
const successDiv = document.createElement("div");
|
||
successDiv.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #28a745;
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
z-index: 10000;
|
||
font-size: 14px;
|
||
`;
|
||
successDiv.textContent = "✅ Заметка сохранена!";
|
||
document.body.appendChild(successDiv);
|
||
|
||
setTimeout(() => {
|
||
successDiv.remove();
|
||
}, 3000);
|
||
}
|
||
} catch (error) {
|
||
console.error("Ошибка:", error);
|
||
|
||
// Удаляем индикатор сохранения в случае ошибки
|
||
const savingIndicator = document.getElementById(
|
||
"mobile-saving-indicator"
|
||
);
|
||
if (savingIndicator) {
|
||
savingIndicator.remove();
|
||
}
|
||
|
||
alert("Ошибка сохранения заметки");
|
||
}
|
||
}
|
||
}
|
||
|
||
// Обработчик сохранения новой заметки
|
||
saveBtn.addEventListener("click", saveNote);
|
||
|
||
// Обработчик горячей клавиши Alt+Enter для сохранения заметки
|
||
noteInput.addEventListener("keydown", function (event) {
|
||
if (event.altKey && event.key === "Enter") {
|
||
event.preventDefault(); // Предотвращаем стандартное поведение
|
||
saveNote();
|
||
} else if (event.key === "Enter") {
|
||
// Автоматическое продолжение списков
|
||
const textarea = event.target;
|
||
const start = textarea.selectionStart;
|
||
const text = textarea.value;
|
||
const lines = text.split("\n");
|
||
|
||
// Определяем текущую строку
|
||
let currentLineIndex = 0;
|
||
let currentLineStart = 0;
|
||
let currentLine = "";
|
||
|
||
for (let i = 0; i < lines.length; i++) {
|
||
const lineLength = lines[i].length;
|
||
if (currentLineStart + lineLength >= start) {
|
||
currentLineIndex = i;
|
||
currentLine = lines[i];
|
||
break;
|
||
}
|
||
currentLineStart += lineLength + 1; // +1 для символа новой строки
|
||
}
|
||
|
||
// Проверяем, является ли текущая строка списком
|
||
const listPatterns = [
|
||
/^(\s*)- \[ \] /, // Чекбокс (не отмечен): - [ ]
|
||
/^(\s*)- \[x\] /i, // Чекбокс (отмечен): - [x]
|
||
/^(\s*)- /, // Неупорядоченный список: -
|
||
/^(\s*)\* /, // Неупорядоченный список: *
|
||
/^(\s*)\+ /, // Неупорядоченный список: +
|
||
/^(\s*)(\d+)\. /, // Упорядоченный список: 1. 2. 3.
|
||
/^(\s*)(\w+)\. /, // Буквенный список: a. b. c.
|
||
/^(\s*)1\. /, // Нумерованный список (начинается с 1.)
|
||
];
|
||
|
||
let listMatch = null;
|
||
let listType = null;
|
||
|
||
for (const pattern of listPatterns) {
|
||
const match = currentLine.match(pattern);
|
||
if (match) {
|
||
listMatch = match;
|
||
if (pattern === listPatterns[0] || pattern === listPatterns[1]) {
|
||
listType = "checkbox";
|
||
} else if (
|
||
pattern === listPatterns[2] ||
|
||
pattern === listPatterns[3] ||
|
||
pattern === listPatterns[4]
|
||
) {
|
||
listType = "unordered";
|
||
} else if (pattern === listPatterns[7]) {
|
||
// Нумерованный список всегда начинается с 1.
|
||
listType = "numbered";
|
||
} else {
|
||
listType = "ordered";
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (listMatch) {
|
||
event.preventDefault();
|
||
|
||
const indent = listMatch[1] || ""; // Отступы перед маркером
|
||
const marker = listMatch[0].slice(indent.length); // Маркер списка без отступов
|
||
|
||
// Получаем текст после маркера
|
||
const afterMarker = currentLine.slice(listMatch[0].length);
|
||
|
||
if (afterMarker.trim() === "") {
|
||
// Если строка пустая после маркера, выходим из списка
|
||
const beforeCursor = text.substring(0, start);
|
||
const afterCursor = text.substring(start);
|
||
|
||
// Удаляем маркер и отступы текущей строки
|
||
const newBefore = beforeCursor.replace(
|
||
/\n\s*- \[ \] \s*$|\n\s*- \[x\] \s*$|\n\s*[-*+]\s*$|\n\s*\d+\.\s*$|\n\s*\w+\.\s*$/i,
|
||
"\n"
|
||
);
|
||
textarea.value = newBefore + afterCursor;
|
||
|
||
// Устанавливаем курсор после удаленного маркера
|
||
const newCursorPos = newBefore.length;
|
||
textarea.setSelectionRange(newCursorPos, newCursorPos);
|
||
} else {
|
||
// Продолжаем список
|
||
const beforeCursor = text.substring(0, start);
|
||
const afterCursor = text.substring(start);
|
||
|
||
let newMarker = "";
|
||
if (listType === "checkbox") {
|
||
// Для чекбоксов всегда создаем новый пустой чекбокс
|
||
newMarker = indent + "- [ ] ";
|
||
} else if (listType === "unordered") {
|
||
newMarker = indent + marker;
|
||
} else if (listType === "ordered") {
|
||
// Для упорядоченных списков увеличиваем номер
|
||
const number = parseInt(listMatch[2]);
|
||
const nextNumber = number + 1;
|
||
const numberStr = listMatch[2].replace(/\d+/, nextNumber.toString());
|
||
newMarker = indent + numberStr + ". ";
|
||
} else if (listType === "numbered") {
|
||
// Для нумерованного списка всегда начинаем с 1.
|
||
newMarker = indent + "1. ";
|
||
}
|
||
|
||
textarea.value = beforeCursor + "\n" + newMarker + afterCursor;
|
||
|
||
// Устанавливаем курсор после нового маркера
|
||
const newCursorPos = start + 1 + newMarker.length;
|
||
textarea.setSelectionRange(newCursorPos, newCursorPos);
|
||
}
|
||
|
||
// Обновляем высоту textarea
|
||
autoExpandTextarea(textarea);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Загружаем заметки при загрузке страницы
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
// Проверяем аутентификацию при загрузке страницы
|
||
checkAuthentication();
|
||
loadUserInfo();
|
||
loadNotes();
|
||
updateFilterIndicator();
|
||
|
||
// Инициализируем lazy loading для изображений
|
||
initLazyLoading();
|
||
|
||
// Добавляем обработчик для кнопки выхода
|
||
setupLogoutHandler();
|
||
|
||
// Обработчик для кнопки настроек
|
||
if (settingsBtn) {
|
||
settingsBtn.addEventListener("click", function () {
|
||
window.location.href = "/settings";
|
||
});
|
||
}
|
||
});
|
||
|
||
// Функция для настройки обработчика выхода
|
||
function setupLogoutHandler() {
|
||
const logoutForms = document.querySelectorAll('form[action="/logout"]');
|
||
logoutForms.forEach((form) => {
|
||
form.addEventListener("submit", function (e) {
|
||
// Очищаем localStorage перед выходом
|
||
localStorage.removeItem("isAuthenticated");
|
||
localStorage.removeItem("username");
|
||
});
|
||
});
|
||
}
|
||
|
||
// Функция для проверки аутентификации
|
||
async function checkAuthentication() {
|
||
const isAuthenticated = localStorage.getItem("isAuthenticated");
|
||
|
||
if (isAuthenticated !== "true") {
|
||
// Если пользователь не аутентифицирован, перенаправляем на страницу входа
|
||
window.location.href = "/";
|
||
return;
|
||
}
|
||
|
||
// Проверяем, что сессия на сервере еще действительна
|
||
try {
|
||
const response = await fetch("/api/auth/status");
|
||
if (!response.ok) {
|
||
// Если сессия недействительна, очищаем localStorage и перенаправляем
|
||
localStorage.removeItem("isAuthenticated");
|
||
localStorage.removeItem("username");
|
||
window.location.href = "/";
|
||
return;
|
||
}
|
||
|
||
const authData = await response.json();
|
||
if (!authData.authenticated) {
|
||
// Если сервер говорит, что пользователь не аутентифицирован
|
||
localStorage.removeItem("isAuthenticated");
|
||
localStorage.removeItem("username");
|
||
window.location.href = "/";
|
||
return;
|
||
}
|
||
} catch (error) {
|
||
console.error("Ошибка проверки аутентификации:", error);
|
||
// В случае ошибки сети, оставляем пользователя на странице
|
||
// но показываем предупреждение
|
||
console.warn("Не удалось проверить статус аутентификации");
|
||
}
|
||
}
|
||
|
||
// Функция для загрузки информации о пользователе
|
||
async function loadUserInfo() {
|
||
try {
|
||
const response = await fetch("/api/user");
|
||
if (response.ok) {
|
||
const user = await response.json();
|
||
const userAvatar = document.getElementById("user-avatar");
|
||
const userAvatarContainer = document.getElementById("user-avatar-container");
|
||
const userAvatarPlaceholder = document.getElementById("user-avatar-placeholder");
|
||
|
||
// Показываем аватарку или плейсхолдер
|
||
if (user.avatar) {
|
||
if (userAvatar && userAvatarContainer) {
|
||
userAvatar.src = user.avatar;
|
||
userAvatarContainer.style.display = "block";
|
||
if (userAvatarPlaceholder) {
|
||
userAvatarPlaceholder.style.display = "none";
|
||
}
|
||
}
|
||
} else {
|
||
if (userAvatarPlaceholder) {
|
||
userAvatarPlaceholder.style.display = "flex";
|
||
}
|
||
if (userAvatarContainer) {
|
||
userAvatarContainer.style.display = "none";
|
||
}
|
||
}
|
||
|
||
// Делаем аватарку и плейсхолдер кликабельными для перехода в профиль
|
||
if (userAvatarContainer) {
|
||
userAvatarContainer.style.cursor = "pointer";
|
||
userAvatarContainer.addEventListener("click", function () {
|
||
window.location.href = "/profile";
|
||
});
|
||
}
|
||
if (userAvatarPlaceholder) {
|
||
userAvatarPlaceholder.addEventListener("click", function () {
|
||
window.location.href = "/profile";
|
||
});
|
||
}
|
||
|
||
// Применяем цветовой акцент пользователя (только если отличается от текущего)
|
||
const currentColor = getComputedStyle(document.documentElement)
|
||
.getPropertyValue("--accent-color")
|
||
.trim();
|
||
const newColor = user.accent_color || "#007bff";
|
||
|
||
if (currentColor !== newColor) {
|
||
document.documentElement.style.setProperty("--accent-color", newColor);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("Ошибка загрузки информации о пользователе:", error);
|
||
}
|
||
}
|
||
|
||
// Календарь
|
||
let currentDate = new Date();
|
||
|
||
// Функция для преобразования timestamp в формат dd.mm.yyyy
|
||
function formatDateFromTimestamp(timestamp) {
|
||
return formatLocalDateOnly(parseSQLiteUtc(timestamp));
|
||
}
|
||
|
||
// Функция для отображения календаря
|
||
function renderCalendar() {
|
||
const calendarDays = document.getElementById("calendarDays");
|
||
const monthYear = document.getElementById("monthYear");
|
||
|
||
// Проверяем, существуют ли элементы календаря
|
||
if (!calendarDays || !monthYear) return;
|
||
|
||
const year = currentDate.getFullYear();
|
||
const month = currentDate.getMonth();
|
||
|
||
// Массив названий месяцев
|
||
const monthNames = [
|
||
"Январь",
|
||
"Февраль",
|
||
"Март",
|
||
"Апрель",
|
||
"Май",
|
||
"Июнь",
|
||
"Июль",
|
||
"Август",
|
||
"Сентябрь",
|
||
"Октябрь",
|
||
"Ноябрь",
|
||
"Декабрь",
|
||
];
|
||
|
||
// Устанавливаем заголовок месяца и года
|
||
monthYear.textContent = `${monthNames[month]} ${year}`;
|
||
|
||
// Получаем первый день месяца
|
||
const firstDay = new Date(year, month, 1);
|
||
// Получаем последний день месяца
|
||
const lastDay = new Date(year, month + 1, 0);
|
||
// Получаем день недели первого дня (0 - воскресенье, 1 - понедельник и т.д.)
|
||
let firstDayOfWeek = firstDay.getDay();
|
||
// Преобразуем так, чтобы понедельник был первым днем (0)
|
||
firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
|
||
|
||
// Очищаем календарь
|
||
calendarDays.innerHTML = "";
|
||
|
||
// Создаём Set дат, когда были созданы заметки (используем created_at)
|
||
const noteDates = new Set();
|
||
allNotes.forEach((note) => {
|
||
if (note.created_at) {
|
||
noteDates.add(formatDateFromTimestamp(note.created_at));
|
||
}
|
||
});
|
||
|
||
// Получаем последний день предыдущего месяца
|
||
const prevMonthLastDay = new Date(year, month, 0).getDate();
|
||
const prevMonth = month === 0 ? 11 : month - 1;
|
||
const prevYear = month === 0 ? year - 1 : year;
|
||
|
||
// Добавляем дни предыдущего месяца
|
||
for (let i = firstDayOfWeek - 1; i >= 0; i--) {
|
||
const day = prevMonthLastDay - i;
|
||
const dateStr = `${String(day).padStart(2, "0")}.${String(
|
||
prevMonth + 1
|
||
).padStart(2, "0")}.${prevYear}`;
|
||
|
||
const dayDiv = document.createElement("div");
|
||
dayDiv.classList.add("calendar-day", "other-month");
|
||
dayDiv.textContent = day;
|
||
dayDiv.dataset.date = dateStr;
|
||
|
||
// Проверяем, есть ли заметки на этот день
|
||
if (noteDates.has(dateStr)) {
|
||
dayDiv.classList.add("has-notes");
|
||
}
|
||
|
||
// Проверяем, выбран ли этот день
|
||
if (selectedDateFilter === dateStr) {
|
||
dayDiv.classList.add("selected");
|
||
}
|
||
|
||
// Добавляем обработчик клика
|
||
dayDiv.addEventListener(
|
||
"click",
|
||
async (event) => await handleDayClick(event)
|
||
);
|
||
|
||
calendarDays.appendChild(dayDiv);
|
||
}
|
||
|
||
// Добавляем дни текущего месяца
|
||
const today = new Date();
|
||
for (let day = 1; day <= lastDay.getDate(); day++) {
|
||
const dateStr = `${String(day).padStart(2, "0")}.${String(
|
||
month + 1
|
||
).padStart(2, "0")}.${year}`;
|
||
|
||
const dayDiv = document.createElement("div");
|
||
dayDiv.classList.add("calendar-day");
|
||
dayDiv.textContent = day;
|
||
dayDiv.dataset.date = dateStr;
|
||
|
||
// Проверяем, является ли день сегодняшним
|
||
if (
|
||
day === today.getDate() &&
|
||
month === today.getMonth() &&
|
||
year === today.getFullYear()
|
||
) {
|
||
dayDiv.classList.add("today");
|
||
}
|
||
|
||
// Проверяем, есть ли заметки на этот день
|
||
if (noteDates.has(dateStr)) {
|
||
dayDiv.classList.add("has-notes");
|
||
}
|
||
|
||
// Проверяем, выбран ли этот день
|
||
if (selectedDateFilter === dateStr) {
|
||
dayDiv.classList.add("selected");
|
||
}
|
||
|
||
// Добавляем обработчик клика
|
||
dayDiv.addEventListener(
|
||
"click",
|
||
async (event) => await handleDayClick(event)
|
||
);
|
||
|
||
calendarDays.appendChild(dayDiv);
|
||
}
|
||
|
||
// Добавляем дни следующего месяца
|
||
const totalCells = calendarDays.children.length;
|
||
const remainingCells = 42 - totalCells; // 6 недель по 7 дней
|
||
const nextMonth = month === 11 ? 0 : month + 1;
|
||
const nextYear = month === 11 ? year + 1 : year;
|
||
|
||
for (let day = 1; day <= remainingCells; day++) {
|
||
const dateStr = `${String(day).padStart(2, "0")}.${String(
|
||
nextMonth + 1
|
||
).padStart(2, "0")}.${nextYear}`;
|
||
|
||
const dayDiv = document.createElement("div");
|
||
dayDiv.classList.add("calendar-day", "other-month");
|
||
dayDiv.textContent = day;
|
||
dayDiv.dataset.date = dateStr;
|
||
|
||
// Проверяем, есть ли заметки на этот день
|
||
if (noteDates.has(dateStr)) {
|
||
dayDiv.classList.add("has-notes");
|
||
}
|
||
|
||
// Проверяем, выбран ли этот день
|
||
if (selectedDateFilter === dateStr) {
|
||
dayDiv.classList.add("selected");
|
||
}
|
||
|
||
// Добавляем обработчик клика
|
||
dayDiv.addEventListener(
|
||
"click",
|
||
async (event) => await handleDayClick(event)
|
||
);
|
||
|
||
calendarDays.appendChild(dayDiv);
|
||
}
|
||
}
|
||
|
||
// Обработчик клика на день в календаре
|
||
async function handleDayClick(event) {
|
||
const clickedDate = event.target.dataset.date;
|
||
|
||
// Если кликнули на тот же день, снимаем фильтр
|
||
if (selectedDateFilter === clickedDate) {
|
||
selectedDateFilter = null;
|
||
} else {
|
||
selectedDateFilter = clickedDate;
|
||
}
|
||
|
||
// Перерисовываем заметки, календарь и теги
|
||
await renderNotes(allNotes);
|
||
renderCalendar();
|
||
renderTags();
|
||
updateFilterIndicator();
|
||
}
|
||
|
||
// Функция для обновления индикатора фильтра
|
||
function updateFilterIndicator() {
|
||
const filterIndicator = document.getElementById("filter-indicator");
|
||
if (!filterIndicator) return;
|
||
|
||
const filters = [];
|
||
|
||
if (searchQuery) {
|
||
filters.push(`Поиск: "${searchQuery}"`);
|
||
}
|
||
|
||
if (selectedDateFilter) {
|
||
filters.push(`Дата: ${selectedDateFilter}`);
|
||
}
|
||
|
||
if (selectedTagFilter) {
|
||
filters.push(`Тег: #${selectedTagFilter}`);
|
||
}
|
||
|
||
if (filters.length > 0) {
|
||
filterIndicator.style.display = "inline-block";
|
||
filterIndicator.innerHTML = `Фильтр: ${filters.join(
|
||
", "
|
||
)} <button id="clear-filter-btn">✕</button>`;
|
||
|
||
// Добавляем обработчик клика для кнопки сброса
|
||
const clearBtn = document.getElementById("clear-filter-btn");
|
||
if (clearBtn) {
|
||
clearBtn.addEventListener("click", clearFilter);
|
||
}
|
||
} else {
|
||
filterIndicator.style.display = "none";
|
||
}
|
||
}
|
||
|
||
// Функция для сброса фильтра (глобальная)
|
||
window.clearFilter = async function () {
|
||
selectedDateFilter = null;
|
||
selectedTagFilter = null;
|
||
searchQuery = "";
|
||
searchResults = [];
|
||
|
||
// Очищаем поле поиска
|
||
const searchInput = document.getElementById("searchInput");
|
||
if (searchInput) {
|
||
searchInput.value = "";
|
||
}
|
||
|
||
// Скрываем кнопку очистки поиска
|
||
const clearSearchBtn = document.getElementById("clearSearchBtn");
|
||
if (clearSearchBtn) {
|
||
clearSearchBtn.style.display = "none";
|
||
}
|
||
|
||
await renderNotes(allNotes);
|
||
renderCalendar();
|
||
renderTags();
|
||
updateFilterIndicator();
|
||
};
|
||
|
||
// Глобальные функции для работы с изображениями (оставляем только showImageModal для совместимости)
|
||
// window.showImageModal удалена, так как она создавала рекурсию
|
||
|
||
// Обработчики для кнопок навигации календаря
|
||
const prevMonthBtn = document.getElementById("prevMonth");
|
||
const nextMonthBtn = document.getElementById("nextMonth");
|
||
|
||
if (prevMonthBtn) {
|
||
prevMonthBtn.addEventListener("click", function () {
|
||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||
renderCalendar();
|
||
});
|
||
}
|
||
|
||
if (nextMonthBtn) {
|
||
nextMonthBtn.addEventListener("click", function () {
|
||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||
renderCalendar();
|
||
});
|
||
}
|
||
|
||
// Инициализируем календарь при загрузке страницы
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
renderCalendar();
|
||
|
||
// Инициализируем поиск
|
||
initSearch();
|
||
});
|
||
|
||
// Функция для инициализации поиска
|
||
function initSearch() {
|
||
const searchInput = document.getElementById("searchInput");
|
||
const clearSearchBtn = document.getElementById("clearSearchBtn");
|
||
|
||
if (!searchInput || !clearSearchBtn) return;
|
||
|
||
// Обработчик ввода в поле поиска с задержкой
|
||
let searchTimeout;
|
||
searchInput.addEventListener("input", function () {
|
||
clearTimeout(searchTimeout);
|
||
const query = this.value;
|
||
|
||
// Показываем/скрываем кнопку очистки
|
||
if (query.trim()) {
|
||
clearSearchBtn.style.display = "block";
|
||
} else {
|
||
clearSearchBtn.style.display = "none";
|
||
}
|
||
|
||
// Задержка перед поиском для оптимизации
|
||
searchTimeout = setTimeout(() => {
|
||
searchNotes(query);
|
||
updateFilterIndicator();
|
||
}, 300);
|
||
});
|
||
|
||
// Обработчик клика на кнопку очистки поиска
|
||
clearSearchBtn.addEventListener("click", async function () {
|
||
searchInput.value = "";
|
||
this.style.display = "none";
|
||
searchQuery = "";
|
||
searchResults = [];
|
||
await renderNotes(allNotes);
|
||
updateFilterIndicator();
|
||
});
|
||
|
||
// Обработчик клавиши Escape для очистки поиска
|
||
searchInput.addEventListener("keydown", async function (event) {
|
||
if (event.key === "Escape") {
|
||
this.value = "";
|
||
clearSearchBtn.style.display = "none";
|
||
searchQuery = "";
|
||
searchResults = [];
|
||
await renderNotes(allNotes);
|
||
updateFilterIndicator();
|
||
}
|
||
});
|
||
}
|
||
|
||
// ==================== МОБИЛЬНЫЙ СЛАЙДЕР ====================
|
||
|
||
// Функция для отображения календаря в мобильном слайдере
|
||
function renderCalendarMobile() {
|
||
const calendarDays = document.getElementById("calendarDaysMobile");
|
||
const monthYear = document.getElementById("monthYearMobile");
|
||
|
||
// Проверяем, существуют ли элементы календаря для мобильной версии
|
||
if (!calendarDays || !monthYear) return;
|
||
|
||
const year = currentDate.getFullYear();
|
||
const month = currentDate.getMonth();
|
||
|
||
// Массив названий месяцев
|
||
const monthNames = [
|
||
"Январь",
|
||
"Февраль",
|
||
"Март",
|
||
"Апрель",
|
||
"Май",
|
||
"Июнь",
|
||
"Июль",
|
||
"Август",
|
||
"Сентябрь",
|
||
"Октябрь",
|
||
"Ноябрь",
|
||
"Декабрь",
|
||
];
|
||
|
||
// Устанавливаем заголовок месяца и года
|
||
monthYear.textContent = `${monthNames[month]} ${year}`;
|
||
|
||
// Получаем первый день месяца
|
||
const firstDay = new Date(year, month, 1);
|
||
// Получаем последний день месяца
|
||
const lastDay = new Date(year, month + 1, 0);
|
||
// Получаем день недели первого дня (0 - воскресенье, 1 - понедельник и т.д.)
|
||
let firstDayOfWeek = firstDay.getDay();
|
||
// Преобразуем так, чтобы понедельник был первым днем (0)
|
||
firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
|
||
|
||
// Очищаем календарь
|
||
calendarDays.innerHTML = "";
|
||
|
||
// Создаём Set дат, когда были созданы заметки (используем created_at)
|
||
const noteDates = new Set();
|
||
allNotes.forEach((note) => {
|
||
if (note.created_at) {
|
||
noteDates.add(formatDateFromTimestamp(note.created_at));
|
||
}
|
||
});
|
||
|
||
// Получаем последний день предыдущего месяца
|
||
const prevMonthLastDay = new Date(year, month, 0).getDate();
|
||
const prevMonth = month === 0 ? 11 : month - 1;
|
||
const prevYear = month === 0 ? year - 1 : year;
|
||
|
||
// Добавляем дни предыдущего месяца
|
||
for (let i = firstDayOfWeek - 1; i >= 0; i--) {
|
||
const day = prevMonthLastDay - i;
|
||
const dateStr = `${String(day).padStart(2, "0")}.${String(
|
||
prevMonth + 1
|
||
).padStart(2, "0")}.${prevYear}`;
|
||
|
||
const dayDiv = document.createElement("div");
|
||
dayDiv.classList.add("calendar-day", "other-month");
|
||
dayDiv.textContent = day;
|
||
dayDiv.dataset.date = dateStr;
|
||
|
||
// Проверяем, есть ли заметки на этот день
|
||
if (noteDates.has(dateStr)) {
|
||
dayDiv.classList.add("has-notes");
|
||
}
|
||
|
||
// Проверяем, выбран ли этот день
|
||
if (selectedDateFilter === dateStr) {
|
||
dayDiv.classList.add("selected");
|
||
}
|
||
|
||
// Добавляем обработчик клика
|
||
dayDiv.addEventListener(
|
||
"click",
|
||
async (event) => await handleDayClickMobile(event)
|
||
);
|
||
|
||
calendarDays.appendChild(dayDiv);
|
||
}
|
||
|
||
// Добавляем дни текущего месяца
|
||
const today = new Date();
|
||
for (let day = 1; day <= lastDay.getDate(); day++) {
|
||
const dateStr = `${String(day).padStart(2, "0")}.${String(
|
||
month + 1
|
||
).padStart(2, "0")}.${year}`;
|
||
|
||
const dayDiv = document.createElement("div");
|
||
dayDiv.classList.add("calendar-day");
|
||
dayDiv.textContent = day;
|
||
dayDiv.dataset.date = dateStr;
|
||
|
||
// Проверяем, является ли день сегодняшним
|
||
if (
|
||
day === today.getDate() &&
|
||
month === today.getMonth() &&
|
||
year === today.getFullYear()
|
||
) {
|
||
dayDiv.classList.add("today");
|
||
}
|
||
|
||
// Проверяем, есть ли заметки на этот день
|
||
if (noteDates.has(dateStr)) {
|
||
dayDiv.classList.add("has-notes");
|
||
}
|
||
|
||
// Проверяем, выбран ли этот день
|
||
if (selectedDateFilter === dateStr) {
|
||
dayDiv.classList.add("selected");
|
||
}
|
||
|
||
// Добавляем обработчик клика
|
||
dayDiv.addEventListener(
|
||
"click",
|
||
async (event) => await handleDayClickMobile(event)
|
||
);
|
||
|
||
calendarDays.appendChild(dayDiv);
|
||
}
|
||
|
||
// Добавляем дни следующего месяца
|
||
const totalCells = calendarDays.children.length;
|
||
const remainingCells = 42 - totalCells; // 6 недель по 7 дней
|
||
const nextMonth = month === 11 ? 0 : month + 1;
|
||
const nextYear = month === 11 ? year + 1 : year;
|
||
|
||
for (let day = 1; day <= remainingCells; day++) {
|
||
const dateStr = `${String(day).padStart(2, "0")}.${String(
|
||
nextMonth + 1
|
||
).padStart(2, "0")}.${nextYear}`;
|
||
|
||
const dayDiv = document.createElement("div");
|
||
dayDiv.classList.add("calendar-day", "other-month");
|
||
dayDiv.textContent = day;
|
||
dayDiv.dataset.date = dateStr;
|
||
|
||
// Проверяем, есть ли заметки на этот день
|
||
if (noteDates.has(dateStr)) {
|
||
dayDiv.classList.add("has-notes");
|
||
}
|
||
|
||
// Проверяем, выбран ли этот день
|
||
if (selectedDateFilter === dateStr) {
|
||
dayDiv.classList.add("selected");
|
||
}
|
||
|
||
// Добавляем обработчик клика
|
||
dayDiv.addEventListener(
|
||
"click",
|
||
async (event) => await handleDayClickMobile(event)
|
||
);
|
||
|
||
calendarDays.appendChild(dayDiv);
|
||
}
|
||
}
|
||
|
||
// Обработчик клика на день в календаре для мобильной версии
|
||
async function handleDayClickMobile(event) {
|
||
const clickedDate = event.target.dataset.date;
|
||
|
||
// Если кликнули на тот же день, снимаем фильтр
|
||
if (selectedDateFilter === clickedDate) {
|
||
selectedDateFilter = null;
|
||
} else {
|
||
selectedDateFilter = clickedDate;
|
||
}
|
||
|
||
// Перерисовываем заметки, оба календаря и теги
|
||
await renderNotes(allNotes);
|
||
renderCalendar();
|
||
renderCalendarMobile();
|
||
renderTags();
|
||
renderTagsMobile();
|
||
updateFilterIndicator();
|
||
}
|
||
|
||
// Функция для отображения тегов в мобильном слайдере
|
||
function renderTagsMobile() {
|
||
const tagsContainer = document.getElementById("tagsContainerMobile");
|
||
if (!tagsContainer) return;
|
||
|
||
const tagCounts = getAllTags(allNotes);
|
||
const sortedTags = Object.keys(tagCounts).sort();
|
||
|
||
if (sortedTags.length === 0) {
|
||
tagsContainer.innerHTML =
|
||
'<div style="font-size: 10px; color: #999; text-align: center;">Нет тегов</div>';
|
||
return;
|
||
}
|
||
|
||
tagsContainer.innerHTML = sortedTags
|
||
.map((tag) => {
|
||
const count = tagCounts[tag];
|
||
const isActive = selectedTagFilter === tag ? "active" : "";
|
||
return `<span class="tag ${isActive}" data-tag="${tag}">#${tag}<span class="tag-count">${count}</span></span>`;
|
||
})
|
||
.join("");
|
||
|
||
// Добавляем обработчики кликов для тегов
|
||
tagsContainer.querySelectorAll(".tag").forEach((tagElement) => {
|
||
tagElement.addEventListener(
|
||
"click",
|
||
async (event) => await handleTagClickMobile(event)
|
||
);
|
||
});
|
||
}
|
||
|
||
// Обработчик клика на тег в мобильном слайдере
|
||
async function handleTagClickMobile(event) {
|
||
const clickedTag = event.target.closest(".tag").dataset.tag;
|
||
|
||
// Если кликнули на тот же тег, снимаем фильтр
|
||
if (selectedTagFilter === clickedTag) {
|
||
selectedTagFilter = null;
|
||
} else {
|
||
selectedTagFilter = clickedTag;
|
||
}
|
||
|
||
// Перерисовываем заметки, теги и оба календаря
|
||
await renderNotes(allNotes);
|
||
renderTags();
|
||
renderTagsMobile();
|
||
renderCalendar();
|
||
renderCalendarMobile();
|
||
updateFilterIndicator();
|
||
}
|
||
|
||
// Инициализация мобильного слайдера
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const mobileMenuBtn = document.getElementById("mobileMenuBtn");
|
||
const sidebarCloseBtn = document.getElementById("sidebarCloseBtn");
|
||
const mobileSidebar = document.getElementById("mobileSidebar");
|
||
const sidebarOverlay = document.getElementById("sidebarOverlay");
|
||
|
||
// Открытие слайдера при клике на кнопку меню
|
||
if (mobileMenuBtn) {
|
||
mobileMenuBtn.addEventListener("click", function () {
|
||
mobileSidebar.classList.add("open");
|
||
sidebarOverlay.classList.add("open");
|
||
document.body.style.overflow = "hidden";
|
||
});
|
||
}
|
||
|
||
// Закрытие слайдера при клике на кнопку закрытия
|
||
if (sidebarCloseBtn) {
|
||
sidebarCloseBtn.addEventListener("click", function () {
|
||
mobileSidebar.classList.remove("open");
|
||
sidebarOverlay.classList.remove("open");
|
||
document.body.style.overflow = "auto";
|
||
});
|
||
}
|
||
|
||
// Закрытие слайдера при клике на оверлей
|
||
if (sidebarOverlay) {
|
||
sidebarOverlay.addEventListener("click", function () {
|
||
mobileSidebar.classList.remove("open");
|
||
sidebarOverlay.classList.remove("open");
|
||
document.body.style.overflow = "auto";
|
||
});
|
||
}
|
||
|
||
// Инициализация мобильного поиска
|
||
initSearchMobile();
|
||
|
||
// Инициализация мобильного календаря
|
||
renderCalendarMobile();
|
||
renderTagsMobile();
|
||
|
||
// Обработчики для кнопок навигации мобильного календаря
|
||
const prevMonthBtnMobile = document.getElementById("prevMonthMobile");
|
||
const nextMonthBtnMobile = document.getElementById("nextMonthMobile");
|
||
|
||
if (prevMonthBtnMobile) {
|
||
prevMonthBtnMobile.addEventListener("click", function () {
|
||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||
renderCalendar();
|
||
renderCalendarMobile();
|
||
});
|
||
}
|
||
|
||
if (nextMonthBtnMobile) {
|
||
nextMonthBtnMobile.addEventListener("click", function () {
|
||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||
renderCalendar();
|
||
renderCalendarMobile();
|
||
});
|
||
}
|
||
});
|
||
|
||
// Функция для инициализации мобильного поиска
|
||
function initSearchMobile() {
|
||
const searchInput = document.getElementById("searchInputMobile");
|
||
const clearSearchBtn = document.getElementById("clearSearchBtnMobile");
|
||
|
||
if (!searchInput || !clearSearchBtn) return;
|
||
|
||
// Обработчик ввода в поле поиска с задержкой
|
||
let searchTimeout;
|
||
searchInput.addEventListener("input", function () {
|
||
clearTimeout(searchTimeout);
|
||
const query = this.value;
|
||
|
||
// Показываем/скрываем кнопку очистки
|
||
if (query.trim()) {
|
||
clearSearchBtn.style.display = "block";
|
||
} else {
|
||
clearSearchBtn.style.display = "none";
|
||
}
|
||
|
||
// Задержка перед поиском для оптимизации
|
||
searchTimeout = setTimeout(() => {
|
||
searchNotes(query);
|
||
// Обновляем основное поле поиска
|
||
const mainSearchInput = document.getElementById("searchInput");
|
||
if (mainSearchInput) {
|
||
mainSearchInput.value = query;
|
||
}
|
||
const mainClearSearchBtn = document.getElementById("clearSearchBtn");
|
||
if (mainClearSearchBtn) {
|
||
if (query.trim()) {
|
||
mainClearSearchBtn.style.display = "block";
|
||
} else {
|
||
mainClearSearchBtn.style.display = "none";
|
||
}
|
||
}
|
||
updateFilterIndicator();
|
||
}, 300);
|
||
});
|
||
|
||
// Обработчик клика на кнопку очистки поиска
|
||
clearSearchBtn.addEventListener("click", async function () {
|
||
searchInput.value = "";
|
||
this.style.display = "none";
|
||
searchQuery = "";
|
||
searchResults = [];
|
||
// Обновляем основное поле поиска
|
||
const mainSearchInput = document.getElementById("searchInput");
|
||
if (mainSearchInput) {
|
||
mainSearchInput.value = "";
|
||
}
|
||
const mainClearSearchBtn = document.getElementById("clearSearchBtn");
|
||
if (mainClearSearchBtn) {
|
||
mainClearSearchBtn.style.display = "none";
|
||
}
|
||
await renderNotes(allNotes);
|
||
updateFilterIndicator();
|
||
});
|
||
|
||
// Обработчик клавиши Escape для очистки поиска
|
||
searchInput.addEventListener("keydown", function (event) {
|
||
if (event.key === "Escape") {
|
||
this.value = "";
|
||
clearSearchBtn.style.display = "none";
|
||
searchQuery = "";
|
||
searchResults = [];
|
||
// Обновляем основное поле поиска
|
||
const mainSearchInput = document.getElementById("searchInput");
|
||
if (mainSearchInput) {
|
||
mainSearchInput.value = "";
|
||
}
|
||
const mainClearSearchBtn = document.getElementById("clearSearchBtn");
|
||
if (mainClearSearchBtn) {
|
||
mainClearSearchBtn.style.display = "none";
|
||
}
|
||
renderNotes(allNotes);
|
||
updateFilterIndicator();
|
||
}
|
||
});
|
||
}
|