vis-timeline/lib/timeline/component/item/BoxItem.js

var Item = require('./Item');

/**
 * @constructor BoxItem
 * @extends Item
 * @param {Object} data             Object containing parameters start
 *                                  content, className.
 * @param {{toScreen: function, toTime: function}} conversion
 *                                  Conversion functions from time to screen and vice versa
 * @param {Object} [options]        Configuration options
 *                                  // TODO: describe available options
 */
function BoxItem (data, conversion, options) {
  this.props = {
    dot: {
      width: 0,
      height: 0
    },
    line: {
      width: 0,
      height: 0
    }
  };
  this.options = options;
  // validate data
  if (data) {
    if (data.start == undefined) {
      throw new Error('Property "start" missing in item ' + data);
    }
  }

  Item.call(this, data, conversion, options);
}

BoxItem.prototype = new Item (null, null, null);

/**
 * Check whether this item is visible inside given range
 * @param {{start: number, end: number}} range with a timestamp for start and end
 * @returns {boolean} True if visible
 */
BoxItem.prototype.isVisible = function(range) {
  // determine visibility
  var isVisible;
  var align = this.options.align;
  var widthInMs = this.width * range.getMillisecondsPerPixel();

  if (align == 'right') {
    isVisible = (this.data.start.getTime() > range.start ) && (this.data.start.getTime() - widthInMs < range.end);
  }
  else if (align == 'left') {
    isVisible = (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start.getTime() < range.end);
  }
  else {
    // default or 'center'
    isVisible = (this.data.start.getTime() + widthInMs/2 > range.start ) && (this.data.start.getTime() - widthInMs/2 < range.end);
  }
  return isVisible;
};

BoxItem.prototype._createDomElement = function() {
  if (!this.dom) {
    // create DOM
    this.dom = {};

    // create main box
    this.dom.box = document.createElement('DIV');

    // contents box (inside the background box). used for making margins
    this.dom.content = document.createElement('DIV');
    this.dom.content.className = 'vis-item-content';
    this.dom.box.appendChild(this.dom.content);

    // line to axis
    this.dom.line = document.createElement('DIV');
    this.dom.line.className = 'vis-line';

    // dot on axis
    this.dom.dot = document.createElement('DIV');
    this.dom.dot.className = 'vis-dot';

    // attach this item as attribute
    this.dom.box['timeline-item'] = this;

    this.dirty = true;
  }
}

BoxItem.prototype._appendDomElement = function() {
  if (!this.parent) {
    throw new Error('Cannot redraw item: no parent attached');
  }
  if (!this.dom.box.parentNode) {
    var foreground = this.parent.dom.foreground;
    if (!foreground) throw new Error('Cannot redraw item: parent has no foreground container element');
    foreground.appendChild(this.dom.box);
  }
  if (!this.dom.line.parentNode) {
    var background = this.parent.dom.background;
    if (!background) throw new Error('Cannot redraw item: parent has no background container element');
    background.appendChild(this.dom.line);
  }
  if (!this.dom.dot.parentNode) {
    var axis = this.parent.dom.axis;
    if (!background) throw new Error('Cannot redraw item: parent has no axis container element');
    axis.appendChild(this.dom.dot);
  }
  this.displayed = true;
}

BoxItem.prototype._updateDirtyDomComponents = function() {
  // An item is marked dirty when:
  // - the item is not yet rendered
  // - the item's data is changed
  // - the item is selected/deselected
  if (this.dirty) {
    this._updateContents(this.dom.content);
    this._updateDataAttributes(this.dom.box);
    this._updateStyle(this.dom.box);

    var editable = (this.editable.updateTime || this.editable.updateGroup);

    // update class
    var className = (this.data.className? ' ' + this.data.className : '') +
        (this.selected ? ' vis-selected' : '') +
        (editable ? ' vis-editable' : ' vis-readonly');
    this.dom.box.className = 'vis-item vis-box' + className;
    this.dom.line.className = 'vis-item vis-line' + className;
    this.dom.dot.className  = 'vis-item vis-dot' + className;
  }
}

BoxItem.prototype._getDomComponentsSizes = function() {
  return {
    previous: {
      right: this.dom.box.style.right,
      left: this.dom.box.style.left
    },
    dot: {
      height: this.dom.dot.offsetHeight,
      width: this.dom.dot.offsetWidth
    },
    line: {
      width: this.dom.line.offsetWidth
    },
    box: {
      width: this.dom.box.offsetWidth,
      height: this.dom.box.offsetHeight
    }
  }
}

BoxItem.prototype._updateDomComponentsSizes = function(sizes) {
  if (this.options.rtl) {
    this.dom.box.style.right = "0px";
  } else {
    this.dom.box.style.left = "0px";
  }

  // recalculate size
  this.props.dot.height = sizes.dot.height;
  this.props.dot.width = sizes.dot.width;
  this.props.line.width = sizes.line.width;
  this.width = sizes.box.width;
  this.height = sizes.box.height;

  // restore previous position
  if (this.options.rtl) {
    this.dom.box.style.right = sizes.previous.right;
  } else {
    this.dom.box.style.left = sizes.previous.left;
  }

  this.dirty = false;
}

