center-center 0.0.7 → 0.0.9
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/index.d.mts +95 -0
- package/index.d.mts.map +1 -0
- package/index.mjs +65 -2
- package/package.json +16 -5
- package/tsconfig.json +10 -0
package/index.d.mts
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A Center Center `Rect`
|
|
3
|
+
*
|
|
4
|
+
* @typedef {{
|
|
5
|
+
* width: number,
|
|
6
|
+
* height: number,
|
|
7
|
+
* left: number,
|
|
8
|
+
* top: number,
|
|
9
|
+
* right: number,
|
|
10
|
+
* bottom: number
|
|
11
|
+
* }} CenterCenterRect
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* Gets the scroll position of the document `scrollingElement`
|
|
15
|
+
*
|
|
16
|
+
* @returns {{
|
|
17
|
+
* scrollLeft: number,
|
|
18
|
+
* scrollTop: number
|
|
19
|
+
* }}
|
|
20
|
+
*/
|
|
21
|
+
export function getScrollingElement (): {
|
|
22
|
+
scrollLeft: number
|
|
23
|
+
scrollTop: number
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Gets a `Rect` for the viewport
|
|
27
|
+
*
|
|
28
|
+
* @returns {CenterCenterRect}
|
|
29
|
+
*/
|
|
30
|
+
export function getViewportRect (): CenterCenterRect
|
|
31
|
+
/**
|
|
32
|
+
* Gets a `Rect` for a DOM element
|
|
33
|
+
*
|
|
34
|
+
* @param {Element} element
|
|
35
|
+
* @returns {CenterCenterRect}
|
|
36
|
+
*/
|
|
37
|
+
export function getElementRect (element: Element): CenterCenterRect
|
|
38
|
+
/**
|
|
39
|
+
* Gets `Rects` for the viewport as well as the container and target elements
|
|
40
|
+
*
|
|
41
|
+
* @param {Element} container
|
|
42
|
+
* @param {Element} target
|
|
43
|
+
* @returns {{
|
|
44
|
+
* viewport: CenterCenterRect,
|
|
45
|
+
* container: CenterCenterRect,
|
|
46
|
+
* target: CenterCenterRect
|
|
47
|
+
* }}
|
|
48
|
+
*/
|
|
49
|
+
export function getRects (container: Element, target: Element): {
|
|
50
|
+
viewport: CenterCenterRect
|
|
51
|
+
container: CenterCenterRect
|
|
52
|
+
target: CenterCenterRect
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Calculates the target `left` position
|
|
56
|
+
*
|
|
57
|
+
* @param {{
|
|
58
|
+
* viewport: CenterCenterRect,
|
|
59
|
+
* container: CenterCenterRect,
|
|
60
|
+
* target: CenterCenterRect
|
|
61
|
+
* }}
|
|
62
|
+
* @returns {number}
|
|
63
|
+
*/
|
|
64
|
+
export function calculateLeft ({ viewport: { left: viewportL, right: viewportR }, container: { width: containerW, left: containerL, right: containerR }, target: { width: targetW } }: {
|
|
65
|
+
viewport: CenterCenterRect
|
|
66
|
+
container: CenterCenterRect
|
|
67
|
+
target: CenterCenterRect
|
|
68
|
+
}): number
|
|
69
|
+
/**
|
|
70
|
+
* Calculates the target `top` position
|
|
71
|
+
*
|
|
72
|
+
* @param {{
|
|
73
|
+
* viewport: CenterCenterRect,
|
|
74
|
+
* container: CenterCenterRect,
|
|
75
|
+
* target: CenterCenterRect
|
|
76
|
+
* }}
|
|
77
|
+
* @returns {number}
|
|
78
|
+
*/
|
|
79
|
+
export function calculateTop ({ viewport: { top: viewportT, bottom: viewportB }, container: { height: containerH, top: containerT, bottom: containerB }, target: { height: targetH } }: {
|
|
80
|
+
viewport: CenterCenterRect
|
|
81
|
+
container: CenterCenterRect
|
|
82
|
+
target: CenterCenterRect
|
|
83
|
+
}): number
|
|
84
|
+
/**
|
|
85
|
+
* A Center Center `Rect`
|
|
86
|
+
*/
|
|
87
|
+
export interface CenterCenterRect {
|
|
88
|
+
width: number
|
|
89
|
+
height: number
|
|
90
|
+
left: number
|
|
91
|
+
top: number
|
|
92
|
+
right: number
|
|
93
|
+
bottom: number
|
|
94
|
+
}
|
|
95
|
+
// # sourceMappingURL=index.d.mts.map
|
package/index.d.mts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["index.mjs"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;;;;;GAOG;AACH,uCALa;IACZ,UAAa,EAAE,MAAM,CAAC;IACtB,SAAY,EAAE,MAAM,CAAA;CACjB,CAYH;AAED;;;;GAIG;AACH,mCAFa,gBAAgB,CAqB5B;AAED;;;;;EAKE;AACF,wCAHW,OAAO,GACL,gBAAgB,CAkB5B;AAED;;;;;;;;;;GAUG;AACH,oCARW,OAAO,UACP,OAAO,GACL;IACZ,QAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAY,EAAE,gBAAgB,CAAC;IAC/B,MAAS,EAAE,gBAAgB,CAAA;CACxB,CAQH;AAED;;;;;;;;;GASG;AACH,sLAPW;IACV,QAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAY,EAAE,gBAAgB,CAAC;IAC/B,MAAS,EAAE,gBAAgB,CAAA;CACxB,GACS,MAAM,CAyBlB;AAED;;;;;;;;;GASG;AACH,uLAPW;IACV,QAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAY,EAAE,gBAAgB,CAAC;IAC/B,MAAS,EAAE,gBAAgB,CAAA;CACxB,GACS,MAAM,CAyBlB;;;;+BAvKY;IACZ,KAAU,EAAE,MAAM,CAAC;IACnB,MAAW,EAAE,MAAM,CAAC;IACpB,IAAS,EAAE,MAAM,CAAC;IAClB,KAAU,MAAM,CAAC;IACjB,KAAU,EAAE,MAAM,CAAC;IACnB,MAAW,EAAE,MAAM,CAAA;CACf"}
|
package/index.mjs
CHANGED
|
@@ -1,4 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* A Center Center `Rect`
|
|
3
|
+
*
|
|
4
|
+
* @typedef {{
|
|
5
|
+
* width: number,
|
|
6
|
+
* height: number,
|
|
7
|
+
* left: number,
|
|
8
|
+
* top: number,
|
|
9
|
+
* right: number,
|
|
10
|
+
* bottom: number
|
|
11
|
+
* }} CenterCenterRect
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Gets the scroll position of the document `scrollingElement`
|
|
16
|
+
*
|
|
17
|
+
* @returns {{
|
|
18
|
+
* scrollLeft: number,
|
|
19
|
+
* scrollTop: number
|
|
20
|
+
* }}
|
|
21
|
+
*/
|
|
22
|
+
export function getScrollingElement () {
|
|
2
23
|
if (Reflect.has(document, 'scrollingElement')) {
|
|
3
24
|
const scrollingElement = Reflect.get(document, 'scrollingElement')
|
|
4
25
|
if (scrollingElement) return scrollingElement
|
|
@@ -10,6 +31,11 @@ export function getScrollingElement (document) {
|
|
|
10
31
|
}
|
|
11
32
|
}
|
|
12
33
|
|
|
34
|
+
/**
|
|
35
|
+
* Gets a `Rect` for the viewport
|
|
36
|
+
*
|
|
37
|
+
* @returns {CenterCenterRect}
|
|
38
|
+
*/
|
|
13
39
|
export function getViewportRect () {
|
|
14
40
|
const {
|
|
15
41
|
innerWidth: width,
|
|
@@ -19,7 +45,7 @@ export function getViewportRect () {
|
|
|
19
45
|
const {
|
|
20
46
|
scrollLeft: left,
|
|
21
47
|
scrollTop: top
|
|
22
|
-
} = getScrollingElement(
|
|
48
|
+
} = getScrollingElement()
|
|
23
49
|
|
|
24
50
|
return {
|
|
25
51
|
width,
|
|
@@ -31,6 +57,12 @@ export function getViewportRect () {
|
|
|
31
57
|
}
|
|
32
58
|
}
|
|
33
59
|
|
|
60
|
+
/**
|
|
61
|
+
* Gets a `Rect` for a DOM element
|
|
62
|
+
*
|
|
63
|
+
* @param {Element} element
|
|
64
|
+
* @returns {CenterCenterRect}
|
|
65
|
+
*/
|
|
34
66
|
export function getElementRect (element) {
|
|
35
67
|
const {
|
|
36
68
|
offsetWidth: width,
|
|
@@ -49,6 +81,17 @@ export function getElementRect (element) {
|
|
|
49
81
|
}
|
|
50
82
|
}
|
|
51
83
|
|
|
84
|
+
/**
|
|
85
|
+
* Gets `Rects` for the viewport as well as the container and target elements
|
|
86
|
+
*
|
|
87
|
+
* @param {Element} container
|
|
88
|
+
* @param {Element} target
|
|
89
|
+
* @returns {{
|
|
90
|
+
* viewport: CenterCenterRect,
|
|
91
|
+
* container: CenterCenterRect,
|
|
92
|
+
* target: CenterCenterRect
|
|
93
|
+
* }}
|
|
94
|
+
*/
|
|
52
95
|
export function getRects (container, target) {
|
|
53
96
|
return {
|
|
54
97
|
viewport: getViewportRect(),
|
|
@@ -57,6 +100,16 @@ export function getRects (container, target) {
|
|
|
57
100
|
}
|
|
58
101
|
}
|
|
59
102
|
|
|
103
|
+
/**
|
|
104
|
+
* Calculates the target `left` position
|
|
105
|
+
*
|
|
106
|
+
* @param {{
|
|
107
|
+
* viewport: CenterCenterRect,
|
|
108
|
+
* container: CenterCenterRect,
|
|
109
|
+
* target: CenterCenterRect
|
|
110
|
+
* }}
|
|
111
|
+
* @returns {number}
|
|
112
|
+
*/
|
|
60
113
|
export function calculateLeft ({
|
|
61
114
|
viewport: {
|
|
62
115
|
left: viewportL,
|
|
@@ -82,6 +135,16 @@ export function calculateLeft ({
|
|
|
82
135
|
)
|
|
83
136
|
}
|
|
84
137
|
|
|
138
|
+
/**
|
|
139
|
+
* Calculates the target `top` position
|
|
140
|
+
*
|
|
141
|
+
* @param {{
|
|
142
|
+
* viewport: CenterCenterRect,
|
|
143
|
+
* container: CenterCenterRect,
|
|
144
|
+
* target: CenterCenterRect
|
|
145
|
+
* }}
|
|
146
|
+
* @returns {number}
|
|
147
|
+
*/
|
|
85
148
|
export function calculateTop ({
|
|
86
149
|
viewport: {
|
|
87
150
|
top: viewportT,
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "center-center",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"description": "Position an element at the center center of a container",
|
|
5
5
|
"main": "./index.mjs",
|
|
6
6
|
"type": "module",
|
|
7
|
+
"types": "./index.d.mts",
|
|
7
8
|
"author": {
|
|
8
9
|
"name": "Jonathan Perry for Sequence Media Limited",
|
|
9
10
|
"email": "sequencemedia@sequencemedia.net",
|
|
@@ -15,10 +16,15 @@
|
|
|
15
16
|
"url": "git+https://github.com/sequencemedia/center-center.git"
|
|
16
17
|
},
|
|
17
18
|
"scripts": {
|
|
18
|
-
"lint": "
|
|
19
|
-
"lint:
|
|
19
|
+
"lint": "run-s lint:mjs lint:mts",
|
|
20
|
+
"lint:mjs": "cross-env NODE_ENV=production eslint . --ext .mjs,.cjs",
|
|
21
|
+
"lint:mts": "cross-env NODE_ENV=production eslint . --ext .mts,.cts",
|
|
22
|
+
"lint:fix": "run-s lint:mjs:fix lint:mts:fix",
|
|
23
|
+
"lint:mjs:fix": "npm run lint:mjs -- --fix",
|
|
24
|
+
"lint:mts:fix": "npm run lint:mts -- --fix",
|
|
20
25
|
"test": "cross-env NODE_ENV=test mocha test --recursive",
|
|
21
|
-
"prepare": "husky install"
|
|
26
|
+
"prepare": "husky install",
|
|
27
|
+
"types": "tsc"
|
|
22
28
|
},
|
|
23
29
|
"dependencies": {
|
|
24
30
|
"debug": "^4.3.4"
|
|
@@ -29,13 +35,18 @@
|
|
|
29
35
|
"@babel/eslint-parser": "^7.23.9",
|
|
30
36
|
"@babel/preset-env": "^7.23.9",
|
|
31
37
|
"@sequencemedia/hooks": "^1.0.475",
|
|
38
|
+
"@typescript-eslint/eslint-plugin": "^6.19.1",
|
|
39
|
+
"@typescript-eslint/parser": "^6.19.1",
|
|
32
40
|
"chai": "^5.0.3",
|
|
33
41
|
"core-js": "^3.35.1",
|
|
34
42
|
"cross-env": "^7.0.3",
|
|
35
43
|
"eslint": "^8.56.0",
|
|
36
44
|
"eslint-config-standard": "^17.1.0",
|
|
45
|
+
"eslint-config-standard-with-typescript": "^43.0.1",
|
|
37
46
|
"husky": "^9.0.6",
|
|
38
|
-
"mocha": "^10.2.0"
|
|
47
|
+
"mocha": "^10.2.0",
|
|
48
|
+
"npm-run-all": "^4.1.5",
|
|
49
|
+
"typescript": "^5.3.3"
|
|
39
50
|
},
|
|
40
51
|
"imports": {
|
|
41
52
|
"#center-center": "./index.mjs"
|