center-center 0.0.1 → 0.0.3

package/index.mjs

@@ -2,80 +2,62 @@ import debug from 'debug'
 
 const log = debug('center-center')
 
-export function getViewportRect () {
-  const {
-    innerWidth: viewportW,
-    innerHeight: viewportH
-  } = window
-
-  const {
-    scrollingElement: {
-      scrollLeft: viewportL,
-      scrollTop: viewportT
-    }
-  } = document
-
-  const viewportR = (viewportL + viewportW)
-  const viewportB = (viewportT + viewportH)
+export function getScrollingElement (document) {
+  if (Reflect.has(document, 'scrollingElement')) {
+    const scrollingElement = Reflect.get(document, 'scrollingElement')
+    if (scrollingElement) return scrollingElement
+  }
 
   return {
-    top: viewportT,
-    right: viewportR,
-    bottom: viewportB,
-    left: viewportL,
-    width: viewportW,
-    height: viewportH
+    scrollLeft: 0,
+    scrollTop: 0
   }
 }
 
-export function getContainerRect (container) {
+export function getViewportRect () {
   const {
-    offsetLeft: containerL,
-    offsetTop: containerT
-  } = container
+    innerWidth: width,
+    innerHeight: height
+  } = window
 
-  /**
-   * x/top is relative to the viewport
-   */
   const {
-    x: containerX,
-    y: containerY,
-    width: containerW,
-    height: containerH
-  } = container.getBoundingClientRect()
-
-  const containerR = (containerL + containerW)
-  const containerB = (containerT + containerH)
+    scrollLeft: left,
+    scrollTop: top
+  } = getScrollingElement(document)
 
   return {
-    x: containerX,
-    y: containerY,
-    top: containerT,
-    right: containerR,
-    bottom: containerB,
-    left: containerL,
-    width: containerW,
-    height: containerH
+    width,
+    height,
+    left,
+    top,
+    right: (left + width),
+    bottom: (top + height)
   }
 }
 
-export function getTargetRect (target) {
+export function getElementRect (element) {
   const {
-    offsetWidth: targetW,
-    offsetHeight: targetH
-  } = target
+    offsetWidth: width,
+    offsetHeight: height,
+    offsetLeft: left,
+    offsetTop: top
+  } = element
 
   return {
-    width: targetW,
-    height: targetH
+    width,
+    height,
+    left,
+    top,
+    right: (left + width),
+    bottom: (top + height)
   }
 }
 
 export function getRects (container, target) {
   return {
     viewport: getViewportRect(),
-    container: getContainerRect(container),
-    target: getTargetRect(target)
+    container: getElementRect(container),
+    target: getElementRect(target)
   }
 }
 
