vevet 4.0.2 → 4.2.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 +28 -31
- package/lib/cjs/Vevet/events/createViewport/index.js +20 -22
- package/lib/cjs/Vevet/events/createViewport/index.js.map +1 -1
- package/lib/cjs/Vevet/index.js +2 -4
- package/lib/cjs/Vevet/index.js.map +1 -1
- package/lib/cjs/utils/math/lerp.js +1 -1
- package/lib/cjs/utils/math/lerp.js.map +1 -1
- package/lib/cjs/version.js +1 -1
- package/lib/esm/Vevet/events/createViewport/index.js +20 -22
- package/lib/esm/Vevet/events/createViewport/index.js.map +1 -1
- package/lib/esm/Vevet/index.js +2 -4
- package/lib/esm/Vevet/index.js.map +1 -1
- package/lib/esm/utils/math/lerp.js +1 -1
- package/lib/esm/utils/math/lerp.js.map +1 -1
- package/lib/esm/version.js +1 -1
- package/lib/styles/mixins/_viewport.scss +0 -8
- package/lib/types/Vevet/events/createViewport/index.d.ts +1 -1
- package/lib/types/Vevet/events/createViewport/index.d.ts.map +1 -1
- package/lib/types/Vevet/events/createViewport/types.d.ts +4 -4
- package/lib/types/Vevet/events/createViewport/types.d.ts.map +1 -1
- package/lib/types/Vevet/global.d.ts +0 -3
- package/lib/types/Vevet/global.d.ts.map +1 -1
- package/lib/types/Vevet/index.d.ts.map +1 -1
- package/lib/types/Vevet/types.d.ts +0 -6
- package/lib/types/Vevet/types.d.ts.map +1 -1
- package/lib/types/utils/math/lerp.d.ts.map +1 -1
- package/lib/types/version.d.ts +1 -1
- package/package.json +2 -2
- package/src/Vevet/events/createViewport/index.ts +25 -24
- package/src/Vevet/events/createViewport/stories/index.tsx +0 -2
- package/src/Vevet/events/createViewport/types.ts +4 -4
- package/src/Vevet/global.ts +0 -3
- package/src/Vevet/index.ts +2 -4
- package/src/Vevet/types.ts +0 -7
- package/src/styles/mixins/_viewport.scss +0 -8
- package/src/utils/math/lerp.ts +1 -1
- package/src/version.ts +1 -1
package/README.md
CHANGED
|
@@ -1,28 +1,15 @@
|
|
|
1
|
-
# Vevet -
|
|
1
|
+
# Vevet - a JavaScript Library for Creative Development
|
|
2
2
|
|
|
3
|
-
**Vevet** is a flexible
|
|
3
|
+
**Vevet** is a flexible JavaScript library designed for creative web development. It offers pre-built solutions like smooth scrolling, text splitting, custom cursors, and other interactive components, allowing developers to enhance the visual and functional aspects of their websites.
|
|
4
4
|
|
|
5
5
|
Vevet is highly customizable, seamlessly integrates into existing projects, and provides basic and advanced functionalities for developers aiming to boost site interactivity.
|
|
6
6
|
|
|
7
7
|
 
