more jquery removal

src/Calendar.ts

@@ -1,4 +1,3 @@
-import * as $ from 'jquery'
 import * as moment from 'moment'
 import { capitaliseFirstLetter, debounce } from './util'
 import { listenBySelector, toggleClassName, makeElement, removeElement, applyStyle, prependWithinEl, computeHeightAndMargins } from './util/dom'
@@ -397,7 +396,7 @@ export default class Calendar {
     this.renderView(this.opt('defaultView'))
 
     if (this.opt('handleWindowResize')) {
-      $(window).resize(
+      window.addEventListener('resize',
         this.windowResizeProxy = debounce( // prevents rapid calls
           this.windowResize.bind(this),
           this.opt('windowResizeDelay')
@@ -428,7 +427,7 @@ export default class Calendar {
     }
 
     if (this.windowResizeProxy) {
-      $(window).unbind('resize', this.windowResizeProxy)
+      window.removeEventListener('resize', this.windowResizeProxy)
       this.windowResizeProxy = null
     }
 
@@ -494,9 +493,10 @@ export default class Calendar {
       this.bindViewHandlers(newView)
 
       newView.startBatchRender() // so that setElement+setDate rendering are joined
-      newView.setElement(
-        $("<div class='fc-view fc-" + viewType + "-view'></div>").appendTo(this.contentEl)[0]
-      )
+
+      let viewEl = makeElement('div', { className: 'fc-view fc-' + viewType + '-view' })
+      this.contentEl.appendChild(viewEl)
+      newView.setElement(viewEl)
 
       this.toolbarsManager.proxyCall('activateButton', viewType)
     }

src/View.ts

@@ -1,7 +1,7 @@
-import * as $ from 'jquery'
 import * as moment from 'moment'
 import { parseFieldSpecs, isPrimaryMouseButton } from './util'
 import { assignTo } from './util/object'
+import { elementClosest } from './util/dom'
 import RenderQueue from './common/RenderQueue'
 import Calendar from './Calendar'
 import DateProfileGenerator from './DateProfileGenerator'
@@ -823,7 +823,7 @@ export default abstract class View extends InteractiveDateComponent {
     if (this.isSelected && this.opt('unselectAuto')) {
       // only unselect if the clicked element is not identical to or inside of an 'unselectCancel' element
       ignore = this.opt('unselectCancel')
-      if (!ignore || !$(ev.target).closest(ignore).length) {
+      if (!ignore || !elementClosest(ev.target, ignore)) {
         this.unselect(ev)
       }
     }
@@ -832,7 +832,7 @@ export default abstract class View extends InteractiveDateComponent {
 
   processEventUnselect(ev) {
     if (this.selectedEventInstance) {
-      if (!$(ev.target).closest('.fc-selected').length) {
+      if (!elementClosest(ev.target, '.fc-selected')) {
         this.unselectEventInstance()
       }
     }

src/agenda/TimeGrid.ts

@@ -1,4 +1,3 @@
-import * as $ from 'jquery'
 import * as moment from 'moment'
 import { isInt, divideDurationByDuration, htmlEscape } from '../util'
 import { htmlToElement, findElsWithin, makeElement, removeElement, applyStyle } from '../util/dom'
@@ -431,9 +430,9 @@ export default class TimeGrid extends InteractiveDateComponent {
 
     // render lines within the columns
     for (i = 0; i < segs.length; i++) {
-      nodes.push($('<div class="fc-now-indicator fc-now-indicator-line"></div>')
-        .css('top', top)
-        .appendTo(this.colContainerEls[segs[i].col])[0])
+      let lineEl = makeElement('div', { className: 'fc-now-indicator fc-now-indicator-line' })
+      this.colContainerEls[segs[i].col].appendChild(lineEl)
+      nodes.push(lineEl)
     }
 
     // render an arrow over the axis
@@ -640,7 +639,7 @@ export default class TimeGrid extends InteractiveDateComponent {
 
 
   getHitEl(hit) {
-    return $(this.colEls[hit.col])
+    return this.colEls[hit.col]
   }
 
 

src/basic/DayGrid.ts

@@ -1,4 +1,3 @@
-import * as $ from 'jquery'
 import { htmlEscape } from '../util'
 import { assignTo } from '../util/object'
 import CoordCache from '../common/CoordCache'
@@ -343,7 +342,7 @@ export default class DayGrid extends InteractiveDateComponent {
 
 
   getCellEl(row, col) {
-    return $(this.cellEls[row * this.colCnt + col])
+    return this.cellEls[row * this.colCnt + col]
   }
 
 
@@ -626,7 +625,7 @@ export default class DayGrid extends InteractiveDateComponent {
             {
               date: date.clone(),
               dayEl: dayEl,
-              moreEl: $(moreEl),
+              moreEl: moreEl,
               segs: reslicedAllSegs,
               hiddenSegs: reslicedHiddenSegs
             },

src/basic/DayGridEventRenderer.ts

@@ -1,4 +1,3 @@
-import * as $ from 'jquery'
 import { htmlEscape, cssToStr } from '../util'
 import { makeElement, removeElement } from '../util/dom'
 import EventRenderer from '../component/renderers/EventRenderer'
@@ -36,7 +35,7 @@ export default class DayGridEventRenderer extends EventRenderer {
 
     // append to each row's content skeleton
     this.dayGrid.rowEls.forEach(function(rowNode, i) {
-      $(rowNode).find('.fc-content-skeleton > table').append(
+      rowNode.querySelector('.fc-content-skeleton > table').appendChild(
         rowStructs[i].tbodyEl
       )
     })

src/common/Popover.ts

@@ -13,7 +13,6 @@ Options:
   - hide (callback)
 */
 
-import * as $ from 'jquery'
 import { getScrollParent } from '../util'
 import { listenViaDelegation, ElementContent, removeElement, makeElement } from '../util/dom'
 import { default as ListenerMixin, ListenerInterface } from './ListenerMixin'
@@ -96,7 +95,7 @@ export default class Popover {
   // Triggered when the user clicks *anywhere* in the document, for the autoHide feature
   documentMousedown(ev) {
     // only hide the popover if the click happened outside the popover
-    if (this.el && !$(ev.target).closest(this.el).length) {
+    if (this.el && !this.el.contains(ev.target)) {
       this.hide()
     }
   }

src/component/DateComponent.ts

@@ -532,8 +532,8 @@ export default abstract class DateComponent extends Component {
 
   // Given position-level information about a date-related area within the grid,
   // should return a jQuery element that best represents it. passed to dayClick callback.
-  getHitEl(hit): any {
-    // what about being abstract!?
+  getHitEl(hit): HTMLElement | null {
+    return null
   }
 
 

src/component/InteractiveDateComponent.ts

@@ -1,7 +1,6 @@
-import * as $ from 'jquery'
 import * as moment from 'moment'
 import { getEvIsTouch, diffByUnit, diffDayTime } from '../util'
-import { listenBySelector, listenToHoverBySelector } from '../util/dom'
+import { listenBySelector, listenToHoverBySelector, elementClosest } from '../util/dom'
 import DateComponent from './DateComponent'
 import GlobalEmitter from '../common/GlobalEmitter'
 
@@ -110,14 +109,11 @@ export default abstract class InteractiveDateComponent extends DateComponent {
 
 
   bindDateHandlerToEl(el, name, handler) {
-    // TODO: use event delegation for this? to prevent multiple calls because of bubbling?
-    // attach a handler to the grid's root element.
-    // jQuery will take care of unregistering them when removeElement gets called.
     el.addEventListener(name, (ev) => {
       if (
-        !$(ev.target).is(
-          this.segSelector + ':not(.fc-helper),' + // directly on an event element
-          this.segSelector + ':not(.fc-helper) *,' + // within an event element
+        !elementClosest(
+          ev.target,
+          this.segSelector + ':not(.fc-helper),' + // on or within an event segment
           '.fc-more,' + // a "more.." link
           'a[data-goto]' // a clickable nav link
         )
@@ -218,7 +214,7 @@ export default abstract class InteractiveDateComponent extends DateComponent {
 
     return (!getEvIsTouch(ev) || view.isEventDefSelected(eventDef)) &&
       this.isEventDefResizable(eventDef) &&
-      $(ev.target).is('.fc-resizer')
+      ev.target.classList.contains('fc-resizer')
   }
 
 

src/component/interactions/EventResizing.ts

@@ -1,4 +1,3 @@
-import * as $ from 'jquery'
 import { disableCursor, enableCursor } from '../../util'
 import EventDefMutation from '../../models/event/EventDefMutation'
 import EventDefDateMutation from '../../models/event/EventDefDateMutation'
@@ -47,7 +46,7 @@ export default class EventResizing extends Interaction {
 
   handleMouseDown(seg, ev) {
     if (this.component.canStartResize(seg, ev)) {
-      this.buildDragListener(seg, $(ev.target).is('.fc-start-resizer'))
+      this.buildDragListener(seg, ev.target.classList.contains('fc-start-resizer'))
         .startInteraction(ev, { distance: 5 })
     }
   }
@@ -55,7 +54,7 @@ export default class EventResizing extends Interaction {
 
   handleTouchStart(seg, ev) {
     if (this.component.canStartResize(seg, ev)) {
-      this.buildDragListener(seg, $(ev.target).is('.fc-start-resizer'))
+      this.buildDragListener(seg, ev.target.classList.contains('fc-start-resizer'))
         .startInteraction(ev)
     }
   }

src/exports.ts

@@ -53,7 +53,10 @@ export {
   appendContentTo,
   toggleClassName,
   applyStyle,
-  computeHeightAndMargins
+  computeHeightAndMargins,
+  elementMatches,
+  queryChild,
+  queryChildren
 } from './util/dom'
 
 export {

src/list/ListEventPointing.ts

@@ -1,4 +1,4 @@
-import * as $ from 'jquery'
+import { elementClosest } from '../util/dom'
 import EventPointing from '../component/interactions/EventPointing'
 
 
@@ -12,7 +12,7 @@ export default class ListEventPointing extends EventPointing {
     super.handleClick(seg, ev) // might prevent the default action
 
     // not clicking on or within an <a> with an href
-    if (!$(ev.target).closest('a[href]').length) {
+    if (!elementClosest(ev.target, 'a[href]')) {
       url = seg.footprint.eventDef.url
 
       if (url && !ev.isDefaultPrevented()) { // jsEvent not cancelled in handler

src/util/dom.ts

@@ -1,4 +1,46 @@
 
+
+// TODO: search for .childNodes
+export function queryChildren(parent: HTMLElement, selector?: string): HTMLElement[] {
+  let childNodes = parent.childNodes
+  let a = []
+
+  for (let i = 0; i < childNodes.length; i++) {
+    let childNode = childNodes[i]
+    if (
+      childNode.nodeType === 1 && // an element
+      (!selector || elementMatches(childNode as HTMLElement, selector))
+    ) {
+      a.push(childNode)
+    }
+  }
+
+  return a
+}
+
+export function queryChild(parent: HTMLElement, selector?: string): HTMLElement | null {
+  let childNodes = parent.childNodes
+
+  for (let i = 0; i < childNodes.length; i++) {
+    let childNode = childNodes[i]
+    if (
+      childNode.nodeType === 1 && // an element
+      (!selector || elementMatches(childNode as HTMLElement, selector))
+    ) {
+      return childNode as HTMLElement
+    }
+  }
+
+  return null
+}
+
+
+
+
+
+// TODO: util for animation end
+// TODO: get straight the distinction between HTMLElement and Element
+
 // TODO: use in other places
 // TODO: rename to createElement
 export function makeElement(tagName, attrs, content?): HTMLElement {
@@ -122,6 +164,10 @@ const closestMethod = Element.prototype.closest || function(selector) {
   return null
 }
 
+export function elementClosest(el: HTMLElement, selector: string) {
+  return closestMethod.call(el, selector)
+}
+
 export function elementMatches(el: HTMLElement, selector: string) {
   return matchesMethod.call(el, selector)
 }
@@ -133,7 +179,7 @@ export function listenBySelector(
   handler: (ev: Event, matchedTarget: HTMLElement) => void
 ) {
   function realHandler(ev: Event) {
-    let matchedChild = closestMethod.call(ev.target, selector)
+    let matchedChild = elementClosest(ev.target as HTMLElement, selector)
     if (matchedChild) {
       handler.call(matchedChild, ev, matchedChild)
     }
@@ -172,6 +218,7 @@ export function listenToHoverBySelector(
 
 
 // TODO: user new signature in other places
+// this is only func that accepts array :(
 export function findElsWithin(containers: HTMLElement[] | HTMLElement, selector: string): HTMLElement[] {
   if (containers instanceof HTMLElement) {
     containers = [ containers ]