File size: 3,901 Bytes
83e35a7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
// Simple Comic Editor for text editing and bubble dragging
let draggedBubble = null;
let offsetX = 0;
let offsetY = 0;
function enableComicEditing() {
// Make all bubbles editable and draggable
document.querySelectorAll('.bubble').forEach(bubble => {
// Make bubble draggable
bubble.style.cursor = 'move';
bubble.draggable = false; // Use custom drag
// Double-click to edit text
bubble.addEventListener('dblclick', function(e) {
e.stopPropagation();
editBubbleText(this);
});
// Mouse down to start dragging
bubble.addEventListener('mousedown', startDrag);
});
// Global mouse events for dragging
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
// Add editing instructions
addEditingInstructions();
}
function editBubbleText(bubble) {
const currentText = bubble.innerText;
const input = document.createElement('input');
input.type = 'text';
input.value = currentText;
input.style.cssText = bubble.style.cssText;
input.style.width = '100%';
input.style.background = 'white';
input.style.border = '2px solid #4CAF50';
bubble.innerHTML = '';
bubble.appendChild(input);
input.focus();
input.select();
// Save on Enter
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
bubble.innerText = this.value;
saveComicState();
}
});
// Save on blur
input.addEventListener('blur', function() {
bubble.innerText = this.value;
saveComicState();
});
}
function startDrag(e) {
if (e.target.tagName === 'INPUT') return;
draggedBubble = e.target.closest('.bubble');
if (!draggedBubble) return;
const rect = draggedBubble.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
draggedBubble.style.opacity = '0.8';
draggedBubble.style.zIndex = '1000';
e.preventDefault();
}
function drag(e) {
if (!draggedBubble) return;
const parent = draggedBubble.parentElement;
const parentRect = parent.getBoundingClientRect();
let x = e.clientX - parentRect.left - offsetX;
let y = e.clientY - parentRect.top - offsetY;
// Keep within bounds
x = Math.max(0, Math.min(x, parentRect.width - draggedBubble.offsetWidth));
y = Math.max(0, Math.min(y, parentRect.height - draggedBubble.offsetHeight));
draggedBubble.style.position = 'absolute';
draggedBubble.style.left = x + 'px';
draggedBubble.style.top = y + 'px';
}
function stopDrag() {
if (draggedBubble) {
draggedBubble.style.opacity = '';
draggedBubble.style.zIndex = '';
saveComicState();
draggedBubble = null;
}
}
function addEditingInstructions() {
const instructions = document.createElement('div');
instructions.style.cssText = `
position: fixed; bottom: 20px; right: 20px;
background: rgba(0,0,0,0.8); color: white;
padding: 15px; border-radius: 10px;
font-size: 14px; z-index: 999;
`;
instructions.innerHTML = `
<strong>✏️ Edit Mode</strong><br>
• Drag bubbles to move<br>
• Double-click to edit text
`;
document.body.appendChild(instructions);
}
function saveComicState() {
// Save state to localStorage
const bubbles = [];
document.querySelectorAll('.bubble').forEach(bubble => {
bubbles.push({
text: bubble.innerText,
left: bubble.style.left,
top: bubble.style.top
});
});
localStorage.setItem('comicBubbles', JSON.stringify(bubbles));
}
// Initialize when page loads
window.addEventListener('load', () => {
setTimeout(enableComicEditing, 500);
}); |