✨ Major code cleanup and optimization
- Removed unnecessary dependencies (fs, path - built-in modules) - Organized debug files into /debug folder - Reduced excessive console logging for cleaner output - Fixed README formatting issues - Added comprehensive .gitignore - Removed redundant backup files (game.js.new) - Fixed duplicate code patterns in analytics - Created CLEANUP_SUMMARY.md documentation - Regenerated clean package-lock.json No breaking changes - all functionality preserved
This commit is contained in:
nmemmert committed
1 parent
8d37038177
commit
d860df7de6
59 files changed
+1372
-5916
No files matched your search
@@ -0,0 +1,678 @@
|
||||
/**
|
||||
* Draggable & Resizable Cards System
|
||||
* Allows admin cards to be dragged, dropped, and resized within the admin panel
|
||||
*/
|
||||
|
||||
class DraggableCardManager {
|
||||
constructor() {
|
||||
this.cards = [];
|
||||
this.draggedCard = null;
|
||||
this.startPos = { x: 0, y: 0 };
|
||||
this.startSize = { width: 0, height: 0 };
|
||||
this.isResizing = false;
|
||||
this.isDragging = false;
|
||||
this.gridContainer = null;
|
||||
this.savedLayouts = this.loadSavedLayouts();
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Wait for DOM to be ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => this.setupDraggableCards());
|
||||
} else {
|
||||
this.setupDraggableCards();
|
||||
}
|
||||
|
||||
console.log('🎯 Draggable Cards Manager initialized');
|
||||
}
|
||||
|
||||
setupDraggableCards() {
|
||||
// Find all potential containers with cards
|
||||
const containers = [
|
||||
document.querySelector('.admin-grid'),
|
||||
document.querySelector('.container'),
|
||||
document.body
|
||||
];
|
||||
|
||||
// Use the first container found, or body as fallback
|
||||
this.gridContainer = containers.find(container => container && container.querySelector('.card')) || document.body;
|
||||
|
||||
if (!this.gridContainer) {
|
||||
console.log('No container with cards found, retrying in 1 second...');
|
||||
setTimeout(() => this.setupDraggableCards(), 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
// Make the container suitable for absolute positioning
|
||||
if (this.gridContainer.style.position !== 'relative' && this.gridContainer.style.position !== 'absolute') {
|
||||
this.gridContainer.style.position = 'relative';
|
||||
}
|
||||
this.gridContainer.style.minHeight = '400px';
|
||||
|
||||
// Setup all cards found anywhere on the page
|
||||
this.setupAllCards();
|
||||
|
||||
// Load saved layout
|
||||
this.applySavedLayout();
|
||||
|
||||
// Add control buttons
|
||||
this.addControlButtons();
|
||||
|
||||
// Watch for new cards being added dynamically
|
||||
this.setupCardObserver();
|
||||
|
||||
console.log('📋 Draggable cards setup complete for all pages');
|
||||
}
|
||||
|
||||
setupAllCards() {
|
||||
// Find all cards on the entire page, not just in one container
|
||||
const allCards = document.querySelectorAll('.card');
|
||||
|
||||
allCards.forEach((card, index) => {
|
||||
// Skip if already setup
|
||||
if (card.dataset.draggableSetup === 'true') return;
|
||||
|
||||
this.makeCardDraggable(card, index);
|
||||
this.makeCardResizable(card, index);
|
||||
this.addCardHeader(card, index);
|
||||
|
||||
card.dataset.draggableSetup = 'true';
|
||||
});
|
||||
|
||||
console.log(`🎯 Setup ${allCards.length} draggable cards`);
|
||||
}
|
||||
|
||||
setupCardObserver() {
|
||||
// Watch for new cards being added to the page
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
mutation.addedNodes.forEach((node) => {
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
// Check if the added node is a card or contains cards
|
||||
const cards = node.classList && node.classList.contains('card')
|
||||
? [node]
|
||||
: node.querySelectorAll ? node.querySelectorAll('.card') : [];
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
if (card.dataset.draggableSetup !== 'true') {
|
||||
const allCards = document.querySelectorAll('.card');
|
||||
const cardIndex = Array.from(allCards).indexOf(card);
|
||||
this.makeCardDraggable(card, cardIndex);
|
||||
this.makeCardResizable(card, cardIndex);
|
||||
this.addCardHeader(card, cardIndex);
|
||||
card.dataset.draggableSetup = 'true';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
|
||||
this.cardObserver = observer;
|
||||
}
|
||||
|
||||
autoArrangeCards() {
|
||||
const cards = this.freeformContainer.querySelectorAll('.card');
|
||||
const containerWidth = this.freeformContainer.clientWidth - 40; // Account for padding
|
||||
const cardWidth = 350; // Standard width for side-by-side
|
||||
const cardHeight = 300; // Standard height
|
||||
const gap = 20; // Gap between cards
|
||||
|
||||
const cardsPerRow = Math.floor(containerWidth / (cardWidth + gap));
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
const row = Math.floor(index / cardsPerRow);
|
||||
const col = index % cardsPerRow;
|
||||
|
||||
const x = 20 + (col * (cardWidth + gap));
|
||||
const y = 20 + (row * (cardHeight + gap));
|
||||
|
||||
card.style.left = x + 'px';
|
||||
card.style.top = y + 'px';
|
||||
card.style.width = cardWidth + 'px';
|
||||
});
|
||||
|
||||
console.log(`📐 Auto-arranged ${cards.length} cards in ${cardsPerRow} columns`);
|
||||
}
|
||||
|
||||
setupCards() {
|
||||
const cards = this.gridContainer.querySelectorAll('.card');
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
this.makeCardDraggable(card, index);
|
||||
this.makeCardResizable(card, index);
|
||||
this.addCardHeader(card, index);
|
||||
});
|
||||
}
|
||||
|
||||
makeCardDraggable(card, index) {
|
||||
// Add draggable handle
|
||||
const header = card.querySelector('.card-header') || this.createCardHeader(card);
|
||||
|
||||
header.style.cursor = 'move';
|
||||
header.addEventListener('mousedown', (e) => this.startDrag(e, card, index));
|
||||
header.addEventListener('touchstart', (e) => this.startDrag(e, card, index));
|
||||
|
||||
// Prevent text selection while dragging
|
||||
header.style.userSelect = 'none';
|
||||
header.style.webkitUserSelect = 'none';
|
||||
}
|
||||
|
||||
makeCardResizable(card, index) {
|
||||
// Add resize handles
|
||||
const resizeHandle = document.createElement('div');
|
||||
resizeHandle.className = 'resize-handle';
|
||||
resizeHandle.innerHTML = '⟲';
|
||||
resizeHandle.style.cssText = `
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: se-resize;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
border-radius: 4px 0 8px 0;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s ease;
|
||||
`;
|
||||
|
||||
resizeHandle.addEventListener('mousedown', (e) => this.startResize(e, card, index));
|
||||
resizeHandle.addEventListener('touchstart', (e) => this.startResize(e, card, index));
|
||||
|
||||
card.style.position = 'relative';
|
||||
card.appendChild(resizeHandle);
|
||||
|
||||
// Show/hide resize handle on hover
|
||||
card.addEventListener('mouseenter', () => resizeHandle.style.opacity = '1');
|
||||
card.addEventListener('mouseleave', () => resizeHandle.style.opacity = '0.7');
|
||||
}
|
||||
|
||||
createCardHeader(card) {
|
||||
const header = document.createElement('div');
|
||||
header.className = 'card-header';
|
||||
header.style.cssText = `
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: -2rem -2rem 1rem -2rem;
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease;
|
||||
`;
|
||||
|
||||
const title = card.querySelector('h4');
|
||||
const titleText = title ? title.textContent : `Card ${card.dataset.cardIndex || ''}`;
|
||||
header.innerHTML = `
|
||||
<span>${titleText}</span>
|
||||
<span class="drag-indicator" style="opacity: 0.7;">⋮⋮</span>
|
||||
`;
|
||||
|
||||
card.insertBefore(header, card.firstChild);
|
||||
if (title) title.style.display = 'none'; // Hide original title
|
||||
|
||||
return header;
|
||||
}
|
||||
|
||||
addCardHeader(card, index) {
|
||||
card.dataset.cardIndex = index;
|
||||
|
||||
if (!card.querySelector('.card-header')) {
|
||||
this.createCardHeader(card);
|
||||
}
|
||||
}
|
||||
|
||||
startDrag(e, card, index) {
|
||||
// Only allow dragging if global drag mode is enabled
|
||||
if (!document.body.classList.contains('global-drag-mode')) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
this.isDragging = true;
|
||||
this.draggedCard = card;
|
||||
|
||||
const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
|
||||
const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;
|
||||
|
||||
const rect = card.getBoundingClientRect();
|
||||
this.startPos = {
|
||||
x: clientX - rect.left,
|
||||
y: clientY - rect.top
|
||||
};
|
||||
|
||||
// Switch to absolute positioning
|
||||
const parentRect = card.offsetParent ? card.offsetParent.getBoundingClientRect() : { left: 0, top: 0 };
|
||||
card.style.position = 'absolute';
|
||||
card.style.left = rect.left - parentRect.left + 'px';
|
||||
card.style.top = rect.top - parentRect.top + 'px';
|
||||
card.style.width = rect.width + 'px';
|
||||
card.style.zIndex = '1000';
|
||||
card.style.transform = 'rotate(2deg)';
|
||||
card.style.boxShadow = '0 8px 32px rgba(0,0,0,0.3)';
|
||||
|
||||
// Add event listeners
|
||||
document.addEventListener('mousemove', this.handleDrag);
|
||||
document.addEventListener('touchmove', this.handleDrag);
|
||||
document.addEventListener('mouseup', this.stopDrag);
|
||||
document.addEventListener('touchend', this.stopDrag);
|
||||
|
||||
card.classList.add('dragging');
|
||||
}
|
||||
|
||||
handleDrag = (e) => {
|
||||
if (!this.isDragging || !this.draggedCard) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
|
||||
const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
|
||||
|
||||
const containerRect = this.freeformContainer ? this.freeformContainer.getBoundingClientRect() :
|
||||
(this.draggedCard.offsetParent ? this.draggedCard.offsetParent.getBoundingClientRect() : { left: 0, top: 0 });
|
||||
const newX = clientX - containerRect.left - this.startPos.x;
|
||||
const newY = clientY - containerRect.top - this.startPos.y;
|
||||
|
||||
// Keep within bounds of the container with some padding
|
||||
const container = this.freeformContainer || this.draggedCard.offsetParent || document.body;
|
||||
const maxX = container.clientWidth - this.draggedCard.offsetWidth - 10;
|
||||
const maxY = container.clientHeight - this.draggedCard.offsetHeight - 10;
|
||||
|
||||
this.draggedCard.style.left = Math.max(0, Math.min(maxX, newX)) + 'px';
|
||||
this.draggedCard.style.top = Math.max(0, Math.min(maxY, newY)) + 'px';
|
||||
}
|
||||
|
||||
stopDrag = (e) => {
|
||||
if (!this.isDragging || !this.draggedCard) return;
|
||||
|
||||
this.isDragging = false;
|
||||
|
||||
// Reset visual effects
|
||||
this.draggedCard.style.transform = '';
|
||||
this.draggedCard.style.zIndex = '';
|
||||
this.draggedCard.style.boxShadow = '';
|
||||
this.draggedCard.classList.remove('dragging');
|
||||
|
||||
// Save position
|
||||
this.saveCardLayout();
|
||||
|
||||
// Clean up event listeners
|
||||
document.removeEventListener('mousemove', this.handleDrag);
|
||||
document.removeEventListener('touchmove', this.handleDrag);
|
||||
document.removeEventListener('mouseup', this.stopDrag);
|
||||
document.removeEventListener('touchend', this.stopDrag);
|
||||
|
||||
this.draggedCard = null;
|
||||
}
|
||||
|
||||
startResize(e, card, index) {
|
||||
// Only allow resizing if global drag mode is enabled
|
||||
if (!document.body.classList.contains('global-drag-mode')) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.isResizing = true;
|
||||
this.draggedCard = card;
|
||||
|
||||
const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
|
||||
const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;
|
||||
|
||||
this.startPos = { x: clientX, y: clientY };
|
||||
this.startSize = {
|
||||
width: card.offsetWidth,
|
||||
height: card.offsetHeight
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', this.handleResize);
|
||||
document.addEventListener('touchmove', this.handleResize);
|
||||
document.addEventListener('mouseup', this.stopResize);
|
||||
document.addEventListener('touchend', this.stopResize);
|
||||
|
||||
card.classList.add('resizing');
|
||||
}
|
||||
|
||||
handleResize = (e) => {
|
||||
if (!this.isResizing || !this.draggedCard) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
|
||||
const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
|
||||
|
||||
const deltaX = clientX - this.startPos.x;
|
||||
const deltaY = clientY - this.startPos.y;
|
||||
|
||||
const newWidth = Math.max(200, this.startSize.width + deltaX);
|
||||
const newHeight = Math.max(150, this.startSize.height + deltaY);
|
||||
|
||||
this.draggedCard.style.width = newWidth + 'px';
|
||||
this.draggedCard.style.height = newHeight + 'px';
|
||||
}
|
||||
|
||||
stopResize = (e) => {
|
||||
if (!this.isResizing) return;
|
||||
|
||||
this.isResizing = false;
|
||||
this.draggedCard.classList.remove('resizing');
|
||||
|
||||
// Save size
|
||||
this.saveCardLayout();
|
||||
|
||||
// Clean up event listeners
|
||||
document.removeEventListener('mousemove', this.handleResize);
|
||||
document.removeEventListener('touchmove', this.handleResize);
|
||||
document.removeEventListener('mouseup', this.stopResize);
|
||||
document.removeEventListener('touchend', this.stopResize);
|
||||
|
||||
this.draggedCard = null;
|
||||
}
|
||||
|
||||
saveCardLayout() {
|
||||
const layout = {};
|
||||
const cards = this.gridContainer.querySelectorAll('.card');
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
layout[index] = {
|
||||
left: card.style.left,
|
||||
top: card.style.top,
|
||||
width: card.style.width,
|
||||
height: card.style.height,
|
||||
position: card.style.position
|
||||
};
|
||||
});
|
||||
|
||||
localStorage.setItem('adminCardLayout', JSON.stringify(layout));
|
||||
console.log('💾 Card layout saved');
|
||||
}
|
||||
|
||||
loadSavedLayouts() {
|
||||
try {
|
||||
const saved = localStorage.getItem('adminCardLayout');
|
||||
return saved ? JSON.parse(saved) : {};
|
||||
} catch (e) {
|
||||
console.warn('Could not load saved layouts:', e);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
applySavedLayout() {
|
||||
const cards = this.gridContainer.querySelectorAll('.card');
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
const savedLayout = this.savedLayouts[index];
|
||||
if (savedLayout) {
|
||||
Object.assign(card.style, savedLayout);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addControlButtons() {
|
||||
// Check if controls already exist
|
||||
if (document.querySelector('.global-card-controls')) return;
|
||||
|
||||
// Check if hamburger menu exists and adjust position accordingly
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const topPosition = menuToggle ? '80px' : '20px';
|
||||
|
||||
const controlsDiv = document.createElement('div');
|
||||
controlsDiv.className = 'global-card-controls card-controls';
|
||||
controlsDiv.style.cssText = `
|
||||
position: fixed;
|
||||
top: ${topPosition};
|
||||
right: 20px;
|
||||
z-index: 900;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
|
||||
border: 1px solid var(--border);
|
||||
max-width: 300px;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const toggleBtn = document.createElement('button');
|
||||
toggleBtn.className = 'btn btn-primary';
|
||||
toggleBtn.innerHTML = '🎯 Enable Drag Mode';
|
||||
toggleBtn.style.fontSize = '0.9rem';
|
||||
toggleBtn.onclick = () => this.toggleDragMode(toggleBtn);
|
||||
|
||||
const resetBtn = document.createElement('button');
|
||||
resetBtn.className = 'btn btn-secondary';
|
||||
resetBtn.innerHTML = '🔄 Reset';
|
||||
resetBtn.style.fontSize = '0.9rem';
|
||||
resetBtn.onclick = () => this.resetLayout();
|
||||
|
||||
const saveBtn = document.createElement('button');
|
||||
saveBtn.className = 'btn btn-success';
|
||||
saveBtn.innerHTML = '💾 Save';
|
||||
saveBtn.style.fontSize = '0.9rem';
|
||||
saveBtn.onclick = () => this.saveCardLayout();
|
||||
|
||||
const arrangeBtn = document.createElement('button');
|
||||
arrangeBtn.className = 'btn btn-info';
|
||||
arrangeBtn.innerHTML = '📐 Auto-Arrange';
|
||||
arrangeBtn.style.fontSize = '0.9rem';
|
||||
arrangeBtn.onclick = () => {
|
||||
if (document.body.classList.contains('global-drag-mode') && this.freeformContainer) {
|
||||
this.autoArrangeCards();
|
||||
}
|
||||
};
|
||||
|
||||
const minimizeBtn = document.createElement('button');
|
||||
minimizeBtn.className = 'btn btn-secondary';
|
||||
minimizeBtn.innerHTML = '−';
|
||||
minimizeBtn.style.fontSize = '1.2rem';
|
||||
minimizeBtn.style.width = '32px';
|
||||
minimizeBtn.style.padding = '0.25rem';
|
||||
minimizeBtn.title = 'Minimize controls';
|
||||
minimizeBtn.onclick = () => this.toggleControls(controlsDiv, minimizeBtn);
|
||||
|
||||
controlsDiv.appendChild(toggleBtn);
|
||||
controlsDiv.appendChild(resetBtn);
|
||||
controlsDiv.appendChild(saveBtn);
|
||||
controlsDiv.appendChild(arrangeBtn);
|
||||
controlsDiv.appendChild(minimizeBtn);
|
||||
|
||||
document.body.appendChild(controlsDiv);
|
||||
|
||||
this.controlsDiv = controlsDiv;
|
||||
this.toggleBtn = toggleBtn;
|
||||
|
||||
console.log('🎛️ Global card controls added');
|
||||
}
|
||||
|
||||
toggleControls(controlsDiv, minimizeBtn) {
|
||||
const buttons = controlsDiv.querySelectorAll('.btn:not(:last-child)');
|
||||
const isMinimized = controlsDiv.dataset.minimized === 'true';
|
||||
|
||||
if (isMinimized) {
|
||||
// Expand
|
||||
buttons.forEach(btn => btn.style.display = 'inline-flex');
|
||||
minimizeBtn.innerHTML = '−';
|
||||
minimizeBtn.title = 'Minimize controls';
|
||||
controlsDiv.dataset.minimized = 'false';
|
||||
} else {
|
||||
// Minimize
|
||||
buttons.forEach(btn => btn.style.display = 'none');
|
||||
minimizeBtn.innerHTML = '⚙️';
|
||||
minimizeBtn.title = 'Expand controls';
|
||||
controlsDiv.dataset.minimized = 'true';
|
||||
}
|
||||
}
|
||||
|
||||
toggleDragMode(button) {
|
||||
const isCurrentlyEnabled = document.body.classList.contains('global-drag-mode');
|
||||
|
||||
if (isCurrentlyEnabled) {
|
||||
// Disable drag mode
|
||||
document.body.classList.remove('global-drag-mode');
|
||||
button.innerHTML = '🎯 Enable Drag Mode';
|
||||
button.className = 'btn btn-primary';
|
||||
|
||||
// Return cards to their original containers if possible
|
||||
const cards = document.querySelectorAll('.card');
|
||||
cards.forEach(card => {
|
||||
// Reset positioning
|
||||
card.style.position = '';
|
||||
card.style.left = '';
|
||||
card.style.top = '';
|
||||
card.style.zIndex = '';
|
||||
card.style.width = '';
|
||||
card.style.minWidth = '';
|
||||
|
||||
// Move back to original container if it was in freeform container
|
||||
if (card.parentNode === this.freeformContainer) {
|
||||
const originalContainer = document.querySelector('.admin-grid') ||
|
||||
document.querySelector('.container') ||
|
||||
document.body;
|
||||
originalContainer.appendChild(card);
|
||||
}
|
||||
});
|
||||
|
||||
// Hide freeform container
|
||||
if (this.freeformContainer) {
|
||||
this.freeformContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
// Remove drag mode indicator
|
||||
const indicator = document.querySelector('.global-drag-indicator');
|
||||
if (indicator) indicator.remove();
|
||||
|
||||
console.log('🔒 Drag mode disabled - cards returned to normal layout');
|
||||
} else {
|
||||
// Enable drag mode
|
||||
document.body.classList.add('global-drag-mode');
|
||||
button.innerHTML = '🔒 Disable Drag Mode';
|
||||
button.className = 'btn btn-warning';
|
||||
|
||||
// Add drag mode indicator
|
||||
this.addDragModeIndicator();
|
||||
|
||||
// Create and show freeform container
|
||||
this.ensureFreeformContainer();
|
||||
this.freeformContainer.style.display = 'block';
|
||||
|
||||
// Convert all cards to absolute positioning with flexible layout
|
||||
const cards = document.querySelectorAll('.card');
|
||||
|
||||
cards.forEach((card, index) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
|
||||
// Move card to freeform container if not already there
|
||||
if (card.parentNode !== this.freeformContainer) {
|
||||
this.freeformContainer.appendChild(card);
|
||||
}
|
||||
|
||||
const containerRect = this.freeformContainer.getBoundingClientRect();
|
||||
|
||||
card.style.position = 'absolute';
|
||||
card.style.left = Math.max(10, (rect.left - containerRect.left)) + 'px';
|
||||
card.style.top = Math.max(10, (rect.top - containerRect.top)) + 'px';
|
||||
card.style.width = Math.min(400, Math.max(250, rect.width)) + 'px'; // Flexible width
|
||||
card.style.zIndex = '10';
|
||||
card.style.minWidth = '250px';
|
||||
card.style.maxWidth = '500px'; // Allow for side-by-side placement
|
||||
});
|
||||
|
||||
// Auto-arrange cards in a grid-like pattern initially
|
||||
this.autoArrangeCards();
|
||||
|
||||
console.log('🎯 Free-form drag mode enabled - cards can be placed side-by-side');
|
||||
}
|
||||
}
|
||||
|
||||
ensureFreeformContainer() {
|
||||
// Create or get the freeform positioning container
|
||||
if (!this.freeformContainer || !document.body.contains(this.freeformContainer)) {
|
||||
this.freeformContainer = document.createElement('div');
|
||||
this.freeformContainer.className = 'freeform-card-container';
|
||||
this.freeformContainer.style.cssText = `
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
`;
|
||||
|
||||
// Find the main container to replace or append to
|
||||
const mainContainer = document.querySelector('.container') || document.body;
|
||||
if (mainContainer === document.body) {
|
||||
document.body.appendChild(this.freeformContainer);
|
||||
} else {
|
||||
mainContainer.parentNode.insertBefore(this.freeformContainer, mainContainer.nextSibling);
|
||||
}
|
||||
}
|
||||
return this.freeformContainer;
|
||||
}
|
||||
|
||||
addDragModeIndicator() {
|
||||
// Remove existing indicator
|
||||
const existing = document.querySelector('.global-drag-indicator');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const indicator = document.createElement('div');
|
||||
indicator.className = 'global-drag-indicator';
|
||||
indicator.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
z-index: 899;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
`;
|
||||
indicator.innerHTML = '🎯 Free-Form Layout Active - Drag cards anywhere, place them side-by-side, resize as needed';
|
||||
|
||||
document.body.appendChild(indicator);
|
||||
}
|
||||
|
||||
resetLayout() {
|
||||
const cards = this.gridContainer.querySelectorAll('.card');
|
||||
|
||||
cards.forEach((card) => {
|
||||
card.style.position = '';
|
||||
card.style.left = '';
|
||||
card.style.top = '';
|
||||
card.style.width = '';
|
||||
card.style.height = '';
|
||||
});
|
||||
|
||||
localStorage.removeItem('adminCardLayout');
|
||||
console.log('🔄 Layout reset');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.draggableCardManager = new DraggableCardManager();
|
||||
});
|
||||
} else {
|
||||
window.draggableCardManager = new DraggableCardManager();
|
||||
}
|
||||
Reference in new issue
Block a user