diff --git a/app/js/main.js b/app/js/main.js index a41ce06..e3d297d 100644 --- a/app/js/main.js +++ b/app/js/main.js @@ -123,3 +123,67 @@ $(document).ready(function() { } }); }); + + document.addEventListener('DOMContentLoaded', () => { + // Initialize Masonry + const masonryContainer = document.querySelector('[data-masonry]'); + const masonryInstance = new Masonry(masonryContainer, { + // horizontalOrder: false, // Maintains natural order in DOM + columnHeight: '.accordion', + // columnWidth: '.card', // Use the card width as the column reference + percentPosition: true + }); + + + // const sortContainer = document.getElementById('bookmarkSort'); + // Sortable.create(masonryContainer, { + // // animation: 150, // Smooth animations + // sort: true, + // ghostClass: 'bg-primary', + // onEnd: () => { + // // Trigger Masonry layout after drag-and-drop + // masonryInstance.layout(); + // } + // }); + + // Function to trigger layout after any accordion change + const updateMasonryLayout = () => masonryInstance.layout(); + + // Listen for all accordion collapse/expand events + masonryContainer.addEventListener('hidden.bs.collapse', updateMasonryLayout); + masonryContainer.addEventListener('shown.bs.collapse', updateMasonryLayout); + + // Observe dynamic content changes (e.g., rows added/removed) + 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 }); + }); + + jQuery(function($) { + var panelList = $('#bookmarkSort'); + + panelList.sortable({ + // Only make the .panel-heading child elements support dragging. + // Omit this to make then entire
no folders
+no folders
+No Bookmarks
no folders
-Title | -Privacy | -Description | +Title | +Privacy | +Description | @@ -13,11 +13,11 @@ | ||
---|---|---|---|---|---|---|---|---|
{title} | -{privacy} | +{prettyTitle} | +{prettyPrivacy} | {description} | - | + |