center-center 0.0.2 → 0.0.4

package/index.mjs

@@ -1,7 +1,3 @@
-import debug from 'debug'
-
-const log = debug('center-center')
-
 export function getScrollingElement (document) {
   if (Reflect.has(document, 'scrollingElement')) {
     const scrollingElement = Reflect.get(document, 'scrollingElement')
@@ -16,239 +12,97 @@ export function getScrollingElement (document) {
 
 export function getViewportRect () {
   const {
-    innerWidth: viewportW,
-    innerHeight: viewportH
+    innerWidth: width,
+    innerHeight: height
   } = window
 
   const {
-    scrollLeft: viewportL,
-    scrollTop: viewportT
+    scrollLeft: left,
+    scrollTop: top
   } = getScrollingElement(document)
 
-  const viewportR = (viewportL + viewportW)
-  const viewportB = (viewportT + viewportH)
-
-  return {
-    top: viewportT,
-    right: viewportR,
-    bottom: viewportB,
-    left: viewportL,
-    width: viewportW,
-    height: viewportH
-  }
-}
-
-export function getContainerRect (container) {
-  const {
-    offsetLeft: containerL,
-    offsetTop: containerT
-  } = container
-
-  /**
-   * 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)
-
   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)
   }
 }
 
 export function calculateLeft ({
   viewport: {
     left: viewportL,
-    right: viewportR,
-    width: viewportW
+    right: viewportR
   },
   container: {
+    width: containerW,
     left: containerL,
-    right: containerR,
-    width: containerW
+    right: containerR
   },
   target: {
     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) {
-        log('calculate viewportL to containerR')
-
-        const availableW = Math.max(targetW, (containerL + containerW) - viewportL)
-
-        return (containerW - availableW) + ((availableW / 2) - (targetW / 2))
-      }
-
-      if (containerR > viewportR) {
-        log('calculate viewportL to viewportR')
-
-        const availableW = Math.max(targetW, viewportW)
-
-        return (viewportL - containerL) + ((availableW / 2) - (targetW / 2))
-      }
-    }
-
-    if (viewportL > containerR) {
-      log('pin to right')
-
-      const availableW = Math.max(targetW, containerW)
-
-      /**
-       *  Pin to right
-       */
-      return (availableW - targetW)
-    }
-  }
-
-  if (containerL > viewportL) {
-    if (containerL > viewportR) {
-      log('pin to left')
-
-      /**
-       *  Pin to left
-       *
-       *  Scroll is above container (container is offscreen)
-       */
-      return 0
-    }
-
-    if (viewportR > containerL) {
-      log('calculate containerL to viewportR')
-
-      const availableW = Math.max(targetW, (viewportR - containerL))
-
-      return ((availableW / 2) - (targetW / 2))
-    }
-  }
+  const l = Math.max(viewportL, containerL)
+  const r = Math.min(viewportR, containerR)
+  const w = (r - l)
+  const x = (l - containerL)
+  const boundary = (containerW - targetW)
+
+  return (
+    Math.max(0, Math.min(boundary, x + ((w / 2) - (targetW / 2))))
+  )
 }
 
 export function calculateTop ({
   viewport: {
     top: viewportT,
-    bottom: viewportB,
-    height: viewportH
+    bottom: viewportB
   },
   container: {
+    height: containerH,
     top: containerT,
-    bottom: containerB,
-    height: containerH
+    bottom: containerB
   },
   target: {
     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) {
-        log('calculate viewportT to containerB')
-
-        const availableH = Math.max(targetH, (containerT + containerH) - viewportT)
-
-        return (containerH - availableH) + ((availableH / 2) - (targetH / 2))
-      }
-
-      if (containerB > viewportB) {
-        log('calculate viewportT to viewportB') // , viewportT > containerT, containerB > viewportB)
-
-        const availableH = Math.max(targetH, viewportH)
-
-        return (viewportT - containerT) + ((availableH / 2) - (targetH / 2))
-      }
-    }
-
-    if (viewportT > containerB) {
-      log('pin to bottom')
-
-      const availableH = Math.max(targetH, containerH)
-
-      /**
-       *  Pin to bottom
-       */
-      return (availableH - targetH)
-    }
-  }
-
-  if (containerT > viewportT) {
-    if (containerT > viewportB) {
-      log('pin to top')
-
-      /**
-       *  Pin to top
-       *
-       *  Scroll is above container (container is offscreen)
-       */
-      return 0
-    }
-
-    if (viewportB > containerT) {
-      log('calculate containerT to viewportB')
-
-      const availableH = Math.max(targetH, (viewportB - containerT))
-
-      return ((availableH / 2) - (targetH / 2))
-    }
-  }
+  const t = Math.max(viewportT, containerT)
+  const b = Math.min(viewportB, containerB)
+  const h = (b - t)
+  const y = (t - containerT)
+  const boundary = (containerH - targetH)
+
+  return (
+    Math.max(0, Math.min(boundary, y + ((h / 2) - (targetH / 2))))
+  )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "center-center",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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)
+        )
+      })
+    })
+  })
+})