diff --git a/static/css/modes/wefax.css b/static/css/modes/wefax.css index 6ece97b..94dced3 100644 --- a/static/css/modes/wefax.css +++ b/static/css/modes/wefax.css @@ -592,6 +592,84 @@ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; } +/* --- Image Modal --- */ +.wefax-image-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.9); + display: none; + align-items: center; + justify-content: center; + z-index: 10000; + padding: 40px; +} + +.wefax-image-modal.show { + display: flex; +} + +.wefax-image-modal img { + max-width: 100%; + max-height: 100%; + border: 1px solid var(--border-color); + border-radius: 4px; +} + +.wefax-modal-toolbar { + position: absolute; + top: 20px; + right: 60px; + display: flex; + gap: 8px; + z-index: 1; +} + +.wefax-modal-btn { + display: flex; + align-items: center; + gap: 6px; + font-family: var(--font-mono); + font-size: 10px; + padding: 6px 12px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 4px; + color: white; + cursor: pointer; + transition: all 0.15s; + text-transform: uppercase; +} + +.wefax-modal-btn:hover { + background: rgba(255, 255, 255, 0.2); +} + +.wefax-modal-btn.delete:hover { + background: var(--accent-red, #ff3366); + border-color: var(--accent-red, #ff3366); +} + +.wefax-modal-close { + position: absolute; + top: 20px; + right: 20px; + background: none; + border: none; + color: white; + font-size: 32px; + cursor: pointer; + opacity: 0.7; + transition: opacity 0.15s; + z-index: 1; +} + +.wefax-modal-close:hover { + opacity: 1; +} + /* --- Responsive --- */ @media (max-width: 768px) { .wefax-main-row { diff --git a/static/js/modes/wefax.js b/static/js/modes/wefax.js index aab776f..8bfdc7b 100644 --- a/static/js/modes/wefax.js +++ b/static/js/modes/wefax.js @@ -55,6 +55,7 @@ var WeFax = (function () { } function destroy() { + closeImage(); disconnectSSE(); stopScope(); stopCountdownTimer(); @@ -586,23 +587,23 @@ var WeFax = (function () { var station = img.station || ''; var freq = img.frequency_khz ? (img.frequency_khz + ' kHz') : ''; html += ''; }); gallery.innerHTML = html; } function deleteImage(filename) { + if (!confirm('Delete this image?')) return; fetch('/wefax/images/' + encodeURIComponent(filename), { method: 'DELETE' }) - .then(function () { loadImages(); }) + .then(function () { + closeImage(); + loadImages(); + }) .catch(function (err) { console.error('WeFax delete error:', err); }); } @@ -613,9 +614,59 @@ var WeFax = (function () { .catch(function (err) { console.error('WeFax delete all error:', err); }); } - function viewImage(url) { - // Open image in modal or new tab - window.open(url, '_blank'); + var currentModalUrl = null; + var currentModalFilename = null; + + function viewImage(url, filename) { + currentModalUrl = url; + currentModalFilename = filename || null; + + var modal = document.getElementById('wefaxImageModal'); + if (!modal) { + modal = document.createElement('div'); + modal.id = 'wefaxImageModal'; + modal.className = 'wefax-image-modal'; + modal.innerHTML = + '
' + + '' + + '' + + '
' + + '' + + 'WeFax Image'; + modal.addEventListener('click', function (e) { + if (e.target === modal) closeImage(); + }); + modal.querySelector('#wefaxModalDownload').addEventListener('click', function () { + if (currentModalUrl && currentModalFilename) { + var a = document.createElement('a'); + a.href = currentModalUrl; + a.download = currentModalFilename; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } + }); + modal.querySelector('#wefaxModalDelete').addEventListener('click', function () { + if (currentModalFilename) { + deleteImage(currentModalFilename); + } + }); + document.body.appendChild(modal); + } + + modal.querySelector('img').src = url; + modal.classList.add('show'); + } + + function closeImage() { + var modal = document.getElementById('wefaxImageModal'); + if (modal) modal.classList.remove('show'); } // ---- Schedule Timeline ---- @@ -1023,6 +1074,7 @@ var WeFax = (function () { deleteImage: deleteImage, deleteAllImages: deleteAllImages, viewImage: viewImage, + closeImage: closeImage, toggleScheduler: toggleScheduler, }; })();