renames, whenTransitionDone

src/Calendar.ts

@@ -1,6 +1,6 @@
 import * as moment from 'moment'
 import { capitaliseFirstLetter, debounce } from './util'
-import { listenBySelector, makeElement, removeElement, applyStyle, prependWithinEl, computeHeightAndMargins } from './util/dom'
+import { listenBySelector, createElement, removeElement, applyStyle, prependToElement, computeHeightAndMargins } from './util/dom'
 import { globalDefaults, englishDefaults, rtlDefaults } from './options'
 import Iterator from './common/Iterator'
 import GlobalEmitter from './common/GlobalEmitter'
@@ -388,7 +388,7 @@ export default class Calendar {
       el.classList.toggle('fc-rtl', opts.isRTL)
     })
 
-    prependWithinEl(el, this.contentEl = makeElement('div', { className: 'fc-view-container' }))
+    prependToElement(el, this.contentEl = createElement('div', { className: 'fc-view-container' }))
 
     this.initToolbars()
     this.renderHeader()
@@ -494,7 +494,7 @@ export default class Calendar {
 
       newView.startBatchRender() // so that setElement+setDate rendering are joined
 
-      let viewEl = makeElement('div', { className: 'fc-view fc-' + viewType + '-view' })
+      let viewEl = createElement('div', { className: 'fc-view fc-' + viewType + '-view' })
       this.contentEl.appendChild(viewEl)
       newView.setElement(viewEl)
 
@@ -716,7 +716,7 @@ export default class Calendar {
     header.render()
 
     if (header.el) {
-      prependWithinEl(this.el, header.el)
+      prependToElement(this.el, header.el)
     }
   }
 

src/Toolbar.ts

@@ -1,5 +1,5 @@
 import { htmlEscape } from './util'
-import { htmlToElement, appendContentTo, removeElement, findElsWithin } from './util/dom'
+import { htmlToElement, appendToElement, removeElement, findElements } from './util/dom'
 
 
 /* Toolbar with buttons and title
@@ -36,10 +36,10 @@ export default class Toolbar {
       } else {
         el.innerHTML = ''
       }
-      appendContentTo(el, this.renderSection('left'))
-      appendContentTo(el, this.renderSection('right'))
-      appendContentTo(el, this.renderSection('center'))
-      appendContentTo(el, '<div class="fc-clear"></div>')
+      appendToElement(el, this.renderSection('left'))
+      appendToElement(el, this.renderSection('right'))
+      appendToElement(el, this.renderSection('center'))
+      appendToElement(el, '<div class="fc-clear"></div>')
     } else {
       this.removeElement()
     }
@@ -228,10 +228,10 @@ export default class Toolbar {
             groupEl.classList.add(buttonGroupClassName)
           }
 
-          appendContentTo(groupEl, groupChildren)
+          appendToElement(groupEl, groupChildren)
           sectionEl.appendChild(groupEl)
         } else {
-          appendContentTo(sectionEl, groupChildren) // 1 or 0 children
+          appendToElement(sectionEl, groupChildren) // 1 or 0 children
         }
       })
     }
@@ -242,7 +242,7 @@ export default class Toolbar {
 
   updateTitle(text) {
     if (this.el) {
-      findElsWithin(this.el, 'h2').forEach(function(titleEl) {
+      findElements(this.el, 'h2').forEach(function(titleEl) {
         titleEl.innerText = text
       })
     }
@@ -251,7 +251,7 @@ export default class Toolbar {
 
   activateButton(buttonName) {
     if (this.el) {
-      findElsWithin(this.el, '.fc-' + buttonName + '-button').forEach((buttonEl) => {
+      findElements(this.el, '.fc-' + buttonName + '-button').forEach((buttonEl) => {
         buttonEl.classList.add(this.calendar.theme.getClass('stateActive'))
       })
     }
@@ -260,7 +260,7 @@ export default class Toolbar {
 
   deactivateButton(buttonName) {
     if (this.el) {
-      findElsWithin(this.el, '.fc-' + buttonName + '-button').forEach((buttonEl) => {
+      findElements(this.el, '.fc-' + buttonName + '-button').forEach((buttonEl) => {
         buttonEl.classList.remove(this.calendar.theme.getClass('stateActive'))
       })
     }
@@ -269,7 +269,7 @@ export default class Toolbar {
 
   disableButton(buttonName) {
     if (this.el) {
-      findElsWithin(this.el, '.fc-' + buttonName + '-button').forEach((buttonEl: HTMLButtonElement) => {
+      findElements(this.el, '.fc-' + buttonName + '-button').forEach((buttonEl: HTMLButtonElement) => {
         buttonEl.disabled = true
         buttonEl.classList.add(this.calendar.theme.getClass('stateDisabled'))
       })
@@ -279,7 +279,7 @@ export default class Toolbar {
 
   enableButton(buttonName) {
     if (this.el) {
-      findElsWithin(this.el, '.fc-' + buttonName + '-button').forEach((buttonEl: HTMLButtonElement) => {
+      findElements(this.el, '.fc-' + buttonName + '-button').forEach((buttonEl: HTMLButtonElement) => {
         buttonEl.disabled = false
         buttonEl.classList.remove(this.calendar.theme.getClass('stateDisabled'))
       })

src/agenda/AgendaView.ts

@@ -7,7 +7,7 @@ import {
   htmlEscape,
   copyOwnProps
 } from '../util'
-import { findElsWithin, makeElement } from '../util/dom'
+import { findElements, createElement } from '../util/dom'
 import Scroller from '../common/Scroller'
 import View from '../View'
 import TimeGrid from './TimeGrid'
@@ -87,7 +87,7 @@ export default class AgendaView extends View {
 
     timeGridWrapEl = this.scroller.el
     timeGridWrapEl.classList.add('fc-time-grid-container')
-    timeGridEl = makeElement('div', { className: 'fc-time-grid' })
+    timeGridEl = createElement('div', { className: 'fc-time-grid' })
     timeGridWrapEl.appendChild(timeGridEl)
 
     this.el.querySelector('.fc-body > tr > td').appendChild(timeGridWrapEl)
@@ -176,7 +176,7 @@ export default class AgendaView extends View {
     super.updateSize(totalHeight, isAuto, isResize)
 
     // make all axis cells line up, and record the width so newly created axis cells will have it
-    this.axisWidth = matchCellWidths(findElsWithin(this.el, '.fc-axis'))
+    this.axisWidth = matchCellWidths(findElements(this.el, '.fc-axis'))
 
     // hack to give the view some height prior to timeGrid's columns being rendered
     // TODO: separate setting height from scroller VS timeGrid.
@@ -189,7 +189,7 @@ export default class AgendaView extends View {
     }
 
     // set of fake row elements that must compensate when scroller has scrollbars
-    let noScrollRowEls: HTMLElement[] = findElsWithin(this.el, '.fc-row').filter((node) => {
+    let noScrollRowEls: HTMLElement[] = findElements(this.el, '.fc-row').filter((node) => {
       return !this.scroller.el.contains(node)
     })
 

src/agenda/TimeGrid.ts

@@ -1,6 +1,6 @@
 import * as moment from 'moment'
 import { isInt, divideDurationByDuration, htmlEscape } from '../util'
-import { htmlToElement, findElsWithin, makeElement, removeElement, applyStyle } from '../util/dom'
+import { htmlToElement, findElements, createElement, removeElement, applyStyle } from '../util/dom'
 import InteractiveDateComponent from '../component/InteractiveDateComponent'
 import BusinessHourRenderer from '../component/renderers/BusinessHourRenderer'
 import StandardInteractionsMixin from '../component/interactions/StandardInteractionsMixin'
@@ -218,7 +218,7 @@ export default class TimeGrid extends InteractiveDateComponent {
         this.renderSlatRowHtml() +
       '</table>'
 
-    this.slatEls = findElsWithin(this.slatContainerEl, 'tr')
+    this.slatEls = findElements(this.slatContainerEl, 'tr')
 
     this.slatCoordCache = new CoordCache({
       els: this.slatEls,
@@ -293,7 +293,7 @@ export default class TimeGrid extends InteractiveDateComponent {
         this.renderBgTrHtml(0) + // row=0
       '</table>'
 
-    this.colEls = findElsWithin(this.el, '.fc-day, .fc-disabled-day')
+    this.colEls = findElements(this.el, '.fc-day, .fc-disabled-day')
 
     this.colCoordCache = new CoordCache({
       els: this.colEls,
@@ -340,12 +340,12 @@ export default class TimeGrid extends InteractiveDateComponent {
       '</div>'
     )
 
-    this.colContainerEls = findElsWithin(skeletonEl, '.fc-content-col')
-    this.helperContainerEls = findElsWithin(skeletonEl, '.fc-helper-container')
-    this.fgContainerEls = findElsWithin(skeletonEl, '.fc-event-container:not(.fc-helper-container)')
-    this.bgContainerEls = findElsWithin(skeletonEl, '.fc-bgevent-container')
-    this.highlightContainerEls = findElsWithin(skeletonEl, '.fc-highlight-container')
-    this.businessContainerEls = findElsWithin(skeletonEl, '.fc-business-container')
+    this.colContainerEls = findElements(skeletonEl, '.fc-content-col')
+    this.helperContainerEls = findElements(skeletonEl, '.fc-helper-container')
+    this.fgContainerEls = findElements(skeletonEl, '.fc-event-container:not(.fc-helper-container)')
+    this.bgContainerEls = findElements(skeletonEl, '.fc-bgevent-container')
+    this.highlightContainerEls = findElements(skeletonEl, '.fc-highlight-container')
+    this.businessContainerEls = findElements(skeletonEl, '.fc-business-container')
 
     this.bookendCells(skeletonEl.querySelector('tr')) // TODO: do this on string level
     this.el.appendChild(skeletonEl)
@@ -430,7 +430,7 @@ export default class TimeGrid extends InteractiveDateComponent {
 
     // render lines within the columns
     for (i = 0; i < segs.length; i++) {
-      let lineEl = makeElement('div', { className: 'fc-now-indicator fc-now-indicator-line' })
+      let lineEl = createElement('div', { className: 'fc-now-indicator fc-now-indicator-line' })
       lineEl.style.top = top + 'px'
       this.colContainerEls[segs[i].col].appendChild(lineEl)
       nodes.push(lineEl)
@@ -438,7 +438,7 @@ export default class TimeGrid extends InteractiveDateComponent {
 
     // render an arrow over the axis
     if (segs.length > 0) { // is the current time in view?
-      let arrowEl = makeElement('div', { className: 'fc-now-indicator fc-now-indicator-arrow' })
+      let arrowEl = createElement('div', { className: 'fc-now-indicator fc-now-indicator-arrow' })
       arrowEl.style.top = top + 'px'
       this.contentSkeletonEl.appendChild(arrowEl)
       nodes.push(arrowEl)

src/basic/BasicView.ts

@@ -7,7 +7,7 @@ import {
   undistributeHeight,
   htmlEscape
 } from '../util'
-import { makeElement, findElsWithin } from '../util/dom'
+import { createElement, findElements } from '../util/dom'
 import Scroller from '../common/Scroller'
 import View from '../View'
 import BasicViewDateProfileGenerator from './BasicViewDateProfileGenerator'
@@ -85,7 +85,7 @@ export default class BasicView extends View {
 
     dayGridContainerEl = this.scroller.el
     dayGridContainerEl.classList.add('fc-day-grid-container')
-    dayGridEl = makeElement('div', { className: 'fc-day-grid' })
+    dayGridEl = createElement('div', { className: 'fc-day-grid' })
     dayGridContainerEl.appendChild(dayGridEl)
 
     this.el.querySelector('.fc-body > tr > td').appendChild(dayGridContainerEl)
@@ -173,7 +173,7 @@ export default class BasicView extends View {
       // Make sure all week number cells running down the side have the same width.
       // Record the width for cells created later.
       this.weekNumberWidth = matchCellWidths(
-        findElsWithin(this.el, '.fc-week-number')
+        findElements(this.el, '.fc-week-number')
       )
     }
 

src/basic/DayGrid.ts

@@ -12,7 +12,7 @@ import { default as DayTableMixin, DayTableInterface } from '../component/DayTab
 import DayGridEventRenderer from './DayGridEventRenderer'
 import DayGridHelperRenderer from './DayGridHelperRenderer'
 import DayGridFillRenderer from './DayGridFillRenderer'
-import { makeElement, htmlToElements, findElsWithin, removeElement, queryChildren } from '../util/dom'
+import { createElement, htmlToElements, findElements, removeElement, queryChildren } from '../util/dom'
 
 
 /* A component that renders a grid of whole-days that runs horizontally. There can be multiple rows, one per week.
@@ -117,8 +117,8 @@ export default class DayGrid extends InteractiveDateComponent {
     }
     this.el.innerHTML = html
 
-    this.rowEls = findElsWithin(this.el, '.fc-row')
-    this.cellEls = findElsWithin(this.el, '.fc-day, .fc-disabled-day')
+    this.rowEls = findElements(this.el, '.fc-row')
+    this.cellEls = findElements(this.el, '.fc-day, .fc-disabled-day')
 
     this.rowCoordCache = new CoordCache({
       els: this.rowEls,
@@ -506,7 +506,7 @@ export default class DayGrid extends InteractiveDateComponent {
         if (segsBelow.length) {
           td = cellMatrix[levelLimit - 1][col]
           moreLink = this.renderMoreLink(row, col, segsBelow)
-          moreWrap = makeElement('div', null, moreLink)
+          moreWrap = createElement('div', null, moreLink)
           td.appendChild(moreWrap)
           moreNodes.push(moreWrap[0])
         }
@@ -545,14 +545,14 @@ export default class DayGrid extends InteractiveDateComponent {
 
           // make a replacement <td> for each column the segment occupies. will be one for each colspan
           for (j = 0; j < colSegsBelow.length; j++) {
-            moreTd = makeElement('td', { className: 'fc-more-cell', rowSpan }) as HTMLTableCellElement
+            moreTd = createElement('td', { className: 'fc-more-cell', rowSpan }) as HTMLTableCellElement
             segsBelow = colSegsBelow[j]
             moreLink = this.renderMoreLink(
               row,
               seg.leftCol + j,
               [ seg ].concat(segsBelow) // count seg as hidden too
             )
-            moreWrap = makeElement('div', null, moreLink)
+            moreWrap = createElement('div', null, moreLink)
             moreTd.appendChild(moreWrap)
             segMoreNodes.push(moreTd)
             moreNodes.push(moreTd)
@@ -601,7 +601,7 @@ export default class DayGrid extends InteractiveDateComponent {
   renderMoreLink(row, col, hiddenSegs) {
     let view = this.view
 
-    let a = makeElement('a', { className: 'fc-more' })
+    let a = createElement('a', { className: 'fc-more' })
     a.innerText = this.getMoreLinkText(hiddenSegs.length)
     a.addEventListener('click', (ev) => {
       let clickOption = this.opt('eventLimitClick')

src/basic/DayGridEventRenderer.ts

@@ -1,5 +1,5 @@
 import { htmlEscape, cssToStr } from '../util'
-import { makeElement, removeElement } from '../util/dom'
+import { createElement, removeElement } from '../util/dom'
 import EventRenderer from '../component/renderers/EventRenderer'
 import DayGrid from './DayGrid'
 
@@ -130,7 +130,7 @@ export default class DayGridEventRenderer extends EventRenderer {
           emptyCellsUntil(seg.leftCol)
 
           // create a container that occupies or more columns. append the event element.
-          td = makeElement('td', { className: 'fc-event-container' }, seg.el) as HTMLTableCellElement
+          td = createElement('td', { className: 'fc-event-container' }, seg.el) as HTMLTableCellElement
           if (seg.leftCol !== seg.rightCol) {
             td.colSpan = seg.rightCol - seg.leftCol + 1
           } else { // a single-column segment

src/basic/DayGridFillRenderer.ts

@@ -1,4 +1,4 @@
-import { htmlToElement, makeElement } from '../util/dom'
+import { htmlToElement, createElement } from '../util/dom'
 import FillRenderer from '../component/renderers/FillRenderer'
 import DayGrid from './DayGrid'
 
@@ -49,14 +49,14 @@ export default class DayGridFillRenderer extends FillRenderer {
     trEl = skeletonEl.getElementsByTagName('tr')[0]
 
     if (startCol > 0) {
-      trEl.appendChild(makeElement('td', { colSpan: startCol }))
+      trEl.appendChild(createElement('td', { colSpan: startCol }))
     }
 
     (seg.el as HTMLTableCellElement).colSpan = endCol - startCol
     trEl.appendChild(seg.el)
 
     if (endCol < colCnt) {
-      trEl.appendChild(makeElement('td', { colSpan: colCnt - endCol }))
+      trEl.appendChild(createElement('td', { colSpan: colCnt - endCol }))
     }
 
     this.component.bookendCells(trEl)

src/common/Popover.ts

@@ -14,7 +14,7 @@ Options:
 */
 
 import { getScrollParent } from '../util'
-import { listenBySelector, ElementContent, removeElement, makeElement } from '../util/dom'
+import { listenBySelector, ElementContent, removeElement, createElement } from '../util/dom'
 import { default as ListenerMixin, ListenerInterface } from './ListenerMixin'
 
 export interface PopoverOptions {
@@ -71,7 +71,7 @@ export default class Popover {
   // Creates `this.el` and renders content inside of it
   render() {
     let options = this.options
-    let el = this.el = makeElement('div', {
+    let el = this.el = createElement('div', {
       className: 'fc-popover ' + (options.className || ''),
       style: {
         top: '0',

src/component/DayTableMixin.ts

@@ -1,5 +1,5 @@
 import { htmlEscape, dayIDs } from '../util'
-import { prependWithinEl, appendContentTo } from '../util/dom'
+import { prependToElement, appendToElement } from '../util/dom'
 import Mixin from '../common/Mixin'
 
 export interface DayTableInterface {
@@ -446,9 +446,9 @@ export default class DayTableMixin extends Mixin implements DayTableInterface {
 
     if (introHtml) {
       if ((this as any).isRTL) {
-        appendContentTo(trEl, introHtml)
+        appendToElement(trEl, introHtml)
       } else {
-        prependWithinEl(trEl, introHtml)
+        prependToElement(trEl, introHtml)
       }
     }
   }

src/exports.ts

@@ -43,20 +43,21 @@ export {
 } from './util/object'
 
 export {
-  findElsWithin,
+  findElements,
   htmlToElement,
-  makeElement,
-  insertAfterEl,
-  prependWithinEl,
+  createElement,
+  insertAfterElement,
+  prependToElement,
   removeElement,
   listenBySelector,
-  appendContentTo,
+  appendToElement,
   applyStyle,
   applyStyleProp,
   computeHeightAndMargins,
   elementMatches,
   queryChild,
-  queryChildren
+  queryChildren,
+  whenTransitionDone
 } from './util/dom'
 
 export {

src/list/ListView.ts

@@ -1,5 +1,5 @@
 import { htmlEscape, subtractInnerElHeight } from '../util'
-import { htmlToElement, makeElement } from '../util/dom'
+import { htmlToElement, createElement } from '../util/dom'
 import UnzonedRange from '../models/UnzonedRange'
 import View from '../View'
 import Scroller from '../common/Scroller'
@@ -200,7 +200,7 @@ export default class ListView extends View {
     let mainFormat = this.opt('listDayFormat')
     let altFormat = this.opt('listDayAltFormat')
 
-    return makeElement('tr', {
+    return createElement('tr', {
       className: 'fc-list-heading',
       'data-date': dayDate.format('YYYY-MM-DD')
     }, '<td class="' + (

src/util.ts

@@ -1,5 +1,5 @@
 import * as moment from 'moment'
-import { applyStyle, computeHeightAndMargins, makeElement, removeElement } from './util/dom'
+import { applyStyle, computeHeightAndMargins, createElement, removeElement } from './util/dom'
 
 
 /* FullCalendar-specific DOM Utilities
@@ -274,7 +274,7 @@ function getIsLeftRtlScrollbars() { // responsible for caching the computation
 }
 
 function computeIsLeftRtlScrollbars() { // creates an offscreen test element, then removes it
-  let outerEl = makeElement('div', {
+  let outerEl = createElement('div', {
     style: {
       position: 'absolute',
       top: -1000,

src/util/dom.ts

@@ -1,6 +1,5 @@
 
 // TODO: util for animation end
-// TODO: get straight the distinction between HTMLElement and Element
 
 
 // Creating
@@ -8,13 +7,13 @@
 
 // TODO: use in other places
 // TODO: rename to createElement
-export function makeElement(tagName, attrs, content?): HTMLElement {
+export function createElement(tagName, attrs, content?): HTMLElement {
   let el: HTMLElement = document.createElement(tagName)
 
   if (attrs) {
     for (let attrName in attrs) {
       if (attrName === 'style') {
-        applyStyle(el, attrs[attrName])
+        applyStyle(el as HTMLElement, attrs[attrName])
       } else if (attrName === 'className' || attrName === 'colSpan' || attrName === 'rowSpan') { // TODO: do hash
         el[attrName] = attrs[attrName]
       } else {
@@ -26,7 +25,7 @@ export function makeElement(tagName, attrs, content?): HTMLElement {
   if (typeof content === 'string') {
     el.innerHTML = content
   } else if (content != null) {
-    appendContentTo(el, content)
+    appendToElement(el, content)
   }
 
   return el
@@ -66,14 +65,14 @@ function computeContainerTag(html: string) {
 
 export type ElementContent = string | Node | NodeList | Node[]
 
-export function appendContentTo(el: HTMLElement, content: ElementContent) {
+export function appendToElement(el: HTMLElement, content: ElementContent) {
   let childNodes = normalizeContent(content)
   for (let i = 0; i < childNodes.length; i++) {
     el.appendChild(childNodes[i])
   }
 }
 
-export function prependWithinEl(parent: HTMLElement, content: ElementContent) {
+export function prependToElement(parent: HTMLElement, content: ElementContent) {
   let newEls = normalizeContent(content)
   let afterEl = parent.firstChild || null // if no firstChild, will append to end, but that's okay, b/c there were no children
 
@@ -82,7 +81,7 @@ export function prependWithinEl(parent: HTMLElement, content: ElementContent) {
   }
 }
 
-export function insertAfterEl(refEl: HTMLElement, content: ElementContent) {
+export function insertAfterElement(refEl: HTMLElement, content: ElementContent) {
   let newEls = normalizeContent(content)
   let afterEl = refEl.nextSibling || null
 
@@ -146,7 +145,7 @@ export function elementMatches(el: HTMLElement, selector: string) {
 
 // TODO: user new signature in other places
 // this is only func that accepts array :(
-export function findElsWithin(containers: HTMLElement[] | HTMLElement, selector: string): HTMLElement[] {
+export function findElements(containers: HTMLElement[] | HTMLElement, selector: string): HTMLElement[] {
   if (containers instanceof HTMLElement) {
     containers = [ containers ]
   }
@@ -276,3 +275,28 @@ export function computeHeightAndMargins(el: HTMLElement) {
     parseInt(computed.marginTop, 10) +
     parseInt(computed.marginBottom, 10)
 }
+
+
+// Animation
+// ----------------------------------------------------------------------------------------------------------------
+
+const transitionEventNames = [
+  'webkitTransitionEnd',
+  'otransitionend',
+  'oTransitionEnd',
+  'msTransitionEnd',
+  'transitionend'
+]
+
+export function whenTransitionDone(el: HTMLElement, callback: (ev: Event) => void) {
+  let realCallback = function(ev) {
+    callback(ev)
+    transitionEventNames.forEach(function(eventName) {
+      el.removeEventListener(eventName, realCallback)
+    })
+  }
+
+  transitionEventNames.forEach(function(eventName) {
+    el.addEventListener(eventName, realCallback) // cross-browser way to determine when the transition finishes
+  })
+}