Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-06-10 23:13:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add WeFax image modal with download and delete buttons

Browse Source 
Replace window.open() with a fullscreen modal matching the SSTV
pattern: toolbar with download/delete SVG buttons, close button,
click-outside-to-close, and confirmation before delete.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-02-24 16:23:56 +00:00
parent 6894e626a9
commit 67321adade
2 changed files with 139 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/modes/wefax.css
+78
View File
@@ -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 {
static/js/modes/wefax.js
+61 -9
View File
@@ -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 += '<div class="wefax-gallery-item">';
html += '<img src="' + img.url + '" alt="WeFax" loading="lazy" onclick="WeFax.viewImage(\'' + img.url + '\')">';
html += '<img src="' + img.url + '" alt="WeFax" loading="lazy" onclick="WeFax.viewImage(\'' + img.url + '\', \'' + img.filename + '\')">';
html += '<div class="wefax-gallery-meta">';
html += '<span>' + station + (freq ? ' ' + freq : '') + '</span>';
html += '<span>' + ts + '</span>';
html += '</div>';
html += '<div class="wefax-gallery-actions">';
html += '<a href="' + img.url + '" download class="wefax-gallery-action" title="Download">&#x2B73;</a>';
html += '<button class="wefax-gallery-action delete" onclick="WeFax.deleteImage(\'' + img.filename + '\')" title="Delete">&times;</button>';
html += '</div>';
html += '</div>';
});
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 =
'<div class="wefax-modal-toolbar">' +
'<button class="wefax-modal-btn" id="wefaxModalDownload" title="Download">' +
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>' +
' Download' +
'</button>' +
'<button class="wefax-modal-btn delete" id="wefaxModalDelete" title="Delete">' +
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>' +
' Delete' +
'</button>' +
'</div>' +
'<button class="wefax-modal-close" onclick="WeFax.closeImage()">&times;</button>' +
'<img src="" alt="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,
};
})();