jrtechs-vis/lib/timeline/Core.js

var Emitter = require('emitter-component');
var Hammer = require('../module/hammer');
var hammerUtil = require('../hammerUtil');
var util = require('../util');
var DataSet = require('../DataSet');
var DataView = require('../DataView');
var Range = require('./Range');
var ItemSet = require('./component/ItemSet');
var TimeAxis = require('./component/TimeAxis');
var Activator = require('../shared/Activator');
var DateUtil = require('./DateUtil');
var CustomTime = require('./component/CustomTime');

/**
 * Create a timeline visualization
 * @constructor
 */
function Core () {}

// turn Core into an event emitter
Emitter(Core.prototype);

/**
 * Create the main DOM for the Core: a root panel containing left, right,
 * top, bottom, content, and background panel.
 * @param {Element} container  The container element where the Core will
 *                             be attached.
 * @protected
 */
Core.prototype._create = function (container) {
  this.dom = {};

  this.dom.container = container;

  this.dom.root                 = document.createElement('div');
  this.dom.background           = document.createElement('div');
  this.dom.backgroundVertical   = document.createElement('div');
  this.dom.backgroundHorizontal = document.createElement('div');
  this.dom.centerContainer      = document.createElement('div');
  this.dom.leftContainer        = document.createElement('div');
  this.dom.rightContainer       = document.createElement('div');
  this.dom.center               = document.createElement('div');
  this.dom.left                 = document.createElement('div');
  this.dom.right                = document.createElement('div');
  this.dom.top                  = document.createElement('div');
  this.dom.bottom               = document.createElement('div');
  this.dom.shadowTop            = document.createElement('div');
  this.dom.shadowBottom         = document.createElement('div');
  this.dom.shadowTopLeft        = document.createElement('div');
  this.dom.shadowBottomLeft     = document.createElement('div');
  this.dom.shadowTopRight       = document.createElement('div');
  this.dom.shadowBottomRight    = document.createElement('div');

  this.dom.root.className                 = 'vis-timeline';
  this.dom.background.className           = 'vis-panel vis-background';
  this.dom.backgroundVertical.className   = 'vis-panel vis-background vis-vertical';
  this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
  this.dom.centerContainer.className      = 'vis-panel vis-center';
  this.dom.leftContainer.className        = 'vis-panel vis-left';
  this.dom.rightContainer.className       = 'vis-panel vis-right';
  this.dom.top.className                  = 'vis-panel vis-top';
  this.dom.bottom.className               = 'vis-panel vis-bottom';
  this.dom.left.className                 = 'vis-content';
  this.dom.center.className               = 'vis-content';
  this.dom.right.className                = 'vis-content';
  this.dom.shadowTop.className            = 'vis-shadow vis-top';
  this.dom.shadowBottom.className         = 'vis-shadow vis-bottom';
  this.dom.shadowTopLeft.className        = 'vis-shadow vis-top';
  this.dom.shadowBottomLeft.className     = 'vis-shadow vis-bottom';
  this.dom.shadowTopRight.className       = 'vis-shadow vis-top';
  this.dom.shadowBottomRight.className    = 'vis-shadow vis-bottom';

  this.dom.root.appendChild(this.dom.background);
  this.dom.root.appendChild(this.dom.backgroundVertical);
  this.dom.root.appendChild(this.dom.backgroundHorizontal);
  this.dom.root.appendChild(this.dom.centerContainer);
  this.dom.root.appendChild(this.dom.leftContainer);
  this.dom.root.appendChild(this.dom.rightContainer);
  this.dom.root.appendChild(this.dom.top);
  this.dom.root.appendChild(this.dom.bottom);

  this.dom.centerContainer.appendChild(this.dom.center);
  this.dom.leftContainer.appendChild(this.dom.left);
  this.dom.rightContainer.appendChild(this.dom.right);
  this.dom.centerContainer.appendChild(this.dom.shadowTop);
  this.dom.centerContainer.appendChild(this.dom.shadowBottom);
  this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
  this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
  this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
  this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);

  // size properties of each of the panels
  this.props = {
    root: {},
    background: {},
    centerContainer: {},
    leftContainer: {},
    rightContainer: {},
    center: {},
    left: {},
    right: {},
    top: {},
    bottom: {},
    border: {},
    scrollTop: 0,
    scrollTopMin: 0
  };

  this.on('rangechange', function () {
    if (this.initialDrawDone === true) {
      this._redraw();
    }
  }.bind(this));
  this.on('touch',       this._onTouch.bind(this));
  this.on('panmove',         this._onDrag.bind(this));

  var me = this;
  
  this._origRedraw = this._redraw.bind(this);
  this._redraw = util.throttle(this._origRedraw);
  
  this.on('_change', function (properties) {
    if (me.itemSet.initialItemSetDrawn && properties && properties.queue == true) {
      me._redraw()
    } else {
      me._origRedraw();
    }
  });

  // create event listeners for all interesting events, these events will be
  // emitted via emitter
  this.hammer = new Hammer(this.dom.root);
  var pinchRecognizer = this.hammer.get('pinch').set({enable: true});
  hammerUtil.disablePreventDefaultVertically(pinchRecognizer);
  this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
  this.listeners = {};

  var events = [
    'tap', 'doubletap', 'press',
    'pinch',
    'pan', 'panstart', 'panmove', 'panend'
      // TODO: cleanup
    //'touch', 'pinch',
    //'tap', 'doubletap', 'hold',
    //'dragstart', 'drag', 'dragend',
    //'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
  ];
  events.forEach(function (type) {
    var listener = function (event) {
      if (me.isActive()) {
        me.emit(type, event);
      }
    };
    me.hammer.on(type, listener);
    me.listeners[type] = listener;
  });

  // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
  hammerUtil.onTouch(this.hammer, function (event) {
    me.emit('touch', event);
  }.bind(this));

  // emulate a release event (emitted after a pan, pinch, tap, or press)
  hammerUtil.onRelease(this.hammer, function (event) {
    me.emit('release', event);
  }.bind(this));

  function onMouseWheel(event) {
    if (this.isActive()) {
      this.emit('mousewheel', event);
    }

    // prevent scrolling if not specified explicitly or when horizontalScroll is true
    if (!this.options.verticalScroll || this.options.horizontalScroll) return;

    // prevent scrolling when zoomKey defined or activated
    if (!this.options.zoomKey || event[this.options.zoomKey]) return;

    // Prevent default actions caused by mouse wheel
    // (else the page and timeline both scroll)
    event.preventDefault();

    var delta = 0;
    if (event.wheelDelta) { /* IE/Opera. */
      delta = event.wheelDelta / 120;
    } else if (event.detail) { /* Mozilla case. */
      // In Mozilla, sign of delta is different than in IE.
      // Also, delta is multiple of 3.
      delta = -event.detail / 3;
    }

    var current = this.props.scrollTop;
    var adjusted = current + delta * 120;

    if (this.isActive()) {
      this._setScrollTop(adjusted);
      this._redraw();
      this.emit('scroll', event);
    }
  }

  if (this.dom.centerContainer.addEventListener) {
    // IE9, Chrome, Safari, Opera
    this.dom.centerContainer.addEventListener("mousewheel", onMouseWheel.bind(this), false);
    // Firefox
    this.dom.centerContainer.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
  } else {
    // IE 6/7/8
    this.dom.centerContainer.attachEvent("onmousewheel", onMouseWheel.bind(this));
  }

  function onMouseScrollSide(event) {
    if (!me.options.verticalScroll) return;
    event.preventDefault();
    if (me.isActive()) {
      var adjusted = -event.target.scrollTop;
      me._setScrollTop(adjusted);
      me._redraw();
      me.emit('scrollSide', event);
    }
  }

  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));

  var itemAddedToTimeline = false;

  function handleDragOver(event) {
    if (event.preventDefault) {
      event.preventDefault(); // Necessary. Allows us to drop.
    }

    // make sure your target is a vis element
    if (!event.target.className.includes('vis')) return;

    // make sure only one item is added every time you're over the timeline
    if (itemAddedToTimeline) return;

    event.dataTransfer.dropEffect = 'move';  
    itemAddedToTimeline = true;
    return false;
  }

  function handleDrop(event) {
    // return when dropping non-vis items 
    try {
      var itemData = JSON.parse(event.dataTransfer.getData("text/plain"))
      if (!itemData.content) return
    } catch (err) {
      return false;
    }

    itemAddedToTimeline = false;
    event.center = {
      x: event.x,
      y: event.y
    }
    me.itemSet._onAddItem(event);

    return false;
  }

  this.dom.center.addEventListener('dragover', handleDragOver.bind(this), false);
  this.dom.center.addEventListener('drop', handleDrop.bind(this), false);

  this.customTimes = [];

  // store state information needed for touch events
  this.touch = {};

  this.redrawCount = 0;
  this.initialDrawDone = false;

  // attach the root panel to the provided container
  if (!container) throw new Error('No container provided');
  container.appendChild(this.dom.root);
};

