center-center 0.0.19 → 0.0.20

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 (4) hide show
  1. package/docs/index.html +1 -0
  2. package/index.d.mts +8 -4
  3. package/index.mjs +69 -22
  4. package/package.json +1 -1
package/docs/index.html CHANGED
@@ -1,3 +1,4 @@
1
+ <!DOCTYPE html>
1
2
  <html>
2
3
  <head>
3
4
  <meta name="viewport" content="width=device-width, initial-scale=1" />
package/index.d.mts CHANGED
@@ -1,9 +1,13 @@
1
+ export function getParentElementForOffsetLeft (element: SVGElement): Element
2
+ export function getParentElementForOffsetTop (element: SVGElement): Element
3
+ export function getLeft (element: Element | SVGElement): number
4
+ export function getTop (element: Element | SVGElement): number
1
5
  export function getScrollingElement (): ScrollingElement
2
6
  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
+ export function getElementRect (element: Element | SVGElement): CenterCenterRect
8
+ export function getRects (container: Element, target: Element | SVGElement): CenterCenterRects
9
+ export function calculateLeft (rects: CenterCenterRects): number
10
+ export function calculateTop (rects: CenterCenterRects): number
7
11
 
8
12
  /**
9
13
  * The document `scrollingElement`
package/index.mjs CHANGED
@@ -4,49 +4,95 @@
4
4
  * @typedef {import('.').CenterCenterRects} CenterCenterRects
5
5
  */
6
6
 
7
- const elementMap = new WeakMap()
7
+ const leftMap = new WeakMap()
8
+ const topMap = new WeakMap()
8
9
 
9
- export function getOffsetParentElement (element) {
10
+ /**
11
+ * Gets a parent element with `offsetLeft`
12
+ *
13
+ * @param {SVGElement} element
14
+ * @returns {Element}
15
+ */
16
+ export function getParentElementForOffsetLeft (element) {
17
+ let parentElement = element.parentElement
18
+
19
+ while (!Reflect.has(parentElement, 'offsetLeft')) {
20
+ parentElement = parentElement.parentElement
21
+ }
22
+
23
+ return parentElement
24
+ }
25
+
26
+ /**
27
+ * Gets a parent element with `offsetTop`
28
+ *
29
+ * @param {SVGElement} element
30
+ * @returns {Element}
31
+ */
32
+ export function getParentElementForOffsetTop (element) {
10
33
  let parentElement = element.parentElement
11
- while (!Reflect.has(parentElement, 'offsetLeft') && !Reflect.has(parentElement, 'offsetTop')) {
12
- parentElement = element.parentElement
34
+
35
+ while (!Reflect.has(parentElement, 'offsetTop')) {
36
+ parentElement = parentElement.parentElement
13
37
  }
14
38
 
15
39
  return parentElement
16
40
  }
17
41
 
18
- export function getOffsetLeft (element) {
42
+ /**
43
+ * Gets the `offsetLeft` from the element or calculates the equivalent with
44
+ * DOMRect `left` and the nearest `offsetLeft` from a parent
45
+ *
46
+ * @param {Element | SVGElement} element
47
+ * @returns {number}
48
+ */
49
+ export function getLeft (element) {
19
50
  if (Reflect.has(element, 'offsetLeft')) {
20
- return Reflect.get(element, 'offsetLeft')
51
+ return (
52
+ Reflect.get(element, 'offsetLeft')
53
+ )
21
54
  }
22
55
 
56
+ if (!leftMap.has(element)) leftMap.set(element, getParentElementForOffsetLeft(element))
23
57
  const {
24
- left
25
- } = element.getBoundingClientRect()
58
+ offsetLeft = 0
59
+ } = leftMap.get(element)
26
60
 
27
- if (!elementMap.has(element)) elementMap.set(element, getOffsetParentElement(element))
28
61
  const {
29
- offsetLeft = 0
30
- } = elementMap.get(element)
62
+ left
63
+ } = element.getBoundingClientRect()
31
64
 
32
- return offsetLeft + (offsetLeft - left)
65
+ return (
66
+ offsetLeft - left
67
+ )
33
68
  }
34
69
 
35
- export function getOffsetTop (element) {
70
+ /**
71
+ * Gets the `offsetTop` from the element or calculates the equivalent with
72
+ * DOMRect `top` and the nearest `offsetTop` from a parent
73
+ *
74
+ * @param {Element | SVGElement} element
75
+ * @returns {number}
76
+ */
77
+ export function getTop (element) {
36
78
  if (Reflect.has(element, 'offsetTop')) {
37
- return Reflect.get(element, 'offsetTop')
79
+ return (
80
+ Reflect.get(element, 'offsetTop')
81
+ )
38
82
  }
39
83
 
40
84
  const {
41
85
  top
42
86
  } = element.getBoundingClientRect()
43
87
 
44
- if (!elementMap.has(element)) elementMap.set(element, getOffsetParentElement(element))
88
+ if (!topMap.has(element)) topMap.set(element, getParentElementForOffsetTop(element))
45
89
  const {
46
90
  offsetTop = 0
47
- } = elementMap.get(element)
91
+ } = topMap.get(element)
48
92
 
49
- return offsetTop + (offsetTop - top)
93
+ return (
94
+ offsetTop - top
95
+ )
50
96
  }
51
97
 
52
98
  /**
@@ -100,11 +146,12 @@ export function getViewportRect () {
100
146
  */
101
147
  export function getElementRect (element) {
102
148
  const {
103
- offsetWidth: width,
104
- offsetHeight: height,
105
- offsetLeft: left,
106
- offsetTop: top
107
- } = element
149
+ width,
150
+ height
151
+ } = element.getBoundingClientRect()
152
+
153
+ const left = getLeft(element)
154
+ const top = getTop(element)
108
155
 
109
156
  return {
110
157
  width,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "center-center",
3
- "version": "0.0.19",
3
+ "version": "0.0.20",
4
4
  "description": "Position an element at the center center of a container",
5
5
  "main": "./index.mjs",
6
6
  "type": "module",