mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-08-02 13:48:15 +02:00
formatting
This commit is contained in:
Anthony Stirling
parent
018bc69270
commit
7de5043656
263
src/main/resources/static/css/edit-table-of-contents.css
Normal file
263
src/main/resources/static/css/edit-table-of-contents.css
Normal file
@ -0,0 +1,263 @@
|
||||
/* Main bookmark container styles */
|
||||
.bookmark-editor {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-color, #ced4da);
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--bg-container, var(--md-sys-color-surface, #edf0f5));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-editor {
|
||||
--border-color: #495057;
|
||||
--bg-container: var(--md-sys-color-surface, #15202a);
|
||||
}
|
||||
|
||||
/* Bookmark item styles */
|
||||
.bookmark-item {
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid var(--border-item, #e9ecef);
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--bg-item, var(--md-sys-color-surface-container-lowest, #ffffff));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-item {
|
||||
--border-item: var(--md-sys-color-surface-variant, #444b53);
|
||||
--bg-item: var(--md-sys-color-surface-container-low, #24282e);
|
||||
}
|
||||
|
||||
/* Bookmark header (collapsible part) */
|
||||
.bookmark-header {
|
||||
padding: 12px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: var(--bg-header, var(--md-sys-color-surface-container, #f1f3f5));
|
||||
border-bottom: 1px solid var(--border-header, var(--md-sys-color-outline-variant, #e9ecef));
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.bookmark-header:hover {
|
||||
background-color: var(--bg-header-hover, var(--md-sys-state-hover-opacity, #e9ecef));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-header {
|
||||
--bg-header: var(--md-sys-color-surface-container-high, #3a424a);
|
||||
--bg-header-hover: var(--md-sys-color-surface-container-highest, #434a52);
|
||||
--border-header: var(--md-sys-color-outline-variant, #444b53);
|
||||
}
|
||||
|
||||
/* Bookmark content (inside accordion) */
|
||||
.bookmark-content {
|
||||
padding: 15px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/* Children container */
|
||||
.bookmark-children {
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
padding-left: 15px;
|
||||
border-left: 2px solid var(--border-children, #6c757d);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-children {
|
||||
--border-children: #6c757d;
|
||||
}
|
||||
|
||||
/* Level indicators */
|
||||
.bookmark-level-indicator {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted, #6c757d);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-level-indicator {
|
||||
--text-muted: #adb5bd;
|
||||
}
|
||||
|
||||
/* Button styles */
|
||||
.btn-bookmark-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
margin-right: 6px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-bookmark-action:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Visual distinction for child vs sibling buttons using theme colors */
|
||||
.btn-add-child {
|
||||
background-color: var(--btn-add-child-bg, var(--md-sys-color-surface-container-low, #e9ecef));
|
||||
color: var(--btn-add-child-color, var(--md-nav-section-color-other, #72bd54));
|
||||
border-color: var(--btn-add-child-border, var(--md-nav-section-color-other, #72bd54));
|
||||
}
|
||||
|
||||
.btn-add-child::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
background-color: var(--btn-add-child-border, var(--md-nav-section-color-other, #72bd54));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-add-child {
|
||||
--btn-add-child-bg: var(--md-sys-color-surface-container, #28323a);
|
||||
--btn-add-child-color: var(--favourite-add, #9ed18c);
|
||||
--btn-add-child-border: var(--favourite-add, #9ed18c);
|
||||
}
|
||||
|
||||
.btn-add-sibling {
|
||||
background-color: var(--btn-add-sibling-bg, var(--md-sys-color-surface-container-low, #e9ecef));
|
||||
color: var(--btn-add-sibling-color, var(--md-sys-color-primary, #0060aa));
|
||||
border-color: var(--btn-add-sibling-border, var(--md-sys-color-primary, #0060aa));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-add-sibling {
|
||||
--btn-add-sibling-bg: var(--md-sys-color-surface-container, #28323a);
|
||||
--btn-add-sibling-color: var(--md-sys-color-primary, #a2c9ff);
|
||||
--btn-add-sibling-border: var(--md-sys-color-primary, #a2c9ff);
|
||||
}
|
||||
|
||||
.bookmark-actions-header {
|
||||
display: flex;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.bookmark-actions-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed var(--border-subtle-color, #dee2e6);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-actions-content {
|
||||
--border-subtle-color: #495057;
|
||||
}
|
||||
|
||||
/* Main actions section */
|
||||
.bookmark-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Collapse/expand icons */
|
||||
.toggle-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* Title and page display in header */
|
||||
.bookmark-title-preview {
|
||||
font-weight: 500;
|
||||
margin-right: 10px;
|
||||
color: var(--text-primary, #212529);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-title-preview {
|
||||
--text-primary: #e9ecef;
|
||||
}
|
||||
|
||||
.bookmark-page-preview {
|
||||
font-size: 0.9em;
|
||||
color: var(--text-secondary, #6c757d);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-page-preview {
|
||||
--text-secondary: #adb5bd;
|
||||
}
|
||||
|
||||
/* We've removed the drag handle since it's not functional */
|
||||
|
||||
/* Add button at the top level */
|
||||
.btn-add-bookmark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.btn-add-bookmark::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
height: 50%;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.btn-add-bookmark.top-level::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Relationship indicators */
|
||||
.bookmark-relationship-indicator {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.relationship-line {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
background-color: var(--relationship-color, var(--md-nav-section-color-other, #72bd54));
|
||||
}
|
||||
|
||||
.relationship-arrow {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background-color: var(--relationship-color, var(--md-nav-section-color-other, #72bd54));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-relationship-indicator {
|
||||
--relationship-color: var(--favourite-add, #9ed18c);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.empty-bookmarks {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
color: var(--text-muted, var(--md-sys-color-on-surface-variant, #6c757d));
|
||||
background-color: var(--bg-empty, var(--md-sys-color-surface-container-lowest, #ffffff));
|
||||
border-radius: 0.375rem;
|
||||
border: 1px dashed var(--border-empty, var(--md-sys-color-outline, #ced4da));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .empty-bookmarks {
|
||||
--text-muted: var(--md-sys-color-on-surface-variant, #adb5bd);
|
||||
--bg-empty: var(--md-sys-color-surface-container-low, #24282e);
|
||||
--border-empty: var(--md-sys-color-outline, #495057);
|
||||
}
|
||||
599
src/main/resources/static/js/pages/edit-table-of-contents.js
Normal file
599
src/main/resources/static/js/pages/edit-table-of-contents.js
Normal file
@ -0,0 +1,599 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const bookmarksContainer = document.getElementById('bookmarks-container');
|
||||
const addBookmarkBtn = document.getElementById('addBookmarkBtn');
|
||||
const bookmarkDataInput = document.getElementById('bookmarkData');
|
||||
let bookmarks = [];
|
||||
let counter = 0; // Used for generating unique IDs
|
||||
|
||||
// Add event listener to the file input to extract existing bookmarks
|
||||
document.getElementById('fileInput-input').addEventListener('change', async function(e) {
|
||||
if (!e.target.files || e.target.files.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset bookmarks initially
|
||||
bookmarks = [];
|
||||
updateBookmarksUI();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', e.target.files[0]);
|
||||
|
||||
// Show loading indicator
|
||||
showLoadingIndicator();
|
||||
|
||||
try {
|
||||
// Call the API to extract bookmarks using fetchWithCsrf for CSRF protection
|
||||
const response = await fetchWithCsrf('/api/v1/general/extract-bookmarks', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to extract bookmarks: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const extractedBookmarks = await response.json();
|
||||
|
||||
// Convert extracted bookmarks to our format with IDs
|
||||
if (extractedBookmarks && extractedBookmarks.length > 0) {
|
||||
bookmarks = extractedBookmarks.map(convertExtractedBookmark);
|
||||
} else {
|
||||
showEmptyState();
|
||||
}
|
||||
} catch (error) {
|
||||
// Show error message
|
||||
showErrorMessage('Failed to extract bookmarks. You can still create new ones.');
|
||||
|
||||
// Add a default bookmark if no bookmarks and error
|
||||
if (bookmarks.length === 0) {
|
||||
showEmptyState();
|
||||
}
|
||||
} finally {
|
||||
// Remove loading indicator
|
||||
removeLoadingIndicator();
|
||||
|
||||
// Update the UI
|
||||
updateBookmarksUI();
|
||||
}
|
||||
});
|
||||
|
||||
function showLoadingIndicator() {
|
||||
const loadingEl = document.createElement('div');
|
||||
loadingEl.className = 'alert alert-info';
|
||||
loadingEl.textContent = 'Loading bookmarks from PDF...';
|
||||
loadingEl.id = 'loading-bookmarks';
|
||||
bookmarksContainer.innerHTML = '';
|
||||
bookmarksContainer.appendChild(loadingEl);
|
||||
}
|
||||
|
||||
function removeLoadingIndicator() {
|
||||
const loadingEl = document.getElementById('loading-bookmarks');
|
||||
if (loadingEl) {
|
||||
loadingEl.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function showErrorMessage(message) {
|
||||
const errorEl = document.createElement('div');
|
||||
errorEl.className = 'alert alert-danger';
|
||||
errorEl.textContent = message;
|
||||
bookmarksContainer.appendChild(errorEl);
|
||||
}
|
||||
|
||||
function showEmptyState() {
|
||||
const emptyStateEl = document.createElement('div');
|
||||
emptyStateEl.className = 'empty-bookmarks mb-3';
|
||||
emptyStateEl.innerHTML = `
|
||||
<span class="material-symbols-rounded mb-2" style="font-size: 48px;">bookmark_add</span>
|
||||
<h5>No bookmarks found</h5>
|
||||
<p class="mb-3">This PDF doesn't have any bookmarks yet. Add your first bookmark to get started.</p>
|
||||
<button type="button" class="btn btn-primary btn-add-first-bookmark">
|
||||
<span class="material-symbols-rounded">add</span> Add First Bookmark
|
||||
</button>
|
||||
`;
|
||||
|
||||
// Add event listener to the "Add First Bookmark" button
|
||||
emptyStateEl.querySelector('.btn-add-first-bookmark').addEventListener('click', function() {
|
||||
addBookmark(null, 'New Bookmark', 1);
|
||||
emptyStateEl.remove();
|
||||
});
|
||||
|
||||
bookmarksContainer.appendChild(emptyStateEl);
|
||||
}
|
||||
|
||||
// Function to convert extracted bookmarks to our format with IDs
|
||||
function convertExtractedBookmark(bookmark) {
|
||||
counter++;
|
||||
const result = {
|
||||
id: Date.now() + counter, // Generate a unique ID
|
||||
title: bookmark.title || 'Untitled Bookmark',
|
||||
pageNumber: bookmark.pageNumber || 1,
|
||||
children: [],
|
||||
expanded: true // All bookmarks start expanded
|
||||
};
|
||||
|
||||
// Convert children recursively
|
||||
if (bookmark.children && bookmark.children.length > 0) {
|
||||
result.children = bookmark.children.map(child => {
|
||||
return convertExtractedBookmark(child);
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// Add bookmark button click handler
|
||||
addBookmarkBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
addBookmark();
|
||||
});
|
||||
|
||||
// Add form submit handler to update JSON data
|
||||
document.getElementById('editTocForm').addEventListener('submit', function() {
|
||||
updateBookmarkData();
|
||||
});
|
||||
|
||||
function addBookmark(parent = null, title = '', pageNumber = 1) {
|
||||
counter++;
|
||||
const newBookmark = {
|
||||
id: Date.now() + counter,
|
||||
title: title || 'New Bookmark',
|
||||
pageNumber: pageNumber || 1,
|
||||
children: [],
|
||||
expanded: true
|
||||
};
|
||||
|
||||
if (parent === null) {
|
||||
bookmarks.push(newBookmark);
|
||||
} else {
|
||||
const parentBookmark = findBookmark(bookmarks, parent);
|
||||
if (parentBookmark) {
|
||||
parentBookmark.children.push(newBookmark);
|
||||
parentBookmark.expanded = true; // Auto-expand the parent when adding a child
|
||||
} else {
|
||||
// Add to root level if parent not found
|
||||
bookmarks.push(newBookmark);
|
||||
}
|
||||
}
|
||||
|
||||
updateBookmarksUI();
|
||||
|
||||
// After updating UI, find and focus the new bookmark's title field
|
||||
setTimeout(() => {
|
||||
const newElement = document.querySelector(`[data-id="${newBookmark.id}"]`);
|
||||
if (newElement) {
|
||||
const titleInput = newElement.querySelector('.bookmark-title');
|
||||
if (titleInput) {
|
||||
titleInput.focus();
|
||||
titleInput.select();
|
||||
}
|
||||
// Scroll to the new element
|
||||
newElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function findBookmark(bookmarkArray, id) {
|
||||
for (const bookmark of bookmarkArray) {
|
||||
if (bookmark.id === id) {
|
||||
return bookmark;
|
||||
}
|
||||
if (bookmark.children.length > 0) {
|
||||
const found = findBookmark(bookmark.children, id);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Find the parent bookmark of a given bookmark by ID
|
||||
function findParentBookmark(bookmarkArray, id, parent = null) {
|
||||
for (const bookmark of bookmarkArray) {
|
||||
if (bookmark.id === id) {
|
||||
return parent; // Return the parent ID (or null if top-level)
|
||||
}
|
||||
|
||||
if (bookmark.children.length > 0) {
|
||||
const found = findParentBookmark(bookmark.children, id, bookmark.id);
|
||||
if (found !== undefined) return found;
|
||||
}
|
||||
}
|
||||
return undefined; // Not found at this level
|
||||
}
|
||||
|
||||
function removeBookmark(id) {
|
||||
// Remove from top level
|
||||
const index = bookmarks.findIndex(b => b.id === id);
|
||||
if (index !== -1) {
|
||||
bookmarks.splice(index, 1);
|
||||
updateBookmarksUI();
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove from children
|
||||
function removeFromChildren(bookmarkArray, id) {
|
||||
for (const bookmark of bookmarkArray) {
|
||||
const childIndex = bookmark.children.findIndex(b => b.id === id);
|
||||
if (childIndex !== -1) {
|
||||
bookmark.children.splice(childIndex, 1);
|
||||
return true;
|
||||
}
|
||||
if (removeFromChildren(bookmark.children, id)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if (removeFromChildren(bookmarks, id)) {
|
||||
updateBookmarksUI();
|
||||
}
|
||||
|
||||
// If no bookmarks left, show empty state
|
||||
if (bookmarks.length === 0) {
|
||||
showEmptyState();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleBookmarkExpanded(id) {
|
||||
const bookmark = findBookmark(bookmarks, id);
|
||||
if (bookmark) {
|
||||
bookmark.expanded = !bookmark.expanded;
|
||||
updateBookmarksUI();
|
||||
}
|
||||
}
|
||||
|
||||
function updateBookmarkData() {
|
||||
// Create a clean version without the IDs for submission
|
||||
const cleanBookmarks = bookmarks.map(cleanBookmark);
|
||||
bookmarkDataInput.value = JSON.stringify(cleanBookmarks);
|
||||
}
|
||||
|
||||
function cleanBookmark(bookmark) {
|
||||
return {
|
||||
title: bookmark.title,
|
||||
pageNumber: bookmark.pageNumber,
|
||||
children: bookmark.children.map(cleanBookmark)
|
||||
};
|
||||
}
|
||||
|
||||
function updateBookmarksUI() {
|
||||
if (!bookmarksContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only clear the container if there are no error messages or loading indicators
|
||||
if (!document.querySelector('#bookmarks-container .alert')) {
|
||||
bookmarksContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
// Check if there are bookmarks to display
|
||||
if (bookmarks.length === 0 && !document.querySelector('.empty-bookmarks')) {
|
||||
showEmptyState();
|
||||
} else {
|
||||
// Remove empty state if it exists and there are bookmarks
|
||||
const emptyState = document.querySelector('.empty-bookmarks');
|
||||
if (emptyState && bookmarks.length > 0) {
|
||||
emptyState.remove();
|
||||
}
|
||||
|
||||
// Create bookmark elements
|
||||
bookmarks.forEach(bookmark => {
|
||||
const bookmarkElement = createBookmarkElement(bookmark);
|
||||
bookmarksContainer.appendChild(bookmarkElement);
|
||||
});
|
||||
}
|
||||
|
||||
updateBookmarkData();
|
||||
}
|
||||
|
||||
// Create the main bookmark element with collapsible interface
|
||||
function createBookmarkElement(bookmark, level = 0) {
|
||||
const bookmarkEl = document.createElement('div');
|
||||
bookmarkEl.className = 'bookmark-item';
|
||||
bookmarkEl.dataset.id = bookmark.id;
|
||||
bookmarkEl.dataset.level = level;
|
||||
|
||||
// Create the header (always visible part)
|
||||
const header = createBookmarkHeader(bookmark, level);
|
||||
bookmarkEl.appendChild(header);
|
||||
|
||||
// Create the content (collapsible part)
|
||||
const content = document.createElement('div');
|
||||
content.className = 'bookmark-content';
|
||||
if (!bookmark.expanded) {
|
||||
content.style.display = 'none';
|
||||
}
|
||||
|
||||
// Main input row
|
||||
const inputRow = createInputRow(bookmark);
|
||||
content.appendChild(inputRow);
|
||||
bookmarkEl.appendChild(content);
|
||||
|
||||
// Add children container if has children and expanded
|
||||
if (bookmark.children && bookmark.children.length > 0) {
|
||||
const childrenContainer = createChildrenContainer(bookmark, level);
|
||||
if (bookmark.expanded) {
|
||||
bookmarkEl.appendChild(childrenContainer);
|
||||
}
|
||||
}
|
||||
|
||||
return bookmarkEl;
|
||||
}
|
||||
|
||||
// Create the header that's always visible
|
||||
function createBookmarkHeader(bookmark, level) {
|
||||
const header = document.createElement('div');
|
||||
header.className = 'bookmark-header';
|
||||
if (!bookmark.expanded) {
|
||||
header.classList.add('collapsed');
|
||||
}
|
||||
|
||||
// Left side of header with expand/collapse and info
|
||||
const headerLeft = document.createElement('div');
|
||||
headerLeft.className = 'd-flex align-items-center';
|
||||
|
||||
// Toggle expand/collapse icon
|
||||
const toggleIcon = document.createElement('span');
|
||||
toggleIcon.className = 'material-symbols-rounded toggle-icon me-2';
|
||||
toggleIcon.textContent = 'expand_more';
|
||||
toggleIcon.style.cursor = 'pointer';
|
||||
|
||||
// Only show toggle if has children
|
||||
if (bookmark.children && bookmark.children.length > 0) {
|
||||
headerLeft.appendChild(toggleIcon);
|
||||
} else {
|
||||
// Add spacer if no children
|
||||
const spacer = document.createElement('span');
|
||||
spacer.style.width = '24px';
|
||||
spacer.style.display = 'inline-block';
|
||||
headerLeft.appendChild(spacer);
|
||||
}
|
||||
|
||||
// Level indicator for nested items
|
||||
if (level > 0) {
|
||||
// Add relationship indicator visual line
|
||||
const relationshipIndicator = document.createElement('div');
|
||||
relationshipIndicator.className = 'bookmark-relationship-indicator';
|
||||
|
||||
const line = document.createElement('div');
|
||||
line.className = 'relationship-line';
|
||||
relationshipIndicator.appendChild(line);
|
||||
|
||||
const arrow = document.createElement('div');
|
||||
arrow.className = 'relationship-arrow';
|
||||
relationshipIndicator.appendChild(arrow);
|
||||
|
||||
header.appendChild(relationshipIndicator);
|
||||
|
||||
// Text indicator
|
||||
const levelIndicator = document.createElement('span');
|
||||
levelIndicator.className = 'bookmark-level-indicator';
|
||||
levelIndicator.textContent = `Child`;
|
||||
headerLeft.appendChild(levelIndicator);
|
||||
}
|
||||
|
||||
// Title preview
|
||||
const titlePreview = document.createElement('span');
|
||||
titlePreview.className = 'bookmark-title-preview';
|
||||
titlePreview.textContent = bookmark.title;
|
||||
headerLeft.appendChild(titlePreview);
|
||||
|
||||
// Page number preview
|
||||
const pagePreview = document.createElement('span');
|
||||
pagePreview.className = 'bookmark-page-preview';
|
||||
pagePreview.textContent = `Page ${bookmark.pageNumber}`;
|
||||
headerLeft.appendChild(pagePreview);
|
||||
|
||||
// Right side of header with action buttons
|
||||
const headerRight = document.createElement('div');
|
||||
headerRight.className = 'bookmark-actions-header';
|
||||
|
||||
// Quick add buttons with clear visual distinction
|
||||
const quickAddChildButton = createButton('subdirectory_arrow_right', 'btn-add-child', 'Add child bookmark (nested under this)', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
addBookmark(bookmark.id);
|
||||
});
|
||||
|
||||
const quickAddSiblingButton = createButton('add', 'btn-add-sibling', 'Add sibling bookmark (same level)', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Find parent of current bookmark
|
||||
const parentId = findParentBookmark(bookmarks, bookmark.id);
|
||||
addBookmark(parentId, '', bookmark.pageNumber); // Same level as current bookmark
|
||||
});
|
||||
|
||||
// Quick remove button
|
||||
const quickRemoveButton = createButton('delete', 'btn-outline-danger', 'Remove bookmark', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (confirm('Are you sure you want to remove this bookmark' +
|
||||
(bookmark.children.length > 0 ? ' and all its children?' : '?'))) {
|
||||
removeBookmark(bookmark.id);
|
||||
}
|
||||
});
|
||||
|
||||
headerRight.appendChild(quickAddChildButton);
|
||||
headerRight.appendChild(quickAddSiblingButton);
|
||||
headerRight.appendChild(quickRemoveButton);
|
||||
|
||||
// Assemble header
|
||||
header.appendChild(headerLeft);
|
||||
header.appendChild(headerRight);
|
||||
|
||||
// Add click handler for expansion toggle
|
||||
header.addEventListener('click', function(e) {
|
||||
// Only toggle if not clicking on buttons
|
||||
if (!e.target.closest('button')) {
|
||||
toggleBookmarkExpanded(bookmark.id);
|
||||
}
|
||||
});
|
||||
|
||||
return header;
|
||||
}
|
||||
|
||||
function createInputRow(bookmark) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'row';
|
||||
|
||||
// Title input
|
||||
row.appendChild(createTitleInputElement(bookmark));
|
||||
|
||||
// Page input
|
||||
row.appendChild(createPageInputElement(bookmark));
|
||||
|
||||
return row;
|
||||
}
|
||||
|
||||
function createTitleInputElement(bookmark) {
|
||||
const titleCol = document.createElement('div');
|
||||
titleCol.className = 'col-md-8';
|
||||
|
||||
const titleGroup = document.createElement('div');
|
||||
titleGroup.className = 'mb-3';
|
||||
|
||||
const titleLabel = document.createElement('label');
|
||||
titleLabel.textContent = 'Title';
|
||||
titleLabel.className = 'form-label';
|
||||
|
||||
const titleInput = document.createElement('input');
|
||||
titleInput.type = 'text';
|
||||
titleInput.className = 'form-control bookmark-title';
|
||||
titleInput.value = bookmark.title;
|
||||
titleInput.addEventListener('input', function() {
|
||||
bookmark.title = this.value;
|
||||
updateBookmarkData();
|
||||
|
||||
// Also update the preview in the header
|
||||
const header = titleInput.closest('.bookmark-item').querySelector('.bookmark-title-preview');
|
||||
if (header) {
|
||||
header.textContent = this.value;
|
||||
}
|
||||
});
|
||||
|
||||
titleGroup.appendChild(titleLabel);
|
||||
titleGroup.appendChild(titleInput);
|
||||
titleCol.appendChild(titleGroup);
|
||||
|
||||
return titleCol;
|
||||
}
|
||||
|
||||
function createPageInputElement(bookmark) {
|
||||
const pageCol = document.createElement('div');
|
||||
pageCol.className = 'col-md-4';
|
||||
|
||||
const pageGroup = document.createElement('div');
|
||||
pageGroup.className = 'mb-3';
|
||||
|
||||
const pageLabel = document.createElement('label');
|
||||
pageLabel.textContent = 'Page';
|
||||
pageLabel.className = 'form-label';
|
||||
|
||||
const pageInput = document.createElement('input');
|
||||
pageInput.type = 'number';
|
||||
pageInput.className = 'form-control bookmark-page';
|
||||
pageInput.value = bookmark.pageNumber;
|
||||
pageInput.min = 1;
|
||||
pageInput.addEventListener('input', function() {
|
||||
bookmark.pageNumber = parseInt(this.value) || 1;
|
||||
updateBookmarkData();
|
||||
|
||||
// Also update the preview in the header
|
||||
const header = pageInput.closest('.bookmark-item').querySelector('.bookmark-page-preview');
|
||||
if (header) {
|
||||
header.textContent = `Page ${bookmark.pageNumber}`;
|
||||
}
|
||||
});
|
||||
|
||||
pageGroup.appendChild(pageLabel);
|
||||
pageGroup.appendChild(pageInput);
|
||||
pageCol.appendChild(pageGroup);
|
||||
|
||||
return pageCol;
|
||||
}
|
||||
|
||||
function createButton(icon, className, title, clickHandler) {
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = `btn ${className} btn-bookmark-action`;
|
||||
button.innerHTML = `<span class="material-symbols-rounded">${icon}</span>`;
|
||||
button.title = title;
|
||||
button.addEventListener('click', clickHandler);
|
||||
return button;
|
||||
}
|
||||
|
||||
function createChildrenContainer(bookmark, level) {
|
||||
const childrenContainer = document.createElement('div');
|
||||
childrenContainer.className = 'bookmark-children';
|
||||
|
||||
bookmark.children.forEach(child => {
|
||||
childrenContainer.appendChild(createBookmarkElement(child, level + 1));
|
||||
});
|
||||
|
||||
return childrenContainer;
|
||||
}
|
||||
|
||||
// Update the add bookmark button appearance with clear visual cue
|
||||
addBookmarkBtn.innerHTML = '<span class="material-symbols-rounded">add</span> Add Top-level Bookmark';
|
||||
addBookmarkBtn.className = 'btn btn-primary btn-add-bookmark top-level';
|
||||
|
||||
// Add tooltip to better explain it
|
||||
addBookmarkBtn.title = 'Add a new top-level bookmark (not nested under any other bookmark)';
|
||||
|
||||
// Add icon to empty state button as well
|
||||
const updateEmptyStateButton = function() {
|
||||
const emptyStateBtn = document.querySelector('.btn-add-first-bookmark');
|
||||
if (emptyStateBtn) {
|
||||
emptyStateBtn.innerHTML = '<span class="material-symbols-rounded">add</span> Add First Bookmark';
|
||||
emptyStateBtn.title = 'Add your first bookmark to the document';
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize with an empty state if no bookmarks
|
||||
if (bookmarks.length === 0) {
|
||||
showEmptyState();
|
||||
updateEmptyStateButton();
|
||||
}
|
||||
|
||||
// Add visual enhancement to clearly show the top-level/child relationship
|
||||
document.addEventListener('mouseover', function(e) {
|
||||
// When hovering over add buttons, highlight their relationship targets
|
||||
const button = e.target.closest('.btn-add-child, .btn-add-sibling');
|
||||
if (button) {
|
||||
if (button.classList.contains('btn-add-child')) {
|
||||
// Highlight parent-child relationship
|
||||
const bookmarkItem = button.closest('.bookmark-item');
|
||||
if (bookmarkItem) {
|
||||
bookmarkItem.style.boxShadow = '0 0 0 2px var(--btn-add-child-border, #198754)';
|
||||
}
|
||||
} else if (button.classList.contains('btn-add-sibling')) {
|
||||
// Highlight sibling relationship
|
||||
const bookmarkItem = button.closest('.bookmark-item');
|
||||
if (bookmarkItem) {
|
||||
// Find siblings
|
||||
const parent = bookmarkItem.parentElement;
|
||||
const siblings = parent.querySelectorAll(':scope > .bookmark-item');
|
||||
siblings.forEach(sibling => {
|
||||
if (sibling !== bookmarkItem) {
|
||||
sibling.style.boxShadow = '0 0 0 2px var(--btn-add-sibling-border, #0d6efd)';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseout', function(e) {
|
||||
// Remove highlights when not hovering
|
||||
const button = e.target.closest('.btn-add-child, .btn-add-sibling');
|
||||
if (button) {
|
||||
// Remove all highlights
|
||||
document.querySelectorAll('.bookmark-item').forEach(item => {
|
||||
item.style.boxShadow = '';
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -5,46 +5,7 @@
|
||||
<head>
|
||||
<th:block th:insert="~{fragments/common :: head(title=#{editTableOfContents.title}, header=#{editTableOfContents.header})}">
|
||||
</th:block>
|
||||
<style>
|
||||
.bookmark-item {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.bookmark-children {
|
||||
margin-left: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.bookmark-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.bookmark-editor {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.btn-bookmark-action {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.bookmark-item-header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" th:href="@{'/css/edit-table-of-contents.css'}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -108,347 +69,7 @@
|
||||
</div>
|
||||
|
||||
<script th:src="@{'/js/fetch-utils.js'}"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('DOM fully loaded - initializing bookmark editor');
|
||||
// For debugging: Print all DOM elements we'll interact with
|
||||
console.log('Bookmarks container element:', document.getElementById('bookmarks-container'));
|
||||
console.log('Add bookmark button element:', document.getElementById('addBookmarkBtn'));
|
||||
console.log('Form element:', document.getElementById('editTocForm'));
|
||||
const bookmarksContainer = document.getElementById('bookmarks-container');
|
||||
const addBookmarkBtn = document.getElementById('addBookmarkBtn');
|
||||
const bookmarkDataInput = document.getElementById('bookmarkData');
|
||||
let bookmarks = [];
|
||||
|
||||
// Add event listener to the file input to extract existing bookmarks
|
||||
document.getElementById('fileInput-input').addEventListener('change', async function(e) {
|
||||
try {
|
||||
if (!e.target.files || e.target.files.length === 0) {
|
||||
console.log('No file selected');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('File selected, extracting bookmarks');
|
||||
|
||||
// Reset bookmarks initially
|
||||
bookmarks = [];
|
||||
updateBookmarksUI();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', e.target.files[0]);
|
||||
|
||||
// Show loading indicator
|
||||
const loadingEl = document.createElement('div');
|
||||
loadingEl.className = 'alert alert-info';
|
||||
loadingEl.textContent = 'Loading bookmarks from PDF...';
|
||||
loadingEl.id = 'loading-bookmarks';
|
||||
bookmarksContainer.appendChild(loadingEl);
|
||||
|
||||
try {
|
||||
// Call the API to extract bookmarks using fetchWithCsrf for CSRF protection
|
||||
const response = await fetchWithCsrf('/api/v1/general/extract-bookmarks', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to extract bookmarks: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const extractedBookmarks = await response.json();
|
||||
console.log('Extracted bookmarks:', extractedBookmarks);
|
||||
|
||||
// Convert extracted bookmarks to our format with IDs
|
||||
if (extractedBookmarks && extractedBookmarks.length > 0) {
|
||||
bookmarks = extractedBookmarks.map(convertExtractedBookmark);
|
||||
console.log('Converted bookmarks:', bookmarks);
|
||||
} else {
|
||||
console.log('No bookmarks found in the PDF');
|
||||
// If no bookmarks found, add a default one
|
||||
addBookmark(null, 'Bookmark 1', 1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error extracting bookmarks:', error);
|
||||
// Show error message
|
||||
const errorEl = document.createElement('div');
|
||||
errorEl.className = 'alert alert-danger';
|
||||
errorEl.textContent = 'Failed to extract bookmarks. You can still create new ones.';
|
||||
bookmarksContainer.appendChild(errorEl);
|
||||
|
||||
// Add a default bookmark
|
||||
addBookmark(null, 'Bookmark 1', 1);
|
||||
} finally {
|
||||
// Remove loading indicator
|
||||
const loadingEl = document.getElementById('loading-bookmarks');
|
||||
if (loadingEl) {
|
||||
loadingEl.remove();
|
||||
}
|
||||
|
||||
// Update the UI
|
||||
updateBookmarksUI();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in file input change handler:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Function to convert extracted bookmarks to our format with IDs
|
||||
function convertExtractedBookmark(bookmark) {
|
||||
const result = {
|
||||
id: Date.now() + Math.floor(Math.random() * 1000), // Generate a unique ID
|
||||
title: bookmark.title || 'Untitled Bookmark',
|
||||
pageNumber: bookmark.pageNumber || 1,
|
||||
children: []
|
||||
};
|
||||
|
||||
// Convert children recursively
|
||||
if (bookmark.children && bookmark.children.length > 0) {
|
||||
result.children = bookmark.children.map(child => {
|
||||
// Add a small delay to each ID to ensure uniqueness
|
||||
setTimeout(() => {}, 1);
|
||||
return convertExtractedBookmark(child);
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// Add bookmark button click handler
|
||||
addBookmarkBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // Prevent any default action
|
||||
console.log('Add bookmark button clicked');
|
||||
addBookmark();
|
||||
});
|
||||
|
||||
// Add form submit handler to update JSON data
|
||||
document.getElementById('editTocForm').addEventListener('submit', function(e) {
|
||||
updateBookmarkData();
|
||||
});
|
||||
|
||||
function addBookmark(parent = null, title = '', pageNumber = 1) {
|
||||
try {
|
||||
console.log('Adding bookmark:', { parent, title, pageNumber });
|
||||
const newBookmark = {
|
||||
id: Date.now(), // Generate a unique ID for the DOM element
|
||||
title: title || 'New Bookmark', // Ensure we have a default title
|
||||
pageNumber: pageNumber || 1, // Ensure we have a default page number
|
||||
children: []
|
||||
};
|
||||
|
||||
if (parent === null) {
|
||||
bookmarks.push(newBookmark);
|
||||
console.log('Added bookmark to root level:', newBookmark);
|
||||
} else {
|
||||
const parentBookmark = findBookmark(bookmarks, parent);
|
||||
if (parentBookmark) {
|
||||
parentBookmark.children.push(newBookmark);
|
||||
console.log('Added bookmark as child of:', parentBookmark.title);
|
||||
} else {
|
||||
console.error('Parent bookmark not found with ID:', parent);
|
||||
// Add to root level if parent not found
|
||||
bookmarks.push(newBookmark);
|
||||
console.log('Added bookmark to root level (parent not found):', newBookmark);
|
||||
}
|
||||
}
|
||||
|
||||
updateBookmarksUI();
|
||||
} catch (error) {
|
||||
console.error('Error adding bookmark:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function findBookmark(bookmarkArray, id) {
|
||||
for (const bookmark of bookmarkArray) {
|
||||
if (bookmark.id === id) {
|
||||
return bookmark;
|
||||
}
|
||||
if (bookmark.children.length > 0) {
|
||||
const found = findBookmark(bookmark.children, id);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function removeBookmark(id) {
|
||||
// Remove from top level
|
||||
const index = bookmarks.findIndex(b => b.id === id);
|
||||
if (index !== -1) {
|
||||
bookmarks.splice(index, 1);
|
||||
updateBookmarksUI();
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove from children
|
||||
function removeFromChildren(bookmarkArray, id) {
|
||||
for (const bookmark of bookmarkArray) {
|
||||
const childIndex = bookmark.children.findIndex(b => b.id === id);
|
||||
if (childIndex !== -1) {
|
||||
bookmark.children.splice(childIndex, 1);
|
||||
return true;
|
||||
}
|
||||
if (removeFromChildren(bookmark.children, id)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if (removeFromChildren(bookmarks, id)) {
|
||||
updateBookmarksUI();
|
||||
}
|
||||
}
|
||||
|
||||
function updateBookmarkData() {
|
||||
// Create a clean version without the IDs for submission
|
||||
const cleanBookmarks = bookmarks.map(cleanBookmark);
|
||||
bookmarkDataInput.value = JSON.stringify(cleanBookmarks);
|
||||
}
|
||||
|
||||
function cleanBookmark(bookmark) {
|
||||
return {
|
||||
title: bookmark.title,
|
||||
pageNumber: bookmark.pageNumber,
|
||||
children: bookmark.children.map(cleanBookmark)
|
||||
};
|
||||
}
|
||||
|
||||
function updateBookmarksUI() {
|
||||
try {
|
||||
console.log('Updating bookmarks UI with:', bookmarks);
|
||||
if (!bookmarksContainer) {
|
||||
console.error('bookmarksContainer element not found');
|
||||
return;
|
||||
}
|
||||
bookmarksContainer.innerHTML = '';
|
||||
bookmarks.forEach(bookmark => {
|
||||
const bookmarkElement = createBookmarkElement(bookmark);
|
||||
bookmarksContainer.appendChild(bookmarkElement);
|
||||
console.log('Added bookmark element to container:', bookmark.title);
|
||||
});
|
||||
updateBookmarkData();
|
||||
} catch (error) {
|
||||
console.error('Error updating bookmarks UI:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function createBookmarkElement(bookmark, level = 0) {
|
||||
const bookmarkEl = document.createElement('div');
|
||||
bookmarkEl.className = 'bookmark-item';
|
||||
bookmarkEl.dataset.id = bookmark.id;
|
||||
|
||||
const bookmarkContent = document.createElement('div');
|
||||
bookmarkContent.className = 'bookmark-content';
|
||||
|
||||
// Add a header for the bookmark
|
||||
const header = document.createElement('div');
|
||||
header.className = 'bookmark-item-header';
|
||||
header.textContent = level === 0 ? 'Top-level Bookmark' : `Nested Bookmark (Level ${level})`;
|
||||
bookmarkContent.appendChild(header);
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.className = 'row';
|
||||
|
||||
// Title input
|
||||
const titleCol = document.createElement('div');
|
||||
titleCol.className = 'col-md-6';
|
||||
const titleGroup = document.createElement('div');
|
||||
titleGroup.className = 'mb-3';
|
||||
const titleLabel = document.createElement('label');
|
||||
titleLabel.textContent = 'Title';
|
||||
titleLabel.className = 'form-label';
|
||||
const titleInput = document.createElement('input');
|
||||
titleInput.type = 'text';
|
||||
titleInput.className = 'form-control bookmark-title';
|
||||
titleInput.value = bookmark.title;
|
||||
titleInput.addEventListener('input', function() {
|
||||
bookmark.title = this.value;
|
||||
updateBookmarkData();
|
||||
});
|
||||
titleGroup.appendChild(titleLabel);
|
||||
titleGroup.appendChild(titleInput);
|
||||
titleCol.appendChild(titleGroup);
|
||||
row.appendChild(titleCol);
|
||||
|
||||
// Page number input
|
||||
const pageCol = document.createElement('div');
|
||||
pageCol.className = 'col-md-3';
|
||||
const pageGroup = document.createElement('div');
|
||||
pageGroup.className = 'mb-3';
|
||||
const pageLabel = document.createElement('label');
|
||||
pageLabel.textContent = 'Page';
|
||||
pageLabel.className = 'form-label';
|
||||
const pageInput = document.createElement('input');
|
||||
pageInput.type = 'number';
|
||||
pageInput.className = 'form-control bookmark-page';
|
||||
pageInput.value = bookmark.pageNumber;
|
||||
pageInput.min = 1;
|
||||
pageInput.addEventListener('input', function() {
|
||||
bookmark.pageNumber = parseInt(this.value) || 1;
|
||||
updateBookmarkData();
|
||||
});
|
||||
pageGroup.appendChild(pageLabel);
|
||||
pageGroup.appendChild(pageInput);
|
||||
pageCol.appendChild(pageGroup);
|
||||
row.appendChild(pageCol);
|
||||
|
||||
// Buttons
|
||||
const buttonCol = document.createElement('div');
|
||||
buttonCol.className = 'col-md-3';
|
||||
const buttonGroup = document.createElement('div');
|
||||
buttonGroup.className = 'mb-3 d-flex align-items-end h-100';
|
||||
|
||||
const addChildBtn = document.createElement('button');
|
||||
addChildBtn.type = 'button';
|
||||
addChildBtn.className = 'btn btn-outline-success btn-bookmark-action';
|
||||
addChildBtn.innerHTML = '<span class="material-symbols-rounded">add</span>';
|
||||
addChildBtn.title = 'Add child bookmark';
|
||||
addChildBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
addBookmark(bookmark.id);
|
||||
});
|
||||
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.type = 'button';
|
||||
removeBtn.className = 'btn btn-outline-danger btn-bookmark-action';
|
||||
removeBtn.innerHTML = '<span class="material-symbols-rounded">close</span>';
|
||||
removeBtn.title = 'Remove bookmark';
|
||||
removeBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
removeBookmark(bookmark.id);
|
||||
});
|
||||
|
||||
buttonGroup.appendChild(addChildBtn);
|
||||
buttonGroup.appendChild(removeBtn);
|
||||
buttonCol.appendChild(buttonGroup);
|
||||
row.appendChild(buttonCol);
|
||||
|
||||
bookmarkContent.appendChild(row);
|
||||
bookmarkEl.appendChild(bookmarkContent);
|
||||
|
||||
// Children container
|
||||
if (bookmark.children && bookmark.children.length > 0) {
|
||||
const childrenContainer = document.createElement('div');
|
||||
childrenContainer.className = 'bookmark-children';
|
||||
bookmark.children.forEach(child => {
|
||||
childrenContainer.appendChild(createBookmarkElement(child, level + 1));
|
||||
});
|
||||
bookmarkEl.appendChild(childrenContainer);
|
||||
}
|
||||
|
||||
return bookmarkEl;
|
||||
}
|
||||
|
||||
// Initialize with an empty bookmark if no file is loaded initially
|
||||
if (bookmarks.length === 0) {
|
||||
console.log('Initializing with an empty bookmark');
|
||||
addBookmark(null, 'Bookmark 1', 1);
|
||||
console.log('Bookmarks after initialization:', bookmarks);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script th:src="@{'/js/pages/edit-table-of-contents.js'}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user