/**
 * Set options. Options will be passed to all components loaded in the Timeline.
 * @param {Object} [options]
 *                           {String} orientation
 *                              Vertical orientation for the Timeline,
 *                              can be 'bottom' (default) or 'top'.
 *                           {String | Number} width
 *                              Width for the timeline, a number in pixels or
 *                              a css string like '1000px' or '75%'. '100%' by default.
 *                           {String | Number} height
 *                              Fixed height for the Timeline, a number in pixels or
 *                              a css string like '400px' or '75%'. If undefined,
 *                              The Timeline will automatically size such that
 *                              its contents fit.
 *                           {String | Number} minHeight
 *                              Minimum height for the Timeline, a number in pixels or
 *                              a css string like '400px' or '75%'.
 *                           {String | Number} maxHeight
 *                              Maximum height for the Timeline, a number in pixels or
 *                              a css string like '400px' or '75%'.
 *                           {Number | Date | String} start
 *                              Start date for the visible window
 *                           {Number | Date | String} end
 *                              End date for the visible window
 */
Core.prototype.setOptions = function (options) {
  if (options) {
    // copy the known options
    var fields = [
      'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
      'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
      'locale', 'locales', 'moment', 'rtl', 'zoomKey', 'horizontalScroll', 'verticalScroll'
    ];
    util.selectiveExtend(fields, this.options, options); 

    if (this.options.rtl) {
      this.dom.container.style.direction = "rtl";
      this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl';    
    }

    if (this.options.verticalScroll) {
      if (this.options.rtl) {
        this.dom.rightContainer.className = 'vis-panel vis-right vis-vertical-scroll';
      } else {
        this.dom.leftContainer.className = 'vis-panel vis-left vis-vertical-scroll';
      }
    }

    this.options.orientation = {item:undefined,axis:undefined};
    if ('orientation' in options) {
      if (typeof options.orientation === 'string') {
        this.options.orientation = {
          item: options.orientation,
          axis: options.orientation
        };
      }
      else if (typeof options.orientation === 'object') {
        if ('item' in options.orientation) {
          this.options.orientation.item = options.orientation.item;
        }
        if ('axis' in options.orientation) {
          this.options.orientation.axis = options.orientation.axis;
        }
      }
    }

    if (this.options.orientation.axis === 'both') {
      if (!this.timeAxis2) {
        var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body);
        timeAxis2.setOptions = function (options) {
          var _options = options ? util.extend({}, options) : {};
          _options.orientation = 'top'; // override the orientation option, always top
          TimeAxis.prototype.setOptions.call(timeAxis2, _options);
        };
        this.components.push(timeAxis2);
      }
    }
    else {
      if (this.timeAxis2) {
        var index = this.components.indexOf(this.timeAxis2);
        if (index !== -1) {
          this.components.splice(index, 1);
        }
        this.timeAxis2.destroy();
        this.timeAxis2 = null;
      }
    }

    // if the graph2d's drawPoints is a function delegate the callback to the onRender property
    if (typeof options.drawPoints == 'function') {
      options.drawPoints = {
          onRender: options.drawPoints
      };
    }

    if ('hiddenDates' in this.options) {
      DateUtil.convertHiddenOptions(this.options.moment, this.body, this.options.hiddenDates);
    }

    if ('clickToUse' in options) {
      if (options.clickToUse) {
        if (!this.activator) {
          this.activator = new Activator(this.dom.root);
        }
      }
      else {
        if (this.activator) {
          this.activator.destroy();
          delete this.activator;
        }
      }
    }

    if ('showCustomTime' in options) {
      throw new Error('Option `showCustomTime` is deprecated. Create a custom time bar via timeline.addCustomTime(time [, id])');
    }

    // enable/disable autoResize
    this._initAutoResize();
  }

  // propagate options to all components
  this.components.forEach(component => component.setOptions(options));

  // enable/disable configure
  if ('configure' in options) {
    if (!this.configurator) {
      this.configurator = this._createConfigurator();
    }

    this.configurator.setOptions(options.configure);

    // collect the settings of all components, and pass them to the configuration system
    var appliedOptions = util.deepExtend({}, this.options);
    this.components.forEach(function (component) {
      util.deepExtend(appliedOptions, component.options);
    });
    this.configurator.setModuleOptions({global: appliedOptions});
  }

  this._redraw();
};

