Success Clone
Success Celebration
Connecting to cloud...
`);
printWindow.document.close();
}
function buildSuccessElement(value = "", color = "green") {
const container = document.createElement('div');
container.classList.add('success-container');
container.setAttribute('draggable', true);
const dragHandle = document.createElement('div');
dragHandle.classList.add('drag-handle');
dragHandle.innerHTML = '⋮';
const textarea = document.createElement('textarea');
textarea.classList.add('success-box');
textarea.value = value;
textarea.style.color = color;
textarea.wrap = "soft";
textarea.oninput = saveSuccesses;
const colorSelect = document.createElement('select');
colorSelect.classList.add('color-select');
['black', 'blue', 'green', 'red', 'purple', 'grey'].forEach(c => {
const opt = document.createElement('option');
opt.value = c;
opt.innerText = c.charAt(0).toUpperCase() + c.slice(1);
if (c === color) opt.selected = true;
colorSelect.appendChild(opt);
});
colorSelect.onchange = (e) => {
textarea.style.color = e.target.value;
saveSuccesses();
};
const copyButton = document.createElement('button');
copyButton.classList.add('copy-button');
copyButton.innerText = 'COPY';
copyButton.onclick = () => copyText(textarea);
const printButton = document.createElement('button');
printButton.classList.add('print-button');
printButton.innerText = 'PRINT';
printButton.onclick = () => printText(textarea);
const clearButton = document.createElement('button');
clearButton.classList.add('clear-button');
clearButton.innerText = 'CLEAR';
clearButton.onclick = () => {
container.remove();
saveSuccesses();
};
const insertButton = document.createElement('button');
insertButton.classList.add('insert-button');
insertButton.innerText = 'INSERT';
insertButton.onclick = () => {
createSuccessElementBelow(container);
saveSuccesses();
};
container.appendChild(dragHandle);
container.appendChild(textarea);
container.appendChild(colorSelect);
container.appendChild(copyButton);
container.appendChild(printButton);
container.appendChild(clearButton);
container.appendChild(insertButton);
return container;
}
function createSuccessElement(value, color = "green") {
const container = buildSuccessElement(value, color);
document.getElementById('successList').appendChild(container);
}
function createSuccessElementBelow(currentContainer) {
const newContainer = buildSuccessElement("", "green");
currentContainer.parentNode.insertBefore(newContainer, currentContainer.nextSibling);
}
function getCurrentSuccesses() {
return Array.from(document.querySelectorAll('.success-container')).map(container => ({
value: container.querySelector('.success-box').value,
color: container.querySelector('.color-select').value
}));
}
function saveSuccesses() {
const successes = getCurrentSuccesses();
saveSuccessesToFirebase(successes);
}
function saveSuccessesToFirebase(successes) {
setStatus('Saving to cloud...');
successesRef.set(successes)
.then(function() {
setStatus('Cloud data synced');
})
.catch(function(error) {
setStatus('Error saving to cloud: ' + error.message);
});
}
function initSortable() {
const successList = document.getElementById('successList');
let draggedElement;
successList.addEventListener('dragstart', (e) => {
const container = e.target.closest('.success-container');
if (!container) return;
draggedElement = container;
e.dataTransfer.effectAllowed = 'move';
});
successList.addEventListener('dragover', (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
});
successList.addEventListener('drop', (e) => {
e.preventDefault();
const targetContainer = e.target.closest('.success-container');
if (draggedElement && targetContainer && draggedElement !== targetContainer) {
const rect = targetContainer.getBoundingClientRect();
const isBelow = e.clientY > rect.top + rect.height / 2;
if (isBelow) {
successList.insertBefore(draggedElement, targetContainer.nextSibling);
} else {
successList.insertBefore(draggedElement, targetContainer);
}
saveSuccesses();
}
draggedElement = null;
});
}