js-superellipse 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -0
- package/dist/superellipse.js +4228 -0
- package/dist/superellipse.min.js +46 -0
- package/package.json +20 -0
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# Superellipse Shape Engine
|
|
2
|
+
|
|
3
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
**Суперэллипс для любых DOM-элементов** – плавное изменение формы углов от вогнутых прямоугольных до выгнутых прямоугольных, включая скос, круглые углы и классический суперэллипс.
|
|
7
|
+
|
|
8
|
+
## Возможности
|
|
9
|
+
|
|
10
|
+
- Два режима работы:
|
|
11
|
+
- `clip-path` – лёгкий, только CSS
|
|
12
|
+
- `svg-layer` – полнофункциональный с поддержкой `background`, `border`, `box-shadow`
|
|
13
|
+
- Автоматическое отслеживание изменений размеров, стилей, видимости и атрибутов (`ResizeObserver`, `MutationObserver`, `IntersectionObserver`)
|
|
14
|
+
- Умное кэширование вычисленных стилей для минимизации перерисовок
|
|
15
|
+
- Несколько способов инициализации: селектор, элемент, коллекция, глобальная функция
|
|
16
|
+
- Поддержка `:hover`-триггеров (включая соседние комбинаторы `+` и `~`)
|
|
17
|
+
- Fallback для браузеров без поддержки `:has()`
|
|
18
|
+
|
|
19
|
+
## Установка
|
|
20
|
+
|
|
21
|
+
### Прямая загрузка
|
|
22
|
+
Скачайте [последний релиз](https://github.com/f4n70m/js-superellipse/releases) и подключите скрипт:
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script src="dist/superellipse.min.js"></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Через npm (из GitHub)
|
|
29
|
+
```bash
|
|
30
|
+
npm install git+https://github.com/f4n70m/js-superellipse.git
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Как ES-модуль
|
|
34
|
+
```js
|
|
35
|
+
import { superellipseInit, SuperellipseController, jsse_generateSuperellipsePath } from 'js-superellipse';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Быстрый старт
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
// Инициализация элемента
|
|
42
|
+
const element = document.querySelector('.my-element');
|
|
43
|
+
const controller = element.superellipseInit({
|
|
44
|
+
mode: 'svg-layer',
|
|
45
|
+
curveFactor: 1.2,
|
|
46
|
+
precision: 3
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// Изменение коэффициента кривизны
|
|
50
|
+
controller.setCurveFactor(0.8);
|
|
51
|
+
|
|
52
|
+
// Переключение режима
|
|
53
|
+
controller.switchMode('clip-path');
|
|
54
|
+
|
|
55
|
+
// Инициализация всех элементов с классом
|
|
56
|
+
superellipseInit('.rounded', { mode: 'clip-path' });
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## API
|
|
60
|
+
|
|
61
|
+
| Метод | Описание |
|
|
62
|
+
|-------|----------|
|
|
63
|
+
| `superellipseInit(target, options)` | Инициализирует один или несколько элементов |
|
|
64
|
+
| `element.superellipseInit(options)` | Инициализирует один элемент |
|
|
65
|
+
| `element.superellipse` | Геттер контроллера |
|
|
66
|
+
| `controller.enable()` / `.disable()` | Активация / деактивация |
|
|
67
|
+
| `controller.setCurveFactor(value)` | Установить коэффициент кривизны (-2 … 2) |
|
|
68
|
+
| `controller.setPrecision(value)` | Установить точность пути |
|
|
69
|
+
| `controller.switchMode(mode)` | Переключить режим (`'svg-layer'` / `'clip-path'`) |
|
|
70
|
+
| `controller.on(event, callback)` | Подписка на события `update`, `activate`, `deactivate`, `error` |
|
|
71
|
+
|
|
72
|
+
Полная документация по API находится в папке [`docs/`](./docs/).
|
|
73
|
+
|
|
74
|
+
## Режимы работы
|
|
75
|
+
|
|
76
|
+
| Режим | Производительность | `background` / `border` / `box-shadow` | Лишние DOM-узлы |
|
|
77
|
+
|-------|-------------------|----------------------------------------|-----------------|
|
|
78
|
+
| `clip-path` | Высокая | ❌ | Нет |
|
|
79
|
+
| `svg-layer` | Средняя | ✅ | Да (SVG + div) |
|
|
80
|
+
|
|
81
|
+
В большинстве случаев рекомендуется `svg-layer`, так как он сохраняет все визуальные стили. Используйте `clip-path` для изображений или когда важна производительность.
|
|
82
|
+
|
|
83
|
+
## Примеры
|
|
84
|
+
|
|
85
|
+
Живые демо находятся в папке [`examples/`](./examples/).
|
|
86
|
+
Чтобы запустить их локально, запустите статический сервер (например, `npx http-server`) и откройте `examples/index.html`.
|
|
87
|
+
|
|
88
|
+
## Документация
|
|
89
|
+
|
|
90
|
+
Полная документация находится в папке [`docs/`](./docs/):
|
|
91
|
+
|
|
92
|
+
- [Введение](./docs/00-index.md) – Основная информация
|
|
93
|
+
- [API Reference](./docs/01-api.md) – все методы, классы и опции
|
|
94
|
+
- [Режимы работы](./docs/02-modes.md) – `clip-path` vs `svg-layer`
|
|
95
|
+
- [Продвинутые возможности](./docs/03-advanced.md) – hover-триггеры, события, отладка
|
|
96
|
+
- [Примеры использования](./docs/04-examples.md) – готовые фрагменты кода
|
|
97
|
+
- [FAQ и ограничения](./docs/05-faq.md) – известные проблемы и решения
|
|
98
|
+
|
|
99
|
+
## Поддержка браузеров
|
|
100
|
+
|
|
101
|
+
Современные браузеры с поддержкой:
|
|
102
|
+
- `ResizeObserver`, `MutationObserver`, `IntersectionObserver`
|
|
103
|
+
- `CSS.supports()`
|
|
104
|
+
- ES6+
|
|
105
|
+
|
|
106
|
+
Работает в Chrome 64+, Firefox 69+, Safari 12.1+, Edge 79+.
|
|
107
|
+
|
|
108
|
+
## Лицензия
|
|
109
|
+
|
|
110
|
+
MIT © [f4n70m](https://github.com/f4n70m)
|