the-tempus-project/thetempusproject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mvp

Browse Source
This commit is contained in:
Joey Kimsey
2024-12-21 16:26:05 -05:00
parent 0c2fa757dd
commit f8e75e847d
59 changed files with 861 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
app/plugins/bookmarks/js/bookmarks.js
View File

@ -1,30 +1,9 @@
let masonryInstance;
document.addEventListener('DOMContentLoaded', () => {
// Handle all bootstrap popover inits
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
const masonryContainer = document.querySelector('[data-masonry]');
if ( ! masonryContainer ) {
return;
}
const masonryInstance = new Masonry(masonryContainer, {
columnHeight: '.accordion',
percentPosition: true
});
const updateMasonryLayout = () => masonryInstance.layout();
masonryContainer.addEventListener('hidden.bs.collapse', updateMasonryLayout);
masonryContainer.addEventListener('shown.bs.collapse', updateMasonryLayout);
const observer = new MutationObserver(() => {
updateMasonryLayout();
});
// Observe all cards for changes in the DOM
document.querySelectorAll('.card').forEach((card) => {
observer.observe(card, { childList: true, subtree: true });
});
// Initialize all toggle functions
toggleVisibility('editModeSwitch', 'edit-mode');
toggleVisibility('showArchivedSwitch', 'link-archived');
@ -39,6 +18,119 @@ document.addEventListener('DOMContentLoaded', () => {
toggleVisibility('dashShowHiddenSwitch', 'link-hidden');
toggleVisibility('dashAddButtonSwitch', 'btn-addlink');
toggleVisibility('dashShareButtonSwitch', 'btn-share');
// Retrieve the list of collapsed folderCard IDs from local storage
const collapsedFolders = JSON.parse(localStorage.getItem( 'collapsedFolders' )) || [];
// Collapse the elements stored in local storage when the page loads
collapsedFolders.forEach((folderId) => {
const collapseElement = document.querySelector(`#Collapse${folderId}`);
if (collapseElement) {
collapseElement.classList.remove('show');
}
});
// Add event listeners to track expand and collapse actions
document.querySelectorAll('.accordion-item').forEach((item) => {
const folderCardId = item.closest('.bookmark-card')?.id?.replace('folderCard', '');
if ( ! folderCardId ) return;
const collapseElement = item.querySelector('.collapse');
// Listen for collapse and expand events
collapseElement.addEventListener('hidden.bs.collapse', () => {
// Add the folderCard ID to local storage when collapsed
if (!collapsedFolders.includes(folderCardId)) {
collapsedFolders.push(folderCardId);
localStorage.setItem( 'collapsedFolders' , JSON.stringify(collapsedFolders));
}
});
collapseElement.addEventListener('shown.bs.collapse', () => {
// Remove the folderCard ID from local storage when expanded
const index = collapsedFolders.indexOf(folderCardId);
if (index > -1) {
collapsedFolders.splice(index, 1);
localStorage.setItem( 'collapsedFolders' , JSON.stringify(collapsedFolders));
}
});
});
const masonryContainer = document.getElementById("bookmarkSort");
if ( ! masonryContainer ) {
return;
}
if ( localStorage.getItem('manageFolderOrder') ) {
loadDashLinkOrder();
}
masonryInstance = new Masonry(masonryContainer, {
columnHeight: '.accordion',
itemSelector: ".bookmark-card",
percentPosition: false
});
const test = () => masonryInstance.layout();
masonryContainer.addEventListener('hidden.bs.collapse', test );
masonryContainer.addEventListener('shown.bs.collapse', test );
// Select all folder-raise and folder-lower buttons
const raiseButtons = document.querySelectorAll(".folder-raise");
const lowerButtons = document.querySelectorAll(".folder-lower");
// Function to move the folderCard up
function moveUp(event) {
const folderCard = event.target.closest(".bookmark-card");
const bookmarkSort = document.getElementById("bookmarkSort");
const orderId = document.getElementById("dashLinkOrder");
if (folderCard) {
const previousSibling = folderCard.previousElementSibling;
if (previousSibling) {
// Remove and reinsert the element before the previous sibling
bookmarkSort.removeChild(folderCard);
bookmarkSort.insertBefore(folderCard, previousSibling);
masonryInstance.reloadItems();
masonryInstance.layout();
updateDashLinkOrder();
}
}
}
// Function to move the folderCard down
function moveDown(event) {
const folderCard = event.target.closest(".bookmark-card");
const bookmarkSort = document.getElementById("bookmarkSort");
if (folderCard) {
const nextSibling = folderCard.nextElementSibling;
if (nextSibling) {
// Remove and reinsert the element after the next sibling
bookmarkSort.removeChild(folderCard);
bookmarkSort.insertBefore(folderCard, nextSibling.nextSibling);
masonryInstance.reloadItems();
masonryInstance.layout();
updateDashLinkOrder();
}
}
}
// Add event listeners to the raise buttons
raiseButtons.forEach(button => {
button.addEventListener("click", moveUp);
});
// Add event listeners to the lower buttons
lowerButtons.forEach(button => {
button.addEventListener("click", moveDown);
});
// after hiding/showing elements
masonryInstance.layout();
});
// Function to handle showing or hiding elements based on the checkbox state
@ -52,143 +144,72 @@ function toggleVisibility(switchId, className) {
// Listen for changes to the checkbox
switchElement.addEventListener('change', () => {
if (switchElement.checked) {
elementsToToggle.forEach(element => {
element.style.display = ''; // Show the element (default display)
});
} else {
elementsToToggle.forEach(element => {
element.style.display = 'none'; // Hide the element
});
}
if (switchElement.checked) {
elementsToToggle.forEach(element => {
element.style.display = '';
});
} else {
elementsToToggle.forEach(element => {
element.style.display = 'none';
});
}
if (typeof masonryInstance !== 'undefined') {
masonryInstance.reloadItems();
masonryInstance.layout()
return;
}
});
// Trigger the toggle initially to set the correct visibility on page load
switchElement.dispatchEvent(new Event('change'));
}
document.addEventListener('DOMContentLoaded', function () {
const bookmarkSort = document.getElementById('bookmarkSort');
if ( ! bookmarkSort ) {
return;
function updateDashLinkOrder() {
const bookmarkCards = document.querySelectorAll("#bookmarkSort .bookmark-card");
const ids = Array.from( bookmarkCards ).map( card => {
const match = card.id.match(/folderCard(\d+)/);
return match ? match[1] : null;
}).filter( id => id !== null );
const dashLinkOrder = document.getElementById("dashLinkOrder");
if (dashLinkOrder) {
dashLinkOrder.value = ids.join(",");
} else {
localStorage.setItem('manageFolderOrder', ids.join(","));
}
let draggingElement = null;
let placeholder = null;
let initialX = 0;
let initialY = 0;
let offsetX = 0;
let offsetY = 0;
// Function to handle the drag start
const handleDragStart = (e, element) => {
draggingElement = element;
}
// Create a placeholder to maintain layout
placeholder = document.createElement('div');
placeholder.style.height = `${draggingElement.offsetHeight}px`;
placeholder.style.marginBottom = getComputedStyle(draggingElement).marginBottom;
placeholder.classList.add('placeholder');
draggingElement.parentNode.insertBefore(placeholder, draggingElement);
const rect = element.getBoundingClientRect();
initialX = e.clientX;
initialY = e.clientY;
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
function loadDashLinkOrder() {
const storedOrder = localStorage.getItem("manageFolderOrder"); // Get the saved order
const bookmarkSort = document.getElementById("bookmarkSort");
// Prevent the element from moving in the normal flow
element.classList.add('dragging');
element.style.position = 'absolute';
draggingElement.style.width = `${rect.width}px`; // Preserve width
draggingElement.style.height = `${rect.height}px`; // Preserve height
element.style.zIndex = 1000; // Bring the element on top of others
element.style.left = `${rect.left}px`;
element.style.top = `${rect.top}px`;
e.preventDefault();
};
if (!storedOrder || !bookmarkSort) return; // Exit if no saved order or no container
// Function to handle dragging movement
const handleDragMove = (e) => {
if (draggingElement) {
const dx = e.clientX - initialX + offsetX;
const dy = e.clientY - initialY + offsetY;
draggingElement.style.left = `${dx}px`;
draggingElement.style.top = `${dy}px`;
}
};
const orderArray = storedOrder.split(","); // Convert the saved order into an array
const bookmarkCards = Array.from(document.querySelectorAll("#bookmarkSort .bookmark-card"));
// Function to handle the drag end
const handleDragEnd = () => {
if (draggingElement) {
const rect = draggingElement.getBoundingClientRect();
// Reset the position styles of the dragged element
draggingElement.style.position = '';
draggingElement.style.zIndex = ''; // Reset z-index
draggingElement.style.left = '';
draggingElement.style.top = '';
draggingElement.classList.remove('dragging');
// Re-insert the element back into the DOM properly
const closestElement = getClosestElement(rect.left, rect.top);
console.error(closestElement.id);
if (closestElement) {
bookmarkSort.insertBefore(draggingElement, closestElement);
console.log( 'insertBefore' );
} else {
bookmarkSort.appendChild(draggingElement);
console.log( 'append' );
}
// Reorder the elements after the drag ends
reorderElements();
draggingElement = null;
}
};
// Function to reorder the elements inside the container
const reorderElements = () => {
const elements = Array.from(bookmarkSort.children);
const sortedIds = elements.map(element => element.id);
console.log('New order:', sortedIds);
};
// Function to handle the drop event
const handleDrop = (e) => {
e.preventDefault();
};
// Helper function to find the closest element based on mouse position
const getClosestElement = (x, y) => {
const elements = Array.from(bookmarkSort.children).filter(
(el) => el !== placeholder && el !== draggingElement
);
let closest = null;
let closestDistance = Number.POSITIVE_INFINITY;
elements.forEach((child) => {
const rect = child.getBoundingClientRect();
const distance = Math.abs(rect.top - y);
if (distance < closestDistance) {
closestDistance = distance;
closest = child;
}
});
return closest;
};
// Attach event listeners to all .card-header elements for dragging
Array.from(document.querySelectorAll('.mover-arrow')).forEach(cardHeader => {
cardHeader.addEventListener('mousedown', (e) => handleDragStart(e, cardHeader.closest('.bookmark-card')));
// Create a map for quick lookup of cards by their ID
const cardMap = new Map();
bookmarkCards.forEach(card => {
const match = card.id.match(/folderCard(\d+)/);
if (match) cardMap.set(match[1], card);
});
// Handle the dragging process
document.addEventListener('mousemove', handleDragMove);
document.addEventListener('mouseup', handleDragEnd);
bookmarkSort.addEventListener('dragover', handleDrop); // Listen for the drop event to update the order
});
// Reorder elements based on the saved order
const orderedElements = [];
orderArray.forEach(id => {
if (cardMap.has(id)) {
orderedElements.push(cardMap.get(id)); // Add elements in the specified order
cardMap.delete(id); // Remove from the map once processed
}
});
// Add any remaining (unspecified) elements to the end of the list
const remainingElements = Array.from(cardMap.values());
orderedElements.push(...remainingElements);
// Clear the container and append the elements in the new order
bookmarkSort.innerHTML = ""; // Remove all children
orderedElements.forEach(element => bookmarkSort.appendChild(element)); // Append in order
}