scrollbar util

src/agenda/AgendaView.ts

@@ -7,7 +7,7 @@ import {
   compensateScroll,
   subtractInnerElHeight
 } from '../util/misc'
-import ScrollerComponent from '../common/ScrollerComponent'
+import ScrollComponent from '../common/ScrollComponent'
 import View from '../View'
 import TimeGrid from './TimeGrid'
 import DayGrid from '../basic/DayGrid'
@@ -40,7 +40,7 @@ export default class AgendaView extends View {
   timeGrid: TimeGrid // the main time-grid subcomponent of this view
   dayGrid: DayGrid // the "all-day" subcomponent. if all-day is turned off, this will be null
 
-  scroller: ScrollerComponent
+  scroller: ScrollComponent
   axisWidth: any // the width of the time axis running down the side
   usesMinMaxTime: boolean = true // indicates that minTime/maxTime affects rendering
 
@@ -59,7 +59,7 @@ export default class AgendaView extends View {
       this.addChild(this.dayGrid)
     }
 
-    this.scroller = new ScrollerComponent({
+    this.scroller = new ScrollComponent({
       overflowX: 'hidden',
       overflowY: 'auto'
     })

src/basic/BasicView.ts

@@ -9,7 +9,7 @@ import {
   undistributeHeight
 } from '../util/misc'
 import { createFormatter } from '../datelib/formatting'
-import ScrollerComponent from '../common/ScrollerComponent'
+import ScrollComponent from '../common/ScrollComponent'
 import View from '../View'
 import BasicViewDateProfileGenerator from './BasicViewDateProfileGenerator'
 import DayGrid from './DayGrid'
@@ -28,7 +28,7 @@ export default class BasicView extends View {
   dateProfileGeneratorClass: any
   dayGridClass: any // class the dayGrid will be instantiated from (overridable by subclasses)
 
-  scroller: ScrollerComponent
+  scroller: ScrollComponent
   dayGrid: DayGrid // the main subcomponent that does most of the heavy lifting
   colWeekNumbersVisible: boolean = false
 
@@ -53,7 +53,7 @@ export default class BasicView extends View {
 
     this.addChild(this.dayGrid)
 
-    this.scroller = new ScrollerComponent({
+    this.scroller = new ScrollComponent({
       overflowX: 'hidden',
       overflowY: 'auto'
     })

src/common/ScrollerComponent.ts → src/common/ScrollComponent.ts

@@ -4,7 +4,7 @@ import { removeElement, createElement, applyStyle, applyStyleProp } from '../uti
 /*
 Embodies a div that has potential scrollbars
 */
-export default class ScrollerComponent {
+export default class ScrollComponent {
 
   el: HTMLElement // the guaranteed outer element
   scrollEl: HTMLElement // the element with the scrollbars

src/exports.ts

@@ -76,7 +76,7 @@ export { DateRange, rangeContainsMarker, intersectRanges } from './datelib/date-
 export { defineThemeSystem } from './theme/ThemeRegistry'
 export { default as Mixin } from './common/Mixin'
 export { default as CoordCache } from './common/CoordCache'
-export { default as ScrollerComponent } from './common/ScrollerComponent'
+export { default as ScrollComponent } from './common/ScrollComponent'
 export { default as Theme } from './theme/Theme'
 export { default as DateComponent } from './component/DateComponent'
 export { default as Calendar } from './Calendar'

src/list/ListView.ts

@@ -2,7 +2,7 @@ import { htmlToElement, createElement } from '../util/dom-manip'
 import { htmlEscape } from '../util/html'
 import { subtractInnerElHeight } from '../util/misc'
 import View from '../View'
-import ScrollerComponent from '../common/ScrollerComponent'
+import ScrollComponent from '../common/ScrollComponent'
 import ListEventRenderer from './ListEventRenderer'
 import { DateMarker, addDays, startOfDay } from '../datelib/marker'
 import { createFormatter } from '../datelib/formatting'
@@ -18,7 +18,7 @@ export default class ListView extends View {
 
   segSelector: any = '.fc-list-item' // which elements accept event actions
 
-  scroller: ScrollerComponent
+  scroller: ScrollComponent
   contentEl: HTMLElement
 
   dayDates: DateMarker[]
@@ -28,7 +28,7 @@ export default class ListView extends View {
   constructor(calendar, viewSpec) {
     super(calendar, viewSpec)
 
-    this.scroller = new ScrollerComponent({
+    this.scroller = new ScrollComponent({
       overflowX: 'hidden',
       overflowY: 'auto'
     })

src/util/dom-geom.ts

@@ -1,5 +1,5 @@
-import { createElement, removeElement } from './dom-manip'
 import { Rect, intersectRects } from './geom'
+import { sanitizeScrollbarWidth, getIsRtlScrollbarOnLeft } from './scrollbars'
 
 export interface EdgeInfo {
   borderLeft: number
@@ -34,7 +34,7 @@ export function computeEdges(el, getPadding = false): EdgeInfo {
     scrollbarRight: 0
   }
 
-  if (getIsLeftRtlScrollbars() && computedStyle.direction === 'rtl') { // is the scrollbar on the left side?
+  if (getIsRtlScrollbarOnLeft() && computedStyle.direction === 'rtl') { // is the scrollbar on the left side?
     res.scrollbarLeft = scrollbarLeftRight
   } else {
     res.scrollbarRight = scrollbarLeftRight
@@ -133,45 +133,3 @@ export function computeClippingRect(el: HTMLElement): Rect {
       return intersectRects(rect0, rect1) || rect1 // should always intersect
     })
 }
-
-
-// The scrollbar width computations in computeEdges 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
-}

src/util/scrollbars.ts

@@ -0,0 +1,43 @@
+import { createElement, removeElement } from './dom-manip'
+
+
+// Logic for determining if, when the element is right-to-left, the scrollbar appears on the left side
+
+let isRtlScrollbarOnLeft = null
+
+export function getIsRtlScrollbarOnLeft() { // responsible for caching the computation
+  if (isRtlScrollbarOnLeft === null) {
+    isRtlScrollbarOnLeft = computeIsRtlScrollbarOnLeft()
+  }
+  return isRtlScrollbarOnLeft
+}
+
+function computeIsRtlScrollbarOnLeft() { // 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
+}
+
+
+// The scrollbar width computations in computeEdges are sometimes flawed when it comes to
+// retina displays, rounding, and IE11. Massage them into a usable value.
+export function sanitizeScrollbarWidth(width) {
+  width = Math.max(0, width) // no negatives
+  width = Math.round(width)
+  return width
+}