/**
 * Returns true when the Timeline is active.
 * @returns {boolean}
 */
Core.prototype.isActive = function () {
  return !this.activator || this.activator.active;
};

/**
 * Destroy the Core, clean up all DOM elements and event listeners.
 */
Core.prototype.destroy = function () {
  // unbind datasets
  this.setItems(null);
  this.setGroups(null);

  // remove all event listeners
  this.off();

  // stop checking for changed size
  this._stopAutoResize();

  // remove from DOM
  if (this.dom.root.parentNode) {
    this.dom.root.parentNode.removeChild(this.dom.root);
  }
  this.dom = null;

  // remove Activator
  if (this.activator) {
    this.activator.destroy();
    delete this.activator;
  }

  // cleanup hammer touch events
  for (var event in this.listeners) {
    if (this.listeners.hasOwnProperty(event)) {
      delete this.listeners[event];
    }
  }
  this.listeners = null;
  this.hammer = null;

  // give all components the opportunity to cleanup
  this.components.forEach(component => component.destroy());

  this.body = null;
};


/**
 * Set a custom time bar
 * @param {Date} time
 * @param {number} [id=undefined] Optional id of the custom time bar to be adjusted.
 */
Core.prototype.setCustomTime = function (time, id) {
  var customTimes = this.customTimes.filter(function (component) {
    return id === component.options.id;
  });

  if (customTimes.length === 0) {
    throw new Error('No custom time bar found with id ' + JSON.stringify(id))
  }

  if (customTimes.length > 0) {
    customTimes[0].setCustomTime(time);
  }
};

