tweaks

src/Calendar.ts

@@ -1,8 +1,8 @@
 import * as moment from 'moment'
-import { capitaliseFirstLetter, debounce } from './util/misc'
 import { createElement, removeElement, applyStyle, prependToElement } from './util/dom-manip'
 import { computeHeightAndMargins } from './util/dom-geom'
 import { listenBySelector } from './util/dom-event'
+import { capitaliseFirstLetter, debounce } from './util/misc'
 import { globalDefaults, englishDefaults, rtlDefaults } from './options'
 import Iterator from './common/Iterator'
 import GlobalEmitter from './common/GlobalEmitter'
@@ -773,13 +773,9 @@ export default class Calendar {
 
   queryToolbarsHeight() {
     return this.toolbarsManager.items.reduce(function(accumulator, toolbar) {
-      let toolbarHeight
-
-      if (toolbar.el) {
-        toolbarHeight = computeHeightAndMargins(toolbar.el)
-      } else {
-        toolbarHeight = 0
-      }
+      let toolbarHeight = toolbar.el ?
+        computeHeightAndMargins(toolbar.el) :
+        0
 
       return accumulator + toolbarHeight
     }, 0)

src/Toolbar.ts

@@ -1,5 +1,5 @@
 import { htmlEscape } from './util/html'
-import { htmlToElement, appendToElement, removeElement, findElements } from './util/dom-manip'
+import { htmlToElement, appendToElement, removeElement, findElements, createElement } from './util/dom-manip'
 
 
 /* Toolbar with buttons and title
@@ -32,7 +32,7 @@ export default class Toolbar {
 
     if (sections) {
       if (!el) {
-        el = this.el = htmlToElement("<div class='fc-toolbar " + this.toolbarOptions.extraClasses + "'></div>")
+        el = this.el = createElement('div', { className: 'fc-toolbar ' + this.toolbarOptions.extraClasses })
       } else {
         el.innerHTML = ''
       }
@@ -59,7 +59,7 @@ export default class Toolbar {
     let theme = calendar.theme
     let optionsManager = calendar.optionsManager
     let viewSpecManager = calendar.viewSpecManager
-    let sectionEl = htmlToElement('<div class="fc-' + position + '"></div>')
+    let sectionEl = createElement('div', { className: 'fc-' + position })
     let buttonStr = this.toolbarOptions.layout[position]
     let calendarCustomButtons = optionsManager.get('customButtons') || {}
     let calendarButtonTextOverrides = optionsManager.overrides.buttonText || {}

src/agenda/TimeGrid.ts

@@ -452,9 +452,7 @@ export default class TimeGrid extends InteractiveDateComponent {
 
   unrenderNowIndicator() {
     if (this.nowIndicatorEls) {
-      this.nowIndicatorEls.forEach(function(el) {
-        removeElement(el)
-      })
+      this.nowIndicatorEls.forEach(removeElement)
       this.nowIndicatorEls = null
     }
   }

src/basic/DayGrid.ts

@@ -1,5 +1,14 @@
-import { htmlEscape } from '../util/html'
 import { assignTo } from '../util/object'
+import { htmlEscape } from '../util/html'
+import {
+  createElement,
+  htmlToElements,
+  insertAfterElement,
+  findElements,
+  removeElement,
+  queryChildren,
+  ElementContent
+} from '../util/dom-manip'
 import CoordCache from '../common/CoordCache'
 import Popover from '../common/Popover'
 import UnzonedRange from '../models/UnzonedRange'
@@ -12,7 +21,6 @@ import { default as DayTableMixin, DayTableInterface } from '../component/DayTab
 import DayGridEventRenderer from './DayGridEventRenderer'
 import DayGridHelperRenderer from './DayGridHelperRenderer'
 import DayGridFillRenderer from './DayGridFillRenderer'
-import { createElement, htmlToElements, findElements, removeElement, queryChildren } from '../util/dom-manip'
 
 
 /* A component that renders a grid of whole-days that runs horizontally. There can be multiple rows, one per week.
@@ -559,12 +567,7 @@ export default class DayGrid extends InteractiveDateComponent {
           }
 
           td.classList.add('fc-limited')
-
-          // inject replacements
-          let nextTdNode = td.nextSibling || null
-          for (let j = 0; j < segMoreNodes.length; j++) {
-            td.parentNode.insertBefore(segMoreNodes[j], nextTdNode)
-          }
+          insertAfterElement(td, segMoreNodes)
 
           limitedNodes.push(td)
         }
@@ -649,7 +652,6 @@ export default class DayGrid extends InteractiveDateComponent {
     let moreWrap = moreLink.parentNode as HTMLElement // the <div> wrapper around the <a>
     let topEl: HTMLElement // the element we want to match the top coordinate of
     let options
-    let themeClass = view.calendar.theme.getClass('popover')
 
     if (this.rowCnt === 1) {
       topEl = view.el // will cause the popover to cover any sort of header
@@ -658,7 +660,7 @@ export default class DayGrid extends InteractiveDateComponent {
     }
 
     options = {
-      className: 'fc-more-popover' + (themeClass ? ' ' + themeClass : ''),
+      className: 'fc-more-popover ' + view.calendar.theme.getClass('popover'),
       content: this.renderSegPopoverContent(row, col, segs),
       parentEl: view.el, // attach to root of view. guarantees outside of scrollbars.
       top: topEl.getBoundingClientRect().top,
@@ -696,7 +698,7 @@ export default class DayGrid extends InteractiveDateComponent {
 
 
   // Builds the inner DOM contents of the segment popover
-  renderSegPopoverContent(row, col, segs) {
+  renderSegPopoverContent(row, col, segs): ElementContent {
     let view = this.view
     let theme = view.calendar.theme
     let title = this.getCellDate(row, col).format(this.opt('dayPopoverFormat'))

src/basic/DayGridHelperRenderer.ts

@@ -1,6 +1,6 @@
+import { htmlToElement } from '../util/dom-manip'
 import HelperRenderer from '../component/renderers/HelperRenderer'
 import DayGrid from './DayGrid'
-import { htmlToElement } from '../util/dom-manip'
 
 
 export default class DayGridHelperRenderer extends HelperRenderer {

src/common/CoordCache.ts

@@ -1,4 +1,4 @@
-import { getInnerRect, getScrollParent } from '../util/dom-geom'
+import { computeInnerRect, getScrollParent } from '../util/dom-geom'
 
 export interface CoordCacheOptions {
   els: HTMLElement[]
@@ -242,7 +242,7 @@ export default class CoordCache {
       scrollParentEl = getScrollParent(this.els[0])
 
       if (scrollParentEl) {
-        return getInnerRect(scrollParentEl)
+        return computeInnerRect(scrollParentEl)
       }
     }
 

src/common/DragListener.ts

@@ -377,7 +377,7 @@ export default class DragListener {
   computeScrollBounds() {
     if (this.isAutoScroll) {
       this.scrollBounds = this.scrollEl.getBoundingClientRect()
-      // TODO: use getInnerRect in future. but prevents auto scrolling when on top of scrollbars
+      // TODO: use computeInnerRect in future. but prevents auto scrolling when on top of scrollbars
     }
   }
 

src/common/EmitterMixin.ts

@@ -69,7 +69,7 @@ export default class EmitterMixin extends Mixin implements EmitterInterface {
     }
     if (this._oneHandlers) {
       applyAll(this._oneHandlers[type], context, args)
-      delete this._oneHandlers[type]
+      delete this._oneHandlers[type] // will never fire again
     }
     return this // for chaining
   }
@@ -94,6 +94,6 @@ function removeFromHash(hash, type, handler?) {
       })
     }
   } else {
-    delete hash[type]
+    delete hash[type] // remove all handler funcs for this type
   }
 }

src/common/MouseFollower.ts

@@ -4,7 +4,7 @@ import {
   getEvX,
   getEvIsTouch
 } from '../util/dom-event'
-import { removeElement } from '../util/dom-manip'
+import { removeElement, applyStyle } from '../util/dom-manip'
 import { default as ListenerMixin, ListenerInterface } from './ListenerMixin'
 
 export interface MouseFollowerOptions {
@@ -119,22 +119,28 @@ export default class MouseFollower {
 
     if (!el) {
       el = this.el = this.sourceEl.cloneNode(true) as HTMLElement // cloneChildren=true
-      el.classList.add(this.options.additionalClass || '')
-      el.style.position = 'absolute'
-      el.style.visibility = '' // in case original element was hidden (commonly through hideEvents())
-      el.style.display = this.isHidden ? 'none' : '' // for when initially hidden
-      el.style.margin = '0'
-      el.style.right = 'auto' // erase and set width instead
-      el.style.bottom = 'auto' // erase and set height instead
-      el.style.width = this.sourceEl.offsetWidth + 'px' // explicit height in case there was a 'right' value
-      el.style.height = this.sourceEl.offsetHeight + 'px' // explicit width in case there was a 'bottom' value
-      el.style.opacity = String(this.options.opacity || '')
-      el.style.zIndex = String(this.options.zIndex)
 
       // we don't want long taps or any mouse interaction causing selection/menus.
       // would use preventSelection(), but that prevents selectstart, causing problems.
       el.classList.add('fc-unselectable')
 
+      if (this.options.additionalClass) {
+        el.classList.add(this.options.additionalClass)
+      }
+
+      applyStyle(el, {
+        position: 'absolute',
+        visibility: '', // in case original element was hidden (commonly through hideEvents())
+        display: this.isHidden ? 'none' : '', // for when initially hidden
+        margin: 0,
+        right: 'auto', // erase and set width instead
+        bottom: 'auto', // erase and set height instead
+        width: this.sourceEl.offsetWidth, // explicit height in case there was a 'right' value
+        height: this.sourceEl.offsetHeight, // explicit width in case there was a 'bottom' value
+        opacity: this.options.opacity || '',
+        zIndex: this.options.zIndex
+      })
+
       this.parentEl.appendChild(el)
     }
 
@@ -165,8 +171,11 @@ export default class MouseFollower {
       this.left0 = sourceRect.left - origin.left
     }
 
-    el.style.top = (this.top0 + this.topDelta) + 'px'
-    el.style.left = (this.left0 + this.leftDelta) + 'px'
+    applyStyle(el, {
+      top: this.top0 + this.topDelta,
+      left: this.left0 + this.leftDelta
+    })
+
   }
 
 

src/common/Popover.ts

@@ -13,9 +13,9 @@ Options:
   - hide (callback)
 */
 
-import { getScrollParent } from '../util/dom-geom'
-import { ElementContent, removeElement, createElement } from '../util/dom-manip'
+import { ElementContent, removeElement, createElement, applyStyle } from '../util/dom-manip'
 import { listenBySelector } from '../util/dom-event'
+import { getScrollParent } from '../util/dom-geom'
 import { default as ListenerMixin, ListenerInterface } from './ListenerMixin'
 
 export interface PopoverOptions {
@@ -154,8 +154,10 @@ export default class Popover {
       left = Math.max(left, viewportRect.left + this.margin)
     }
 
-    el.style.top = (top - rect.top) + 'px'
-    el.style.left = (left - rect.left) + 'px'
+    applyStyle(el, {
+      top: top - rect.top,
+      left: left - rect.left
+    })
   }
 
 

src/common/Scroller.ts

@@ -1,5 +1,5 @@
-import { getEdges } from '../util/dom-geom'
-import { removeElement } from '../util/dom-manip'
+import { computeEdges } from '../util/dom-geom'
+import { removeElement, createElement, applyStyle, applyStyleProp } from '../util/dom-manip'
 import Class from '../common/Class'
 
 /*
@@ -28,10 +28,9 @@ export default class Scroller extends Class {
 
 
   renderEl() {
-    let scrollEl = document.createElement('div')
-    scrollEl.classList.add('fc-scroller')
-    this.scrollEl = scrollEl
-    return scrollEl
+    return this.scrollEl = createElement('div', {
+      className: 'fc-scroller'
+    })
   }
 
 
@@ -52,8 +51,10 @@ export default class Scroller extends Class {
 
 
   applyOverflow() {
-    this.scrollEl.style.overflowX = this.overflowX
-    this.scrollEl.style.overflowY = this.overflowY
+    applyStyle(this.scrollEl, {
+      overflowX: this.overflowX,
+      overflowY: this.overflowY
+    })
   }
 
 
@@ -85,8 +86,7 @@ export default class Scroller extends Class {
         ) ? 'scroll' : 'hidden'
     }
 
-    scrollEl.style.overflowX = overflowX
-    scrollEl.style.overflowY = overflowY
+    applyStyle(this.scrollEl, { overflowX, overflowY })
   }
 
 
@@ -95,10 +95,7 @@ export default class Scroller extends Class {
 
 
   setHeight(height) {
-    this.scrollEl.style.height =
-      typeof height === 'number' ?
-        height + 'px' :
-        height
+    applyStyleProp(this.scrollEl, 'height', height)
   }
 
 
@@ -123,7 +120,7 @@ export default class Scroller extends Class {
 
 
   getScrollbarWidths() {
-    let edges = getEdges(this.scrollEl)
+    let edges = computeEdges(this.scrollEl)
     return {
       left: edges.scrollbarLeft,
       right: edges.scrollbarRight,

src/component/renderers/FillRenderer.ts

@@ -1,5 +1,5 @@
 import { cssToStr } from '../../util/html'
-import { htmlToElements, removeElement } from '../../util/dom-manip'
+import { htmlToElements, removeElement, elementMatches } from '../../util/dom-manip'
 
 
 export default class FillRenderer { // use for highlight, background events, business hours
@@ -69,13 +69,11 @@ export default class FillRenderer { // use for highlight, background events, bus
 
         // allow custom filter methods per-type
         if (props.filterEl) {
-          el = props.filterEl(seg, el)
+          el = props.filterEl(seg, el) // might return null/undefined
         }
 
-        if (
-          el instanceof HTMLElement && // non-null (from filter func) and correct object type
-          el.nodeName.toLocaleLowerCase() === this.fillSegTag // correct element type? (would be bad if a non-TD were inserted into a table for example)
-        ) {
+        // correct element type? (would be bad if a non-TD were inserted into a table for example)
+        if (el && elementMatches(el, this.fillSegTag)) {
           seg.el = el
           renderedSegs.push(seg)
         }

src/exports.ts

@@ -73,8 +73,8 @@ export {
 } from './util/dom-event'
 
 export {
-  getInnerRect,
-  getEdges,
+  computeInnerRect,
+  computeEdges,
   computeHeightAndMargins
 } from './util/dom-geom'
 

src/list/ListView.ts

@@ -157,7 +157,7 @@ export default class ListView extends View {
     let daySegs
     let i
     let tableEl = htmlToElement('<table class="fc-list-table ' + this.calendar.theme.getClass('tableList') + '"><tbody></tbody></table>')
-    let tbodyEl = tableEl.getElementsByTagName('tbody')[0]
+    let tbodyEl = tableEl.querySelector('tbody')
 
     for (dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {
       daySegs = segsByDay[dayIndex]

src/util/dom-geom.ts

@@ -15,7 +15,7 @@ export interface EdgeInfo {
 }
 
 
-export function getEdges(el, getPadding = false): EdgeInfo {
+export function computeEdges(el, getPadding = false): EdgeInfo {
   let computedStyle = window.getComputedStyle(el)
   let borderLeft = parseInt(computedStyle.borderLeftWidth, 10) || 0
   let borderRight = parseInt(computedStyle.borderRightWidth, 10) || 0
@@ -50,9 +50,9 @@ export function getEdges(el, getPadding = false): EdgeInfo {
 }
 
 
-export function getInnerRect(el, goWithinPadding = false) {
+export function computeInnerRect(el, goWithinPadding = false) {
   let outerRect = el.getBoundingClientRect()
-  let edges = getEdges(el, goWithinPadding)
+  let edges = computeEdges(el, goWithinPadding)
   let res = {
     left: outerRect.left + edges.borderLeft + edges.scrollbarLeft,
     right: outerRect.right - edges.borderRight - edges.scrollbarRight,
@@ -100,7 +100,7 @@ export function getScrollParent(el: HTMLElement): HTMLElement | null {
 }
 
 
-// The scrollbar width computations in getEdges are sometimes flawed when it comes to
+// 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

src/util/dom-manip.ts

@@ -70,6 +70,7 @@ export type ElementContent = string | Node | NodeList | Node[]
 
 export function appendToElement(el: HTMLElement, content: ElementContent) {
   let childNodes = normalizeContent(content)
+
   for (let i = 0; i < childNodes.length; i++) {
     el.appendChild(childNodes[i])
   }
@@ -125,6 +126,7 @@ const matchesMethod =
   (Element.prototype as any).webkitMatchesSelector
 
 const closestMethod = Element.prototype.closest || function(selector) {
+  // polyfill
   let el = this
   if (!document.documentElement.contains(el)) {
     return null
@@ -147,6 +149,7 @@ export function elementMatches(el: HTMLElement, selector: string) {
 }
 
 // only func that accepts multiple subject els (in this case, the 'containers')
+// returns a real array. good for methods like forEach
 export function findElements(containers: HTMLElement[] | HTMLElement, selector: string): HTMLElement[] {
   if (containers instanceof HTMLElement) {
     containers = [ containers ]

tests/automated/legacy/getEdges.js → tests/automated/legacy/computeEdges.js

@@ -1,8 +1,8 @@
 import { getStockScrollbarWidths } from '../lib/dom-misc'
 
-describe('getEdges', function() {
+describe('computeEdges', function() {
 
-  var getEdges = $.fullCalendar.getEdges
+  var computeEdges = $.fullCalendar.computeEdges
 
   defineTests(
     'when margin',
@@ -54,7 +54,7 @@ describe('getEdges', function() {
         .append('<div style="position:relative;width:100px;height:100px" />')
         .appendTo('body')
 
-      var edges = getEdges(el[0])
+      var edges = computeEdges(el[0])
       var correctWidths
 
       if (isScrolling) {

tests/automated/legacy/getInnerRect.js → tests/automated/legacy/computerInnerRect.js

@@ -1,6 +1,6 @@
 import { getStockScrollbarWidths } from '../lib/dom-misc'
 
-describe('getInnerRect', function() {
+describe('computeInnerRect', function() {
   var INNER_WIDTH = 150
   var INNER_HEIGHT = 100
   var BORDER_LEFT = 1
@@ -11,7 +11,7 @@ describe('getInnerRect', function() {
   var PADDING_RIGHT = 6
   var PADDING_TOP = 7
   var PADDING_BOTTOM = 8
-  var getInnerRect = $.fullCalendar.getInnerRect
+  var computeInnerRect = $.fullCalendar.computeInnerRect
 
   describeValues({
     'when LTR': 'ltr',
@@ -56,7 +56,7 @@ describe('getInnerRect', function() {
       })
 
       it('goes within border', function() {
-        expect(getInnerRect(el[0])).toEqual({
+        expect(computeInnerRect(el[0])).toEqual({
           left: BORDER_LEFT,
           right: BORDER_LEFT + PADDING_LEFT + INNER_WIDTH + PADDING_RIGHT,
           top: BORDER_TOP,
@@ -65,7 +65,7 @@ describe('getInnerRect', function() {
       })
 
       it('can go within padding', function() {
-        expect(getInnerRect(el[0], true)).toEqual({
+        expect(computeInnerRect(el[0], true)).toEqual({
           left: BORDER_LEFT + PADDING_LEFT,
           right: BORDER_LEFT + PADDING_LEFT + INNER_WIDTH,
           top: BORDER_TOP + PADDING_TOP,
@@ -83,7 +83,7 @@ describe('getInnerRect', function() {
       var stockScrollbars = getStockScrollbarWidths(dir)
 
       it('goes within border and scrollbars', function() {
-        expect(getInnerRect(el[0])).toEqual({
+        expect(computeInnerRect(el[0])).toEqual({
           left: BORDER_LEFT + stockScrollbars.left,
           right: BORDER_LEFT + stockScrollbars.left + PADDING_LEFT + INNER_WIDTH + PADDING_RIGHT,
           top: BORDER_TOP,
@@ -92,7 +92,7 @@ describe('getInnerRect', function() {
       })
 
       it('can go within padding', function() {
-        expect(getInnerRect(el[0], true)).toEqual({
+        expect(computeInnerRect(el[0], true)).toEqual({
           left: BORDER_LEFT + stockScrollbars.left + PADDING_LEFT,
           right: BORDER_LEFT + stockScrollbars.left + PADDING_LEFT + INNER_WIDTH,
           top: BORDER_TOP + PADDING_TOP,