Compare commits
4 Commits
@advdomini
...
@advdomini
| Author | SHA1 | Date | |
|---|---|---|---|
|
f30793af80
|
|||
|
3605551f16
|
|||
|
f8d793195c
|
|||
|
a655e7b5e4
|
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@advdominion/babel-plugin-nunjucks",
|
"name": "@advdominion/babel-plugin-nunjucks",
|
||||||
"version": "3.0.3",
|
"version": "3.1.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
@@ -11,10 +11,8 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
|
||||||
"nunjucks": "^3.2.4"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@babel/core": "^7.0.0"
|
"@babel/core": "^7.0.0",
|
||||||
|
"nunjucks": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
33
packages/scroll-to/README.md
Normal file
33
packages/scroll-to/README.md
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# scroll-to
|
||||||
|
|
||||||
|
Плавный скролл до элемента с поддержкой нативного события `scrollend` и гибкой настройкой отступов.
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { scrollTo } from '@advdominion/scroll-to';
|
||||||
|
|
||||||
|
// Базовый скролл до элемента
|
||||||
|
await scrollTo(document.querySelector('#example'));
|
||||||
|
|
||||||
|
// Скролл с отступом 100px (например, для фиксированной шапки)
|
||||||
|
await scrollTo(document.querySelector('#example'), 100, true);
|
||||||
|
|
||||||
|
// Скролл с отступом в 10% от высоты экрана
|
||||||
|
await scrollTo(document.querySelector('#example'), 10);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Параметры
|
||||||
|
|
||||||
|
| Параметр | Тип | По умолчанию | Описание |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| **$el** | `HTMLElement` | — | DOM-элемент, к которому нужно прокрутить страницу |
|
||||||
|
| **offset** | `number` | `0` | Величина отступа сверху от целевого элемента |
|
||||||
|
| **offsetInPx** | `boolean` | `false` | Тип отступа: `true` — в пикселях, `false` — в процентах от высоты вьюпорта |
|
||||||
|
|
||||||
|
## Как это работает
|
||||||
|
|
||||||
|
1. **Точность:** Использует нативное событие `scrollend`, которое срабатывает строго после завершения анимации прокрутки.
|
||||||
|
2. **Безопасность:** Если браузер не поддерживает `scrollend` или анимация прервана, сработает автоматический fallback через 1500 мс.
|
||||||
|
3. **Плавность:** Использует нативный `behavior: 'smooth'`.
|
||||||
|
4. **Очистка данных:** Автоматически удаляет слушатели событий и таймеры после завершения или отмены скролла.
|
||||||
40
packages/scroll-to/index.js
Normal file
40
packages/scroll-to/index.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
export const scrollTo = ($el, offset = 0, offsetInPx = false) => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
if (!$el) {
|
||||||
|
console.warn('Элемент не найден');
|
||||||
|
resolve();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const elementPosition = $el.getBoundingClientRect().top + window.scrollY;
|
||||||
|
const topOffset = offsetInPx ? offset : (window.innerHeight * offset) / 100;
|
||||||
|
const targetScrollTop = elementPosition - topOffset;
|
||||||
|
|
||||||
|
// Если элемент уже в нужной позиции
|
||||||
|
if (Math.abs(window.scrollY - targetScrollTop) < 1) {
|
||||||
|
resolve();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let resolved = false; // На случай, если scrollend и fallback запустятся одновременно
|
||||||
|
let fallbackTimeout; // eslint-disable-line prefer-const
|
||||||
|
|
||||||
|
const done = () => {
|
||||||
|
if (resolved) return;
|
||||||
|
resolved = true;
|
||||||
|
|
||||||
|
window.removeEventListener('scrollend', done);
|
||||||
|
clearTimeout(fallbackTimeout);
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scrollend', done, { once: true });
|
||||||
|
fallbackTimeout = setTimeout(done, 1500);
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetScrollTop,
|
||||||
|
behavior: 'smooth',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
14
packages/scroll-to/package.json
Normal file
14
packages/scroll-to/package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/scroll-to",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
}
|
||||||
|
}
|
||||||
48
yarn.lock
48
yarn.lock
@@ -8,10 +8,9 @@ __metadata:
|
|||||||
"@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks":
|
"@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks":
|
||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks"
|
resolution: "@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks"
|
||||||
dependencies:
|
|
||||||
nunjucks: "npm:^3.2.4"
|
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
"@babel/core": ^7.0.0
|
"@babel/core": ^7.0.0
|
||||||
|
nunjucks: ^3.0.0
|
||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
@@ -49,6 +48,12 @@ __metadata:
|
|||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
|
"@advdominion/scroll-to@workspace:packages/scroll-to":
|
||||||
|
version: 0.0.0-use.local
|
||||||
|
resolution: "@advdominion/scroll-to@workspace:packages/scroll-to"
|
||||||
|
languageName: unknown
|
||||||
|
linkType: soft
|
||||||
|
|
||||||
"@babel/code-frame@npm:^7.0.0":
|
"@babel/code-frame@npm:^7.0.0":
|
||||||
version: 7.27.1
|
version: 7.27.1
|
||||||
resolution: "@babel/code-frame@npm:7.27.1"
|
resolution: "@babel/code-frame@npm:7.27.1"
|
||||||
@@ -1310,13 +1315,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"a-sync-waterfall@npm:^1.0.0":
|
|
||||||
version: 1.0.1
|
|
||||||
resolution: "a-sync-waterfall@npm:1.0.1"
|
|
||||||
checksum: 10c0/1c7b258da2c77eb1447dcc683afb10ca3dc8880de990562ccbb7b282538aba01e910345ce9e8500c1458272c7866b85fcfa5ca8159e33550b011ab5c586ec5a4
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"abbrev@npm:^3.0.0":
|
"abbrev@npm:^3.0.0":
|
||||||
version: 3.0.1
|
version: 3.0.1
|
||||||
resolution: "abbrev@npm:3.0.1"
|
resolution: "abbrev@npm:3.0.1"
|
||||||
@@ -1487,13 +1485,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"asap@npm:^2.0.3":
|
|
||||||
version: 2.0.6
|
|
||||||
resolution: "asap@npm:2.0.6"
|
|
||||||
checksum: 10c0/c6d5e39fe1f15e4b87677460bd66b66050cd14c772269cee6688824c1410a08ab20254bb6784f9afb75af9144a9f9a7692d49547f4d19d715aeb7c0318f3136d
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"async-function@npm:^1.0.0":
|
"async-function@npm:^1.0.0":
|
||||||
version: 1.0.0
|
version: 1.0.0
|
||||||
resolution: "async-function@npm:1.0.0"
|
resolution: "async-function@npm:1.0.0"
|
||||||
@@ -1935,13 +1926,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"commander@npm:^5.1.0":
|
|
||||||
version: 5.1.0
|
|
||||||
resolution: "commander@npm:5.1.0"
|
|
||||||
checksum: 10c0/da9d71dbe4ce039faf1fe9eac3771dca8c11d66963341f62602f7b66e36d2a3f8883407af4f9a37b1db1a55c59c0c1325f186425764c2e963dc1d67aec2a4b6d
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"common-ancestor-path@npm:^1.0.1":
|
"common-ancestor-path@npm:^1.0.1":
|
||||||
version: 1.0.1
|
version: 1.0.1
|
||||||
resolution: "common-ancestor-path@npm:1.0.1"
|
resolution: "common-ancestor-path@npm:1.0.1"
|
||||||
@@ -4697,24 +4681,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"nunjucks@npm:^3.2.4":
|
|
||||||
version: 3.2.4
|
|
||||||
resolution: "nunjucks@npm:3.2.4"
|
|
||||||
dependencies:
|
|
||||||
a-sync-waterfall: "npm:^1.0.0"
|
|
||||||
asap: "npm:^2.0.3"
|
|
||||||
commander: "npm:^5.1.0"
|
|
||||||
peerDependencies:
|
|
||||||
chokidar: ^3.3.0
|
|
||||||
peerDependenciesMeta:
|
|
||||||
chokidar:
|
|
||||||
optional: true
|
|
||||||
bin:
|
|
||||||
nunjucks-precompile: bin/precompile
|
|
||||||
checksum: 10c0/7fe5197559b7c09972c79e2a86f9c093459b9075bc9b41134cd2bc599ae93567b53bd09d472a748edc736192d9ccd2998aa8c20cfcbe6a3fffd281f91897c888
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"nx@npm:>=21.5.3 < 23.0.0":
|
"nx@npm:>=21.5.3 < 23.0.0":
|
||||||
version: 22.3.3
|
version: 22.3.3
|
||||||
resolution: "nx@npm:22.3.3"
|
resolution: "nx@npm:22.3.3"
|
||||||
|
|||||||
Reference in New Issue
Block a user