VGFilePreview

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

Основы

Поля карточки, автоматический слот предпросмотра, компактный режим и валидация пути.

Полная карточка файла

Модуль валидирует путь, заполняет все объявленные поля, добавляет предпросмотр Markdown и собирает кнопку скачивания.

<div class="file" data-vg-filepreview="/files/readme.md" data-fields="icon,name,ext,size,original_name,preview,download" data-name="Руководство по проекту" data-original-name="readme.md" data-size="18.4 KB">
  <div class="icon"></div>
  <div>
    <button class="name" type="button"></button>
    <span class="ext"></span>
    <span class="size"></span>
    <span class="original_name"></span>
    <div class="preview"></div>
  </div>
  <div class="download"></div>
</div>

import { VGFilePreview } from 'vgapp';

VGFilePreview.init(document.querySelector('[data-vg-filepreview]'));

.file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

Компактный режим nameOnly

Остаются имя, метаданные и скачивание; контейнер и кнопка предпросмотра не создаются. Клик по имени Office-файла по-прежнему открывает просмотрщик.

<div data-vg-filepreview="/files/VEGASAPP.docx" data-fields="name,ext,size,download" data-size="52 KB">
  <button class="name" type="button"></button>
  <span class="ext"></span>
  <span class="size"></span>
  <div class="download"></div>
</div>

import { VGFilePreview } from 'vgapp';

VGFilePreview.init(document.querySelector('[data-vg-filepreview]'), {
  ui: { nameOnly: true }
});

.file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

Невалидный путь

Пустой путь, #, javascript: и HTTP-путь без имени файла получают диагностические data-атрибуты и не запускают рендерер.

Проверяйте атрибуты data-vg-filepreview-valid и data-vg-filepreview-error на карточке.

<div data-vg-filepreview="#" data-fields="name,preview">
  <span class="name">Файл недоступен</span>
  <div class="preview"></div>
</div>

const preview = VGFilePreview.init(document.querySelector('[data-vg-filepreview]'));

console.log(preview.isValid); // false
// На корневом элементе появятся data-vg-filepreview-valid="false"
// и data-vg-filepreview-error="invalid-file-path".

.file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}