/**
 * Retrieve the current custom time.
 * @param {number} [id=undefined]    Id of the custom time bar.
 * @return {Date | undefined} customTime
 */
Core.prototype.getCustomTime = function(id) {
  var customTimes = this.customTimes.filter(function (component) {
    return component.options.id === id;
  });

  if (customTimes.length === 0) {
    throw new Error('No custom time bar found with id ' + JSON.stringify(id))
  }
  return customTimes[0].getCustomTime();
};

/**
 * Set a custom title for the custom time bar.
 * @param {String} [title] Custom title
 * @param {number} [id=undefined]    Id of the custom time bar.
 */
Core.prototype.setCustomTimeTitle = function(title, id) {
  var customTimes = this.customTimes.filter(function (component) {
    return component.options.id === id;
  });

  if (customTimes.length === 0) {
    throw new Error('No custom time bar found with id ' + JSON.stringify(id))
  }
  if (customTimes.length > 0) {
    return customTimes[0].setCustomTitle(title);
  }
};

/**
 * Retrieve meta information from an event.
 * Should be overridden by classes extending Core
 * @param {Event} event
 * @return {Object} An object with related information.
 */
Core.prototype.getEventProperties = function (event) {
  return { event: event };
};

/**
 * Add custom vertical bar
 * @param {Date | String | Number} [time]  A Date, unix timestamp, or
 *                                         ISO date string. Time point where
 *                                         the new bar should be placed.
 *                                         If not provided, `new Date()` will
 *                                         be used.
 * @param {Number | String} [id=undefined] Id of the new bar. Optional
 * @return {Number | String}               Returns the id of the new bar
 */
Core.prototype.addCustomTime = function (time, id) {
  var timestamp = time !== undefined
      ? util.convert(time, 'Date').valueOf()
      : new Date();

  var exists = this.customTimes.some(function (customTime) {
    return customTime.options.id === id;
  });
  if (exists) {
    throw new Error('A custom time with id ' + JSON.stringify(id) + ' already exists');
  }

  var customTime = new CustomTime(this.body, util.extend({}, this.options, {
    time : timestamp,
    id : id
  }));

  this.customTimes.push(customTime);
  this.components.push(customTime);
  this._redraw();

  return id;
};

/**
 * Remove previously added custom bar
 * @param {int} id ID of the custom bar to be removed
 * @return {boolean} True if the bar exists and is removed, false otherwise
 */
Core.prototype.removeCustomTime = function (id) {
  var customTimes = this.customTimes.filter(function (bar) {
    return (bar.options.id === id);
  });

  if (customTimes.length === 0) {
    throw new Error('No custom time bar found with id ' + JSON.stringify(id))
  }

  customTimes.forEach(function (customTime) {
    this.customTimes.splice(this.customTimes.indexOf(customTime), 1);
    this.components.splice(this.components.indexOf(customTime), 1);
    customTime.destroy();
  }.bind(this))
};


/**
 * Get the id's of the currently visible items.
 * @returns {Array} The ids of the visible items
 */
Core.prototype.getVisibleItems = function() {
  return this.itemSet && this.itemSet.getVisibleItems() || [];
};

/**
 * Set Core window such that it fits all items
 * @param {Object} [options]  Available options:
 *                                `animation: boolean | {duration: number, easingFunction: string}`
 *                                    If true (default), the range is animated
 *                                    smoothly to the new window. An object can be
 *                                    provided to specify duration and easing function.
 *                                    Default duration is 500 ms, and default easing
 *                                    function is 'easeInOutQuad'.
 */
Core.prototype.fit = function(options) {
  var range = this.getDataRange();

  // skip range set if there is no min and max date
  if (range.min === null && range.max === null) {
    return;
  }

  // apply a margin of 1% left and right of the data
  var interval = range.max - range.min;
  var min = new Date(range.min.valueOf() - interval * 0.01);
  var max = new Date(range.max.valueOf() + interval * 0.01);
  var animation = (options && options.animation !== undefined) ? options.animation : true;
  this.range.setRange(min, max, animation);
};

/**
 * Calculate the data range of the items start and end dates
 * @returns {{min: Date | null, max: Date | null}}
 * @protected
 */
Core.prototype.getDataRange = function() {
  // must be implemented by Timeline and Graph2d
  throw new Error('Cannot invoke abstract method getDataRange');
};

