plugin wip

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 <li>...</li> draggable.
+            handle: '.card', 
+            update: function() {
+                console.error( 'update' );
+                $('.bookmark-card', panelList).each(function(index, elem) {
+                     var $listItem = $(elem),
+                     
+                         newIndex = $listItem.index();
+                         masonryInstance.layout();
+                         console.error( $listItem );
+                         console.error( index );
+                         console.error( newIndex );
+    
+                     // Persist the new indices.
+                });
+            }
+        });
+    });
+});