BoxItem.prototype._repaintDomAdditionals = function() {
  this._repaintOnItemUpdateTimeTooltip(this.dom.box);
  this._repaintDragCenter();
  this._repaintDeleteButton(this.dom.box);
}

/**
 * Repaint the item
 * @param {boolean} [returnQueue=false]  return the queue
 * @return {boolean} the redraw queue if returnQueue=true
 */
BoxItem.prototype.redraw = function(returnQueue) {
  var sizes
  var queue = [
    // create item DOM
    this._createDomElement.bind(this),

    // append DOM to parent DOM
    this._appendDomElement.bind(this),

    // update dirty DOM
    this._updateDirtyDomComponents.bind(this),

    (function() {
      if (this.dirty) {
        sizes = this._getDomComponentsSizes();
      }
    }).bind(this),

    (function() {
      if (this.dirty) {
        this._updateDomComponentsSizes.bind(this)(sizes);
      }
    }).bind(this),

    // repaint DOM additionals
    this._repaintDomAdditionals.bind(this)
  ];

  if (returnQueue) {
    return queue;
  } else {
    var result;
    queue.forEach(function (fn) {
      result = fn();
    });
    return result;
  }
};

/**
 * Show the item in the DOM (when not already visible). The items DOM will
 * be created when needed.
 * @param {boolean} [returnQueue=false]  whether to return a queue of functions to execute instead of just executing them
 * @return {boolean} the redraw queue if returnQueue=true
 */
BoxItem.prototype.show = function(returnQueue) {
  if (!this.displayed) {
    return this.redraw(returnQueue);
  }
};

/**
 * Hide the item from the DOM (when visible)
 */
BoxItem.prototype.hide = function() {
  if (this.displayed) {
    var dom = this.dom;

    if (dom.box.parentNode)   dom.box.parentNode.removeChild(dom.box);
    if (dom.line.parentNode)  dom.line.parentNode.removeChild(dom.line);
    if (dom.dot.parentNode)   dom.dot.parentNode.removeChild(dom.dot);

    this.displayed = false;
  }
};

/**
 * Reposition the item horizontally
 * @Override
 */
BoxItem.prototype.repositionX = function() {
  var start = this.conversion.toScreen(this.data.start);
  var align = this.options.align;

  // calculate left position of the box
  if (align == 'right') {
    if (this.options.rtl) {
      this.right = start - this.width;

      // reposition box, line, and dot
      this.dom.box.style.right = this.right + 'px';
      this.dom.line.style.right = (start - this.props.line.width) + 'px';
      this.dom.dot.style.right = (start - this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
    } else {
      this.left = start - this.width;

      // reposition box, line, and dot
      this.dom.box.style.left = this.left + 'px';
      this.dom.line.style.left = (start - this.props.line.width) + 'px';
      this.dom.dot.style.left = (start - this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
    }
  }
  else if (align == 'left') {
    if (this.options.rtl) {
      this.right = start;

      // reposition box, line, and dot
      this.dom.box.style.right = this.right + 'px';
      this.dom.line.style.right = start + 'px';
      this.dom.dot.style.right = (start + this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
    } else {
      this.left = start;

      // reposition box, line, and dot
      this.dom.box.style.left = this.left + 'px';
      this.dom.line.style.left = start + 'px';
      this.dom.dot.style.left = (start + this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
    }
  }
  else {
    // default or 'center'
    if (this.options.rtl) {
      this.right = start - this.width / 2;

      // reposition box, line, and dot
      this.dom.box.style.right = this.right + 'px';
      this.dom.line.style.right = (start - this.props.line.width) + 'px';
      this.dom.dot.style.right = (start - this.props.dot.width / 2) + 'px';
    } else {
      this.left = start - this.width / 2;

      // reposition box, line, and dot
      this.dom.box.style.left = this.left + 'px';
      this.dom.line.style.left = (start - this.props.line.width / 2) + 'px';
      this.dom.dot.style.left = (start - this.props.dot.width / 2) + 'px';
    }
  }
};

/**
 * Reposition the item vertically
 * @Override
 */
BoxItem.prototype.repositionY = function() {
  var orientation = this.options.orientation.item;
  var box = this.dom.box;
  var line = this.dom.line;
  var dot = this.dom.dot;

  if (orientation == 'top') {
    box.style.top     = (this.top || 0) + 'px';

    line.style.top    = '0';
    line.style.height = (this.parent.top + this.top + 1) + 'px';
    line.style.bottom = '';
  }
  else { // orientation 'bottom'
    var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
    var lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top;

    box.style.top     = (this.parent.height - this.top - this.height || 0) + 'px';
    line.style.top    = (itemSetHeight - lineHeight) + 'px';
    line.style.bottom = '0';
  }

  dot.style.top = (-this.props.dot.height / 2) + 'px';
};

/**
 * Return the width of the item left from its start date
 * @return {number}
 */
BoxItem.prototype.getWidthLeft = function () {
  return this.width / 2;
};

/**
 * Return the width of the item right from its start date
 * @return {number}
 */
BoxItem.prototype.getWidthRight = function () {
  return this.width / 2;
};

module.exports = BoxItem;