/**
 * Set the visible window. Both parameters are optional, you can change only
 * start or only end. Syntax:
 *
 *     TimeLine.setWindow(start, end)
 *     TimeLine.setWindow(start, end, options)
 *     TimeLine.setWindow(range)
 *
 * Where start and end can be a Date, number, or string, and range is an
 * object with properties start and end.
 *
 * @param {Date | Number | String | Object} [start] Start date of visible window
 * @param {Date | Number | String} [end]            End date of visible window
 * @param {Object} [options]  Available options:
 *                                `animation: boolean | {duration: number, easingFunction: string}`
 *                                    If true (default), the range is animated
 *                                    smoothly to the new window. An object can be
 *                                    provided to specify duration and easing function.
 *                                    Default duration is 500 ms, and default easing
 *                                    function is 'easeInOutQuad'.
 */
Core.prototype.setWindow = function(start, end, options) {
  var animation;
  if (arguments.length == 1) {
    var range = arguments[0];
    animation = (range.animation !== undefined) ? range.animation : true;
    this.range.setRange(range.start, range.end, animation);
  }
  else {
    animation = (options && options.animation !== undefined) ? options.animation : true;
    this.range.setRange(start, end, animation);
  }
};

/**
 * Move the window such that given time is centered on screen.
 * @param {Date | Number | String} time
 * @param {Object} [options]  Available options:
 *                                `animation: boolean | {duration: number, easingFunction: string}`
 *                                    If true (default), the range is animated
 *                                    smoothly to the new window. An object can be
 *                                    provided to specify duration and easing function.
 *                                    Default duration is 500 ms, and default easing
 *                                    function is 'easeInOutQuad'.
 */
Core.prototype.moveTo = function(time, options) {
  var interval = this.range.end - this.range.start;
  var t = util.convert(time, 'Date').valueOf();

  var start = t - interval / 2;
  var end = t + interval / 2;
  var animation = (options && options.animation !== undefined) ? options.animation : true;

  this.range.setRange(start, end, animation);
};

/**
 * Get the visible window
 * @return {{start: Date, end: Date}}   Visible range
 */
Core.prototype.getWindow = function() {
  var range = this.range.getRange();
  return {
    start: new Date(range.start),
    end: new Date(range.end)
  };
};

/**
 * Zoom in the window such that given time is centered on screen.
 * @param {Number} percentage - must be between [0..1]
 */
Core.prototype.zoomIn = function(percentage) {
  if (!percentage || percentage < 0 || percentage > 1) return
  var range = this.getWindow();
  var start = range.start.valueOf();
  var end = range.end.valueOf();
  var interval = end - start;
  var newInterval = interval / (1 + percentage);
  var distance = (interval - newInterval) / 2;
  var newStart = start + distance;
  var newEnd = end - distance;

  this.setWindow({
    start   : newStart,
    end     : newEnd
  });
};

/**
 * Zoom out the window such that given time is centered on screen.
 * @param {Number} percentage - must be between [0..1]
 */
Core.prototype.zoomOut = function(percentage) {
  if (!percentage || percentage < 0 || percentage > 1) return
  var range = this.getWindow();
  var start = range.start.valueOf();
  var end = range.end.valueOf();
  var interval = end - start;
  var newStart = start - interval * percentage / 2;
  var newEnd = end + interval * percentage / 2;

  this.setWindow({
    start   : newStart,
    end     : newEnd
  });
};

/**
 * Force a redraw. Can be overridden by implementations of Core
 *
 * Note: this function will be overridden on construction with a trottled version
 */
Core.prototype.redraw = function() {
  this._redraw();
};

/**
 * Redraw for internal use. Redraws all components. See also the public
 * method redraw.
 * @protected
 */
