vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

236 lines
6.3 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /**
  2. * @constructor ItemBox
  3. * @extends Item
  4. * @param {Object} data Object containing parameters start
  5. * content, className.
  6. * @param {{toScreen: function, toTime: function}} conversion
  7. * Conversion functions from time to screen and vice versa
  8. * @param {Object} [options] Configuration options
  9. * // TODO: describe available options
  10. */
  11. function ItemBox (data, conversion, options) {
  12. this.props = {
  13. dot: {
  14. width: 0,
  15. height: 0
  16. },
  17. line: {
  18. width: 0,
  19. height: 0
  20. }
  21. };
  22. // validate data
  23. if (data) {
  24. if (data.start == undefined) {
  25. throw new Error('Property "start" missing in item ' + data);
  26. }
  27. }
  28. Item.call(this, data, conversion, options);
  29. }
  30. ItemBox.prototype = new Item (null, null, null);
  31. /**
  32. * Check whether this item is visible inside given range
  33. * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  34. * @returns {boolean} True if visible
  35. */
  36. ItemBox.prototype.isVisible = function(range) {
  37. // determine visibility
  38. // TODO: account for the real width of the item. Right now we just add 1/4 to the window
  39. var interval = (range.end - range.start) / 4;
  40. return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
  41. };
  42. /**
  43. * Repaint the item
  44. */
  45. ItemBox.prototype.redraw = function() {
  46. var dom = this.dom;
  47. if (!dom) {
  48. // create DOM
  49. this.dom = {};
  50. dom = this.dom;
  51. // create main box
  52. dom.box = document.createElement('DIV');
  53. // contents box (inside the background box). used for making margins
  54. dom.content = document.createElement('DIV');
  55. dom.content.className = 'content';
  56. dom.box.appendChild(dom.content);
  57. // line to axis
  58. dom.line = document.createElement('DIV');
  59. dom.line.className = 'line';
  60. // dot on axis
  61. dom.dot = document.createElement('DIV');
  62. dom.dot.className = 'dot';
  63. // attach this item as attribute
  64. dom.box['timeline-item'] = this;
  65. }
  66. // append DOM to parent DOM
  67. if (!this.parent) {
  68. throw new Error('Cannot redraw item: no parent attached');
  69. }
  70. if (!dom.box.parentNode) {
  71. var foreground = this.parent.dom.foreground;
  72. if (!foreground) throw new Error('Cannot redraw time axis: parent has no foreground container element');
  73. foreground.appendChild(dom.box);
  74. }
  75. if (!dom.line.parentNode) {
  76. var background = this.parent.dom.background;
  77. if (!background) throw new Error('Cannot redraw time axis: parent has no background container element');
  78. background.appendChild(dom.line);
  79. }
  80. if (!dom.dot.parentNode) {
  81. var axis = this.parent.dom.axis;
  82. if (!background) throw new Error('Cannot redraw time axis: parent has no axis container element');
  83. axis.appendChild(dom.dot);
  84. }
  85. this.displayed = true;
  86. // update contents
  87. if (this.data.content != this.content) {
  88. this.content = this.data.content;
  89. if (this.content instanceof Element) {
  90. dom.content.innerHTML = '';
  91. dom.content.appendChild(this.content);
  92. }
  93. else if (this.data.content != undefined) {
  94. dom.content.innerHTML = this.content;
  95. }
  96. else {
  97. throw new Error('Property "content" missing in item ' + this.data.id);
  98. }
  99. this.dirty = true;
  100. }
  101. // update title
  102. if (this.data.title != this.title) {
  103. dom.box.title = this.data.title;
  104. this.title = this.data.title;
  105. }
  106. // update class
  107. var className = (this.data.className? ' ' + this.data.className : '') +
  108. (this.selected ? ' selected' : '');
  109. if (this.className != className) {
  110. this.className = className;
  111. dom.box.className = 'item box' + className;
  112. dom.line.className = 'item line' + className;
  113. dom.dot.className = 'item dot' + className;
  114. this.dirty = true;
  115. }
  116. // recalculate size
  117. if (this.dirty) {
  118. this.props.dot.height = dom.dot.offsetHeight;
  119. this.props.dot.width = dom.dot.offsetWidth;
  120. this.props.line.width = dom.line.offsetWidth;
  121. this.width = dom.box.offsetWidth;
  122. this.height = dom.box.offsetHeight;
  123. this.dirty = false;
  124. }
  125. this._repaintDeleteButton(dom.box);
  126. };
  127. /**
  128. * Show the item in the DOM (when not already displayed). The items DOM will
  129. * be created when needed.
  130. */
  131. ItemBox.prototype.show = function() {
  132. if (!this.displayed) {
  133. this.redraw();
  134. }
  135. };
  136. /**
  137. * Hide the item from the DOM (when visible)
  138. */
  139. ItemBox.prototype.hide = function() {
  140. if (this.displayed) {
  141. var dom = this.dom;
  142. if (dom.box.parentNode) dom.box.parentNode.removeChild(dom.box);
  143. if (dom.line.parentNode) dom.line.parentNode.removeChild(dom.line);
  144. if (dom.dot.parentNode) dom.dot.parentNode.removeChild(dom.dot);
  145. this.top = null;
  146. this.left = null;
  147. this.displayed = false;
  148. }
  149. };
  150. /**
  151. * Reposition the item horizontally
  152. * @Override
  153. */
  154. ItemBox.prototype.repositionX = function() {
  155. var start = this.conversion.toScreen(this.data.start),
  156. align = this.options.align,
  157. left,
  158. box = this.dom.box,
  159. line = this.dom.line,
  160. dot = this.dom.dot;
  161. // calculate left position of the box
  162. if (align == 'right') {
  163. this.left = start - this.width;
  164. }
  165. else if (align == 'left') {
  166. this.left = start;
  167. }
  168. else {
  169. // default or 'center'
  170. this.left = start - this.width / 2;
  171. }
  172. // reposition box
  173. box.style.left = this.left + 'px';
  174. // reposition line
  175. line.style.left = (start - this.props.line.width / 2) + 'px';
  176. // reposition dot
  177. dot.style.left = (start - this.props.dot.width / 2) + 'px';
  178. };
  179. /**
  180. * Reposition the item vertically
  181. * @Override
  182. */
  183. ItemBox.prototype.repositionY = function() {
  184. var orientation = this.options.orientation,
  185. box = this.dom.box,
  186. line = this.dom.line,
  187. dot = this.dom.dot;
  188. if (orientation == 'top') {
  189. box.style.top = (this.top || 0) + 'px';
  190. line.style.top = '0';
  191. line.style.height = (this.parent.top + this.top + 1) + 'px';
  192. line.style.bottom = '';
  193. }
  194. else { // orientation 'bottom'
  195. var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
  196. var lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top;
  197. box.style.top = (this.parent.height - this.top - this.height || 0) + 'px';
  198. line.style.top = (itemSetHeight - lineHeight) + 'px';
  199. line.style.bottom = '0';
  200. }
  201. dot.style.top = (-this.props.dot.height / 2) + 'px';
  202. };