Compare commits
8 Commits
@advdomini
...
@advdomini
| Author | SHA1 | Date | |
|---|---|---|---|
|
8f2cae3401
|
|||
|
a0074442ae
|
|||
|
791c160125
|
|||
|
095724c175
|
|||
|
f30793af80
|
|||
|
3605551f16
|
|||
|
f8d793195c
|
|||
|
a655e7b5e4
|
2
.yarn/sdks/eslint/package.json
vendored
2
.yarn/sdks/eslint/package.json
vendored
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "eslint",
|
"name": "eslint",
|
||||||
"version": "9.39.2-sdk",
|
"version": "10.0.0-sdk",
|
||||||
"main": "./lib/api.js",
|
"main": "./lib/api.js",
|
||||||
"type": "commonjs",
|
"type": "commonjs",
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|||||||
2
.yarn/sdks/prettier/package.json
vendored
2
.yarn/sdks/prettier/package.json
vendored
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "prettier",
|
"name": "prettier",
|
||||||
"version": "3.8.0-sdk",
|
"version": "3.8.1-sdk",
|
||||||
"main": "./index.cjs",
|
"main": "./index.cjs",
|
||||||
"type": "commonjs",
|
"type": "commonjs",
|
||||||
"bin": "./bin/prettier.cjs"
|
"bin": "./bin/prettier.cjs"
|
||||||
|
|||||||
@@ -7,8 +7,8 @@
|
|||||||
],
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@advdominion/eslint-config": "workspace:*",
|
"@advdominion/eslint-config": "workspace:*",
|
||||||
"eslint": "^9.39.2",
|
"eslint": "^10.0.0",
|
||||||
"lerna": "^9.0.3",
|
"lerna": "^9.0.4",
|
||||||
"prettier": "^3.8.0"
|
"prettier": "^3.8.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
25
packages/css-var/README.md
Normal file
25
packages/css-var/README.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# css-var
|
||||||
|
|
||||||
|
Получение значений CSS-переменных в JS
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--z-index: 100;
|
||||||
|
--height: 100px;
|
||||||
|
--duration-ms: 100ms;
|
||||||
|
--duration-s: 100s;
|
||||||
|
--easing: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { cssVar } from '@advdominion/css-var';
|
||||||
|
|
||||||
|
cssVar('--z-index'); // '1' (String)
|
||||||
|
cssVar('--height'); // '100px' (String)
|
||||||
|
cssVar('--duration-ms'); // 100 (Number)
|
||||||
|
cssVar('--duration-s'); // 100 (Number)
|
||||||
|
cssVar('--easing'); // cubic-bezier(0.4, 0, 0.2, 1) (String)
|
||||||
|
```
|
||||||
9
packages/css-var/index.js
Normal file
9
packages/css-var/index.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
export const cssVar = (name, element = document.documentElement) => {
|
||||||
|
const value = window.getComputedStyle(element).getPropertyValue(name);
|
||||||
|
const durationRegExp = /(^[\d.]+)(ms|s)$/;
|
||||||
|
if (durationRegExp.test(value)) {
|
||||||
|
const [, numericValue, unit] = durationRegExp.exec(value);
|
||||||
|
return unit === 's' ? numericValue * 1000 : Number(numericValue);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
};
|
||||||
14
packages/css-var/package.json
Normal file
14
packages/css-var/package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/css-var",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -22,19 +22,19 @@ const config = [
|
|||||||
{
|
{
|
||||||
rules: {
|
rules: {
|
||||||
...{
|
...{
|
||||||
|
// Включаем правила из категории Possible Problems, которые не включенны в recommended
|
||||||
'array-callback-return': 'error',
|
'array-callback-return': 'error',
|
||||||
'no-await-in-loop': 'warn',
|
'no-await-in-loop': 'warn',
|
||||||
'no-duplicate-imports': 'warn',
|
'no-duplicate-imports': 'warn',
|
||||||
'no-promise-executor-return': 'error',
|
'no-promise-executor-return': 'error',
|
||||||
'no-self-compare': 'error',
|
'no-self-compare': 'error',
|
||||||
'no-template-curly-in-string': 'warn',
|
'no-template-curly-in-string': 'warn',
|
||||||
'no-unassigned-vars': 'warn',
|
|
||||||
'no-unmodified-loop-condition': 'error',
|
'no-unmodified-loop-condition': 'error',
|
||||||
'no-unreachable-loop': 'error',
|
'no-unreachable-loop': 'error',
|
||||||
'no-use-before-define': 'error',
|
'no-use-before-define': 'error',
|
||||||
'no-useless-assignment': 'warn',
|
|
||||||
},
|
},
|
||||||
...{
|
...{
|
||||||
|
// Включаем правила из категории Suggestions, которые не включенны в recommended
|
||||||
'dot-notation': 'warn',
|
'dot-notation': 'warn',
|
||||||
'eqeqeq': 'error',
|
'eqeqeq': 'error',
|
||||||
'no-implicit-coercion': 'warn',
|
'no-implicit-coercion': 'warn',
|
||||||
@@ -49,6 +49,10 @@ const config = [
|
|||||||
'prefer-const': 'warn',
|
'prefer-const': 'warn',
|
||||||
'prefer-template': 'warn',
|
'prefer-template': 'warn',
|
||||||
},
|
},
|
||||||
|
...{
|
||||||
|
// Переопределяем правила, которые включены в recommended
|
||||||
|
'no-irregular-whitespace': ['error', { skipTemplates: true }],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -74,7 +78,6 @@ const config = [
|
|||||||
'unicorn/filename-case': ['warn', { cases: { kebabCase: true, pascalCase: true } }],
|
'unicorn/filename-case': ['warn', { cases: { kebabCase: true, pascalCase: true } }],
|
||||||
'unicorn/prefer-global-this': 'off',
|
'unicorn/prefer-global-this': 'off',
|
||||||
'unicorn/prefer-import-meta-properties': 'warn',
|
'unicorn/prefer-import-meta-properties': 'warn',
|
||||||
'unicorn/prefer-top-level-await': 'off',
|
|
||||||
'unicorn/prevent-abbreviations': 'off',
|
'unicorn/prevent-abbreviations': 'off',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -107,7 +110,7 @@ const config = [
|
|||||||
'vue/no-constant-condition': 'error',
|
'vue/no-constant-condition': 'error',
|
||||||
'vue/no-empty-pattern': 'error',
|
'vue/no-empty-pattern': 'error',
|
||||||
'vue/no-implicit-coercion': 'warn',
|
'vue/no-implicit-coercion': 'warn',
|
||||||
'vue/no-irregular-whitespace': 'error',
|
'vue/no-irregular-whitespace': ['error', { skipTemplates: true }],
|
||||||
'vue/no-loss-of-precision': 'error',
|
'vue/no-loss-of-precision': 'error',
|
||||||
'vue/no-negated-condition': 'warn',
|
'vue/no-negated-condition': 'warn',
|
||||||
'vue/no-sparse-arrays': 'error',
|
'vue/no-sparse-arrays': 'error',
|
||||||
|
|||||||
@@ -12,15 +12,15 @@
|
|||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint/js": "^9.39.2",
|
"@eslint/js": "^10.0.1",
|
||||||
"eslint-config-prettier": "^10.1.8",
|
"eslint-config-prettier": "^10.1.8",
|
||||||
"eslint-plugin-simple-import-sort": "^12.1.1",
|
"eslint-plugin-simple-import-sort": "^12.1.1",
|
||||||
"eslint-plugin-unicorn": "^62.0.0",
|
"eslint-plugin-unicorn": "^63.0.0",
|
||||||
"eslint-plugin-vue": "^10.7.0",
|
"eslint-plugin-vue": "^10.7.0",
|
||||||
"globals": "^17.0.0",
|
"globals": "^17.3.0",
|
||||||
"vue-eslint-parser": "^10.2.0"
|
"vue-eslint-parser": "^10.2.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"eslint": "^9.39.0"
|
"eslint": "^10.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"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user