Core.prototype._redraw = function() {
  this.redrawCount++;
  var resized = false;
  var options = this.options;
  var props = this.props;
  var dom = this.dom;

  if (!dom || !dom.container || dom.root.offsetWidth == 0) return; // when destroyed, or invisible

  DateUtil.updateHiddenDates(this.options.moment, this.body, this.options.hiddenDates);

  // update class names
  if (options.orientation == 'top') {
    util.addClassName(dom.root, 'vis-top');
    util.removeClassName(dom.root, 'vis-bottom');
  }
  else {
    util.removeClassName(dom.root, 'vis-top');
    util.addClassName(dom.root, 'vis-bottom');
  }

  // update root width and height options
  dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
  dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
  dom.root.style.width = util.option.asSize(options.width, '');

  // calculate border widths
  props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
  props.border.right  = props.border.left;
  props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
  props.border.bottom = props.border.top;
  props.borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
  props.borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;

  // workaround for a bug in IE: the clientWidth of an element with
  // a height:0px and overflow:hidden is not calculated and always has value 0
  if (dom.centerContainer.clientHeight === 0) {
    props.border.left = props.border.top;
    props.border.right  = props.border.left;
  }
  if (dom.root.clientHeight === 0) {
    props.borderRootWidth = props.borderRootHeight;
  }

  // calculate the heights. If any of the side panels is empty, we set the height to
  // minus the border width, such that the border will be invisible
  props.center.height = dom.center.offsetHeight;
  props.left.height   = dom.left.offsetHeight;
  props.right.height  = dom.right.offsetHeight;
  props.top.height    = dom.top.clientHeight    || -props.border.top;
  props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;

  // TODO: compensate borders when any of the panels is empty.

  // apply auto height
  // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
  var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
  var autoHeight = props.top.height + contentHeight + props.bottom.height +
    props.borderRootHeight + props.border.top + props.border.bottom;
  dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');

  // calculate heights of the content panels
  props.root.height = dom.root.offsetHeight;
  props.background.height = props.root.height - props.borderRootHeight;
  var containerHeight = props.root.height - props.top.height - props.bottom.height -
    props.borderRootHeight;
  props.centerContainer.height  = containerHeight;
  props.leftContainer.height    = containerHeight;
  props.rightContainer.height   = props.leftContainer.height;

  // calculate the widths of the panels
  props.root.width = dom.root.offsetWidth;
  props.background.width = props.root.width - props.borderRootWidth;

  if (!this.initialDrawDone) {
    props.scrollbarWidth = util.getScrollBarWidth();
  }

  if (options.verticalScroll) {
    if (options.rtl) {
      props.left.width = dom.leftContainer.clientWidth || -props.border.left;
      props.right.width = dom.rightContainer.clientWidth + props.scrollbarWidth || -props.border.right;
    } else {
      props.left.width = dom.leftContainer.clientWidth + props.scrollbarWidth || -props.border.left;
      props.right.width = dom.rightContainer.clientWidth || -props.border.right;
    }
  } else {
    props.left.width = dom.leftContainer.clientWidth  || -props.border.left;
    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
  }

  this._setDOM();

  // update the scrollTop, feasible range for the offset can be changed
  // when the height of the Core or of the contents of the center changed
  var offset = this._updateScrollTop();

  // reposition the scrollable contents
  if (options.orientation.item != 'top') {
    offset += Math.max(props.centerContainer.height - props.center.height -
      props.border.top - props.border.bottom, 0);
  }
  dom.center.style.top  = offset + 'px';
  
  // show shadows when vertical scrolling is available
  var visibilityTop = props.scrollTop == 0 ? 'hidden' : '';
  var visibilityBottom = props.scrollTop == props.scrollTopMin ? 'hidden' : '';
  dom.shadowTop.style.visibility          = visibilityTop;
  dom.shadowBottom.style.visibility       = visibilityBottom;
  dom.shadowTopLeft.style.visibility      = visibilityTop;
  dom.shadowBottomLeft.style.visibility   = visibilityBottom;
  dom.shadowTopRight.style.visibility     = visibilityTop;
  dom.shadowBottomRight.style.visibility  = visibilityBottom;

  if (options.verticalScroll) {
    dom.rightContainer.className = 'vis-panel vis-right vis-vertical-scroll';
    dom.leftContainer.className = 'vis-panel vis-left vis-vertical-scroll';

    dom.shadowTopRight.style.visibility     = "hidden";
    dom.shadowBottomRight.style.visibility  = "hidden";
    dom.shadowTopLeft.style.visibility      = "hidden";
    dom.shadowBottomLeft.style.visibility   = "hidden";

    dom.left.style.top    = '0px';
    dom.right.style.top   = '0px';
  }

  if (!options.verticalScroll ||  props.center.height < props.centerContainer.height) {
    dom.left.style.top    = offset + 'px';
    dom.right.style.top   = offset + 'px';
    dom.rightContainer.className = dom.rightContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
    dom.leftContainer.className = dom.leftContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
    props.left.width = dom.leftContainer.clientWidth  || -props.border.left;
    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
    this._setDOM();
  }

  // enable/disable vertical panning
  var contentsOverflow = props.center.height > props.centerContainer.height;
  this.hammer.get('pan').set({
    direction: contentsOverflow ? Hammer.DIRECTION_ALL : Hammer.DIRECTION_HORIZONTAL
  });

  // redraw all components
  this.components.forEach(function (component) {
    resized = component.redraw() || resized;
  });
  var MAX_REDRAW = 5;
  if (resized) {
    if (this.redrawCount < MAX_REDRAW) {
      this.body.emitter.emit('_change');
      return;
    }
    else {
      console.log('WARNING: infinite loop in redraw?');
    }
  } else {
    this.redrawCount = 0;
  }
  this.initialDrawDone = true;

  //Emit public 'changed' event for UI updates, see issue #1592
  this.body.emitter.emit("changed");
};

