Skip to content

Commit 0da6b62

Browse files
titouanmathistitouanmathis
committed
Merge branch 'release/2.0.0-beta.7'
2 parents 95f659d + e48d376 commit 0da6b62

File tree

12 files changed

+156
-85
lines changed

12 files changed

+156
-85
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@studiometa/js-toolkit-workspace",
3-
"version": "2.0.0-beta.6",
3+
"version": "2.0.0-beta.7",
44
"private": true,
55
"workspaces": [
66
"packages/*"

‎packages/demo/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@studiometa/js-toolkit-demo",
3-
"version": "2.0.0-beta.6",
3+
"version": "2.0.0-beta.7",
44
"private": true,
55
"type": "commonjs",
66
"scripts": {

‎packages/demo/src/js/components/Parallax.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default class Parallax extends withScrolledInView(Base) {
1717
styler;
1818

1919
mounted() {
20+
super.mounted();
2021
this.styler = stylefire(this.$refs.target);
2122
}
2223

@@ -30,10 +31,10 @@ export default class Parallax extends withScrolledInView(Base) {
3031
return options;
3132
}
3233

33-
scrolledInView({ progress }) {
34+
scrolledInView(props) {
3435
this.styler.set({
35-
y: map(progress.y, 0, 1, 100, -100) * this.freezedOptions.speed,
36-
scale: map(progress.x, 0, 1, 0.5, 2),
36+
y: map(props.dampedProgress.y, 0, 1, 100, -100) * this.freezedOptions.speed,
37+
scale: map(props.dampedProgress.x, 0, 1, 0.5, 2),
3738
});
3839
}
3940
}

‎packages/demo/src/templates/pages/index.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@
293293
<hr class="my-10" />
294294

295295
<div class="flex items-center justify-around h-screen">
296-
{% include '@components/parallax.twig' with { speed: 1, debug: true } %}
296+
{% include '@components/parallax.twig' with { speed: 1 } %}
297297
{% include '@components/parallax.twig' with { speed: 2 } %}
298298
{% include '@components/parallax.twig' with { speed: 3 } %}
299299
</div>

‎packages/docs/.vitepress/theme/components/Badge.vue‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,33 +21,30 @@
2121
<style scoped>
2222
.badge {
2323
display: inline-block;
24-
font-size: 14px;
24+
font-size: 0.75em;
2525
font-weight: bold;
26-
height: 18px;
27-
line-height: 18px;
28-
border-radius: 3px;
29-
padding: 0 6px;
26+
line-height: 1;
27+
border-radius: 0.25em;
28+
padding: 0.5em 0.75em;
3029
color: #fff;
31-
background-color: #42b983;
32-
}
33-
34-
.badge.tip {
35-
background-color: #3f9ee3;
30+
background-color: var(--c-brand);
3631
}
3732
3833
.badge.green {
39-
background-color: #42b983;
34+
background-color: var(--c-brand);
4035
}
36+
4137
.badge.error {
4238
background-color: #da5961;
4339
}
40+
4441
.badge.warning,
4542
.badge.warn,
4643
.badge.yellow {
4744
background-color: #e7c000;
4845
}
46+
4947
.badge + .badge {
5048
margin-left: 5px;
5149
}
52-
5350
</style>

‎packages/docs/api/decorators/withScrolledInView.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,46 @@ This decorator uses the [`withMountWhenInView`](./withMountWhenInView.html) deco
2424

2525
## API
2626

27+
### Instance properties
28+
29+
#### `dampFactor`
30+
31+
- Type `number`
32+
- Default `0.1`
33+
34+
The factor used by the [`damp` function](/utils/math/damp.md) for the `dampedProgress` values. It can be configured by defining a `dampFactor` property in the class using this decorator:
35+
36+
```js {8}
37+
import { Base, withScrolledInView } from '@studiometa/js-toolkit';
38+
39+
class Component extends withScrolledInView(Base) {
40+
static config = {
41+
name: 'Component',
42+
};
43+
44+
dampFactor = 0.1;
45+
}
46+
```
47+
48+
#### `dampPrecision`
49+
50+
- Type `number`
51+
- Default `0.001`
52+
53+
The precision used by the [`damp` function](/utils/math/damp.md) for the `dampedProgress` values.
54+
55+
```js {8}
56+
import { Base, withScrolledInView } from '@studiometa/js-toolkit';
57+
58+
class Component extends withScrolledInView(Base) {
59+
static config = {
60+
name: 'Component',
61+
};
62+
63+
dampPrecision = 0.001;
64+
}
65+
```
66+
2767
### Custom hooks
2868

2969
#### `scrolledInView`
@@ -37,6 +77,7 @@ The `scrolledInView` class method will be triggered for each frame of the compon
3777
- `props.end` (`{ x: number, y: number }`): The scroll position were the element is not visible anymore.
3878
- `props.current` (`{ x: number, y: number }`): The current scroll position, clamped in the `props.start` and `props.end` range.
3979
- `props.progress` (`{ x: number, y: number }`): The progress of the element between `props.start` and `props.end` mapped to a `0–1` range.
80+
- `props.dampedProgress` (`{ x: number, y: number }`): The progress values smoothed with the [`damp` function](/utils/math/damp.md).
4081

4182
## Examples
4283

‎packages/docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@studiometa/js-toolkit-docs",
3-
"version": "2.0.0-beta.6",
3+
"version": "2.0.0-beta.7",
44
"private": true,
55
"scripts": {
66
"dev": "vitepress dev .",

‎packages/js-toolkit/decorators/withScrolledInView.js‎

Lines changed: 90 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import withMountWhenInView from './withMountWhenInView.js';
2-
import { clamp, clamp01 } from '../utils/index.js';
2+
import { damp, clamp, clamp01 } from '../utils/index.js';
33

44
/**
55
* @typedef {import('../Base').default} Base
@@ -46,55 +46,91 @@ export default function withScrolledInView(BaseClass) {
4646
x: 0,
4747
y: 0,
4848
},
49+
dampedProgress: {
50+
x: 0,
51+
y: 0,
52+
},
4953
};
5054

5155
/**
52-
* Class constructor.
53-
* @param {HTMLElement} element
56+
* Factor used for the `dampedProgress` props.
57+
* @type {number}
58+
*/
59+
dampFactor = 0.1;
60+
61+
/**
62+
* Precision for the `dampedProgress` props.
63+
* @type {number}
64+
*/
65+
dampPrecision = 0.001;
66+
67+
/**
68+
* Mounted hook.
69+
* @returns {void}
70+
*/
71+
mounted() {
72+
this.__setProps();
73+
}
74+
75+
/**
76+
* Resized hook.
77+
* @returns {void}
78+
*/
79+
resized() {
80+
this.__setProps();
81+
}
82+
83+
/**
84+
* Scrolled hook.
85+
* @param {any} props
86+
* @returns {void}
87+
*/
88+
scrolled(props) {
89+
if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {
90+
this.$services.enable('ticked');
91+
}
92+
}
93+
94+
/**
95+
* Raf hook.
96+
* @returns {void}
5497
*/
55-
constructor(element) {
56-
super(element);
57-
58-
this.$on('mounted', () => this.__setProps());
59-
this.$on('resized', () => this.__setProps());
60-
61-
this.$on(
62-
'scrolled',
63-
/**
64-
* @typedef {import('../services/scroll').ScrollServiceProps} ScrollServiceProps
65-
* @param {Event & { detail: [ScrollServiceProps] }} event
66-
*/
67-
({ detail: [props] }) => {
68-
this.$services.toggle('ticked', props.changed.y || props.changed.x);
69-
}
98+
ticked() {
99+
// X axis
100+
this.__props.current.x = clamp(window.pageXOffset, this.__props.start.x, this.__props.end.x);
101+
this.__props.progress.x = clamp01(
102+
(this.__props.current.x - this.__props.start.x) /
103+
(this.__props.end.x - this.__props.start.x)
104+
);
105+
this.__props.dampedProgress.x = damp(
106+
this.__props.progress.x,
107+
this.__props.dampedProgress.x,
108+
this.dampFactor,
109+
this.dampPrecision
70110
);
71111

72-
this.$on('ticked', () => {
73-
// X axis
74-
this.__props.current.x = clamp(
75-
window.pageXOffset,
76-
this.__props.start.x,
77-
this.__props.end.x
78-
);
79-
this.__props.progress.x = clamp01(
80-
(this.__props.current.x - this.__props.start.x) /
81-
(this.__props.end.x - this.__props.start.x)
82-
);
83-
84-
// Y axis
85-
this.__props.current.y = clamp(
86-
window.pageYOffset,
87-
this.__props.start.y,
88-
this.__props.end.y
89-
);
90-
this.__props.progress.y = clamp01(
91-
(this.__props.current.y - this.__props.start.y) /
92-
(this.__props.end.y - this.__props.start.y)
93-
);
94-
95-
// @ts-ignore
96-
this.__callMethod('scrolledInView', this.__props);
97-
});
112+
// Y axis
113+
this.__props.current.y = clamp(window.pageYOffset, this.__props.start.y, this.__props.end.y);
114+
this.__props.progress.y = clamp01(
115+
(this.__props.current.y - this.__props.start.y) /
116+
(this.__props.end.y - this.__props.start.y)
117+
);
118+
this.__props.dampedProgress.y = damp(
119+
this.__props.progress.y,
120+
this.__props.dampedProgress.y,
121+
this.dampFactor,
122+
this.dampPrecision
123+
);
124+
125+
if (
126+
this.__props.dampedProgress.x === this.__props.progress.x &&
127+
this.__props.dampedProgress.y === this.__props.progress.y
128+
) {
129+
this.$services.disable('ticked');
130+
}
131+
132+
// @ts-ignore
133+
this.__callMethod('scrolledInView', this.__props);
98134
}
99135

100136
/**
@@ -118,24 +154,16 @@ export default function withScrolledInView(BaseClass) {
118154
const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
119155
const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));
120156

121-
this.__props = {
122-
start: {
123-
x: xStart,
124-
y: yStart,
125-
},
126-
end: {
127-
x: xEnd,
128-
y: yEnd,
129-
},
130-
current: {
131-
x: xCurrent,
132-
y: yCurrent,
133-
},
134-
progress: {
135-
x: xProgress,
136-
y: yProgress,
137-
},
138-
};
157+
this.__props.start.x = xStart;
158+
this.__props.start.y = yStart;
159+
this.__props.end.x = xEnd;
160+
this.__props.end.y = yEnd;
161+
this.__props.current.x = xCurrent;
162+
this.__props.current.y = yCurrent;
163+
this.__props.progress.x = xProgress;
164+
this.__props.progress.y = yProgress;
165+
this.__props.dampedProgress.x = damp(xProgress, this.__props.dampedProgress.x);
166+
this.__props.dampedProgress.y = damp(yProgress, this.__props.dampedProgress.y);
139167
}
140168
};
141169
}

‎packages/js-toolkit/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@studiometa/js-toolkit",
3-
"version": "2.0.0-beta.6",
3+
"version": "2.0.0-beta.7",
44
"description": "A set of useful little bits of JavaScript to boost your project! 🚀",
55
"publishConfig": {
66
"access": "public"

0 commit comments

Comments
 (0)