|
|
8
8
|
|
|
9
9
|
### Links
|
|
10
|
+
- [Demo](https://antonbobrov.github.io/vevet-demo/)
|
|
10
11
|
- [Documentation](https://antonbobrov.github.io/vevet/)
|
|
11
12
|
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
## Development Environment
|
|
15
|
-
- **Node.js**: v20.17.0
|
|
16
|
-
|
|
17
|
-
## Installation via NPM
|
|
18
|
-
To install Vevet, use the following command:
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm install vevet
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
13
|
## Library Contents
|
|
27
14
|
|
|
28
15
|
### Core Features [Demo](https://antonbobrov.github.io/vevet-demo/application/) / [Docs](https://antonbobrov.github.io/vevet/interfaces/IVevet.html):
|
|
@@ -31,34 +18,43 @@ npm install vevet
|
|
|
31
18
|
- **Browser Information**
|
|
32
19
|
- `vevet.osName`, `vevet.browserName`, `vevet.isWebpSupported` (Check WebP support)
|
|
33
20
|
- **Page Load Detection**
|
|
34
|
-
- `vevet.pageLoad` (Detects when the page has loaded)
|
|
35
21
|
- `vevet.isPageLoaded`, `vevet.onPageLoad`
|
|
36
22
|
- **Viewport Management**
|
|
37
23
|
- `vevet.viewport` (Handles resize events efficiently)
|
|
24
|
+
- `width`, `height`, `vw`, `vh`, `isDesktop`, `isTablet`, `isPhone`, `isPortrait`, `isLandscape`, `dpr`, `lowerDpr `
|
|
38
25
|
|
|
39
|
-
### Animation
|
|
26
|
+
### Animation:
|
|
40
27
|
- **AnimationFrame** [Demo](https://antonbobrov.github.io/vevet-demo/animation-frame/) / [Docs](https://antonbobrov.github.io/vevet/classes/AnimationFrame.html): Simplifies the use of `requestAnimationFrame`, offering custom FPS control.
|
|
41
|
-
- **
|
|
42
|
-
|
|
28
|
+
- **Timeline** [Demo](https://antonbobrov.github.io/vevet-demo/timeline/) / [Docs](https://antonbobrov.github.io/vevet/classes/Timeline.html): Helps create simple, timeline-based animations.
|
|
29
|
+
|
|
30
|
+
### Graphics:
|
|
31
|
+
- **Ctx2D** [Demo](https://antonbobrov.github.io/vevet-demo/ctx2d/) / [Docs](https://antonbobrov.github.io/vevet/classes/Ctx2D.html): Manages canvas creation and 2D context with automatic resizing.
|
|
32
|
+
- **Ctx2DPrerender** [Demo](https://antonbobrov.github.io/vevet-demo/ctx2d-prerender/) / [Docs](https://antonbobrov.github.io/vevet/classes/Ctx2DPrerender.html): Optimizes texture handling by pre-rendering images for better performance.
|
|
43
33
|
|
|
44
|
-
###
|
|
45
|
-
- **CustomCursor**: Create a custom, smooth cursor for your website.
|
|
34
|
+
### Events:
|
|
46
35
|
- **DraggerDirection** [Demo](https://antonbobrov.github.io/vevet-demo/dragger-direction/) / [Docs](https://antonbobrov.github.io/vevet/classes/DraggerDirection.html): Detects the direction of swipes.
|
|
47
36
|
- **DraggerMove** [Demo](https://antonbobrov.github.io/vevet-demo/dragger-move/) / [Docs](https://antonbobrov.github.io/vevet/classes/DraggerMove.html): Ideal for building custom carousels with easy drag handling.
|
|
37
|
+
- **ScrollView** [Demo](https://antonbobrov.github.io/vevet-demo/scroll-view/) / [Docs](https://antonbobrov.github.io/vevet/classes/ScrollView.html): Manages elements' visibility in and out of the viewport.
|
|
38
|
+
- **SectionScrollProgress** [Demo](https://antonbobrov.github.io/vevet-demo/section-scroll-progress/) / [Docs](https://antonbobrov.github.io/vevet/classes/SectionScrollProgress.html): Tracks scroll progress within a specific section.
|
|
39
|
+
- **SlideProgress** [Demo](https://antonbobrov.github.io/vevet-demo/slide-progress/) / [Docs](https://antonbobrov.github.io/vevet/classes/SlideProgress.html): Helps you create a draggable carousel.
|
|
40
|
+
|
|
41
|
+
### Components:
|
|
42
|
+
- **CustomCursor** [Demo](https://antonbobrov.github.io/vevet-demo/custom-cursor/) / [Docs](https://antonbobrov.github.io/vevet/classes/CustomCursor.html): Create a custom, smooth cursor for your website.
|
|
48
43
|
- **Marquee** [Demo](https://antonbobrov.github.io/vevet-demo/marquee/) / [Docs](https://antonbobrov.github.io/vevet/classes/Marquee.html): Efficiently creates continuously running text.
|
|
49
44
|
- **Preloader** [Demo](https://antonbobrov.github.io/vevet-demo/preloader/) / [Docs](https://antonbobrov.github.io/vevet/classes/Preloader.html): Hides content until the page is fully loaded.
|
|
50
45
|
- **ProgressPreloader** [Demo](https://antonbobrov.github.io/vevet-demo/progress-preloader/) / [Docs](https://antonbobrov.github.io/vevet/classes/ProgressPreloader.html): A more powerful version, displaying real-time loading progress.
|
|
51
46
|
- **ScrollBar** [Demo](https://antonbobrov.github.io/vevet-demo/scrollbar/) / [Docs](https://antonbobrov.github.io/vevet/classes/ScrollBar.html): Customizes scrollbars by hiding default system bars.
|
|
52
|
-
- **
|
|
53
|
-
- **SectionScrollProgress**: Tracks scroll progress within a specific section.
|
|
54
|
-
- **SlideProgress**: Helps you create a draggable carousel.
|
|
55
|
-
- **CustomScroll**: Provides simple and smooth scrolling functionality.
|
|
47
|
+
- **CustomScroll** [Demo](https://antonbobrov.github.io/vevet-demo/custom-scroll/) / [Docs](https://antonbobrov.github.io/vevet/classes/CustomScroll.html): Provides simple and smooth scrolling functionality.
|
|
56
48
|
- **CustomScrollDragPlugin**: Adds drag-based navigation to smooth scrolling.
|
|
57
49
|
- **CustomScrollKeyboardPlugin**: Enables keyboard-based scrolling.
|
|
58
|
-
- **SplitText
|
|
59
|
-
- **Timeline**: Helps create simple, timeline-based animations.
|
|
50
|
+
- **SplitText** [Demo](https://antonbobrov.github.io/vevet-demo/split-text/) / [Docs](https://antonbobrov.github.io/vevet/classes/SplitText.html): Splits text into letters, words, or lines, offering high performance for animations, similar to SplitText or SplitType, but free and optimized.
|
|
60
51
|
|
|
61
|
-
|
|
52
|
+
## Installation via NPM
|
|
53
|
+
To install Vevet, use the following command:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
npm install vevet
|
|
57
|
+
```
|
|
62
58
|
|
|
63
59
|
## Importing Styles
|
|
64
60
|
|
|
@@ -80,8 +76,6 @@ For example, to import styles for the custom cursor:
|
|
|
80
76
|
@import '~vevet/lib/styles/components/CustomCursor';
|
|
81
77
|
```
|
|
82
78
|
|
|
83
|
-
---
|
|
84
|
-
|
|
85
79
|
## Example: Initializing a Component
|
|
86
80
|
|
|
87
81
|
Below is an example of how to initialize the `CustomCursor` component:
|
|
@@ -94,6 +88,9 @@ const instance = new CustomCursor({
|
|
|
94
88
|
});
|
|
95
89
|
```
|
|
96
90
|
|
|
91
|
+
## Development Environment
|
|
92
|
+
- **Node.js**: v20.17.0
|
|
93
|
+
|
|
97
94
|
## License
|
|
98
95
|
|
|
99
96
|
This project is licensed under the terms of the
|
|
@@ -4,8 +4,11 @@ exports.createViewport = void 0;
|
|
|
4
4
|
var vevet_dom_1 = require("vevet-dom");
|
|
5
5
|
var types_1 = require("./types");
|
|
6
6
|
var Callbacks_1 = require("../../../base/Callbacks");
|
|
7
|
-
function createViewport(props,
|
|
7
|
+
function createViewport(props, isMobileDevice, prefix) {
|
|
8
8
|
var html = document.documentElement;
|
|
9
|
+
var mqDesktop = window.matchMedia("(min-width: ".concat(props.tablet + 0.001, "px)"));
|
|
10
|
+
var mqTablet = window.matchMedia("(min-width: ".concat(props.phone + 0.001, "px) and (max-width: ").concat(props.tablet, "px)"));
|
|
11
|
+
var mqPhone = window.matchMedia("(max-width: ".concat(props.phone, "px)"));
|
|
9
12
|
// create callbacks
|
|
10
13
|
var callbacks = new Callbacks_1.Callbacks();
|
|
11
14
|
// default data
|
|
@@ -13,10 +16,10 @@ function createViewport(props, isDesktopDevice, prefix) {
|
|
|
13
16
|
callbacks: callbacks,
|
|
14
17
|
width: 0,
|
|
15
18
|
height: 0,
|
|
16
|
-
|
|
19
|
+
sHeight: 0,
|
|
17
20
|
vw: 0,
|
|
18
21
|
vh: 0,
|
|
19
|
-
|
|
22
|
+
svh: 0,
|
|
20
23
|
isLandscape: false,
|
|
21
24
|
isPortrait: false,
|
|
22
25
|
isDesktop: false,
|
|
@@ -63,29 +66,24 @@ function createViewport(props, isDesktopDevice, prefix) {
|
|
|
63
66
|
}
|
|
64
67
|
/** Update viewport values */
|
|
65
68
|
function updateValues() {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
: html.clientWidth;
|
|
70
|
-
// set sizes
|
|
71
|
-
data.width = width;
|
|
72
|
-
data.height = html.clientHeight;
|
|
73
|
-
data.radius = Math.sqrt(Math.pow(data.width, 2) + Math.pow(data.height, 2)) / 2;
|
|
69
|
+
var prevWidth = data.width;
|
|
70
|
+
data.width = window.innerWidth;
|
|
71
|
+
data.height = window.innerHeight;
|
|
74
72
|
data.vw = data.width / 100;
|
|
75
73
|
data.vh = data.height / 100;
|
|
76
|
-
data.vr = data.radius / 100;
|
|
77
74
|
data.isLandscape = data.width > data.height;
|
|
78
75
|
data.isPortrait = data.width < data.height;
|
|
79
|
-
data.isDesktop =
|
|
80
|
-
data.isTablet =
|
|
81
|
-
data.isPhone =
|
|
76
|
+
data.isDesktop = mqDesktop.matches;
|
|
77
|
+
data.isTablet = mqTablet.matches;
|
|
78
|
+
data.isPhone = mqPhone.matches;
|
|
82
79
|
data.dpr = window.devicePixelRatio;
|
|
83
|
-
data.lowerDpr =
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
data.
|
|
87
|
-
|
|
88
|
-
|
|
80
|
+
data.lowerDpr = !isMobileDevice ? 1 : Math.min(data.dpr, 2);
|
|
81
|
+
// update sHeight && svh only when the width changes
|
|
82
|
+
// or for desktop
|
|
83
|
+
if (prevWidth !== data.width || !data.sHeight || !isMobileDevice) {
|
|
84
|
+
data.sHeight = document.documentElement.clientHeight;
|
|
85
|
+
data.svh = data.sHeight / 100;
|
|
86
|
+
}
|
|
89
87
|
// update states
|
|
90
88
|
updateClassNames();
|
|
91
89
|
updateCSSVars();
|
|
@@ -130,7 +128,7 @@ function createViewport(props, isDesktopDevice, prefix) {
|
|
|
130
128
|
function updateCSSVars() {
|
|
131
129
|
html.style.setProperty('--vw', "".concat(data.vw, "px"));
|
|
132
130
|
html.style.setProperty('--vh', "".concat(data.vh, "px"));
|
|
133
|
-
html.style.setProperty('--
|
|
131
|
+
html.style.setProperty('--svh', "".concat(data.svh, "px"));
|
|
134
132
|
}
|
|
135
133
|
return data;
|
|
136
134
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Vevet/events/createViewport/index.ts"],"names":[],"mappings":";;;AAAA,uCAA6C;AAC7C,iCAKiB;AACjB,8CAA6C;AAG7C,SAAgB,cAAc,CAC5B,KAAkB,EAClB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Vevet/events/createViewport/index.ts"],"names":[],"mappings":"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"}
|
package/lib/cjs/Vevet/index.js
CHANGED
|
@@ -29,7 +29,6 @@ function Vevet(input) {
|
|
|
29
29
|
easing: [0.25, 0.1, 0.25, 1],
|
|
30
30
|
resizeDebounce: 16,
|
|
31
31
|
checkWebpSupport: true,
|
|
32
|
-
widthDetection: 'boundingRect',
|
|
33
32
|
};
|
|
34
33
|
var props = __assign(__assign({}, defaultProps), input);
|
|
35
34
|
var prefix = 'v-';
|
|
@@ -41,7 +40,7 @@ function Vevet(input) {
|
|
|
41
40
|
var isDesktop = !isMobile;
|
|
42
41
|
// events
|
|
43
42
|
var pageLoad = (0, createOnPageLoad_1.createOnPageLoad)(prefix);
|
|
44
|
-
var viewport = (0, createViewport_1.createViewport)(props,
|
|
43
|
+
var viewport = (0, createViewport_1.createViewport)(props, isMobile, prefix);
|
|
45
44
|
// output
|
|
46
45
|
var output = {
|
|
47
46
|
version: version_1.default,
|
|
@@ -54,7 +53,6 @@ function Vevet(input) {
|
|
|
54
53
|
osName: osName,
|
|
55
54
|
browserName: browserName,
|
|
56
55
|
isWebpSupported: false,
|
|
57
|
-
pageLoad: pageLoad,
|
|
58
56
|
isPageLoaded: false,
|
|
59
57
|
viewport: viewport,
|
|
60
58
|
doc: document,
|
|
@@ -67,7 +65,7 @@ function Vevet(input) {
|
|
|
67
65
|
},
|
|
68
66
|
};
|
|
69
67
|
// update props on page load
|
|
70
|
-
|
|
68
|
+
pageLoad.onLoad(function () {
|
|
71
69
|
output.isPageLoaded = true;
|
|
72
70
|
});
|
|
73
71
|
// set device features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Vevet/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,uDAAiC;AACjC,8DAA6D;AAE7D,6DAA4D;AAC5D,0DAAyD;AACzD,0DAAyD;AAEzD,uDAAsD;AAEtD,SAAgB,KAAK,CAAC,KAA2B;IAC/C,yBAAyB;IAEzB,IAAM,YAAY,GAAgB;QAChC,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5B,cAAc,EAAE,EAAE;QAClB,gBAAgB,EAAE,IAAI;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Vevet/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ exports.lerp = void 0;
|
|
|
18
18
|
* lerp(0.75, 0.8, 0.98); // => 0.799
|
|
19
19
|
*/
|
|
20
20
|
function lerp(current, target, factor, approximationLeft) {
|
|
21
|
-
if (approximationLeft === void 0) { approximationLeft = 0
|
|
21
|
+
if (approximationLeft === void 0) { approximationLeft = 0; }
|
|
22
22
|
var value = current * (1 - factor) + target * factor;
|
|
23
23
|
var difference = Math.abs(target - value);
|
|
24
24
|
if (difference <= approximationLeft) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lerp.js","sourceRoot":"","sources":["../../../../src/utils/math/lerp.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;GAeG;AACH,SAAgB,IAAI,CAClB,OAAe,EACf,MAAc,EACd,MAAc,EACd,
|
|
1
|
+
{"version":3,"file":"lerp.js","sourceRoot":"","sources":["../../../../src/utils/math/lerp.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;GAeG;AACH,SAAgB,IAAI,CAClB,OAAe,EACf,MAAc,EACd,MAAc,EACd,iBAAqB;IAArB,kCAAA,EAAA,qBAAqB;IAErB,IAAM,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,IAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;IAE5C,IAAI,UAAU,IAAI,iBAAiB,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAdD,oBAcC"}
|
package/lib/cjs/version.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { addEventListener } from 'vevet-dom';
|
|
2
2
|
import { EOrientationTypes, ESizeTypes, } from './types';
|
|
3
3
|
import { Callbacks } from '../../../base/Callbacks';
|
|
4
|
-
export function createViewport(props,
|
|
4
|
+
export function createViewport(props, isMobileDevice, prefix) {
|
|
5
5
|
const html = document.documentElement;
|
|
6
|
+
const mqDesktop = window.matchMedia(`(min-width: ${props.tablet + 0.001}px)`);
|
|
7
|
+
const mqTablet = window.matchMedia(`(min-width: ${props.phone + 0.001}px) and (max-width: ${props.tablet}px)`);
|
|
8
|
+
const mqPhone = window.matchMedia(`(max-width: ${props.phone}px)`);
|
|
6
9
|
// create callbacks
|
|
7
10
|
const callbacks = new Callbacks();
|
|
8
11
|
// default data
|
|
@@ -10,10 +13,10 @@ export function createViewport(props, isDesktopDevice, prefix) {
|
|
|
10
13
|
callbacks,
|
|
11
14
|
width: 0,
|
|
12
15
|
height: 0,
|
|
13
|
-
|
|
16
|
+
sHeight: 0,
|
|
14
17
|
vw: 0,
|
|
15
18
|
vh: 0,
|
|
16
|
-
|
|
19
|
+
svh: 0,
|
|
17
20
|
isLandscape: false,
|
|
18
21
|
isPortrait: false,
|
|
19
22
|
isDesktop: false,
|
|
@@ -60,29 +63,24 @@ export function createViewport(props, isDesktopDevice, prefix) {
|
|
|
60
63
|
}
|
|
61
64
|
/** Update viewport values */
|
|
62
65
|
function updateValues() {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
: html.clientWidth;
|
|
67
|
-
// set sizes
|
|
68
|
-
data.width = width;
|
|
69
|
-
data.height = html.clientHeight;
|
|
70
|
-
data.radius = Math.sqrt(Math.pow(data.width, 2) + Math.pow(data.height, 2)) / 2;
|
|
66
|
+
const { width: prevWidth } = data;
|
|
67
|
+
data.width = window.innerWidth;
|
|
68
|
+
data.height = window.innerHeight;
|
|
71
69
|
data.vw = data.width / 100;
|
|
72
70
|
data.vh = data.height / 100;
|
|
73
|
-
data.vr = data.radius / 100;
|
|
74
71
|
data.isLandscape = data.width > data.height;
|
|
75
72
|
data.isPortrait = data.width < data.height;
|
|
76
|
-
data.isDesktop =
|
|
77
|
-
data.isTablet =
|
|
78
|
-
data.isPhone =
|
|
73
|
+
data.isDesktop = mqDesktop.matches;
|
|
74
|
+
data.isTablet = mqTablet.matches;
|
|
75
|
+
data.isPhone = mqPhone.matches;
|
|
79
76
|
data.dpr = window.devicePixelRatio;
|
|
80
|
-
data.lowerDpr =
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
data.
|
|
84
|
-
|
|
85
|
-
|
|
77
|
+
data.lowerDpr = !isMobileDevice ? 1 : Math.min(data.dpr, 2);
|
|
78
|
+
// update sHeight && svh only when the width changes
|
|
79
|
+
// or for desktop
|
|
80
|
+
if (prevWidth !== data.width || !data.sHeight || !isMobileDevice) {
|
|
81
|
+
data.sHeight = document.documentElement.clientHeight;
|
|
82
|
+
data.svh = data.sHeight / 100;
|
|
83
|
+
}
|
|
86
84
|
// update states
|
|
87
85
|
updateClassNames();
|
|
88
86
|
updateCSSVars();
|
|
@@ -127,7 +125,7 @@ export function createViewport(props, isDesktopDevice, prefix) {
|
|
|
127
125
|
function updateCSSVars() {
|
|
128
126
|
html.style.setProperty('--vw', `${data.vw}px`);
|
|
129
127
|
html.style.setProperty('--vh', `${data.vh}px`);
|
|
130
|
-
html.style.setProperty('--
|
|
128
|
+
html.style.setProperty('--svh', `${data.svh}px`);
|
|
131
129
|
}
|
|
132
130
|
return data;
|
|
133
131
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Vevet/events/createViewport/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EACL,iBAAiB,EACjB,UAAU,GAGX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C,MAAM,UAAU,cAAc,CAC5B,KAAkB,EAClB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Vevet/events/createViewport/index.ts"],"names":[],"mappings":"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"}
|
package/lib/esm/Vevet/index.js
CHANGED
|
@@ -12,7 +12,6 @@ export function Vevet(input) {
|
|
|
12
12
|
easing: [0.25, 0.1, 0.25, 1],
|
|
13
13
|
resizeDebounce: 16,
|
|
14
14
|
checkWebpSupport: true,
|
|
15
|
-
widthDetection: 'boundingRect',
|
|
16
15
|
};
|
|
17
16
|
const props = Object.assign(Object.assign({}, defaultProps), input);
|
|
18
17
|
const prefix = 'v-';
|
|
@@ -24,7 +23,7 @@ export function Vevet(input) {
|
|
|
24
23
|
const isDesktop = !isMobile;
|
|
25
24
|
// events
|
|
26
25
|
const pageLoad = createOnPageLoad(prefix);
|
|
27
|
-
const viewport = createViewport(props,
|
|
26
|
+
const viewport = createViewport(props, isMobile, prefix);
|
|
28
27
|
// output
|
|
29
28
|
const output = {
|
|
30
29
|
version,
|
|
@@ -37,7 +36,6 @@ export function Vevet(input) {
|
|
|
37
36
|
osName,
|
|
38
37
|
browserName,
|
|
39
38
|
isWebpSupported: false,
|
|
40
|
-
pageLoad,
|
|
41
39
|
isPageLoaded: false,
|
|
42
40
|
viewport,
|
|
43
41
|
doc: document,
|
|
@@ -46,7 +44,7 @@ export function Vevet(input) {
|
|
|
46
44
|
onPageLoad: () => new PCancelable((resolve) => pageLoad.onLoad(resolve)),
|
|
47
45
|
};
|
|
48
46
|
// update props on page load
|
|
49
|
-
|
|
47
|
+
pageLoad.onLoad(() => {
|
|
50
48
|
output.isPageLoaded = true;
|
|
51
49
|
});
|
|
52
50
|
// set device features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Vevet/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,UAAU,KAAK,CAAC,KAA2B;IAC/C,yBAAyB;IAEzB,MAAM,YAAY,GAAgB;QAChC,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5B,cAAc,EAAE,EAAE;QAClB,gBAAgB,EAAE,IAAI;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Vevet/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* lerp(0, 1, 0.4); // => 0.4
|
|
15
15
|
* lerp(0.75, 0.8, 0.98); // => 0.799
|
|
16
16
|
*/
|
|
17
|
-
export function lerp(current, target, factor, approximationLeft = 0
|
|
17
|
+
export function lerp(current, target, factor, approximationLeft = 0) {
|
|
18
18
|
const value = current * (1 - factor) + target * factor;
|
|
19
19
|
const difference = Math.abs(target - value);
|
|
20
20
|
if (difference <= approximationLeft) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lerp.js","sourceRoot":"","sources":["../../../../src/utils/math/lerp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,IAAI,CAClB,OAAe,EACf,MAAc,EACd,MAAc,EACd,iBAAiB,GAAG,
|
|
1
|
+
{"version":3,"file":"lerp.js","sourceRoot":"","sources":["../../../../src/utils/math/lerp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,IAAI,CAClB,OAAe,EACf,MAAc,EACd,MAAc,EACd,iBAAiB,GAAG,CAAC;IAErB,MAAM,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;IAE5C,IAAI,UAAU,IAAI,iBAAiB,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}
|
package/lib/esm/version.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IViewport } from './types';
|
|
2
2
|
import { IVevetProps } from '../../types';
|
|
3
|
-
export declare function createViewport(props: IVevetProps,
|
|
3
|
+
export declare function createViewport(props: IVevetProps, isMobileDevice: boolean, prefix: string): IViewport;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Vevet/events/createViewport/index.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,SAAS,EAEV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,EAClB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Vevet/events/createViewport/index.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,SAAS,EAEV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,EAClB,cAAc,EAAE,OAAO,EACvB,MAAM,EAAE,MAAM,GACb,SAAS,CAqJX"}
|
|
@@ -59,14 +59,14 @@ export interface IViewport {
|
|
|
59
59
|
width: number;
|
|
60
60
|
/** Current viewport height */
|
|
61
61
|
height: number;
|
|
62
|
-
/** Current viewport
|
|
63
|
-
|
|
62
|
+
/** Current viewport small height */
|
|
63
|
+
sHeight: number;
|
|
64
64
|
/** Current viewport width divided by 100 */
|
|
65
65
|
vw: number;
|
|
66
66
|
/** Current viewport height divided by 100 */
|
|
67
67
|
vh: number;
|
|
68
|
-
/** Current viewport
|
|
69
|
-
|
|
68
|
+
/** Current viewport small height divided by 100 (svh) */
|
|
69
|
+
svh: number;
|
|
70
70
|
/** Is viewport in landscape mode */
|
|
71
71
|
isLandscape: boolean;
|
|
72
72
|
/** Is viewport in portrait mode */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Vevet/events/createViewport/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,sBAAuB,SAAQ,UAAU,CAAC,MAAM;IAC/D;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,UAAU,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC;CAChB;AAED,0BAA0B;AAC1B,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,wBAAwB;AACxB,oBAAY,iBAAiB;IAC3B,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,SAAS;IACxB;;;;;;;;;;;;;;;;OAgBG;IACH,SAAS,EAAE,SAAS,CAAC,sBAAsB,CAAC,CAAC;IAC7C,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Vevet/events/createViewport/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,sBAAuB,SAAQ,UAAU,CAAC,MAAM;IAC/D;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,UAAU,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC;CAChB;AAED,0BAA0B;AAC1B,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,wBAAwB;AACxB,oBAAY,iBAAiB;IAC3B,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,SAAS;IACxB;;;;;;;;;;;;;;;;OAgBG;IACH,SAAS,EAAE,SAAS,CAAC,sBAAsB,CAAC,CAAC;IAC7C,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,yBAAyB;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,gFAAgF;IAChF,QAAQ,EAAE,MAAM,CAAC;CAClB"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { IOnPageLoad } from './events/createOnPageLoad/types';
|
|
2
1
|
import { IViewport } from './events/createViewport/types';
|
|
3
2
|
import { IVevetProps } from './types';
|
|
4
3
|
import { PCancelable } from '../utils/common/PCancelable';
|
|
@@ -24,8 +23,6 @@ export interface IVevet {
|
|
|
24
23
|
browserName: string;
|
|
25
24
|
/** If WebP is supported in the browser */
|
|
26
25
|
isWebpSupported: boolean;
|
|
27
|
-
/** Page load handler */
|
|
28
|
-
pageLoad: IOnPageLoad;
|
|
29
26
|
/** If the page is loaded */
|
|
30
27
|
isPageLoaded: boolean;
|
|
31
28
|
/** Viewport handler */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../../src/Vevet/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../../src/Vevet/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,wBAAwB;AACxB,MAAM,WAAW,MAAM;IACrB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,KAAK,EAAE,WAAW,CAAC;IACnB,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,wBAAwB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc;IACd,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,eAAe,EAAE,OAAO,CAAC;IACzB,4BAA4B;IAC5B,YAAY,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe;IACf,GAAG,EAAE,QAAQ,CAAC;IACd,mBAAmB;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,mBAAmB;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB;;;;;;;;;OASG;IACH,UAAU,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,CAAC;CACrC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Vevet/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,wBAAgB,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Vevet/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,wBAAgB,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,MAAM,CAsFzD"}
|
|
@@ -33,11 +33,5 @@ export interface IVevetProps {
|
|
|
33
33
|
* @default false
|
|
34
34
|
*/
|
|
35
35
|
checkWebpSupport: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Method for detecting the viewport width.
|
|
38
|
-
* Can be 'boundingRect' or 'clientWidth'.
|
|
39
|
-
* @default 'boundingRect'
|
|
40
|
-
*/
|
|
41
|
-
widthDetection: 'boundingRect' | 'clientWidth';
|
|
42
36
|
}
|
|
43
37
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/Vevet/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,cAAc,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/Vevet/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,cAAc,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,EAAE,OAAO,CAAC;CAC3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lerp.d.ts","sourceRoot":"","sources":["../../../../src/utils/math/lerp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAClB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,iBAAiB,
|
|
1
|
+
{"version":3,"file":"lerp.d.ts","sourceRoot":"","sources":["../../../../src/utils/math/lerp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAClB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,iBAAiB,SAAI,UAUtB"}
|
package/lib/types/version.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vevet",
|
|
3
|
-
"version": "4.0
|
|
4
|
-
"description": "Vevet is a flexible
|
|
3
|
+
"version": "4.2.0",
|
|
4
|
+
"description": "Vevet is a flexible JavaScript library designed for creative web development",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"storybook": "storybook dev -p 6006",
|
|
7
7
|
"lint": "npm run lint:js && npm run lint:style",
|
|
@@ -10,11 +10,17 @@ import { IVevetProps } from '../../types';
|
|
|
10
10
|
|
|
11
11
|
export function createViewport(
|
|
12
12
|
props: IVevetProps,
|
|
13
|
-
|
|
13
|
+
isMobileDevice: boolean,
|
|
14
14
|
prefix: string,
|
|
15
15
|
): IViewport {
|
|
16
16
|
const html = document.documentElement;
|
|
17
17
|
|
|
18
|
+
const mqDesktop = window.matchMedia(`(min-width: ${props.tablet + 0.001}px)`);
|
|
19
|
+
const mqTablet = window.matchMedia(
|
|
20
|
+
`(min-width: ${props.phone + 0.001}px) and (max-width: ${props.tablet}px)`,
|
|
21
|
+
);
|
|
22
|
+
const mqPhone = window.matchMedia(`(max-width: ${props.phone}px)`);
|
|
23
|
+
|
|
18
24
|
// create callbacks
|
|
19
25
|
const callbacks = new Callbacks<IViewportCallbackTypes>();
|
|
20
26
|
|
|
@@ -23,10 +29,10 @@ export function createViewport(
|
|
|
23
29
|
callbacks,
|
|
24
30
|
width: 0,
|
|
25
31
|
height: 0,
|
|
26
|
-
|
|
32
|
+
sHeight: 0,
|
|
27
33
|
vw: 0,
|
|
28
34
|
vh: 0,
|
|
29
|
-
|
|
35
|
+
svh: 0,
|
|
30
36
|
isLandscape: false,
|
|
31
37
|
isPortrait: false,
|
|
32
38
|
isDesktop: false,
|
|
@@ -84,31 +90,26 @@ export function createViewport(
|
|
|
84
90
|
|
|
85
91
|
/** Update viewport values */
|
|
86
92
|
function updateValues() {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
: html.clientWidth;
|
|
92
|
-
|
|
93
|
-
// set sizes
|
|
94
|
-
data.width = width;
|
|
95
|
-
data.height = html.clientHeight;
|
|
96
|
-
data.radius = Math.sqrt(data.width ** 2 + data.height ** 2) / 2;
|
|
93
|
+
const { width: prevWidth } = data;
|
|
94
|
+
|
|
95
|
+
data.width = window.innerWidth;
|
|
96
|
+
data.height = window.innerHeight;
|
|
97
97
|
data.vw = data.width / 100;
|
|
98
98
|
data.vh = data.height / 100;
|
|
99
|
-
data.vr = data.radius / 100;
|
|
100
99
|
data.isLandscape = data.width > data.height;
|
|
101
100
|
data.isPortrait = data.width < data.height;
|
|
102
|
-
data.isDesktop =
|
|
103
|
-
data.isTablet =
|
|
104
|
-
data.isPhone =
|
|
105
|
-
data.dpr = window.devicePixelRatio;
|
|
106
|
-
data.lowerDpr = data.dpr < 1 ? 1 : data.dpr;
|
|
107
|
-
data.isDesktop = data.width > props.tablet;
|
|
108
|
-
data.isTablet = data.width <= props.tablet && data.width > props.phone;
|
|
109
|
-
data.isPhone = data.width <= props.phone;
|
|
101
|
+
data.isDesktop = mqDesktop.matches;
|
|
102
|
+
data.isTablet = mqTablet.matches;
|
|
103
|
+
data.isPhone = mqPhone.matches;
|
|
110
104
|
data.dpr = window.devicePixelRatio;
|
|
111
|
-
data.lowerDpr =
|
|
105
|
+
data.lowerDpr = !isMobileDevice ? 1 : Math.min(data.dpr, 2);
|
|
106
|
+
|
|
107
|
+
// update sHeight && svh only when the width changes
|
|
108
|
+
// or for desktop
|
|
109
|
+
if (prevWidth !== data.width || !data.sHeight || !isMobileDevice) {
|
|
110
|
+
data.sHeight = document.documentElement.clientHeight;
|
|
111
|
+
data.svh = data.sHeight / 100;
|
|
112
|
+
}
|
|
112
113
|
|
|
113
114
|
// update states
|
|
114
115
|
updateClassNames();
|
|
@@ -156,7 +157,7 @@ export function createViewport(
|
|
|
156
157
|
function updateCSSVars() {
|
|
157
158
|
html.style.setProperty('--vw', `${data.vw}px`);
|
|
158
159
|
html.style.setProperty('--vh', `${data.vh}px`);
|
|
159
|
-
html.style.setProperty('--
|
|
160
|
+
html.style.setProperty('--svh', `${data.svh}px`);
|
|
160
161
|
}
|
|
161
162
|
|
|
162
163
|
return data;
|
|
@@ -68,14 +68,14 @@ export interface IViewport {
|
|
|
68
68
|
width: number;
|
|
69
69
|
/** Current viewport height */
|
|
70
70
|
height: number;
|
|
71
|
-
/** Current viewport
|
|
72
|
-
|
|
71
|
+
/** Current viewport small height */
|
|
72
|
+
sHeight: number;
|
|
73
73
|
/** Current viewport width divided by 100 */
|
|
74
74
|
vw: number;
|
|
75
75
|
/** Current viewport height divided by 100 */
|
|
76
76
|
vh: number;
|
|
77
|
-
/** Current viewport
|
|
78
|
-
|
|
77
|
+
/** Current viewport small height divided by 100 (svh) */
|
|
78
|
+
svh: number;
|
|
79
79
|
/** Is viewport in landscape mode */
|
|
80
80
|
isLandscape: boolean;
|
|
81
81
|
/** Is viewport in portrait mode */
|
package/src/Vevet/global.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { IOnPageLoad } from './events/createOnPageLoad/types';
|
|
2
1
|
import { IViewport } from './events/createViewport/types';
|
|
3
2
|
import { IVevetProps } from './types';
|
|
4
3
|
import { PCancelable } from '@/utils/common/PCancelable';
|
|
@@ -25,8 +24,6 @@ export interface IVevet {
|
|
|
25
24
|
browserName: string;
|
|
26
25
|
/** If WebP is supported in the browser */
|
|
27
26
|
isWebpSupported: boolean;
|
|
28
|
-
/** Page load handler */
|
|
29
|
-
pageLoad: IOnPageLoad;
|
|
30
27
|
/** If the page is loaded */
|
|
31
28
|
isPageLoaded: boolean;
|
|
32
29
|
/** Viewport handler */
|
package/src/Vevet/index.ts
CHANGED
|
@@ -16,7 +16,6 @@ export function Vevet(input: Partial<IVevetProps>): IVevet {
|
|
|
16
16
|
easing: [0.25, 0.1, 0.25, 1],
|
|
17
17
|
resizeDebounce: 16,
|
|
18
18
|
checkWebpSupport: true,
|
|
19
|
-
widthDetection: 'boundingRect',
|
|
20
19
|
};
|
|
21
20
|
|
|
22
21
|
const props = { ...defaultProps, ...input };
|
|
@@ -34,7 +33,7 @@ export function Vevet(input: Partial<IVevetProps>): IVevet {
|
|
|
34
33
|
// events
|
|
35
34
|
|
|
36
35
|
const pageLoad = createOnPageLoad(prefix);
|
|
37
|
-
const viewport = createViewport(props,
|
|
36
|
+
const viewport = createViewport(props, isMobile, prefix);
|
|
38
37
|
|
|
39
38
|
// output
|
|
40
39
|
|
|
@@ -49,7 +48,6 @@ export function Vevet(input: Partial<IVevetProps>): IVevet {
|
|
|
49
48
|
osName,
|
|
50
49
|
browserName,
|
|
51
50
|
isWebpSupported: false,
|
|
52
|
-
pageLoad,
|
|
53
51
|
isPageLoaded: false,
|
|
54
52
|
viewport,
|
|
55
53
|
doc: document,
|
|
@@ -63,7 +61,7 @@ export function Vevet(input: Partial<IVevetProps>): IVevet {
|
|
|
63
61
|
|
|
64
62
|
// update props on page load
|
|
65
63
|
|
|
66
|
-
|
|
64
|
+
pageLoad.onLoad(() => {
|
|
67
65
|
output.isPageLoaded = true;
|
|
68
66
|
});
|
|
69
67
|
|
package/src/Vevet/types.ts
CHANGED
|
@@ -38,11 +38,4 @@ export interface IVevetProps {
|
|
|
38
38
|
* @default false
|
|
39
39
|
*/
|
|
40
40
|
checkWebpSupport: boolean;
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* Method for detecting the viewport width.
|
|
44
|
-
* Can be 'boundingRect' or 'clientWidth'.
|
|
45
|
-
* @default 'boundingRect'
|
|
46
|
-
*/
|
|
47
|
-
widthDetection: 'boundingRect' | 'clientWidth';
|
|
48
41
|
}
|
package/src/utils/math/lerp.ts
CHANGED
package/src/version.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const version = '4.0
|
|
1
|
+
const version = '4.2.0';
|
|
2
2
|
export default version;
|