var Item = require('./Item'); var util = require('../../../util'); /** * @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 * @returns {{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 msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth; var widthInMs = this.width * msPerPixel; 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; }; /** * Repaint the item */ BoxItem.prototype.redraw = function() { var dom = this.dom; if (!dom) { // create DOM this.dom = {}; dom = this.dom; // create main box dom.box = document.createElement('DIV'); // contents box (inside the background box). used for making margins dom.content = document.createElement('DIV'); dom.content.className = 'vis-item-content'; dom.box.appendChild(dom.content); // line to axis dom.line = document.createElement('DIV'); dom.line.className = 'vis-line'; // dot on axis dom.dot = document.createElement('DIV'); dom.dot.className = 'vis-dot'; // attach this item as attribute dom.box['timeline-item'] = this; this.dirty = true; } // append DOM to parent DOM if (!this.parent) { throw new Error('Cannot redraw item: no parent attached'); } if (!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(dom.box); } if (!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(dom.line); } if (!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(dom.dot); } this.displayed = true; // Update DOM when item is marked dirty. 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._updateTitle(this.dom.box); this._updateDataAttributes(this.dom.box); this._updateStyle(this.dom.box); var editable = (this.options.editable.updateTime || this.options.editable.updateGroup || this.editable === true) && this.editable !== false; // update class var className = (this.data.className? ' ' + this.data.className : '') + (this.selected ? ' vis-selected' : '') + (editable ? ' vis-editable' : ' vis-readonly'); dom.box.className = 'vis-item vis-box' + className; dom.line.className = 'vis-item vis-line' + className; dom.dot.className = 'vis-item vis-dot' + className; // set initial position in the visible range of the grid so that the // rendered box size can be determinated correctly, even the content // has a dynamic width (fixes #2032). var previousRight = dom.box.style.right; var previousLeft = dom.box.style.left; if (this.options.rtl) { dom.box.style.right = "0px"; } else { dom.box.style.left = "0px"; } // recalculate size this.props.dot.height = dom.dot.offsetHeight; this.props.dot.width = dom.dot.offsetWidth; this.props.line.width = dom.line.offsetWidth; this.width = dom.box.offsetWidth; this.height = dom.box.offsetHeight; // restore previous position if (this.options.rtl) { dom.box.style.right = previousRight; } else { dom.box.style.left = previousLeft; } this.dirty = false; } this._repaintDeleteButton(dom.box); }; /** * Show the item in the DOM (when not already displayed). The items DOM will * be created when needed. */ BoxItem.prototype.show = function() { if (!this.displayed) { this.redraw(); } }; /** * 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;