Core.prototype._setDOM = function () {
  var props = this.props;
  var dom = this.dom;

  props.leftContainer.width = props.left.width;
  props.rightContainer.width = props.right.width;
  var centerWidth = props.root.width - props.left.width - props.right.width - props.borderRootWidth;
  props.center.width          = centerWidth;
  props.centerContainer.width = centerWidth;
  props.top.width             = centerWidth;
  props.bottom.width          = centerWidth;

  // resize the panels
  dom.background.style.height           = props.background.height + 'px';
  dom.backgroundVertical.style.height   = props.background.height + 'px';
  dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
  dom.centerContainer.style.height      = props.centerContainer.height + 'px';
  dom.leftContainer.style.height        = props.leftContainer.height + 'px';
  dom.rightContainer.style.height       = props.rightContainer.height + 'px';

  dom.background.style.width            = props.background.width + 'px';
  dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
  dom.backgroundHorizontal.style.width  = props.background.width + 'px';
  dom.centerContainer.style.width       = props.center.width + 'px';
  dom.top.style.width                   = props.top.width + 'px';
  dom.bottom.style.width                = props.bottom.width + 'px';

  // reposition the panels
  dom.background.style.left           = '0';
  dom.background.style.top            = '0';
  dom.backgroundVertical.style.left   = (props.left.width + props.border.left) + 'px';
  dom.backgroundVertical.style.top    = '0';
  dom.backgroundHorizontal.style.left = '0';
  dom.backgroundHorizontal.style.top  = props.top.height + 'px';
  dom.centerContainer.style.left      = props.left.width + 'px';
  dom.centerContainer.style.top       = props.top.height + 'px';
  dom.leftContainer.style.left        = '0';
  dom.leftContainer.style.top         = props.top.height + 'px';
  dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
  dom.rightContainer.style.top        = props.top.height + 'px';
  dom.top.style.left                  = props.left.width + 'px';
  dom.top.style.top                   = '0';
  dom.bottom.style.left               = props.left.width + 'px';
  dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
  dom.center.style.left               = '0';
  dom.left.style.left                 = '0';
  dom.right.style.left                = '0';
}

// TODO: deprecated since version 1.1.0, remove some day
Core.prototype.repaint = function () {
  throw new Error('Function repaint is deprecated. Use redraw instead.');
};

/**
 * Set a current time. This can be used for example to ensure that a client's
 * time is synchronized with a shared server time.
 * Only applicable when option `showCurrentTime` is true.
 * @param {Date | String | Number} time     A Date, unix timestamp, or
 *                                          ISO date string.
 */
Core.prototype.setCurrentTime = function(time) {
  if (!this.currentTime) {
    throw new Error('Option showCurrentTime must be true');
  }

  this.currentTime.setCurrentTime(time);
};

/**
 * Get the current time.
 * Only applicable when option `showCurrentTime` is true.
 * @return {Date} Returns the current time.
 */
Core.prototype.getCurrentTime = function() {
  if (!this.currentTime) {
    throw new Error('Option showCurrentTime must be true');
  }

  return this.currentTime.getCurrentTime();
};

/**
 * Convert a position on screen (pixels) to a datetime
 * @param {int}     x    Position on the screen in pixels
 * @return {Date}   time The datetime the corresponds with given position x
 * @protected
 */
// TODO: move this function to Range
Core.prototype._toTime = function(x) {
  return DateUtil.toTime(this, x, this.props.center.width);
};

/**
 * Convert a position on the global screen (pixels) to a datetime
 * @param {int}     x    Position on the screen in pixels
 * @return {Date}   time The datetime the corresponds with given position x
 * @protected
 */
// TODO: move this function to Range
Core.prototype._toGlobalTime = function(x) {
  return DateUtil.toTime(this, x, this.props.root.width);
  //var conversion = this.range.conversion(this.props.root.width);
  //return new Date(x / conversion.scale + conversion.offset);
};

/**
 * Convert a datetime (Date object) into a position on the screen
 * @param {Date}   time A date
 * @return {int}   x    The position on the screen in pixels which corresponds
 *                      with the given date.
 * @protected
 */
// TODO: move this function to Range
Core.prototype._toScreen = function(time) {
  return DateUtil.toScreen(this, time, this.props.center.width);
};



/**
 * Convert a datetime (Date object) into a position on the root
 * This is used to get the pixel density estimate for the screen, not the center panel
 * @param {Date}   time A date
 * @return {int}   x    The position on root in pixels which corresponds
 *                      with the given date.
 * @protected
 */
// TODO: move this function to Range
Core.prototype._toGlobalScreen = function(time) {
  return DateUtil.toScreen(this, time, this.props.root.width);
  //var conversion = this.range.conversion(this.props.root.width);
  //return (time.valueOf() - conversion.offset) * conversion.scale;
};


