@nsmp/file-previewer

file-previewer — это легковесный, настраиваемый пакет для просмотра файлов, поддерживающий различные функции, такие как масштабирование, поворот и загрузка файлов. Этот компонент можно легко интегрировать в любое веб-приложение для улучшения интерактивности при работе с изображениями и другими файлами.

Основные функции

• Масштабирование: Увеличение и уменьшение масштаба изображений.
• Поворот: Возможность поворачивать изображения на 90° влево или вправо.
• Навигация: Перемещение между множеством файлов с помощью кнопок навигации.
• Загрузка: Скачивание файлов напрямую через браузер.
• Полноэкранный режим: Отображение файлов в полноэкранном режиме с затемнением фона.

Установка

npm install @nsmp/file-previewer
# или
yarn add @nsmp/file-previewer

Использование

import FilePreviewer from '@nsmp/file-previewer';

// Создание экземпляра просмотрщика
const previewer = new FilePreviewer();

// Открытие просмотрщика с файлами и начальным индексом
previewer.open(['path/to/image1.png', 'path/to/image2.png'], 0);

API

Конструктор

new FilePreviewer(options);

Опции

| Опция | Описание | Тип данных | Значение по-умолчанию | | :---: | :---: | :---: | :---: | | showZoom | Включение/отключение кнопок масштабирования | boolean | true | | showDownload | Включение/отключение кнопки скачивания | boolean | true | | showRotation | Включение/отключение кнопок поворота | boolean | false |

Методы экземпляра

| Метод |Описание | | :---: | :---: | | open(images, index = 0) | Открывает просмотрщик. files — массив строк (URL, URL encoded image), index — с какого файла начать | | close() | Закрывает просмотрщик | | next() | Переход к следующему файлу | | prev() | Переход к предыдущему файлу | | setZoom(value) | Устанавливает масштаб. value - значение зума (число) |

Горячие клавиши

• ←/→ — навигация по картинкам
• +/- (ctrl + mwheel)— увеличить/
• уменьшить масштаб
• R — повернуть по часовой
• L — повернуть против часовой
• ESC — закрыть окно

Работа в iframe

При работе в iframe (например, на сайтах с виджетами) просмоторщик автоматически будет пытаться вывести модалку не только во фрейме, но и над всей страницей, если это разрешено политиками безопасности (одинаковый origin). Если у фрейма и родителя разные домены, модалка появится в области iframe, а не на всём экране — это техническое ограничение веба.