dom-geom

src/common/CoordCache.ts

@@ -1,4 +1,4 @@
-import { getInnerRect, getScrollParent } from '../util'
+import { getInnerRect, getScrollParent } from '../util/dom-geom'
 
 export interface CoordCacheOptions {
   els: HTMLElement[]

src/common/DragListener.ts

@@ -4,12 +4,12 @@ import {
   getEvIsTouch,
   getEvX,
   getEvY,
-  getScrollParent,
   isPrimaryMouseButton,
   allowSelection,
   preventDefault,
   debounce
 } from '../util'
+import { getScrollParent } from '../util/dom-geom'
 import { default as ListenerMixin, ListenerInterface } from './ListenerMixin'
 import GlobalEmitter from './GlobalEmitter'
 

src/common/Popover.ts

@@ -13,7 +13,7 @@ Options:
   - hide (callback)
 */
 
-import { getScrollParent } from '../util'
+import { getScrollParent } from '../util/dom-geom'
 import { listenBySelector, ElementContent, removeElement, createElement } from '../util/dom'
 import { default as ListenerMixin, ListenerInterface } from './ListenerMixin'
 

src/common/Scroller.ts

@@ -1,4 +1,4 @@
-import { getEdges } from '../util'
+import { getEdges } from '../util/dom-geom'
 import { removeElement } from '../util/dom'
 import Class from '../common/Class'
 

src/exports.ts

@@ -20,8 +20,6 @@ export {
   htmlEscape,
   cssToStr,
   capitaliseFirstLetter,
-  getInnerRect,
-  getEdges,
   preventDefault,
   parseFieldSpecs,
   compareByFieldSpecs,
@@ -60,6 +58,11 @@ export {
   whenTransitionDone
 } from './util/dom'
 
+export {
+  getInnerRect,
+  getEdges
+} from './util/dom-geom'
+
 export {
   formatDate,
   formatRange,

src/util.ts

@@ -1,5 +1,5 @@
 import * as moment from 'moment'
-import { applyStyle, computeHeightAndMargins, createElement, removeElement } from './util/dom'
+import { applyStyle, computeHeightAndMargins } from './util/dom'
 
 
 /* FullCalendar-specific DOM Utilities
@@ -159,142 +159,6 @@ export function subtractInnerElHeight(outerEl: HTMLElement, innerEl: HTMLElement
 }
 
 
-/* Element Geom Utilities
-----------------------------------------------------------------------------------------------------------------------*/
-
-
-// will return null of no scroll parent. will NOT return window/body
-export function getScrollParent(el: HTMLElement): HTMLElement | null {
-
-  while (el instanceof HTMLElement) { // will stop when gets to document or null
-    let computedStyle = window.getComputedStyle(el)
-
-    if (computedStyle.position === 'fixed') {
-      break
-    }
-
-    if ((/(auto|scroll)/).test(computedStyle.overflow + computedStyle.overflowY + computedStyle.overflowX)) {
-      return el
-    }
-
-    el = el.parentNode as HTMLElement
-  }
-
-  return null
-}
-
-
-export interface EdgeInfo {
-  borderLeft: number
-  borderRight: number
-  borderTop: number
-  borderBottom: number
-  scrollbarLeft: number
-  scrollbarRight: number
-  scrollbarBottom: number
-  paddingLeft?: number
-  paddingRight?: number
-  paddingTop?: number
-  paddingBottom?: number
-}
-
-export function getEdges(el, getPadding = false): EdgeInfo {
-  let computedStyle = window.getComputedStyle(el)
-  let borderLeft = parseInt(computedStyle.borderLeftWidth, 10) || 0
-  let borderRight = parseInt(computedStyle.borderRightWidth, 10) || 0
-  let borderTop = parseInt(computedStyle.borderTopWidth, 10) || 0
-  let borderBottom = parseInt(computedStyle.borderBottomWidth, 10) || 0
-  let scrollbarLeftRight = sanitizeScrollbarWidth(el.offsetWidth - el.clientWidth - borderLeft - borderRight)
-  let scrollbarBottom = sanitizeScrollbarWidth(el.offsetHeight - el.clientHeight - borderTop - borderBottom)
-  let res: EdgeInfo = {
-    borderLeft,
-    borderRight,
-    borderTop,
-    borderBottom,
-    scrollbarBottom,
-    scrollbarLeft: 0,
-    scrollbarRight: 0
-  }
-
-  if (getIsLeftRtlScrollbars() && computedStyle.direction === 'rtl') { // is the scrollbar on the left side?
-    res.scrollbarLeft = scrollbarLeftRight
-  } else {
-    res.scrollbarRight = scrollbarLeftRight
-  }
-
-  if (getPadding) {
-    res.paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0
-    res.paddingRight = parseInt(computedStyle.paddingRight, 10) || 0
-    res.paddingTop = parseInt(computedStyle.paddingTop, 10) || 0
-    res.paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0
-  }
-
-  return res
-}
-
-export function getInnerRect(el, goWithinPadding = false) {
-  let outerRect = el.getBoundingClientRect()
-  let edges = getEdges(el, goWithinPadding)
-  let res = {
-    left: outerRect.left + edges.borderLeft + edges.scrollbarLeft,
-    right: outerRect.right - edges.borderRight - edges.scrollbarRight,
-    top: outerRect.top + edges.borderTop,
-    bottom: outerRect.bottom - edges.borderBottom - edges.scrollbarBottom
-  }
-
-  if (goWithinPadding) {
-    res.left += edges.paddingLeft
-    res.right -= edges.paddingRight
-    res.top += edges.paddingTop
-    res.bottom -= edges.paddingBottom
-  }
-
-  return res
-}
-
-
-// The scrollbar width computations in getEdges are sometimes flawed when it comes to
-// retina displays, rounding, and IE11. Massage them into a usable value.
-function sanitizeScrollbarWidth(width) {
-  width = Math.max(0, width) // no negatives
-  width = Math.round(width)
-  return width
-}
-
-
-// Logic for determining if, when the element is right-to-left, the scrollbar appears on the left side
-
-let _isLeftRtlScrollbars = null
-
-function getIsLeftRtlScrollbars() { // responsible for caching the computation
-  if (_isLeftRtlScrollbars === null) {
-    _isLeftRtlScrollbars = computeIsLeftRtlScrollbars()
-  }
-  return _isLeftRtlScrollbars
-}
-
-function computeIsLeftRtlScrollbars() { // creates an offscreen test element, then removes it
-  let outerEl = createElement('div', {
-    style: {
-      position: 'absolute',
-      top: -1000,
-      left: 0,
-      border: 0,
-      padding: 0,
-      overflow: 'scroll',
-      direction: 'rtl'
-    }
-  }, '<div></div>')
-
-  document.body.appendChild(outerEl)
-  let innerEl = outerEl.firstChild as HTMLElement
-  let res = innerEl.getBoundingClientRect().left > outerEl.getBoundingClientRect().left
-
-  removeElement(outerEl)
-  return res
-}
-
-
 /* Mouse / Touch Utilities
 ----------------------------------------------------------------------------------------------------------------------*/
 

src/util/dom-geom.ts

@@ -0,0 +1,133 @@
+import { createElement, removeElement } from './dom'
+
+
+// will return null of no scroll parent. will NOT return window/body
+export function getScrollParent(el: HTMLElement): HTMLElement | null {
+
+  while (el instanceof HTMLElement) { // will stop when gets to document or null
+    let computedStyle = window.getComputedStyle(el)
+
+    if (computedStyle.position === 'fixed') {
+      break
+    }
+
+    if ((/(auto|scroll)/).test(computedStyle.overflow + computedStyle.overflowY + computedStyle.overflowX)) {
+      return el
+    }
+
+    el = el.parentNode as HTMLElement
+  }
+
+  return null
+}
+
+
+export interface EdgeInfo {
+  borderLeft: number
+  borderRight: number
+  borderTop: number
+  borderBottom: number
+  scrollbarLeft: number
+  scrollbarRight: number
+  scrollbarBottom: number
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+  paddingBottom?: number
+}
+
+export function getEdges(el, getPadding = false): EdgeInfo {
+  let computedStyle = window.getComputedStyle(el)
+  let borderLeft = parseInt(computedStyle.borderLeftWidth, 10) || 0
+  let borderRight = parseInt(computedStyle.borderRightWidth, 10) || 0
+  let borderTop = parseInt(computedStyle.borderTopWidth, 10) || 0
+  let borderBottom = parseInt(computedStyle.borderBottomWidth, 10) || 0
+  let scrollbarLeftRight = sanitizeScrollbarWidth(el.offsetWidth - el.clientWidth - borderLeft - borderRight)
+  let scrollbarBottom = sanitizeScrollbarWidth(el.offsetHeight - el.clientHeight - borderTop - borderBottom)
+  let res: EdgeInfo = {
+    borderLeft,
+    borderRight,
+    borderTop,
+    borderBottom,
+    scrollbarBottom,
+    scrollbarLeft: 0,
+    scrollbarRight: 0
+  }
+
+  if (getIsLeftRtlScrollbars() && computedStyle.direction === 'rtl') { // is the scrollbar on the left side?
+    res.scrollbarLeft = scrollbarLeftRight
+  } else {
+    res.scrollbarRight = scrollbarLeftRight
+  }
+
+  if (getPadding) {
+    res.paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0
+    res.paddingRight = parseInt(computedStyle.paddingRight, 10) || 0
+    res.paddingTop = parseInt(computedStyle.paddingTop, 10) || 0
+    res.paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0
+  }
+
+  return res
+}
+
+export function getInnerRect(el, goWithinPadding = false) {
+  let outerRect = el.getBoundingClientRect()
+  let edges = getEdges(el, goWithinPadding)
+  let res = {
+    left: outerRect.left + edges.borderLeft + edges.scrollbarLeft,
+    right: outerRect.right - edges.borderRight - edges.scrollbarRight,
+    top: outerRect.top + edges.borderTop,
+    bottom: outerRect.bottom - edges.borderBottom - edges.scrollbarBottom
+  }
+
+  if (goWithinPadding) {
+    res.left += edges.paddingLeft
+    res.right -= edges.paddingRight
+    res.top += edges.paddingTop
+    res.bottom -= edges.paddingBottom
+  }
+
+  return res
+}
+
+
+// The scrollbar width computations in getEdges are sometimes flawed when it comes to
+// retina displays, rounding, and IE11. Massage them into a usable value.
+function sanitizeScrollbarWidth(width) {
+  width = Math.max(0, width) // no negatives
+  width = Math.round(width)
+  return width
+}
+
+
+// Logic for determining if, when the element is right-to-left, the scrollbar appears on the left side
+
+let _isLeftRtlScrollbars = null
+
+function getIsLeftRtlScrollbars() { // responsible for caching the computation
+  if (_isLeftRtlScrollbars === null) {
+    _isLeftRtlScrollbars = computeIsLeftRtlScrollbars()
+  }
+  return _isLeftRtlScrollbars
+}
+
+function computeIsLeftRtlScrollbars() { // creates an offscreen test element, then removes it
+  let outerEl = createElement('div', {
+    style: {
+      position: 'absolute',
+      top: -1000,
+      left: 0,
+      border: 0,
+      padding: 0,
+      overflow: 'scroll',
+      direction: 'rtl'
+    }
+  }, '<div></div>')
+
+  document.body.appendChild(outerEl)
+  let innerEl = outerEl.firstChild as HTMLElement
+  let res = innerEl.getBoundingClientRect().left > outerEl.getBoundingClientRect().left
+
+  removeElement(outerEl)
+  return res
+}