/**
 * Initialize watching when option autoResize is true
 * @private
 */
Core.prototype._initAutoResize = function () {
  if (this.options.autoResize == true) {
    this._startAutoResize();
  }
  else {
    this._stopAutoResize();
  }
};

/**
 * Watch for changes in the size of the container. On resize, the Panel will
 * automatically redraw itself.
 * @private
 */
Core.prototype._startAutoResize = function () {
  var me = this;

  this._stopAutoResize();

  this._onResize = function() {
    if (me.options.autoResize != true) {
      // stop watching when the option autoResize is changed to false
      me._stopAutoResize();
      return;
    }

    if (me.dom.root) {
      // check whether the frame is resized
      // Note: we compare offsetWidth here, not clientWidth. For some reason,
      // IE does not restore the clientWidth from 0 to the actual width after
      // changing the timeline's container display style from none to visible
      if ((me.dom.root.offsetWidth != me.props.lastWidth) ||
        (me.dom.root.offsetHeight != me.props.lastHeight)) {
        me.props.lastWidth = me.dom.root.offsetWidth;
        me.props.lastHeight = me.dom.root.offsetHeight;
        me.props.scrollbarWidth = util.getScrollBarWidth();

        me.body.emitter.emit('_change');
      }
    }
  };

  // add event listener to window resize
  util.addEventListener(window, 'resize', this._onResize);

  //Prevent initial unnecessary redraw
  if (me.dom.root) {
      me.props.lastWidth = me.dom.root.offsetWidth;
      me.props.lastHeight = me.dom.root.offsetHeight;
  }

  this.watchTimer = setInterval(this._onResize, 1000);
};

/**
 * Stop watching for a resize of the frame.
 * @private
 */
Core.prototype._stopAutoResize = function () {
  if (this.watchTimer) {
    clearInterval(this.watchTimer);
    this.watchTimer = undefined;
  }

  // remove event listener on window.resize
  if (this._onResize) {
    util.removeEventListener(window, 'resize', this._onResize);
    this._onResize = null;
  }
};

/**
 * Start moving the timeline vertically
 * @param {Event} event
 * @private
 */
Core.prototype._onTouch = function (event) {
  this.touch.allowDragging = true;
  this.touch.initialScrollTop = this.props.scrollTop;
};

/**
 * Start moving the timeline vertically
 * @param {Event} event
 * @private
 */
Core.prototype._onPinch = function (event) {
  this.touch.allowDragging = false;
};

/**
 * Move the timeline vertically
 * @param {Event} event
 * @private
 */
Core.prototype._onDrag = function (event) {
  if (!event) return
  // refuse to drag when we where pinching to prevent the timeline make a jump
  // when releasing the fingers in opposite order from the touch screen
  if (!this.touch.allowDragging) return;

  var delta = event.deltaY;

  var oldScrollTop = this._getScrollTop();
  var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);

  if (this.options.verticalScroll) {
    this.dom.left.parentNode.scrollTop = -this.props.scrollTop;
    this.dom.right.parentNode.scrollTop = -this.props.scrollTop;
  }

  if (newScrollTop != oldScrollTop) {
    this.emit("verticalDrag");
  }
};

/**
 * Apply a scrollTop
 * @param {Number} scrollTop
 * @returns {Number} scrollTop  Returns the applied scrollTop
 * @private
 */
Core.prototype._setScrollTop = function (scrollTop) {
  this.props.scrollTop = scrollTop;
  this._updateScrollTop();
  return this.props.scrollTop;
};

/**
 * Update the current scrollTop when the height of  the containers has been changed
 * @returns {Number} scrollTop  Returns the applied scrollTop
 * @private
 */
Core.prototype._updateScrollTop = function () {
  // recalculate the scrollTopMin
  var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
  if (scrollTopMin != this.props.scrollTopMin) {
    // in case of bottom orientation, change the scrollTop such that the contents
    // do not move relative to the time axis at the bottom
    if (this.options.orientation.item != 'top') {
      this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
    }
    this.props.scrollTopMin = scrollTopMin;
  }

  // limit the scrollTop to the feasible scroll range
  if (this.props.scrollTop > 0) this.props.scrollTop = 0;
  if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;

  if (this.options.verticalScroll) {
    this.dom.left.parentNode.scrollTop = -this.props.scrollTop;
    this.dom.right.parentNode.scrollTop = -this.props.scrollTop;
  }

  return this.props.scrollTop;
};

/**
 * Get the current scrollTop
 * @returns {number} scrollTop
 * @private
 */
Core.prototype._getScrollTop = function () {
  return this.props.scrollTop;
};

/**
 * Load a configurator
 * @return {Object}
 * @private
 */
Core.prototype._createConfigurator = function () {
  throw new Error('Cannot invoke abstract method _createConfigurator');
};

module.exports = Core;