vgapp 1.1.1 → 1.1.3

package/app/modules/vgfilepreview/js/renderers/zip-modal.js

@@ -0,0 +1,522 @@
+import VGModal from "../../../vgmodal";
+
+class ZipModal {
+	constructor() {
+		this._modalId = 'vg-filepreview-zip-modal';
+		this._abortController = null;
+		this._labels = {};
+		this._entries = [];
+		this._arrayBuffer = null;
+	}
+
+	static getInstance() {
+		if (!ZipModal._instance) {
+			ZipModal._instance = new ZipModal();
+		}
+
+		return ZipModal._instance;
+	}
+
+	open(payload = {}) {
+		const src = String(payload.src || '').trim();
+		if (!src) {
+			return;
+		}
+
+		this._ensureModal();
+		if (!this._modal || !this._content) {
+			return;
+		}
+
+		this._labels = payload?.labels && typeof payload.labels === 'object' ? payload.labels : {};
+		const defaultTitle = String(payload.defaultTitle || '').trim();
+		const title = String(payload.title || '').trim();
+		this._title.textContent = title || defaultTitle;
+		this._content.innerHTML = `<div class="vg-filepreview-zip-modal__loading">${this._escapeHtml(this._label('loadingArchive'))}</div>`;
+		this._modal.show();
+
+		this._loadZipEntries(src);
+	}
+
+	close() {
+		if (!this._modal) {
+			return;
+		}
+
+		this._modal.hide();
+	}
+
+	_ensureModal() {
+		if (this._modal && this._root) {
+			return;
+		}
+
+		this._initModal();
+	}
+
+	_initModal() {
+		const params = {
+			centered: true,
+			dismiss: true,
+			backdrop: true,
+			keyboard: true,
+			sizes: {
+				width: '800px',
+			},
+			animation: {
+				enable: false
+			}
+		};
+
+		const existed = document.getElementById(this._modalId);
+		if (existed) {
+			this._root = existed;
+			this._modal = VGModal.getOrCreateInstance(existed, params);
+			this._bindElements(existed);
+			this._bindLifecycle(existed);
+			return;
+		}
+
+		this._modal = VGModal.build(this._modalId, params, (modalInstance) => {
+			const element = modalInstance._element;
+			this._root = element;
+			element.classList.add('vg-filepreview-zip-modal');
+
+			const body = element.querySelector('.vg-modal-body');
+			const content = element.querySelector('.vg-modal-content');
+			if (!body || !content) {
+				return;
+			}
+
+			body.classList.add('vg-filepreview-image-modal__body');
+			body.innerHTML = '';
+
+			let header = element.querySelector('.vg-modal-header');
+			if (!header) {
+				header = document.createElement('div');
+				header.className = 'vg-modal-header';
+				content.prepend(header);
+			}
+
+			this._title = document.createElement('div');
+			this._title.className = 'vg-modal-title';
+			this._title.textContent = '';
+
+			this._content = document.createElement('div');
+			this._content.className = 'vg-filepreview-zip-modal__content';
+
+			header.appendChild(this._title);
+			body.appendChild(this._content);
+
+			this._bindLifecycle(element);
+		});
+	}
+
+	_bindElements(root) {
+		this._title = root.querySelector('.vg-filepreview-zip-modal__title');
+		this._content = root.querySelector('.vg-filepreview-zip-modal__content');
+	}
+
+	_bindLifecycle(root) {
+		if (!root || root.hasAttribute('data-vg-filepreview-zip-lifecycle-bind')) {
+			return;
+		}
+
+		root.setAttribute('data-vg-filepreview-zip-lifecycle-bind', 'true');
+		root.addEventListener('vg.modal.hidden', () => {
+			this._destroyModal();
+		});
+	}
+
+	_loadZipEntries(src) {
+		if (this._abortController) {
+			this._abortController.abort();
+		}
+		this._abortController = new AbortController();
+
+		const cached = ZipModal._cache.get(src);
+		if (cached?.entries && cached?.arrayBuffer) {
+			this._entries = cached.entries;
+			this._arrayBuffer = cached.arrayBuffer;
+			this._renderEntries(this._entries);
+			return;
+		}
+
+		fetch(src, {
+			method: 'GET',
+			signal: this._abortController.signal
+		})
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error(`HTTP ${response.status}`);
+				}
+				return response.arrayBuffer();
+			})
+			.then((buffer) => {
+				const entries = this._parseZipEntries(buffer);
+				this._entries = entries;
+				this._arrayBuffer = buffer;
+				ZipModal._cache.set(src, {
+					entries,
+					arrayBuffer: buffer
+				});
+				this._renderEntries(entries);
+			})
+			.catch((error) => {
+				if (error?.name === 'AbortError') {
+					return;
+				}
+
+				if (this._content) {
+					const errorText = this._resolveErrorText(error);
+					this._content.innerHTML = `<div class="vg-filepreview-zip-modal__error">${this._escapeHtml(this._label('cannotOpenArchive'))}: ${this._escapeHtml(errorText)}</div>`;
+				}
+			});
+	}
+
+	_destroyModal() {
+		if (this._abortController) {
+			this._abortController.abort();
+			this._abortController = null;
+		}
+
+		if (this._modal && typeof this._modal.dispose === 'function') {
+			this._modal.dispose();
+		}
+
+		if (this._root && this._root.parentNode) {
+			this._root.parentNode.removeChild(this._root);
+		}
+
+		this._root = null;
+		this._modal = null;
+		this._title = null;
+		this._content = null;
+		this._labels = null;
+		this._entries = [];
+		this._arrayBuffer = null;
+	}
+
+	_parseZipEntries(arrayBuffer) {
+		const view = new DataView(arrayBuffer);
+		const length = view.byteLength;
+
+		if (length < 22) {
+			throw new Error('invalid_zip');
+		}
+
+		const eocdOffset = this._findEndOfCentralDirectory(view);
+		if (eocdOffset < 0) {
+			throw new Error('central_directory_not_found');
+		}
+
+		const totalEntries = view.getUint16(eocdOffset + 10, true);
+		const centralDirOffset = view.getUint32(eocdOffset + 16, true);
+
+		const decoder = new TextDecoder('utf-8', { fatal: false });
+		const entries = [];
+		let ptr = centralDirOffset;
+
+		for (let i = 0; i < totalEntries; i += 1) {
+			if (ptr + 46 > length) {
+				break;
+			}
+
+			const signature = view.getUint32(ptr, true);
+			if (signature !== 0x02014b50) {
+				break;
+			}
+
+			const compressedSize = view.getUint32(ptr + 20, true);
+			const uncompressedSize = view.getUint32(ptr + 24, true);
+			const compressionMethod = view.getUint16(ptr + 10, true);
+			const fileNameLen = view.getUint16(ptr + 28, true);
+			const extraLen = view.getUint16(ptr + 30, true);
+			const commentLen = view.getUint16(ptr + 32, true);
+			const localHeaderOffset = view.getUint32(ptr + 42, true);
+
+			const nameStart = ptr + 46;
+			const nameEnd = nameStart + fileNameLen;
+			if (nameEnd > length) {
+				break;
+			}
+
+			const fileNameBytes = new Uint8Array(arrayBuffer, nameStart, fileNameLen);
+			const fileName = decoder.decode(fileNameBytes);
+
+			entries.push({
+				name: fileName,
+				compressedSize,
+				uncompressedSize,
+				compressionMethod,
+				localHeaderOffset,
+				isDirectory: fileName.endsWith('/')
+			});
+
+			ptr = nameEnd + extraLen + commentLen;
+		}
+
+		return entries;
+	}
+
+	_findEndOfCentralDirectory(view) {
+		const minOffset = Math.max(0, view.byteLength - 65557);
+		for (let i = view.byteLength - 22; i >= minOffset; i -= 1) {
+			if (view.getUint32(i, true) === 0x06054b50) {
+				return i;
+			}
+		}
+		return -1;
+	}
+
+	_renderEntries(entries) {
+		if (!this._content) {
+			return;
+		}
+
+		if (!entries.length) {
+			this._content.innerHTML = `<div class="vg-filepreview-zip-modal__empty">${this._escapeHtml(this._label('archiveEmptyUnsupported'))}</div>`;
+			return;
+		}
+
+		const rows = entries.map((entry, index) => {
+			const type = entry.isDirectory
+				? this._label('typeDir')
+				: this._label('typeFile');
+			const compressed = entry.isDirectory ? '-' : this._formatSize(entry.compressedSize);
+			const original = entry.isDirectory ? '-' : this._formatSize(entry.uncompressedSize);
+			const previewAction = (!entry.isDirectory && this._canPreviewEntry(entry))
+				? `<button type="button" class="vg-filepreview-zip-modal__entry-btn" data-entry-index="${index}">${this._escapeHtml(this._label('previewEntry'))}</button>`
+				: '-';
+
+			return `
+<tr>
+	<td>${index + 1}</td>
+	<td class="name">${this._escapeHtml(entry.name)}</td>
+	<td>${type}</td>
+	<td>${compressed}</td>
+	<td>${original}</td>
+	<td>${previewAction}</td>
+</tr>`;
+		}).join('');
+
+		this._content.innerHTML = `
+<table class="vg-filepreview-zip-modal__table">
+	<thead>
+		<tr>
+			<th>#</th>
+			<th>${this._escapeHtml(this._label('tableName'))}</th>
+			<th>${this._escapeHtml(this._label('tableType'))}</th>
+			<th>${this._escapeHtml(this._label('tablePacked'))}</th>
+			<th>${this._escapeHtml(this._label('tableSize'))}</th>
+			<th>${this._escapeHtml(this._label('tablePreview'))}</th>
+		</tr>
+	</thead>
+	<tbody>
+		${rows}
+	</tbody>
+</table>`;
+		this._bindEntriesPreview();
+	}
+
+	_label(key, fallback = '') {
+		const value = this._labels?.[key];
+		return typeof value === 'string' && value.trim() ? value : fallback;
+	}
+
+	_resolveErrorText(error) {
+		const message = String(error?.message || '').trim();
+		if (!message) {
+			return this._label('unknownError');
+		}
+
+		if (message === 'invalid_zip') {
+			return this._label('invalidZip');
+		}
+
+		if (message === 'central_directory_not_found') {
+			return this._label('centralDirectoryNotFound');
+		}
+
+		return message;
+	}
+
+	_formatSize(bytes) {
+		if (!Number.isFinite(bytes) || bytes < 0) {
+			return '-';
+		}
+
+		const units = ['B', 'KB', 'MB', 'GB'];
+		let value = bytes;
+		let unitIndex = 0;
+		while (value >= 1024 && unitIndex < units.length - 1) {
+			value /= 1024;
+			unitIndex += 1;
+		}
+
+		const digits = value >= 100 || unitIndex === 0 ? 0 : 2;
+		return `${value.toFixed(digits)} ${units[unitIndex]}`;
+	}
+
+	_escapeHtml(value) {
+		return String(value)
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#39;');
+	}
+
+	_bindEntriesPreview() {
+		if (!this._content || this._content.hasAttribute('data-vg-filepreview-zip-preview-bind')) {
+			return;
+		}
+
+		this._content.setAttribute('data-vg-filepreview-zip-preview-bind', 'true');
+		this._content.addEventListener('click', (event) => {
+			const button = event.target.closest('[data-entry-index]');
+			if (!button) {
+				return;
+			}
+
+			event.preventDefault();
+			const index = Number(button.getAttribute('data-entry-index'));
+			if (!Number.isFinite(index) || index < 0 || index >= this._entries.length) {
+				return;
+			}
+			this._previewEntry(index);
+		});
+	}
+
+	_canPreviewEntry(entry) {
+		if (!entry || entry.isDirectory || !entry.name) {
+			return false;
+		}
+
+		const ext = this._extractExtension(entry.name);
+		const allowed = new Set([
+			'.txt', '.md', '.json', '.xml', '.yml', '.yaml', '.csv', '.log',
+			'.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp'
+		]);
+		return allowed.has(ext);
+	}
+
+	async _previewEntry(index) {
+		if (!this._content) {
+			return;
+		}
+
+		const entry = this._entries[index];
+		if (!entry || !this._canPreviewEntry(entry)) {
+			return;
+		}
+
+		let panel = this._content.querySelector('.vg-filepreview-zip-modal__entry-preview');
+		if (!panel) {
+			panel = document.createElement('div');
+			panel.className = 'vg-filepreview-zip-modal__entry-preview';
+			this._content.appendChild(panel);
+		}
+
+		panel.innerHTML = `<div class="vg-filepreview-zip-modal__entry-preview-loading">${this._escapeHtml(this._label('loadingEntry'))}</div>`;
+
+		try {
+			const uint8 = await this._extractEntryBytes(entry);
+			const ext = this._extractExtension(entry.name);
+
+			if (this._isImageExtension(ext)) {
+				const blob = new Blob([uint8.buffer], { type: this._mimeByExtension(ext) });
+				const url = URL.createObjectURL(blob);
+				panel.innerHTML = `
+<div class="vg-filepreview-zip-modal__entry-preview-title">${this._escapeHtml(entry.name)}</div>
+<img class="vg-filepreview-zip-modal__entry-preview-image" src="${url}" alt="${this._escapeHtml(entry.name)}" />`;
+				setTimeout(() => URL.revokeObjectURL(url), 2000);
+				return;
+			}
+
+			const decoder = new TextDecoder('utf-8', { fatal: false });
+			const text = decoder.decode(uint8);
+			const safeText = this._escapeHtml(text || this._label('emptyFileInArchive'));
+			panel.innerHTML = `
+<div class="vg-filepreview-zip-modal__entry-preview-title">${this._escapeHtml(entry.name)}</div>
+<pre class="vg-filepreview-zip-modal__entry-preview-text">${safeText}</pre>`;
+		} catch (error) {
+			panel.innerHTML = `<div class="vg-filepreview-zip-modal__entry-preview-error">${this._escapeHtml(this._label('cannotPreviewEntry'))}: ${this._escapeHtml(error?.message || this._label('unknownError'))}</div>`;
+		}
+	}
+
+	async _extractEntryBytes(entry) {
+		if (!this._arrayBuffer) {
+			throw new Error(this._label('archiveBufferMissing'));
+		}
+
+		const view = new DataView(this._arrayBuffer);
+		const offset = Number(entry.localHeaderOffset || 0);
+		if (offset + 30 > view.byteLength) {
+			throw new Error(this._label('entryCorrupted'));
+		}
+
+		const signature = view.getUint32(offset, true);
+		if (signature !== 0x04034b50) {
+			throw new Error(this._label('entryCorrupted'));
+		}
+
+		const nameLen = view.getUint16(offset + 26, true);
+		const extraLen = view.getUint16(offset + 28, true);
+		const dataStart = offset + 30 + nameLen + extraLen;
+		const dataEnd = dataStart + Number(entry.compressedSize || 0);
+		if (dataEnd > view.byteLength) {
+			throw new Error(this._label('entryCorrupted'));
+		}
+
+		const compressed = new Uint8Array(this._arrayBuffer.slice(dataStart, dataEnd));
+		const method = Number(entry.compressionMethod || 0);
+
+		if (method === 0) {
+			return compressed;
+		}
+
+		if (method === 8) {
+			if (typeof DecompressionStream === 'undefined') {
+				throw new Error(this._label('deflateNotSupported'));
+			}
+
+			const stream = new Blob([compressed]).stream().pipeThrough(new DecompressionStream('deflate-raw'));
+			const decompressed = await new Response(stream).arrayBuffer();
+			return new Uint8Array(decompressed);
+		}
+
+		throw new Error(this._label('compressionNotSupported'));
+	}
+
+	_extractExtension(name) {
+		const value = String(name || '').toLowerCase();
+		const clean = value.split('/').pop() || '';
+		if (!clean.includes('.')) {
+			return '';
+		}
+		return `.${clean.split('.').pop() || ''}`;
+	}
+
+	_isImageExtension(ext) {
+		return new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp']).has(ext);
+	}
+
+	_mimeByExtension(ext) {
+		const map = {
+			'.png': 'image/png',
+			'.jpg': 'image/jpeg',
+			'.jpeg': 'image/jpeg',
+			'.gif': 'image/gif',
+			'.webp': 'image/webp',
+			'.svg': 'image/svg+xml',
+			'.bmp': 'image/bmp'
+		};
+		return map[ext] || 'application/octet-stream';
+	}
+
+}
+
+ZipModal._cache = new Map();
+
+export default ZipModal;

