Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/efiand/pixelperfect-tool
Pixel perfect tool for development mode.
https://github.com/efiand/pixelperfect-tool
npm-package nuxt-module pixelperfect portfolio-project vanilla-js
Last synced: 3 months ago
JSON representation
Pixel perfect tool for development mode.
- Host: GitHub
- URL: https://github.com/efiand/pixelperfect-tool
- Owner: efiand
- Created: 2022-01-12T09:08:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-15T09:23:50.000Z (about 1 year ago)
- Last Synced: 2024-11-04T07:24:05.354Z (3 months ago)
- Topics: npm-package, nuxt-module, pixelperfect, portfolio-project, vanilla-js
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/pixelperfect-tool
- Size: 138 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# pixelperfect-tool [](https://www.npmjs.com/package/pixelperfect-tool)
Модуль для накладывания скриншотов макетов поверх верстаемых страниц.
Позволяет:
- автоматически переключать скриншоты для проверки pixelperfect (далее – PP) при переходе между страницами и сменами адаптивных брейкпоинтов,
- смещать скриншоты, переключать режим инверсии,
- сохранять состояние между перезагрузками страницы и сеансами перезапуска сборки.
[История версий.](https://github.com/efiand/pixelperfect/blob/main/CHANGELOG.md#pixelperfect-changelog)
## Горячие клавиши
Работают, когда фокус на ``. Результат настроек сохраняется в localStorage.
- `P` – переключение всей функциональности (по умолчанию выключен). При отключении остальные хоткеи не действуют.
- `I` – режим инверсии макетов. По умолчанию включен.
- `R` – при включенном модуле очищает localStorage от данных по смещениям изображений и перезагружает страницу.
- `ArrowUp`, `ArrowDown`, `ArrowLeft`, `ArrowRight` – смещают положение изображения. Настройки сохраняются для каждой страницы и каждого брейкпоинта на ней.
## Прямое подключение скрипта
```html
window.pixelperfect = {
breakpoints: [320, 768, 1260, 1380, 1600],
folder: "img/pixelperfect",
};
```
Отсутствие в production-режиме изображений PP и кода подключения скрипта – настраивается разработчиком отдельно исходя из возможностей его сборки.
## Подключение модуля
Установка: `npm i -DE pixelperfect-tool`.
Модуль инициализирует библиотеку только один раз независимо от количества вызовов.
### Добавление в систему сборки как есть
```js
window.pixelperfect = {
breakpoints: [320, 768, 1260, 1380, 1600],
folder: "img/pixelperfect",
};
export * from "pixelperfect-tool/loader.js";
```
### Использование лоадера
```js
import loadPixelperfect from "pixelperfect-tool";
loadPixelperfect({
breakpoints: [320, 768, 1260, 1380, 1600],
folder: "img/pixelperfect",
});
```
### Vue-компонент
Renderless-компонент с возможностью добавления опций.
```html
import type { PixelperfectOptions } from "pixelperfect-tool";
import PixelperfectTool from "pixelperfect-tool/vue";
const pixelperfectOptions: PixelperfectOptions = {
breakpoints: [320, 768, 1260, 1380, 1600],
folder: "img/pixelperfect",
};
```
### Nuxt-модуль
Предоставляет вышеупомянутый vue-компонент `PixelperfectTool`, инициализирующий библиотеку на клиентской стороне только в dev-режиме.
Подключение модуля в `nuxt.config.ts`:
```js
export default defineNuxtConfig({
modules: ["pixelperfect-tool/nuxt"],
// Кастомный путь к изображениям, чтобы они не попадали в билд
nitro: {
...(process.env.NODE_ENV === "development"
? {
publicAssets: [
{
baseURL: "pixelperfect", // доступен в браузере как /pixelperfect
dir: "dev/pixelperfect", // путь относительно @/server/
},
],
}
: {}),
},
});
```
Использование в приложении отличается только отсутствием необходимости импортировать компонент.
## Настройки
Передаются через объект `window.pixelperfect`. Все настройки опциональны, и если дефолтные подходят, то необходимости создавать объект нет.
- `page` – по умолчанию это URL загруженной страницы от корня (не включая корневой слэш и концевой `.html`, если он там есть). Например, для страницы `/about.html` значение будет `'about'`. Для главной страницы (`/`) – значение по умолчанию `'index'`.
- `breakpoints` – числовой массив ширин макетов (порядок произвольный). При первичной загрузке с определенной шириной окна или при ресайзе происходит смена картинки на подходящую для текущей ширины. Значение по умолчанию – `[320, 768, 1240]`. Если текущая ширина экрана меньше минимального брейкпоинта, фоновое изображение отключается.
- `folder` – имя каталога (относительно корня проекта), где лежат изображения. Значение по умолчанию – `'pixelperfect'`.
- `ext` – расширение изображений. По умолчанию – `'jpg'`.
- `selector` – CSS-селектор элемента, с которым связан функционал. Значение по умолчанию – `'body'`.
## Изображения
Формат путей к фоновым изображениям макетов (значения Настроек) – `//-.`.