@budarin/app-zoom-service

Сервис для добавления функциональности масштабирования в веб-приложения. Данный сервис поможет тем, у кого стили не позволяют контролировать zoom при помощи изменения размера шрифта корневого элемента (по разным причинам).

Описание

@budarin/app-zoom-service предоставляет простой способ добавления масштабирования к веб-приложению. Состояние хранится через переданный объект хранилища, совместимый по методам с localStorage.

Установка

pnpm add @budarin/app-zoom-service

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

import { ZoomService } from '@budarin/app-zoom-service';
// CSS автоматически импортируется при импорте ZoomService

// Передаём ссылку на существующий объект хранилища (совместимый с localStorage)
const zoomService = new ZoomService(localStorage);

// Инициализация с сохраненным значением
zoomService.initZoom();

// Установка уровня масштабирования (в процентах)
zoomService.setZoom(120); // 120%

// Получение текущего уровня масштабирования
const currentZoom = zoomService.getZoom(); // 120

Кастомное хранилище

import { ZoomService } from '@budarin/app-zoom-service';

const memory = new Map<string, string>();
const customStorage = {
    getItem(key: string): string | null {
        return memory.has(key) ? memory.get(key)! : null;
    },
    setItem(key: string, value: string): void {
        memory.set(key, value);
    },
};

const zoomService = new ZoomService(customStorage);

Важно: CSS файл автоматически импортируется при импорте ZoomService. Убедитесь, что ваш сборщик (Webpack, Vite, Rollup и т.д.) поддерживает импорт CSS файлов из node_modules.

API

ZoomService

constructor(storage: LocalStorage)

Принимает ссылку на объект, имеющий методы getItem(key: string): string | null и setItem(key: string, value: string): void.

initZoom(): void

Инициализирует сервис, загружая сохраненный уровень масштабирования из переданного хранилища и применяя его к странице.

setZoom(zoom: number)

Устанавливает уровень масштабирования.

Параметры:

• zoom - уровень масштабирования в процентах (75-150)

getZoom(): number

Возвращает текущий уровень масштабирования.

Возвращает:

• number - текущий уровень масштабирования в процентах (по умолчанию 100)

Особенности

• Явная инициализация через объект-хранилище (localStorage или совместимый)
• Автоматическое сохранение состояния в переданное хранилище
• Ограничение диапазона масштабирования от 75% до 150%
• CSS-переменные для интеграции с существующими стилями
• TypeScript поддержка

CSS переменные

Сервис устанавливает следующие CSS переменные:

• --app-zoom-level - текущий уровень масштабирования
• --app-zoom-ratio - коэффициент для расчета размеров

Лицензия

MIT