Add bulk operation

static/js/managers/BulkManager.js

@@ -0,0 +1,106 @@
+import { state } from '../state/index.js';
+import { showToast } from '../utils/uiHelpers.js';
+import { updateCardsForBulkMode } from '../components/LoraCard.js';
+
+export class BulkManager {
+    constructor() {
+        this.bulkBtn = document.getElementById('bulkOperationsBtn');
+        this.bulkPanel = document.getElementById('bulkOperationsPanel');
+        
+        // Initialize selected loras set in state if not already there
+        if (!state.selectedLoras) {
+            state.selectedLoras = new Set();
+        }
+    }
+
+    initialize() {
+        // Add event listeners if needed
+        // (Already handled via onclick attributes in HTML, but could be moved here)
+    }
+
+    toggleBulkMode() {
+        // Toggle the state
+        state.bulkMode = !state.bulkMode;
+        
+        // Update UI
+        this.bulkBtn.classList.toggle('active', state.bulkMode);
+        
+        // Important: Remove the hidden class when entering bulk mode
+        if (state.bulkMode) {
+            this.bulkPanel.classList.remove('hidden');
+            // Use setTimeout to ensure the DOM updates before adding visible class
+            // This helps with the transition animation
+            setTimeout(() => {
+                this.bulkPanel.classList.add('visible');
+            }, 10);
+        } else {
+            this.bulkPanel.classList.remove('visible');
+            // Add hidden class back after transition completes
+            setTimeout(() => {
+                this.bulkPanel.classList.add('hidden');
+            }, 400); // Match this with the transition duration in CSS
+        }
+        
+        // Update all cards
+        updateCardsForBulkMode(state.bulkMode);
+        
+        // Clear selection if exiting bulk mode
+        if (!state.bulkMode) {
+            this.clearSelection();
+        }
+    }
+
+    clearSelection() {
+        document.querySelectorAll('.lora-card.selected').forEach(card => {
+            card.classList.remove('selected');
+        });
+        state.selectedLoras.clear();
+        this.updateSelectedCount();
+    }
+
+    updateSelectedCount() {
+        const selectedCards = document.querySelectorAll('.lora-card.selected');
+        const countElement = document.getElementById('selectedCount');
+        
+        if (countElement) {
+            countElement.textContent = `${selectedCards.length} selected`;
+        }
+        
+        // Update state with selected loras
+        state.selectedLoras.clear();
+        selectedCards.forEach(card => {
+            state.selectedLoras.add(card.dataset.filepath);
+        });
+    }
+
+    toggleCardSelection(card) {
+        card.classList.toggle('selected');
+        this.updateSelectedCount();
+    }
+
+    async copyAllLorasSyntax() {
+        const selectedCards = document.querySelectorAll('.lora-card.selected');
+        if (selectedCards.length === 0) {
+            showToast('No LoRAs selected', 'warning');
+            return;
+        }
+        
+        const loraSyntaxes = [];
+        selectedCards.forEach(card => {
+            const usageTips = JSON.parse(card.dataset.usage_tips || '{}');
+            const strength = usageTips.strength || 1;
+            loraSyntaxes.push(`<lora:${card.dataset.file_name}:${strength}>`);
+        });
+        
+        try {
+            await navigator.clipboard.writeText(loraSyntaxes.join(', '));
+            showToast(`Copied ${selectedCards.length} LoRA syntaxes to clipboard`, 'success');
+        } catch (err) {
+            console.error('Copy failed:', err);
+            showToast('Copy failed', 'error');
+        }
+    }
+}
+
+// Create a singleton instance
+export const bulkManager = new BulkManager();