package/app/modules/vgfilepreview/js/renderers/zip.js

@@ -0,0 +1,89 @@
+import ZipModal from "./zip-modal";
+
+const ZIP_EXTENSIONS = new Set([
+	'.zip'
+]);
+
+class ZipFilePreviewRenderer {
+	constructor() {
+		this.name = 'zip';
+		this._modal = ZipModal.getInstance();
+	}
+
+	canRender(context = {}) {
+		const ext = String(context?.fileMeta?.ext || '').toLowerCase();
+		return ZIP_EXTENSIONS.has(ext);
+	}
+
+	render(context = {}) {
+		const container = context?.previewContainer;
+		const nameOnly = Boolean(context?.ui?.nameOnly);
+		const i18n = context?.i18n;
+
+		const src = context?.fileUrl?.href || context?.filePath || '';
+		if (!src) {
+			return false;
+		}
+
+		const openArchive = (event) => {
+			if (event) {
+				event.preventDefault();
+			}
+
+			this._modal.open({
+				src,
+				title: context?.fileMeta?.name || i18n?.message('archive_title') || '',
+				defaultTitle: i18n?.message('archive_title') || '',
+				labels: {
+					loadingArchive: i18n?.message('loading_archive') || '',
+					cannotOpenArchive: i18n?.message('cannot_open_archive') || '',
+					unknownError: i18n?.message('unknown_error') || '',
+					invalidZip: i18n?.message('invalid_zip') || '',
+					centralDirectoryNotFound: i18n?.message('central_directory_not_found') || '',
+					archiveEmptyUnsupported: i18n?.message('archive_empty_unsupported') || '',
+					typeDir: i18n?.message('archive_type_dir') || '',
+					typeFile: i18n?.message('archive_type_file') || '',
+					tableName: i18n?.message('archive_table_name') || '',
+					tableType: i18n?.message('archive_table_type') || '',
+					tablePacked: i18n?.message('archive_table_packed') || '',
+					tableSize: i18n?.message('archive_table_size') || '',
+					tablePreview: i18n?.message('archive_table_preview') || '',
+					previewEntry: i18n?.button('preview') || '',
+					loadingEntry: i18n?.message('loading_entry') || '',
+					cannotPreviewEntry: i18n?.message('cannot_preview_entry') || '',
+					deflateNotSupported: i18n?.message('deflate_not_supported') || '',
+					compressionNotSupported: i18n?.message('compression_not_supported') || '',
+					entryCorrupted: i18n?.message('entry_corrupted') || '',
+					archiveBufferMissing: i18n?.message('archive_buffer_missing') || '',
+					emptyFileInArchive: i18n?.message('empty_file') || ''
+				}
+			});
+		};
+
+		const titleLink = context?.element?.querySelector('.name');
+		if (titleLink && !titleLink.hasAttribute('data-vg-filepreview-zip-bind')) {
+			titleLink.setAttribute('data-vg-filepreview-zip-bind', 'true');
+			titleLink.classList.add('is-preview-action');
+			titleLink.addEventListener('click', openArchive);
+		}
+
+		if (nameOnly) {
+			return Boolean(titleLink);
+		}
+
+		if (!container) {
+			return false;
+		}
+
+		const trigger = document.createElement('button');
+		trigger.type = 'button';
+		trigger.className = 'vg-filepreview-zip-trigger';
+		trigger.textContent = i18n?.button('open_archive') || '';
+		trigger.addEventListener('click', openArchive);
+		container.appendChild(trigger);
+
+		return true;
+	}
+}
+
+export default ZipFilePreviewRenderer;