@efiand/pixelperfect 
Модуль для накладывания скриншотов макетов поверх верстаемых страниц. Позволяет:
- автоматически переключать скриншоты для проверки pixelperfect (далее – PP) при переходе между страницами и сменами адаптивных брейкпоинтов,
- смещать скриншоты, переключать режим инверсии,
- сохранять состояние между перезагрузками страницы и сеансами перезапуска сборки.
Горячие клавиши
Работают, когда фокус на <body>. Результат настроек сохраняется в localStorage.
-
P– переключение всей функциональности (по умолчанию выключен). При отключении остальные хоткеи не действуют. -
I– режим инверсии макетов. По умолчанию включен. -
R– при включенном модуле очищает localStorage от данных по смещениям изображений и перезагружает страницу. -
ArrowUp,ArrowDown,ArrowLeft,ArrowRight– смещают положение изображения. Настройки сохраняются для каждой страницы и каждого брейкпоинта на ней.
Установка
Рекомендуется подключать скрипт внутрь тега <body>.
Отсутствие в production-режиме изображений PP и кода подключения скрипта – настраивается разработчиком отдельно исходя из возможностей его сборки.
Прямое подключение скрипта
<script>
window.pixelperfect = {
breakpoints: [320, 768, 1260, 1380, 1600],
folder: 'img/pixelperfect'
};
</script>
<script src="https://efiand.github.io/pixelperfect/pixelperfect.min.js"></script>Использование модуля
-
npm i -DE @efiand/pixelperfect -
Добавление кода как есть в систему сборки
export * from '@efiand/pixelperfect/loader.js';Опции необходимо добавить вне бандла, как в примере выше.
- Добавление модуля в систему сборки (позволяет сконфигурировать опции внутри бандла):
import loadPixelperfect from '@efiand/pixelperfect';
window.pixelperfect = {
breakpoints: [320, 768, 1260, 1380, 1600],
folder: 'img/pixelperfect'
};
loadPixelperfect();Настройки
Передаются через объект window.pixelperfect. Все настройки опциональны, и если дефолтные подходят, то необходимости создавать объект нет.
-
page– по умолчанию это URL загруженной страницы от корня (не включая корневой слэш и концевой.html, если он там есть). Например, для страницы/about.htmlзначение будет'about'. Для главной страницы (/) – значение по умолчанию'index'. -
breakpoints– числовой массив ширин макетов (порядок произвольный). При первичной загрузке с определенной шириной окна или при ресайзе происходит смена картинки на подходящую для текущей ширины. Значение по умолчанию –[320, 768, 1240]. Если текущая ширина экрана меньше минимального брейкпоинта, фоновое изображение отключается. -
folder– имя каталога (относительно корня проекта), где лежат изображения. Значение по умолчанию –'pixelperfect'. -
ext– расширение изображений. По умолчанию –'jpg'. -
selector– CSS-селектор элемента, с которым связан функционал. Значение по умолчанию –'body'.
Изображения
Формат путей к фоновым изображениям макетов (значения Настроек) – /<folder>/<page>-<breakpoint>.<ext>.