Pineglade-pp NPM

pineglade-pp

Модуль для накладывания скриншотов макетов поверх верстаемых страниц. Позволяет:

автоматически переключать скриншоты для проверки pixelperfect (далее – PP) при переходе между страницами и сменами адаптивных брейкпоинтов,
смещать скриншоты, переключать режим инверсии,
сохранять состояние между перезагрузками страницы и сеансами перезапуска сборки.

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

Работают, когда фокус на <body>. Результат настроек сохраняется в localStorage.

P – переключение всей функциональности (по умолчанию выключен). При отключении остальные хоткеи не действуют.
I – режим инверсии макетов. По умолчанию включен.
R – при включенном модуле очищает localStorage от данных по смещениям изображений и перезагружает страницу.
ArrowUp, ArrowDown, ArrowLeft, ArrowRight – смещают положение изображения. Настройки сохраняются для каждой страницы и каждого брейкпоинта на ней.

Установка

Отсутствие изображений PP и кода подключения скрипта в production-режиме – настраивается разработчиком отдельно исходя из возможностей его сборки. Рекомендуется подключать скрипт внутрь тега <body>.

Прямое подключение скрипта

<script>
  window.pinegladePP = {
    breakpoints: [320, 768, 1260, 1380, 1600],
    folder: 'img/pixelperfect'
  };
</script>
<script src="https://efiand.github.io/pineglade-pp/pineglade-pp.min.js"></script>

Использование модуля

npm i -DE https://github.com/efiand/pineglade-pp.git
Добавление кода как есть в систему сборки

export * from 'pineglade-pp/loader.js';

Опции необходимо добавить вне бандла, как в примере выше.

Добавление модуля в систему сборки (позволяет сконфигурировать опции внутри бандла):

import loadPP from 'pineglade-pp';

window.pinegladePP = {
  breakpoints: [320, 768, 1260, 1380, 1600],
  folder: 'img/pixelperfect'
};

loadPP();

Настройки

Передаются через объект window.pinegladePP. Все настройки опциональны, и если дефолтные подходят, то необходимости создавать объект нет.

page – по умолчанию это URL загруженной страницы от корня (не включая корневой слэш и концевой .html, если он там есть). Например, для страницы /about.html значение будет 'about'. Для главной страницы (/) – значение по умолчанию 'index'.
breakpoints – числовой массив ширин макетов (порядок произвольный). При первичной загрузке с определенной шириной окна или при ресайзе происходит смена картинки на подходящую для текущей ширины. Значение по умолчанию – [320, 768, 1240]. Если текущая ширина экрана меньше минимального брейкпоинта, фоновое изображение отключается.
folder – имя каталога (относительно корня проекта), где лежат изображения. Значение по умолчанию – 'pixelperfect'.
ext – расширение изображений. По умолчанию – 'jpg'.
selector – CSS-селектор элемента, с которым связан функционал. Значение по умолчанию – body.