@@ -83,7 +65,7 @@ export function calculateLeft ({
   viewport: {
     left: viewportL,
     right: viewportR,
-    height: viewportH
+    width: viewportW
   },
   container: {
     left: containerL,
@@ -94,6 +76,20 @@ export function calculateLeft ({
     width: targetW
   }
 }) {
+  if (viewportL === containerL) {
+    if (viewportW === containerW) {
+      const availableW = Math.max(targetW, containerW)
+
+      return ((availableW / 2) - (targetW / 2))
+    }
+
+    if (viewportW > containerW) {
+      const availableW = Math.max(targetW, (containerL + containerW))
+
+      return ((availableW / 2) - (targetW / 2))
+    }
+  }
+
   if (viewportL > containerL) {
     if (containerR > viewportL) {
       if (viewportR > containerR) {
@@ -107,7 +103,7 @@ export function calculateLeft ({
       if (containerR > viewportR) {
         log('calculate viewportL to viewportR')
 
-        const availableW = Math.max(targetW, viewportH)
+        const availableW = Math.max(targetW, viewportW)
 
         return (viewportL - containerL) + ((availableW / 2) - (targetW / 2))
       }
@@ -138,11 +134,19 @@ export function calculateLeft ({
     }
 
     if (viewportR > containerL) {
-      log('calculate containerL to viewportR')
+      if (viewportR > containerR) {
+        log('calculate containerL to containerR')
 
-      const availableW = Math.max(targetW, (viewportR - containerL))
+        const availableW = Math.max(targetW, (containerR - containerL))
 
-      return ((availableW / 2) - (targetW / 2))
+        return ((availableW / 2) - (targetW / 2))
+      } else {
+        log('calculate containerL to viewportR')
+
+        const availableW = Math.max(targetW, (viewportR - containerL))
+
+        return ((availableW / 2) - (targetW / 2))
+      }
     }
   }
 }
@@ -162,6 +166,20 @@ export function calculateTop ({
     height: targetH
   }
 }) {
+  if (viewportT === containerT) {
+    if (viewportH === containerH) {
+      const availableH = Math.max(targetH, containerH)
+
+      return ((availableH / 2) - (targetH / 2))
+    }
+
+    if (viewportB > containerB) {
+      const availableH = Math.max(targetH, (containerT + containerB))
+
+      return ((availableH / 2) - (targetH / 2))
+    }
+  }
+
   if (viewportT > containerT) {
     if (containerB > viewportT) {
       if (viewportB > containerB) {
@@ -206,11 +224,19 @@ export function calculateTop ({
     }
 
     if (viewportB > containerT) {
-      log('calculate containerT to viewportB')
+      if (viewportB > containerB) {
+        log('calculate containerT to containerB')
 
-      const availableH = Math.max(targetH, (viewportB - containerT))
+        const availableH = Math.max(targetH, (containerB - containerT))
 
-      return ((availableH / 2) - (targetH / 2))
+        return ((availableH / 2) - (targetH / 2))
+      } else {
+        log('calculate containerT to viewportB')
+
+        const availableH = Math.max(targetH, (viewportB - containerT))
+
+        return ((availableH / 2) - (targetH / 2))
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "center-center",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Position an element at the center center of a container",
   "main": "./index.mjs",
   "type": "module",
@@ -11,7 +11,8 @@
   },
   "scripts": {
     "lint": "cross-env NODE_ENV=production eslint . --ext .mjs,.cjs",
-    "lint:fix": "npm run lint -- --fix"
+    "lint:fix": "npm run lint -- --fix",
+    "test": "cross-env NODE_ENV=test mocha test --recursive"
   },
   "dependencies": {
     "debug": "^4.3.4"
@@ -21,9 +22,14 @@
     "@babel/core": "^7.22.17",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/preset-env": "^7.22.15",
+    "chai": "^5.0.0",
     "core-js": "^3.32.2",
     "cross-env": "^7.0.3",
     "eslint": "^8.49.0",
-    "eslint-config-standard": "^17.1.0"
+    "eslint-config-standard": "^17.1.0",
+    "mocha": "^10.2.0"
+  },
+  "imports": {
+    "#center-center": "./index.mjs"
   }
 }

package/test/index.spec.mjs

@@ -0,0 +1,316 @@
+import {
+  expect
+} from 'chai'
+
+import {
+  getScrollingElement,
+  getViewportRect,
+  getElementRect,
+  getRects,
+  calculateLeft,
+  calculateTop
+} from '#center-center'
+
+describe('`center-center`', () => {
+  it('exports `getScrollingElement`', () => expect(getScrollingElement).to.be.a('function'))
+
+  it('exports `getViewportRect`', () => expect(getViewportRect).to.be.a('function'))
+
+  it('exports `getElementRect`', () => expect(getElementRect).to.be.a('function'))
+
+  it('exports `getRects`', () => expect(getRects).to.be.a('function'))
+
+  it('exports `calculateLeft`', () => expect(calculateLeft).to.be.a('function'))
+
+  it('exports `calculateTop`', () => expect(calculateTop).to.be.a('function'))
+
+  describe('`getScrollingElement()`', () => {
+    describe('`scrollingElement` is defined', () => {
+      describe('`scrollingElement` is null', () => {
+        it('returns an object', () => {
+          return (
+            expect(getScrollingElement({ scrollingElement: null }))
+              .to.eql({
+                scrollLeft: 0,
+                scrollTop: 0
+              })
+          )
+        })
+      })
+
+      describe('`scrollingElement` is an object', () => {
+        it('returns an object', () => {
+          return (
+            expect(getScrollingElement({ scrollingElement: { scrollLeft: 'MOCK SCROLL LEFT', scrollTop: 'MOCK SCROLL TOP' } }))
+              .to.eql({
+                scrollLeft: 'MOCK SCROLL LEFT',
+                scrollTop: 'MOCK SCROLL TOP'
+              })
+          )
+        })
+      })
+    })
+
+    describe('`scrollingElement` is not defined', () => {
+      it('returns an object', () => {
+        return (
+          expect(getScrollingElement({}))
+            .to.eql({
+              scrollLeft: 0,
+              scrollTop: 0
+            })
+        )
+      })
+    })
+  })
+
+  describe('`getViewportRect()`', () => {
+    beforeEach(() => {
+      global.window = {
+        innerWidth: 'MOCK INNER WIDTH',
+        innerHeight: 'MOCK INNER HEIGHT'
+      }
+
+      global.document = {
+        scrollingElement: {
+          scrollLeft: 'MOCK SCROLL LEFT',
+          scrollTop: 'MOCK SCROLL TOP'
+        }
+      }
+    })
+
+    afterEach(() => {
+      delete global.window
+      delete global.document
+    })
+
+    it('returns an object', () => expect(getViewportRect()).to.eql({
+      top: 'MOCK SCROLL TOP',
+      right: 'MOCK SCROLL LEFTMOCK INNER WIDTH',
+      bottom: 'MOCK SCROLL TOPMOCK INNER HEIGHT',
+      left: 'MOCK SCROLL LEFT',
+      width: 'MOCK INNER WIDTH',
+      height: 'MOCK INNER HEIGHT'
+    }))
+  })
+
+  describe('`getElementRect()`', () => {
+    const mockElement = {
+      offsetLeft: 'MOCK OFFSET LEFT',
+      offsetTop: 'MOCK OFFSET TOP',
+      offsetWidth: 'MOCK OFFSET WIDTH',
+      offsetHeight: 'MOCK OFFSET HEIGHT'
+    }
+
+    it('returns an object', () => {
+      return (
+        expect(getElementRect(mockElement))
+          .to.eql({
+            left: 'MOCK OFFSET LEFT',
+            top: 'MOCK OFFSET TOP',
+            width: 'MOCK OFFSET WIDTH',
+            height: 'MOCK OFFSET HEIGHT',
+            right: 'MOCK OFFSET LEFTMOCK OFFSET WIDTH',
+            bottom: 'MOCK OFFSET TOPMOCK OFFSET HEIGHT'
+          })
+      )
+    })
+  })
+
+  describe('`getRects()`', () => {
+    const mockContainer = {
+      offsetLeft: 'MOCK OFFSET LEFT',
+      offsetTop: 'MOCK OFFSET TOP',
+      offsetWidth: 'MOCK OFFSET WIDTH',
+      offsetHeight: 'MOCK OFFSET HEIGHT'
+    }
+
+    const mockTarget = {
+      offsetLeft: 'MOCK OFFSET LEFT',
+      offsetTop: 'MOCK OFFSET TOP',
+      offsetWidth: 'MOCK OFFSET WIDTH',
+      offsetHeight: 'MOCK OFFSET HEIGHT'
+    }
+
+    beforeEach(() => {
+      global.window = {
+        innerWidth: 'MOCK INNER WIDTH',
+        innerHeight: 'MOCK INNER HEIGHT'
+      }
+
+      global.document = {
+        scrollingElement: {
+          scrollLeft: 'MOCK SCROLL LEFT',
+          scrollTop: 'MOCK SCROLL TOP'
+        }
+      }
+    })
+
+    afterEach(() => {
+      delete global.window
+      delete global.document
+    })
+
+    it('returns an object', () => {
+      return (
+        expect(getRects(mockContainer, mockTarget))
+          .to.eql({
+            viewport: {
+              top: 'MOCK SCROLL TOP',
+              right: 'MOCK SCROLL LEFTMOCK INNER WIDTH',
+              bottom: 'MOCK SCROLL TOPMOCK INNER HEIGHT',
+              left: 'MOCK SCROLL LEFT',
+              width: 'MOCK INNER WIDTH',
+              height: 'MOCK INNER HEIGHT'
+            },
+            container: {
+              left: 'MOCK OFFSET LEFT',
+              top: 'MOCK OFFSET TOP',
+              width: 'MOCK OFFSET WIDTH',
+              height: 'MOCK OFFSET HEIGHT',
+              right: 'MOCK OFFSET LEFTMOCK OFFSET WIDTH',
+              bottom: 'MOCK OFFSET TOPMOCK OFFSET HEIGHT'
+            },
+            target: {
+              left: 'MOCK OFFSET LEFT',
+              top: 'MOCK OFFSET TOP',
+              width: 'MOCK OFFSET WIDTH',
+              height: 'MOCK OFFSET HEIGHT',
+              right: 'MOCK OFFSET LEFTMOCK OFFSET WIDTH',
+              bottom: 'MOCK OFFSET TOPMOCK OFFSET HEIGHT'
+            }
+          })
+      )
+    })
+  })
+
+  describe('Container is shorter than the Window', () => {
+    const rects = {
+      viewport: {
+        top: 0,
+        right: 1440,
+        bottom: 900,
+        left: 0,
+        width: 1440,
+        height: 900
+      },
+      container: {
+        x: 0,
+        y: 90,
+        top: 90,
+        right: 1440,
+        bottom: 810,
+        left: 0,
+        width: 1440,
+        height: 720
+      },
+      target: {
+        width: 50,
+        height: 50
+      }
+    }
+
+    describe('`calculateLeft()`', () => {
+      /**
+       *  Window is 1440 x 900
+       *  Header is 1440 x 90
+       *  Container is 1440 x 720
+       *  Footer is 1440 x 90
+       *  Target is 50 x 50
+       */
+      it('returns an object', () => {
+        /**
+         *  (1440 / 2) - (50 / 2)
+         */
+        return (
+          expect(calculateLeft(rects))
+            .to.equal(695)
+        )
+      })
+    })
+
+    describe('`calculateTop()`', () => {
+      /**
+       *  Window is 1440 x 900
+       *  Header is 1440 x 90
+       *  Container is 1440 x 720
+       *  Footer is 1440 x 90
+       *  Target is 50 x 50
+       */
+      it('returns an object', () => {
+        /**
+         *  (720 / 2) - (50 / 2)
+         */
+        return (
+          expect(calculateTop(rects))
+            .to.equal(335)
+        )
+      })
+    })
+  })
+
+  describe('Container is taller than the Window', () => {
+    const rects = {
+      viewport: {
+        top: 0,
+        right: 1440,
+        bottom: 900,
+        left: 0,
+        width: 1440,
+        height: 900
+      },
+      container: {
+        x: 0,
+        y: 90,
+        top: 90,
+        right: 1440,
+        bottom: 1080,
+        left: 0,
+        width: 1440,
+        height: 990
+      },
+      target: {
+        width: 50,
+        height: 50
+      }
+    }
+
+    describe('`calculateLeft()`', () => {
+      /**
+       *  Window is 1440 x 900
+       *  Header is 1440 x 90
+       *  Container is 1440 x 990
+       *  Footer is 1440 x 90
+       *  Target is 50 x 50
+       */
+      it('returns an object', () => {
+        /**
+         *  (1440 / 2) - (50 / 2)
+         */
+        return (
+          expect(calculateLeft(rects))
+            .to.equal(695)
+        )
+      })
+    })
+
+    describe('`calculateTop()`', () => {
+      /**
+       *  Window is 1440 x 900
+       *  Header is 1440 x 90
+       *  Container is 1440 x 990
+       *  Footer is 1440 x 90
+       *  Target is 50 x 50
+       */
+      it('returns an object', () => {
+        /**
+         *  (810 / 2) - (50 / 2)
+         */
+        return (
+          expect(calculateTop(rects))
+            .to.equal(380)
+        )
+      })
+    })
+  })
+})