center-center 0.0.7 → 0.0.10

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.
Files changed (3) hide show
  1. package/index.d.mts +35 -0
  2. package/index.mjs +43 -2
  3. package/package.json +16 -5
package/index.d.mts ADDED
@@ -0,0 +1,35 @@
1
+ export function getScrollingElement (): ScrollingElement
2
+ export function getViewportRect (): CenterCenterRect
3
+ export function getElementRect (element: Element): CenterCenterRect
4
+ export function getRects (container: Element, target: Element): CenterCenterRects
5
+ export function calculateLeft ({ viewport: { left: viewportL, right: viewportR }, container: { width: containerW, left: containerL, right: containerR }, target: { width: targetW } }: CenterCenterRects): number
6
+ export function calculateTop ({ viewport: { top: viewportT, bottom: viewportB }, container: { height: containerH, top: containerT, bottom: containerB }, target: { height: targetH } }: CenterCenterRects): number
7
+
8
+ /**
9
+ * The document `scrollingElement`
10
+ */
11
+ export interface ScrollingElement {
12
+ scrollLeft: number
13
+ scrollTop: number
14
+ }
15
+
16
+ /**
17
+ * A Center Center `Rect`
18
+ */
19
+ export interface CenterCenterRect {
20
+ width: number
21
+ height: number
22
+ left: number
23
+ top: number
24
+ right: number
25
+ bottom: number
26
+ }
27
+
28
+ /**
29
+ * Center Center `Rects`
30
+ */
31
+ export interface CenterCenterRects {
32
+ viewport: CenterCenterRect
33
+ container: CenterCenterRect
34
+ target: CenterCenterRect
35
+ }
package/index.mjs CHANGED
@@ -1,4 +1,15 @@
1
- export function getScrollingElement (document) {
1
+ /**
2
+ * @typedef {import('.').ScrollingElement} ScrollingElement
3
+ * @typedef {import('.').CenterCenterRect} CenterCenterRect
4
+ * @typedef {import('.').CenterCenterRects} CenterCenterRects
5
+ */
6
+
7
+ /**
8
+ * Gets the document `scrollingElement` (or a valid alternative)
9
+ *
10
+ * @returns {ScrollingElement}
11
+ */
12
+ export function getScrollingElement () {
2
13
  if (Reflect.has(document, 'scrollingElement')) {
3
14
  const scrollingElement = Reflect.get(document, 'scrollingElement')
4
15
  if (scrollingElement) return scrollingElement
@@ -10,6 +21,11 @@ export function getScrollingElement (document) {
10
21
  }
11
22
  }
12
23
 
24
+ /**
25
+ * Gets a `Rect` for the viewport
26
+ *
27
+ * @returns {CenterCenterRect}
28
+ */
13
29
  export function getViewportRect () {
14
30
  const {
15
31
  innerWidth: width,
@@ -19,7 +35,7 @@ export function getViewportRect () {
19
35
  const {
20
36
  scrollLeft: left,
21
37
  scrollTop: top
22
- } = getScrollingElement(document)
38
+ } = getScrollingElement()
23
39
 
24
40
  return {
25
41
  width,
@@ -31,6 +47,12 @@ export function getViewportRect () {
31
47
  }
32
48
  }
33
49
 
50
+ /**
51
+ * Gets a `Rect` for a DOM element
52
+ *
53
+ * @param {Element} element
54
+ * @returns {CenterCenterRect}
55
+ */
34
56
  export function getElementRect (element) {
35
57
  const {
36
58
  offsetWidth: width,
@@ -49,6 +71,13 @@ export function getElementRect (element) {
49
71
  }
50
72
  }
51
73
 
74
+ /**
75
+ * Gets `Rects` for the viewport as well as the container and target elements
76
+ *
77
+ * @param {Element} container
78
+ * @param {Element} target
79
+ * @returns {CenterCenterRects}
80
+ */
52
81
  export function getRects (container, target) {
53
82
  return {
54
83
  viewport: getViewportRect(),
@@ -57,6 +86,12 @@ export function getRects (container, target) {
57
86
  }
58
87
  }
59
88
 
89
+ /**
90
+ * Calculates the target `left` position
91
+ *
92
+ * @param {CenterCenterRects}
93
+ * @returns {number}
94
+ */
60
95
  export function calculateLeft ({
61
96
  viewport: {
62
97
  left: viewportL,
@@ -82,6 +117,12 @@ export function calculateLeft ({
82
117
  )
83
118
  }
84
119
 
120
+ /**
121
+ * Calculates the target `top` position
122
+ *
123
+ * @param {CenterCenterRects}
124
+ * @returns {number}
125
+ */
85
126
  export function calculateTop ({
86
127
  viewport: {
87
128
  top: viewportT,
package/package.json CHANGED
@@ -1,9 +1,10 @@
1
1
  {
2
2
  "name": "center-center",
3
- "version": "0.0.7",
3
+ "version": "0.0.10",
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": "cross-env NODE_ENV=production eslint . --ext .mjs,.cjs",
19
- "lint:fix": "npm run lint -- --fix",
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"