recording working righ, but menu is not correct yet
This commit is contained in:
+3
-80
@@ -82,15 +82,9 @@
|
||||
<div id="notesAttachmentPreviewPanel" class="hidden mt-3 rounded-xl border border-purple-200 bg-white shadow p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div id="notesAttachmentPreviewTitle" class="text-sm font-semibold text-gray-800">Attachment Preview</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="notesAttachmentPreviewZoomOut" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Zoom out">−</button>
|
||||
<span id="notesAttachmentPreviewZoomLevel" class="text-xs text-gray-600 min-w-12 text-center"></span>
|
||||
<button id="notesAttachmentPreviewZoomIn" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Zoom in">+</button>
|
||||
<button id="notesAttachmentPreviewReset" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Reset zoom">Reset</button>
|
||||
<button id="notesAttachmentPreviewClose" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm">Close</button>
|
||||
</div>
|
||||
<button id="notesAttachmentPreviewClose" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm">Close</button>
|
||||
</div>
|
||||
<div id="notesAttachmentPreviewContent" class="space-y-2 overflow-auto" style="max-height: 600px;"></div>
|
||||
<div id="notesAttachmentPreviewContent" class="space-y-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-x-hidden overflow-y-auto">
|
||||
@@ -1627,99 +1621,32 @@
|
||||
const panel = document.getElementById('notesAttachmentPreviewPanel');
|
||||
const titleEl = document.getElementById('notesAttachmentPreviewTitle');
|
||||
const contentEl = document.getElementById('notesAttachmentPreviewContent');
|
||||
const zoomInBtn = document.getElementById('notesAttachmentPreviewZoomIn');
|
||||
const zoomOutBtn = document.getElementById('notesAttachmentPreviewZoomOut');
|
||||
const zoomResetBtn = document.getElementById('notesAttachmentPreviewReset');
|
||||
const zoomLevel = document.getElementById('notesAttachmentPreviewZoomLevel');
|
||||
|
||||
// Reset zoom state
|
||||
let currentZoom = 100;
|
||||
let currentElement = null;
|
||||
|
||||
function updateZoomUI() {
|
||||
zoomLevel.textContent = `${currentZoom}%`;
|
||||
zoomOutBtn.classList.toggle('hidden', currentZoom <= 100);
|
||||
zoomResetBtn.classList.toggle('hidden', currentZoom === 100);
|
||||
}
|
||||
|
||||
contentEl.innerHTML = '';
|
||||
const match = findFirstAttachmentByKind(note._attachments || [], kind);
|
||||
if (!match) {
|
||||
titleEl.textContent = 'Attachment Preview';
|
||||
contentEl.textContent = 'No matching attachment.';
|
||||
zoomInBtn.classList.add('hidden');
|
||||
zoomOutBtn.classList.add('hidden');
|
||||
zoomResetBtn.classList.add('hidden');
|
||||
zoomLevel.textContent = '';
|
||||
panel.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
const { att, name: fileName, url } = match;
|
||||
titleEl.textContent = `Preview: ${kind}`;
|
||||
let node = null;
|
||||
|
||||
if (kind === 'image') {
|
||||
node = document.createElement('img');
|
||||
node.src = url;
|
||||
node.className = 'max-h-80 rounded border border-gray-200 cursor-zoom-in transition-transform origin-center';
|
||||
node.className = 'max-h-80 rounded border border-gray-200';
|
||||
node.alt = fileName || 'image';
|
||||
node.style.transform = 'scale(1)';
|
||||
currentElement = node;
|
||||
|
||||
// Add zoom handlers for images
|
||||
zoomInBtn.classList.remove('hidden');
|
||||
zoomOutBtn.classList.add('hidden');
|
||||
zoomResetBtn.classList.add('hidden');
|
||||
updateZoomUI();
|
||||
|
||||
const applyZoom = () => {
|
||||
const scale = currentZoom / 100;
|
||||
node.style.transform = `scale(${scale})`;
|
||||
node.style.cursor = currentZoom > 100 ? 'zoom-out' : 'zoom-in';
|
||||
updateZoomUI();
|
||||
};
|
||||
|
||||
zoomInBtn.onclick = () => {
|
||||
currentZoom = Math.min(currentZoom + 25, 400);
|
||||
applyZoom();
|
||||
};
|
||||
|
||||
zoomOutBtn.onclick = () => {
|
||||
currentZoom = Math.max(currentZoom - 25, 100);
|
||||
applyZoom();
|
||||
};
|
||||
|
||||
zoomResetBtn.onclick = () => {
|
||||
currentZoom = 100;
|
||||
applyZoom();
|
||||
};
|
||||
|
||||
node.addEventListener('click', () => {
|
||||
if (currentZoom > 100) {
|
||||
currentZoom = 100;
|
||||
} else {
|
||||
currentZoom = 150;
|
||||
}
|
||||
applyZoom();
|
||||
});
|
||||
} else if (kind === 'video') {
|
||||
node = document.createElement('video');
|
||||
node.src = url;
|
||||
node.controls = true;
|
||||
node.className = 'w-full max-h-80 rounded border border-gray-200 bg-black';
|
||||
zoomInBtn.classList.add('hidden');
|
||||
zoomOutBtn.classList.add('hidden');
|
||||
zoomResetBtn.classList.add('hidden');
|
||||
zoomLevel.textContent = '';
|
||||
} else if (kind === 'audio') {
|
||||
node = document.createElement('audio');
|
||||
node.src = url;
|
||||
node.controls = true;
|
||||
node.className = 'w-full';
|
||||
zoomInBtn.classList.add('hidden');
|
||||
zoomOutBtn.classList.add('hidden');
|
||||
zoomResetBtn.classList.add('hidden');
|
||||
zoomLevel.textContent = '';
|
||||
} else {
|
||||
// Try inline preview for PDFs, otherwise provide a link
|
||||
const isPdf = (fileName || '').toLowerCase().endsWith('.pdf');
|
||||
@@ -1737,10 +1664,6 @@
|
||||
link.textContent = 'Open attachment';
|
||||
node = link;
|
||||
}
|
||||
zoomInBtn.classList.add('hidden');
|
||||
zoomOutBtn.classList.add('hidden');
|
||||
zoomResetBtn.classList.add('hidden');
|
||||
zoomLevel.textContent = '';
|
||||
}
|
||||
contentEl.appendChild(node);
|
||||
panel.classList.remove('hidden');
|
||||
|
||||
Reference in New Issue
Block a user