VGFilePreview

Модуль для быстрого просмотра файла

API и настройка

Ручная инициализация, параметры, состояния, публичные свойства и CSS-переменные.

Экземпляр и состояние

getOrCreateInstance не дублирует обработчики. Публичные свойства отдают путь, URL, валидность, метаданные, найденные поля и DOM-слоты.

Нажмите кнопку
HTML 
<div id="contract-preview" data-vg-filepreview="/files/ss.txt" data-fields="icon,name,ext,size,preview" data-size="2 KB">
  <div class="icon"></div>
  <button class="name" type="button"></button>
  <span class="ext"></span>
  <span class="size"></span>
  <div class="preview"></div>
</div>
<button type="button" data-read-preview>Прочитать состояние</button>
<output data-preview-output></output>
JavaScript 
import { VGFilePreview } from 'vgapp';

const element = document.querySelector('#contract-preview');
const preview = VGFilePreview.getOrCreateInstance(element, {
  validate: true,
  lang: 'ru',
  preview: { text: { enable: true } }
});

document.querySelector('[data-read-preview]').addEventListener('click', () => {
  document.querySelector('[data-preview-output]').textContent =
    `${preview.fileMeta.ext} · ${preview.fileMeta.sizeText} · ${element.dataset.vgFilepreviewState}`;
});
CSS 
[data-preview-output] {
  display: block;
  margin-top: 0.75rem;
  color: var(--vg-text-secondary);
}

Параметры

Параметры объединяются с настройками по умолчанию; отдельную группу предпросмотра можно отключить через enable: false.

ПараметрПо умолчаниюНазначение
validatetrueПроверяет схему URL и наличие расширения файла.
langruЯзык системных кнопок и сообщений: ru или en.
ui.nameOnlyfalseНе создаёт UI предпросмотра, сохраняя действия по имени.
preview.*.enabletrueГруппы: audio, video, image, archive, text, office и pdf.

DOM-контракт и состояния

Модуль сообщает результат через атрибуты корневого элемента; собственных DOM-событий VGFilePreview не отправляет.

АтрибутЗначенияНазначение
data-vg-filepreview-validtrue / falseРезультат валидации пути.
data-vg-filepreview-errorinvalid-file-pathПричина отказа до запуска рендера.
data-vg-filepreview-stateloading / ready / empty / errorТекущее состояние рендера.
data-vg-filepreview-rendererimage / audio / video / text / pdf / office / zipВыбранное семейство предпросмотра.
data-vg-filepreview-editable-fieldsсписок полейНайденные элементы из data-fields.
data-vg-filepreview-missing-fieldsсписок полейОбъявленные, но отсутствующие элементы.

CSS-переменные и темы

Переменные задаются на карточке или общем контейнере. Для тем используйте семантические токены OKAUX.

CSS 
.file-preview-theme {
  --vg-filepreview-trigger-image-bg: var(--vg-surface-brand);
  --vg-filepreview-trigger-radius: var(--vg-radius-pill);
  --vg-filepreview-image-thumb-max-width: 240px;
  --vg-filepreview-modal-content-bg: var(--vg-surface-bg);
  --vg-filepreview-modal-content-color: var(--vg-text-primary);
}