vevet 4.1.0 → 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/lib/cjs/Vevet/events/createViewport/index.js +20 -17
- package/lib/cjs/Vevet/events/createViewport/index.js.map +1 -1
- package/lib/cjs/Vevet/index.js +1 -2
- package/lib/cjs/Vevet/index.js.map +1 -1
- package/lib/cjs/version.js +1 -1
- package/lib/esm/Vevet/events/createViewport/index.js +20 -17
- package/lib/esm/Vevet/events/createViewport/index.js.map +1 -1
- package/lib/esm/Vevet/index.js +1 -2
- package/lib/esm/Vevet/index.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 -0
- package/lib/types/Vevet/events/createViewport/types.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/version.d.ts +1 -1
- package/package.json +1 -1
- package/src/Vevet/events/createViewport/index.ts +25 -19
- package/src/Vevet/events/createViewport/types.ts +4 -0
- package/src/Vevet/index.ts +1 -2
- package/src/Vevet/types.ts +0 -7
- package/src/styles/mixins/_viewport.scss +0 -8
- package/src/version.ts +1 -1
|
@@ -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,8 +16,10 @@ function createViewport(props, isDesktopDevice, prefix) {
|
|
|
13
16
|
callbacks: callbacks,
|
|
14
17
|
width: 0,
|
|
15
18
|
height: 0,
|
|
19
|
+
sHeight: 0,
|
|
16
20
|
vw: 0,
|
|
17
21
|
vh: 0,
|
|
22
|
+
svh: 0,
|
|
18
23
|
isLandscape: false,
|
|
19
24
|
isPortrait: false,
|
|
20
25
|
isDesktop: false,
|
|
@@ -61,27 +66,24 @@ function createViewport(props, isDesktopDevice, prefix) {
|
|
|
61
66
|
}
|
|
62
67
|
/** Update viewport values */
|
|
63
68
|
function updateValues() {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
: html.clientWidth;
|
|
68
|
-
// set sizes
|
|
69
|
-
data.width = width;
|
|
70
|
-
data.height = html.clientHeight;
|
|
69
|
+
var prevWidth = data.width;
|
|
70
|
+
data.width = window.innerWidth;
|
|
71
|
+
data.height = window.innerHeight;
|
|
71
72
|
data.vw = data.width / 100;
|
|
72
73
|
data.vh = data.height / 100;
|
|
73
74
|
data.isLandscape = data.width > data.height;
|
|
74
75
|
data.isPortrait = data.width < data.height;
|
|
75
|
-
data.isDesktop =
|
|
76
|
-
data.isTablet =
|
|
77
|
-
data.isPhone =
|
|
76
|
+
data.isDesktop = mqDesktop.matches;
|
|
77
|
+
data.isTablet = mqTablet.matches;
|
|
78
|
+
data.isPhone = mqPhone.matches;
|
|
78
79
|
data.dpr = window.devicePixelRatio;
|
|
79
|
-
data.lowerDpr =
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
data.
|
|
83
|
-
|
|
84
|
-
|
|
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
|
+
}
|
|
85
87
|
// update states
|
|
86
88
|
updateClassNames();
|
|
87
89
|
updateCSSVars();
|
|
@@ -126,6 +128,7 @@ function createViewport(props, isDesktopDevice, prefix) {
|
|
|
126
128
|
function updateCSSVars() {
|
|
127
129
|
html.style.setProperty('--vw', "".concat(data.vw, "px"));
|
|
128
130
|
html.style.setProperty('--vh', "".concat(data.vh, "px"));
|
|
131
|
+
html.style.setProperty('--svh', "".concat(data.svh, "px"));
|
|
129
132
|
}
|
|
130
133
|
return data;
|
|
131
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,
|
|
@@ -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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"}
|
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,8 +13,10 @@ export function createViewport(props, isDesktopDevice, prefix) {
|
|
|
10
13
|
callbacks,
|
|
11
14
|
width: 0,
|
|
12
15
|
height: 0,
|
|
16
|
+
sHeight: 0,
|
|
13
17
|
vw: 0,
|
|
14
18
|
vh: 0,
|
|
19
|
+
svh: 0,
|
|
15
20
|
isLandscape: false,
|
|
16
21
|
isPortrait: false,
|
|
17
22
|
isDesktop: false,
|
|
@@ -58,27 +63,24 @@ export function createViewport(props, isDesktopDevice, prefix) {
|
|
|
58
63
|
}
|
|
59
64
|
/** Update viewport values */
|
|
60
65
|
function updateValues() {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
: html.clientWidth;
|
|
65
|
-
// set sizes
|
|
66
|
-
data.width = width;
|
|
67
|
-
data.height = html.clientHeight;
|
|
66
|
+
const { width: prevWidth } = data;
|
|
67
|
+
data.width = window.innerWidth;
|
|
68
|
+
data.height = window.innerHeight;
|
|
68
69
|
data.vw = data.width / 100;
|
|
69
70
|
data.vh = data.height / 100;
|
|
70
71
|
data.isLandscape = data.width > data.height;
|
|
71
72
|
data.isPortrait = data.width < data.height;
|
|
72
|
-
data.isDesktop =
|
|
73
|
-
data.isTablet =
|
|
74
|
-
data.isPhone =
|
|
73
|
+
data.isDesktop = mqDesktop.matches;
|
|
74
|
+
data.isTablet = mqTablet.matches;
|
|
75
|
+
data.isPhone = mqPhone.matches;
|
|
75
76
|
data.dpr = window.devicePixelRatio;
|
|
76
|
-
data.lowerDpr =
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
data.
|
|
80
|
-
|
|
81
|
-
|
|
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
|
+
}
|
|
82
84
|
// update states
|
|
83
85
|
updateClassNames();
|
|
84
86
|
updateCSSVars();
|
|
@@ -123,6 +125,7 @@ export function createViewport(props, isDesktopDevice, prefix) {
|
|
|
123
125
|
function updateCSSVars() {
|
|
124
126
|
html.style.setProperty('--vw', `${data.vw}px`);
|
|
125
127
|
html.style.setProperty('--vh', `${data.vh}px`);
|
|
128
|
+
html.style.setProperty('--svh', `${data.svh}px`);
|
|
126
129
|
}
|
|
127
130
|
return data;
|
|
128
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,
|
|
@@ -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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"}
|
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,10 +59,14 @@ export interface IViewport {
|
|
|
59
59
|
width: number;
|
|
60
60
|
/** Current viewport height */
|
|
61
61
|
height: number;
|
|
62
|
+
/** Current viewport small height */
|
|
63
|
+
sHeight: number;
|
|
62
64
|
/** Current viewport width divided by 100 */
|
|
63
65
|
vw: number;
|
|
64
66
|
/** Current viewport height divided by 100 */
|
|
65
67
|
vh: number;
|
|
68
|
+
/** Current viewport small height divided by 100 (svh) */
|
|
69
|
+
svh: number;
|
|
66
70
|
/** Is viewport in landscape mode */
|
|
67
71
|
isLandscape: boolean;
|
|
68
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,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,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
|
+
{"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 +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"}
|
package/lib/types/version.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -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,8 +29,10 @@ export function createViewport(
|
|
|
23
29
|
callbacks,
|
|
24
30
|
width: 0,
|
|
25
31
|
height: 0,
|
|
32
|
+
sHeight: 0,
|
|
26
33
|
vw: 0,
|
|
27
34
|
vh: 0,
|
|
35
|
+
svh: 0,
|
|
28
36
|
isLandscape: false,
|
|
29
37
|
isPortrait: false,
|
|
30
38
|
isDesktop: false,
|
|
@@ -82,29 +90,26 @@ export function createViewport(
|
|
|
82
90
|
|
|
83
91
|
/** Update viewport values */
|
|
84
92
|
function updateValues() {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
: html.clientWidth;
|
|
90
|
-
|
|
91
|
-
// set sizes
|
|
92
|
-
data.width = width;
|
|
93
|
-
data.height = html.clientHeight;
|
|
93
|
+
const { width: prevWidth } = data;
|
|
94
|
+
|
|
95
|
+
data.width = window.innerWidth;
|
|
96
|
+
data.height = window.innerHeight;
|
|
94
97
|
data.vw = data.width / 100;
|
|
95
98
|
data.vh = data.height / 100;
|
|
96
99
|
data.isLandscape = data.width > data.height;
|
|
97
100
|
data.isPortrait = data.width < data.height;
|
|
98
|
-
data.isDesktop =
|
|
99
|
-
data.isTablet =
|
|
100
|
-
data.isPhone =
|
|
101
|
-
data.dpr = window.devicePixelRatio;
|
|
102
|
-
data.lowerDpr = data.dpr < 1 ? 1 : data.dpr;
|
|
103
|
-
data.isDesktop = data.width > props.tablet;
|
|
104
|
-
data.isTablet = data.width <= props.tablet && data.width > props.phone;
|
|
105
|
-
data.isPhone = data.width <= props.phone;
|
|
101
|
+
data.isDesktop = mqDesktop.matches;
|
|
102
|
+
data.isTablet = mqTablet.matches;
|
|
103
|
+
data.isPhone = mqPhone.matches;
|
|
106
104
|
data.dpr = window.devicePixelRatio;
|
|
107
|
-
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
|
+
}
|
|
108
113
|
|
|
109
114
|
// update states
|
|
110
115
|
updateClassNames();
|
|
@@ -152,6 +157,7 @@ export function createViewport(
|
|
|
152
157
|
function updateCSSVars() {
|
|
153
158
|
html.style.setProperty('--vw', `${data.vw}px`);
|
|
154
159
|
html.style.setProperty('--vh', `${data.vh}px`);
|
|
160
|
+
html.style.setProperty('--svh', `${data.svh}px`);
|
|
155
161
|
}
|
|
156
162
|
|
|
157
163
|
return data;
|
|
@@ -68,10 +68,14 @@ export interface IViewport {
|
|
|
68
68
|
width: number;
|
|
69
69
|
/** Current viewport height */
|
|
70
70
|
height: number;
|
|
71
|
+
/** Current viewport small height */
|
|
72
|
+
sHeight: number;
|
|
71
73
|
/** Current viewport width divided by 100 */
|
|
72
74
|
vw: number;
|
|
73
75
|
/** Current viewport height divided by 100 */
|
|
74
76
|
vh: number;
|
|
77
|
+
/** Current viewport small height divided by 100 (svh) */
|
|
78
|
+
svh: number;
|
|
75
79
|
/** Is viewport in landscape mode */
|
|
76
80
|
isLandscape: boolean;
|
|
77
81
|
/** Is viewport in portrait mode */
|
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
|
|
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/version.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const version = '4.
|
|
1
|
+
const version = '4.2.0';
|
|
2
2
|
export default version;
|