Lots of snazzy ui updates.
This commit is contained in:
Aaron D. Lee
741
frontends/web/static/js/stegasoo.js
Normal file
741
frontends/web/static/js/stegasoo.js
Normal file
@@ -0,0 +1,741 @@
|
||||
/**
|
||||
* Stegasoo Frontend JavaScript
|
||||
* Shared functionality across encode, decode, and generate pages
|
||||
*/
|
||||
|
||||
const Stegasoo = {
|
||||
|
||||
// ========================================================================
|
||||
// PASSWORD/PIN VISIBILITY TOGGLES
|
||||
// ========================================================================
|
||||
|
||||
initPasswordToggles() {
|
||||
document.querySelectorAll('[data-toggle-password]').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const targetId = this.dataset.togglePassword;
|
||||
const input = document.getElementById(targetId);
|
||||
const icon = this.querySelector('i');
|
||||
|
||||
if (!input) return;
|
||||
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
icon?.classList.replace('bi-eye', 'bi-eye-slash');
|
||||
} else {
|
||||
input.type = 'password';
|
||||
icon?.classList.replace('bi-eye-slash', 'bi-eye');
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// RSA INPUT METHOD TOGGLE (File vs QR)
|
||||
// ========================================================================
|
||||
|
||||
initRsaMethodToggle() {
|
||||
const fileRadio = document.getElementById('rsaMethodFile');
|
||||
const qrRadio = document.getElementById('rsaMethodQr');
|
||||
const fileSection = document.getElementById('rsaFileSection');
|
||||
const qrSection = document.getElementById('rsaQrSection');
|
||||
|
||||
if (!fileRadio || !qrRadio || !fileSection || !qrSection) return;
|
||||
|
||||
const update = () => {
|
||||
const isFile = fileRadio.checked;
|
||||
fileSection.classList.toggle('d-none', !isFile);
|
||||
qrSection.classList.toggle('d-none', isFile);
|
||||
};
|
||||
|
||||
fileRadio.addEventListener('change', update);
|
||||
qrRadio.addEventListener('change', update);
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// DROP ZONES (Drag & Drop + Preview)
|
||||
// ========================================================================
|
||||
|
||||
initDropZones(options = {}) {
|
||||
document.querySelectorAll('.drop-zone').forEach(zone => {
|
||||
const input = zone.querySelector('input[type="file"]');
|
||||
const label = zone.querySelector('.drop-zone-label');
|
||||
const preview = zone.querySelector('.drop-zone-preview');
|
||||
|
||||
if (!input) return;
|
||||
|
||||
// Check if this is a special zone type
|
||||
const isPayloadZone = zone.id === 'payloadDropZone';
|
||||
const isCarrierZone = zone.id === 'carrierDropZone';
|
||||
const isQrZone = zone.id === 'qrDropZone';
|
||||
|
||||
// Drag events
|
||||
['dragenter', 'dragover'].forEach(evt => {
|
||||
zone.addEventListener(evt, e => {
|
||||
e.preventDefault();
|
||||
zone.classList.add('drag-over');
|
||||
});
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(evt => {
|
||||
zone.addEventListener(evt, e => {
|
||||
e.preventDefault();
|
||||
zone.classList.remove('drag-over');
|
||||
});
|
||||
});
|
||||
|
||||
// Drop handler
|
||||
zone.addEventListener('drop', e => {
|
||||
if (e.dataTransfer.files.length) {
|
||||
input.files = e.dataTransfer.files;
|
||||
input.dispatchEvent(new Event('change'));
|
||||
}
|
||||
});
|
||||
|
||||
// Change handler for preview (skip payload and QR zones - they have special handling)
|
||||
if (!isPayloadZone && !isQrZone) {
|
||||
input.addEventListener('change', function() {
|
||||
if (this.files && this.files[0]) {
|
||||
Stegasoo.showImagePreview(this.files[0], preview, label, zone);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
showImagePreview(file, previewEl, labelEl, zone = null) {
|
||||
if (!file.type.startsWith('image/')) return;
|
||||
|
||||
const isScanContainer = zone && zone.classList.contains('scan-container');
|
||||
const isPixelContainer = zone && zone.classList.contains('pixel-container');
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
if (previewEl) {
|
||||
previewEl.src = e.target.result;
|
||||
previewEl.classList.remove('d-none');
|
||||
}
|
||||
// For scan/pixel containers, hide the label entirely (filename will appear in data panel)
|
||||
if (labelEl) {
|
||||
if (isScanContainer || isPixelContainer) {
|
||||
labelEl.classList.add('d-none');
|
||||
} else {
|
||||
labelEl.innerHTML = '<i class="bi bi-check-circle text-success me-1"></i>' + file.name;
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger appropriate animation
|
||||
if (isScanContainer) {
|
||||
Stegasoo.triggerScanAnimation(zone, file);
|
||||
} else if (isPixelContainer) {
|
||||
Stegasoo.triggerPixelReveal(zone, file);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// REFERENCE PHOTO SCAN ANIMATION
|
||||
// ========================================================================
|
||||
|
||||
triggerScanAnimation(container, file, duration = 700) {
|
||||
// Reset any previous state
|
||||
container.classList.remove('scan-complete');
|
||||
container.classList.add('scanning');
|
||||
|
||||
const preview = container.querySelector('.drop-zone-preview');
|
||||
|
||||
// Create hash blocks for the "hashing" visual effect
|
||||
const createHashBlocks = () => {
|
||||
// Remove old hash blocks
|
||||
const oldBlocks = container.querySelector('.hash-blocks');
|
||||
if (oldBlocks) oldBlocks.remove();
|
||||
|
||||
const hashContainer = document.createElement('div');
|
||||
hashContainer.className = 'hash-blocks';
|
||||
|
||||
// Size and position to match preview image exactly
|
||||
const imgWidth = preview.offsetWidth;
|
||||
const imgHeight = preview.offsetHeight;
|
||||
const imgTop = preview.offsetTop;
|
||||
const imgLeft = preview.offsetLeft;
|
||||
|
||||
hashContainer.style.width = imgWidth + 'px';
|
||||
hashContainer.style.height = imgHeight + 'px';
|
||||
hashContainer.style.top = imgTop + 'px';
|
||||
hashContainer.style.left = imgLeft + 'px';
|
||||
|
||||
// Create grid of hash blocks (10x8 for better coverage)
|
||||
const cols = 10;
|
||||
const rows = 8;
|
||||
|
||||
hashContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
|
||||
hashContainer.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
|
||||
|
||||
// Create blocks with staggered delays for wave disappearance
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
const block = document.createElement('div');
|
||||
block.className = 'hash-block';
|
||||
// Diagonal wave pattern for disappearance
|
||||
const delay = (row + col) * 25 + Math.random() * 30;
|
||||
block.style.animationDelay = delay + 'ms';
|
||||
hashContainer.appendChild(block);
|
||||
}
|
||||
}
|
||||
|
||||
container.appendChild(hashContainer);
|
||||
};
|
||||
|
||||
// Wait for image to be ready
|
||||
if (preview.complete && preview.naturalWidth) {
|
||||
createHashBlocks();
|
||||
} else {
|
||||
preview.onload = createHashBlocks;
|
||||
}
|
||||
|
||||
// After animation duration, switch to complete state
|
||||
setTimeout(() => {
|
||||
container.classList.remove('scanning');
|
||||
container.classList.add('scan-complete');
|
||||
|
||||
// Remove hash blocks container
|
||||
const hashBlocks = container.querySelector('.hash-blocks');
|
||||
if (hashBlocks) hashBlocks.remove();
|
||||
|
||||
// Populate data panel if file provided
|
||||
if (file) {
|
||||
const nameEl = container.querySelector('#refFileName') || container.querySelector('.scan-data-filename span');
|
||||
const sizeEl = container.querySelector('#refFileSize') || container.querySelector('.scan-data-value');
|
||||
const hashEl = container.querySelector('#refHashPreview') || container.querySelector('.scan-hash-preview');
|
||||
|
||||
if (nameEl) {
|
||||
nameEl.textContent = file.name;
|
||||
}
|
||||
|
||||
if (sizeEl) {
|
||||
const sizeKB = (file.size / 1024).toFixed(1);
|
||||
const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
|
||||
sizeEl.textContent = file.size > 1024 * 1024 ? `${sizeMB} MB` : `${sizeKB} KB`;
|
||||
}
|
||||
|
||||
if (hashEl) {
|
||||
// Generate a deterministic fake hash preview from filename + size
|
||||
const fakeHash = Stegasoo.generateFakeHash(file.name + file.size);
|
||||
hashEl.textContent = `SHA256: ${fakeHash.substring(0, 8)}····${fakeHash.substring(56)}`;
|
||||
}
|
||||
}
|
||||
}, duration);
|
||||
},
|
||||
|
||||
generateFakeHash(input) {
|
||||
// Simple deterministic hash-like string for display purposes
|
||||
let hash = '';
|
||||
const chars = '0123456789abcdef';
|
||||
let seed = 0;
|
||||
for (let i = 0; i < input.length; i++) {
|
||||
seed = ((seed << 5) - seed) + input.charCodeAt(i);
|
||||
seed = seed & seed;
|
||||
}
|
||||
for (let i = 0; i < 64; i++) {
|
||||
seed = (seed * 1103515245 + 12345) & 0x7fffffff;
|
||||
hash += chars[seed % 16];
|
||||
}
|
||||
return hash;
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// CARRIER/STEGO PIXEL REVEAL ANIMATION
|
||||
// ========================================================================
|
||||
|
||||
triggerPixelReveal(container, file, duration = 700) {
|
||||
// Reset any previous state
|
||||
container.classList.remove('load-complete');
|
||||
container.classList.add('loading');
|
||||
|
||||
const preview = container.querySelector('.drop-zone-preview');
|
||||
|
||||
// Create embed traces container sized to image
|
||||
const createTraces = () => {
|
||||
// Remove old elements
|
||||
let tracesContainer = container.querySelector('.embed-traces');
|
||||
if (tracesContainer) tracesContainer.remove();
|
||||
let oldGrid = container.querySelector('.embed-grid');
|
||||
if (oldGrid) oldGrid.remove();
|
||||
|
||||
// Add grid overlay (covers whole panel like ref does)
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'embed-grid';
|
||||
container.appendChild(grid);
|
||||
|
||||
// Create traces container
|
||||
tracesContainer = document.createElement('div');
|
||||
tracesContainer.className = 'embed-traces';
|
||||
container.appendChild(tracesContainer);
|
||||
|
||||
// Size and position traces to match preview image exactly
|
||||
const imgWidth = preview.offsetWidth;
|
||||
const imgHeight = preview.offsetHeight;
|
||||
const imgTop = preview.offsetTop;
|
||||
const imgLeft = preview.offsetLeft;
|
||||
|
||||
tracesContainer.style.width = imgWidth + 'px';
|
||||
tracesContainer.style.height = imgHeight + 'px';
|
||||
tracesContainer.style.top = imgTop + 'px';
|
||||
tracesContainer.style.left = imgLeft + 'px';
|
||||
|
||||
// Generate Tron-style circuit traces covering the image
|
||||
Stegasoo.generateEmbedTraces(tracesContainer, imgWidth, imgHeight);
|
||||
};
|
||||
|
||||
// Wait for image to be ready
|
||||
if (preview.complete && preview.naturalWidth) {
|
||||
createTraces();
|
||||
} else {
|
||||
preview.onload = createTraces;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
container.classList.remove('loading');
|
||||
container.classList.add('load-complete');
|
||||
|
||||
// Remove traces and grid
|
||||
const traces = container.querySelector('.embed-traces');
|
||||
if (traces) traces.remove();
|
||||
const grid = container.querySelector('.embed-grid');
|
||||
if (grid) grid.remove();
|
||||
|
||||
// Populate data panel
|
||||
Stegasoo.populatePixelDataPanel(container, file, preview);
|
||||
}, duration);
|
||||
},
|
||||
|
||||
generateEmbedTraces(container, width, height) {
|
||||
// Color classes for variety
|
||||
const colors = ['color-yellow', 'color-cyan', 'color-purple', 'color-blue'];
|
||||
|
||||
// Generate 6-8 snake paths spread across the whole image
|
||||
const numPaths = 6 + Math.floor(Math.random() * 3);
|
||||
|
||||
for (let p = 0; p < numPaths; p++) {
|
||||
// Each path gets a random color
|
||||
const pathColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
|
||||
// Distribute starting points across the image
|
||||
let x = (width * 0.1) + (Math.random() * width * 0.8);
|
||||
let y = (height * 0.1) + (Math.random() * height * 0.8);
|
||||
let delay = p * 40;
|
||||
|
||||
// Each path has 3-5 segments for more coverage
|
||||
const numSegments = 3 + Math.floor(Math.random() * 3);
|
||||
let horizontal = Math.random() > 0.5;
|
||||
|
||||
for (let s = 0; s < numSegments; s++) {
|
||||
const trace = document.createElement('div');
|
||||
trace.className = 'embed-trace ' + (horizontal ? 'h' : 'v') + ' ' + pathColor;
|
||||
|
||||
const length = 30 + Math.random() * 60;
|
||||
trace.style.left = x + 'px';
|
||||
trace.style.top = y + 'px';
|
||||
trace.style.animationDelay = delay + 'ms';
|
||||
|
||||
if (horizontal) {
|
||||
trace.style.width = length + 'px';
|
||||
} else {
|
||||
trace.style.height = length + 'px';
|
||||
}
|
||||
|
||||
container.appendChild(trace);
|
||||
|
||||
// Move position for next segment
|
||||
if (horizontal) {
|
||||
x += length;
|
||||
} else {
|
||||
y += length;
|
||||
}
|
||||
|
||||
// Wrap around if out of bounds to keep traces in view
|
||||
if (x > width - 20) x = 10 + Math.random() * 40;
|
||||
if (y > height - 20) y = 10 + Math.random() * 40;
|
||||
if (x < 10) x = width - 60 + Math.random() * 40;
|
||||
if (y < 10) y = height - 60 + Math.random() * 40;
|
||||
|
||||
// Alternate direction (90 degree turn)
|
||||
horizontal = !horizontal;
|
||||
delay += 30;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
populatePixelDataPanel(container, file, preview) {
|
||||
const nameEl = container.querySelector('.pixel-data-filename span');
|
||||
const sizeEl = container.querySelector('.pixel-data-value');
|
||||
const dimsEl = container.querySelector('.pixel-dimensions');
|
||||
|
||||
if (nameEl) {
|
||||
nameEl.textContent = file.name;
|
||||
}
|
||||
|
||||
if (sizeEl) {
|
||||
const sizeKB = (file.size / 1024).toFixed(1);
|
||||
const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
|
||||
sizeEl.textContent = file.size > 1024 * 1024 ? `${sizeMB} MB` : `${sizeKB} KB`;
|
||||
}
|
||||
|
||||
if (dimsEl && preview) {
|
||||
dimsEl.textContent = `${preview.naturalWidth} × ${preview.naturalHeight} px`;
|
||||
}
|
||||
},
|
||||
|
||||
initReferenceScanAnimation() {
|
||||
// Find all scan containers and wire up their inputs
|
||||
document.querySelectorAll('.scan-container').forEach(container => {
|
||||
const input = container.querySelector('input[type="file"]');
|
||||
const preview = container.querySelector('.drop-zone-preview');
|
||||
const label = container.querySelector('.drop-zone-label');
|
||||
|
||||
if (!input) return;
|
||||
|
||||
input.addEventListener('change', function() {
|
||||
if (this.files && this.files[0]) {
|
||||
Stegasoo.showImagePreview(this.files[0], preview, label, container);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// CLIPBOARD PASTE
|
||||
// ========================================================================
|
||||
|
||||
initClipboardPaste(imageInputSelectors) {
|
||||
document.addEventListener('paste', function(e) {
|
||||
const items = e.clipboardData?.items;
|
||||
if (!items) return;
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
const blob = items[i].getAsFile();
|
||||
|
||||
// Find first empty input from the list
|
||||
let targetInput = null;
|
||||
for (const selector of imageInputSelectors) {
|
||||
const input = document.querySelector(selector);
|
||||
if (input && (!input.files || !input.files.length)) {
|
||||
targetInput = input;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to first input if all have files
|
||||
if (!targetInput) {
|
||||
targetInput = document.querySelector(imageInputSelectors[0]);
|
||||
}
|
||||
|
||||
if (targetInput) {
|
||||
const container = new DataTransfer();
|
||||
container.items.add(blob);
|
||||
targetInput.files = container.files;
|
||||
targetInput.dispatchEvent(new Event('change'));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// QR CODE CROP ANIMATION WITH SECTION SCANNING
|
||||
// ========================================================================
|
||||
|
||||
initQrCropAnimation(inputId = 'rsaKeyQrInput') {
|
||||
const input = document.getElementById(inputId);
|
||||
const container = document.getElementById('qrCropContainer');
|
||||
const original = document.getElementById('qrOriginal');
|
||||
const cropped = document.getElementById('qrCropped');
|
||||
const dropZone = document.getElementById('qrDropZone');
|
||||
|
||||
if (!input || !container || !original || !cropped) return;
|
||||
|
||||
input.addEventListener('change', function() {
|
||||
if (!this.files || !this.files[0]) return;
|
||||
|
||||
const file = this.files[0];
|
||||
if (!file.type.startsWith('image/')) return;
|
||||
|
||||
const label = dropZone?.querySelector('.drop-zone-label');
|
||||
|
||||
// Reset animation state
|
||||
container.classList.remove('scan-complete', 'scanning');
|
||||
container.classList.add('d-none');
|
||||
|
||||
// Remove old overlay if exists
|
||||
const oldOverlay = container.querySelector('.qr-section-overlay');
|
||||
if (oldOverlay) oldOverlay.remove();
|
||||
|
||||
// Show loading state immediately
|
||||
container.classList.remove('d-none');
|
||||
container.classList.add('loading');
|
||||
label?.classList.add('d-none');
|
||||
|
||||
// Add loading indicator if not present
|
||||
let loader = container.querySelector('.qr-loader');
|
||||
if (!loader) {
|
||||
loader = document.createElement('div');
|
||||
loader.className = 'qr-loader';
|
||||
loader.innerHTML = `
|
||||
<i class="bi bi-qr-code-scan"></i>
|
||||
<span>Detecting QR code...</span>
|
||||
`;
|
||||
container.appendChild(loader);
|
||||
}
|
||||
|
||||
// Fetch cropped version
|
||||
const formData = new FormData();
|
||||
formData.append('image', file);
|
||||
|
||||
fetch('/qr/crop', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error('No QR detected');
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
// Hide loader, show cropped image
|
||||
container.classList.remove('loading');
|
||||
cropped.src = URL.createObjectURL(blob);
|
||||
|
||||
return new Promise((resolve) => {
|
||||
cropped.onload = () => {
|
||||
// Start scanning animation
|
||||
container.classList.add('scanning');
|
||||
|
||||
// Add scanner overlay - will be positioned via CSS to cover the image
|
||||
let overlay = container.querySelector('.qr-scanner-overlay');
|
||||
if (!overlay) {
|
||||
overlay = document.createElement('div');
|
||||
overlay.className = 'qr-scanner-overlay';
|
||||
|
||||
['tl', 'tr', 'bl', 'br'].forEach(pos => {
|
||||
const bracket = document.createElement('div');
|
||||
bracket.className = `qr-finder-bracket ${pos}`;
|
||||
overlay.appendChild(bracket);
|
||||
});
|
||||
|
||||
// Add data panel inside overlay
|
||||
const dataPanel = document.createElement('div');
|
||||
dataPanel.className = 'qr-data-panel';
|
||||
dataPanel.innerHTML = `
|
||||
<div class="qr-data-row">
|
||||
<span class="qr-status-badge">KEY LOADED</span>
|
||||
<span class="qr-data-value">--</span>
|
||||
</div>
|
||||
`;
|
||||
overlay.appendChild(dataPanel);
|
||||
|
||||
container.appendChild(overlay);
|
||||
}
|
||||
|
||||
// Let CSS handle overlay positioning (inset with padding)
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
// Now verify key extraction
|
||||
const keyFormData = new FormData();
|
||||
keyFormData.append('qr_image', file);
|
||||
|
||||
return fetch('/extract-key-from-qr', {
|
||||
method: 'POST',
|
||||
body: keyFormData
|
||||
});
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Extraction complete - stop animation
|
||||
container.classList.remove('scanning');
|
||||
container.classList.add('scan-complete');
|
||||
|
||||
// Update data panel (inside overlay)
|
||||
const overlay = container.querySelector('.qr-scanner-overlay');
|
||||
const sizeEl = overlay?.querySelector('.qr-data-value');
|
||||
|
||||
if (data.success && sizeEl) {
|
||||
const sizeKB = (file.size / 1024).toFixed(1);
|
||||
sizeEl.textContent = sizeKB + ' KB';
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('QR crop/extract error:', err);
|
||||
container.classList.remove('loading', 'scanning');
|
||||
container.classList.add('error');
|
||||
|
||||
// Update loader to show error
|
||||
const loader = container.querySelector('.qr-loader');
|
||||
if (loader) {
|
||||
loader.innerHTML = `
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
<span>No QR code detected</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// COLLAPSE CHEVRON ANIMATION
|
||||
// ========================================================================
|
||||
|
||||
initCollapseChevrons() {
|
||||
document.querySelectorAll('[data-chevron]').forEach(collapse => {
|
||||
const chevronId = collapse.dataset.chevron;
|
||||
const chevron = document.getElementById(chevronId);
|
||||
|
||||
if (!chevron) return;
|
||||
|
||||
collapse.addEventListener('show.bs.collapse', () => {
|
||||
chevron.classList.add('bi-chevron-up');
|
||||
chevron.classList.remove('bi-chevron-down');
|
||||
});
|
||||
|
||||
collapse.addEventListener('hide.bs.collapse', () => {
|
||||
chevron.classList.remove('bi-chevron-up');
|
||||
chevron.classList.add('bi-chevron-down');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// FORM LOADING STATE
|
||||
// ========================================================================
|
||||
|
||||
initFormLoading(formId, buttonId, loadingText = 'Processing...') {
|
||||
const form = document.getElementById(formId);
|
||||
const btn = document.getElementById(buttonId);
|
||||
|
||||
if (!form || !btn) return;
|
||||
|
||||
form.addEventListener('submit', () => {
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>${loadingText}`;
|
||||
});
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// COPY TO CLIPBOARD
|
||||
// ========================================================================
|
||||
|
||||
copyToClipboard(text, iconEl, textEl) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const origIcon = iconEl?.className;
|
||||
const origText = textEl?.textContent;
|
||||
|
||||
if (iconEl) iconEl.className = 'bi bi-check';
|
||||
if (textEl) textEl.textContent = 'Copied!';
|
||||
|
||||
setTimeout(() => {
|
||||
if (iconEl) iconEl.className = origIcon;
|
||||
if (textEl) textEl.textContent = origText;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// MODE CARD HIGHLIGHTING
|
||||
// ========================================================================
|
||||
|
||||
initModeCards(config) {
|
||||
// config: { radioName: 'embed_mode', cards: { 'lsb': { id: 'lsbCard', borderClass: 'border-primary' }, ... } }
|
||||
const radios = document.querySelectorAll(`input[name="${config.radioName}"]`);
|
||||
|
||||
const update = () => {
|
||||
radios.forEach(radio => {
|
||||
const cardConfig = config.cards[radio.value];
|
||||
if (!cardConfig) return;
|
||||
|
||||
const card = document.getElementById(cardConfig.id);
|
||||
if (!card) return;
|
||||
|
||||
card.classList.toggle(cardConfig.borderClass, radio.checked);
|
||||
card.classList.toggle('border-2', radio.checked);
|
||||
});
|
||||
};
|
||||
|
||||
radios.forEach(radio => radio.addEventListener('change', update));
|
||||
update(); // Initial state
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// PASSPHRASE FONT SIZE AUTO-ADJUST
|
||||
// ========================================================================
|
||||
|
||||
initPassphraseFontResize(inputId = 'passphraseInput') {
|
||||
const input = document.getElementById(inputId);
|
||||
if (!input) return;
|
||||
|
||||
const steps = [
|
||||
{ maxChars: 30, size: 1.1 },
|
||||
{ maxChars: 45, size: 1.0 },
|
||||
{ maxChars: 60, size: 0.95 },
|
||||
{ maxChars: Infinity, size: 0.9 }
|
||||
];
|
||||
|
||||
const adjust = () => {
|
||||
const len = input.value.length;
|
||||
for (const step of steps) {
|
||||
if (len <= step.maxChars) {
|
||||
input.style.fontSize = step.size + 'rem';
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
input.addEventListener('input', adjust);
|
||||
adjust();
|
||||
},
|
||||
|
||||
// ========================================================================
|
||||
// INITIALIZATION HELPERS
|
||||
// ========================================================================
|
||||
|
||||
initEncodePage() {
|
||||
this.initPasswordToggles();
|
||||
this.initRsaMethodToggle();
|
||||
this.initDropZones();
|
||||
this.initClipboardPaste(['input[name="carrier"]', 'input[name="reference_photo"]']);
|
||||
this.initQrCropAnimation('rsaQrInput');
|
||||
this.initCollapseChevrons();
|
||||
this.initFormLoading('encodeForm', 'encodeBtn', 'Encoding...');
|
||||
this.initPassphraseFontResize();
|
||||
},
|
||||
|
||||
initDecodePage() {
|
||||
this.initPasswordToggles();
|
||||
this.initRsaMethodToggle();
|
||||
this.initDropZones();
|
||||
this.initClipboardPaste(['input[name="stego_image"]', 'input[name="reference_photo"]']);
|
||||
this.initQrCropAnimation('rsaKeyQrInput');
|
||||
this.initCollapseChevrons();
|
||||
this.initFormLoading('decodeForm', 'decodeBtn', 'Decoding...');
|
||||
this.initPassphraseFontResize();
|
||||
},
|
||||
|
||||
initGeneratePage() {
|
||||
this.initPasswordToggles();
|
||||
// Generate page has mostly unique functionality
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-init based on page
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Detect page and initialize
|
||||
if (document.getElementById('encodeForm')) {
|
||||
Stegasoo.initEncodePage();
|
||||
} else if (document.getElementById('decodeForm')) {
|
||||
Stegasoo.initDecodePage();
|
||||
} else if (document.querySelector('[data-page="generate"]')) {
|
||||
Stegasoo.initGeneratePage();
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user