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.

336 lines
9.9 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
  1. var Hammer = require('../../../module/hammer');
  2. var Item = require('./Item');
  3. /**
  4. * @constructor RangeItem
  5. * @extends Item
  6. * @param {Object} data Object containing parameters start, end
  7. * content, className.
  8. * @param {{toScreen: function, toTime: function}} conversion
  9. * Conversion functions from time to screen and vice versa
  10. * @param {Object} [options] Configuration options
  11. * // TODO: describe options
  12. */
  13. function RangeItem (data, conversion, options) {
  14. this.props = {
  15. content: {
  16. width: 0
  17. }
  18. };
  19. this.overflow = false; // if contents can overflow (css styling), this flag is set to true
  20. this.options = options;
  21. // validate data
  22. if (data) {
  23. if (data.start == undefined) {
  24. throw new Error('Property "start" missing in item ' + data.id);
  25. }
  26. if (data.end == undefined) {
  27. throw new Error('Property "end" missing in item ' + data.id);
  28. }
  29. }
  30. Item.call(this, data, conversion, options);
  31. }
  32. RangeItem.prototype = new Item (null, null, null);
  33. RangeItem.prototype.baseClassName = 'vis-item vis-range';
  34. /**
  35. * Check whether this item is visible inside given range
  36. * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  37. * @returns {boolean} True if visible
  38. */
  39. RangeItem.prototype.isVisible = function(range) {
  40. // determine visibility
  41. return (this.data.start < range.end) && (this.data.end > range.start);
  42. };
  43. /**
  44. * Repaint the item
  45. */
  46. RangeItem.prototype.redraw = function() {
  47. var dom = this.dom;
  48. if (!dom) {
  49. // create DOM
  50. this.dom = {};
  51. dom = this.dom;
  52. // background box
  53. dom.box = document.createElement('div');
  54. // className is updated in redraw()
  55. // frame box (to prevent the item contents from overflowing)
  56. dom.frame = document.createElement('div');
  57. dom.frame.className = 'vis-item-overflow';
  58. dom.box.appendChild(dom.frame);
  59. // visible frame box (showing the frame that is always visible)
  60. dom.visibleFrame = document.createElement('div');
  61. dom.visibleFrame.className = 'vis-item-visible-frame';
  62. dom.box.appendChild(dom.visibleFrame);
  63. // contents box
  64. dom.content = document.createElement('div');
  65. dom.content.className = 'vis-item-content';
  66. dom.frame.appendChild(dom.content);
  67. // attach this item as attribute
  68. dom.box['timeline-item'] = this;
  69. this.dirty = true;
  70. }
  71. // append DOM to parent DOM
  72. if (!this.parent) {
  73. throw new Error('Cannot redraw item: no parent attached');
  74. }
  75. if (!dom.box.parentNode) {
  76. var foreground = this.parent.dom.foreground;
  77. if (!foreground) {
  78. throw new Error('Cannot redraw item: parent has no foreground container element');
  79. }
  80. foreground.appendChild(dom.box);
  81. }
  82. this.displayed = true;
  83. // Update DOM when item is marked dirty. An item is marked dirty when:
  84. // - the item is not yet rendered
  85. // - the item's data is changed
  86. // - the item is selected/deselected
  87. if (this.dirty) {
  88. this._updateContents(this.dom.content);
  89. this._updateDataAttributes(this.dom.box);
  90. this._updateStyle(this.dom.box);
  91. var editable = (this.editable.updateTime || this.editable.updateGroup);
  92. // update class
  93. var className = (this.data.className ? (' ' + this.data.className) : '') +
  94. (this.selected ? ' vis-selected' : '') +
  95. (editable ? ' vis-editable' : ' vis-readonly');
  96. dom.box.className = this.baseClassName + className;
  97. // determine from css whether this box has overflow
  98. this.overflow = window.getComputedStyle(dom.frame).overflow !== 'hidden';
  99. // recalculate size
  100. // turn off max-width to be able to calculate the real width
  101. // this causes an extra browser repaint/reflow, but so be it
  102. this.dom.content.style.maxWidth = 'none';
  103. this.props.content.width = this.dom.content.offsetWidth;
  104. this.height = this.dom.box.offsetHeight;
  105. this.dom.content.style.maxWidth = '';
  106. this.dirty = false;
  107. }
  108. this._repaintOnItemUpdateTimeTooltip(dom.box);
  109. this._repaintDeleteButton(dom.box);
  110. this._repaintDragCenter();
  111. this._repaintDragLeft();
  112. this._repaintDragRight();
  113. };
  114. /**
  115. * Show the item in the DOM (when not already visible). The items DOM will
  116. * be created when needed.
  117. */
  118. RangeItem.prototype.show = function() {
  119. if (!this.displayed) {
  120. this.redraw();
  121. }
  122. };
  123. /**
  124. * Hide the item from the DOM (when visible)
  125. * @return {Boolean} changed
  126. */
  127. RangeItem.prototype.hide = function() {
  128. if (this.displayed) {
  129. var box = this.dom.box;
  130. if (box.parentNode) {
  131. box.parentNode.removeChild(box);
  132. }
  133. this.displayed = false;
  134. }
  135. };
  136. /**
  137. * Reposition the item horizontally
  138. * @param {boolean} [limitSize=true] If true (default), the width of the range
  139. * item will be limited, as the browser cannot
  140. * display very wide divs. This means though
  141. * that the applied left and width may
  142. * not correspond to the ranges start and end
  143. * @Override
  144. */
  145. RangeItem.prototype.repositionX = function(limitSize) {
  146. var parentWidth = this.parent.width;
  147. var start = this.conversion.toScreen(this.data.start);
  148. var end = this.conversion.toScreen(this.data.end);
  149. var align = this.data.align === undefined ? this.options.align : this.data.align;
  150. var contentStartPosition;
  151. var contentWidth;
  152. // limit the width of the range, as browsers cannot draw very wide divs
  153. if (limitSize === undefined || limitSize === true) {
  154. if (start < -parentWidth) {
  155. start = -parentWidth;
  156. }
  157. if (end > 2 * parentWidth) {
  158. end = 2 * parentWidth;
  159. }
  160. }
  161. // add 0.5 to compensate floating-point values rounding
  162. var boxWidth = Math.max(end - start + 0.5, 1);
  163. if (this.overflow) {
  164. if (this.options.rtl) {
  165. this.right = start;
  166. } else {
  167. this.left = start;
  168. }
  169. this.width = boxWidth + this.props.content.width;
  170. contentWidth = this.props.content.width;
  171. // Note: The calculation of width is an optimistic calculation, giving
  172. // a width which will not change when moving the Timeline
  173. // So no re-stacking needed, which is nicer for the eye;
  174. }
  175. else {
  176. if (this.options.rtl) {
  177. this.right = start;
  178. } else {
  179. this.left = start;
  180. }
  181. this.width = boxWidth;
  182. contentWidth = Math.min(end - start, this.props.content.width);
  183. }
  184. if (this.options.rtl) {
  185. this.dom.box.style.right = this.right + 'px';
  186. } else {
  187. this.dom.box.style.left = this.left + 'px';
  188. }
  189. this.dom.box.style.width = boxWidth + 'px';
  190. switch (align) {
  191. case 'left':
  192. if (this.options.rtl) {
  193. this.dom.content.style.right = '0';
  194. } else {
  195. this.dom.content.style.left = '0';
  196. }
  197. break;
  198. case 'right':
  199. if (this.options.rtl) {
  200. this.dom.content.style.right = Math.max((boxWidth - contentWidth), 0) + 'px';
  201. } else {
  202. this.dom.content.style.left = Math.max((boxWidth - contentWidth), 0) + 'px';
  203. }
  204. break;
  205. case 'center':
  206. if (this.options.rtl) {
  207. this.dom.content.style.right = Math.max((boxWidth - contentWidth) / 2, 0) + 'px';
  208. } else {
  209. this.dom.content.style.left = Math.max((boxWidth - contentWidth) / 2, 0) + 'px';
  210. }
  211. break;
  212. default: // 'auto'
  213. // when range exceeds left of the window, position the contents at the left of the visible area
  214. if (this.overflow) {
  215. if (end > 0) {
  216. contentStartPosition = Math.max(-start, 0);
  217. }
  218. else {
  219. contentStartPosition = -contentWidth; // ensure it's not visible anymore
  220. }
  221. }
  222. else {
  223. if (start < 0) {
  224. contentStartPosition = -start;
  225. }
  226. else {
  227. contentStartPosition = 0;
  228. }
  229. }
  230. if (this.options.rtl) {
  231. this.dom.content.style.right = contentStartPosition + 'px';
  232. } else {
  233. this.dom.content.style.left = contentStartPosition + 'px';
  234. this.dom.content.style.width = 'calc(100% - ' + contentStartPosition + 'px)';
  235. }
  236. }
  237. };
  238. /**
  239. * Reposition the item vertically
  240. * @Override
  241. */
  242. RangeItem.prototype.repositionY = function() {
  243. var orientation = this.options.orientation.item;
  244. var box = this.dom.box;
  245. if (orientation == 'top') {
  246. box.style.top = this.top + 'px';
  247. }
  248. else {
  249. box.style.top = (this.parent.height - this.top - this.height) + 'px';
  250. }
  251. };
  252. /**
  253. * Repaint a drag area on the left side of the range when the range is selected
  254. * @protected
  255. */
  256. RangeItem.prototype._repaintDragLeft = function () {
  257. if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.options.editable.updateTime && !this.dom.dragLeft) {
  258. // create and show drag area
  259. var dragLeft = document.createElement('div');
  260. dragLeft.className = 'vis-drag-left';
  261. dragLeft.dragLeftItem = this;
  262. this.dom.box.appendChild(dragLeft);
  263. this.dom.dragLeft = dragLeft;
  264. }
  265. else if (!this.selected && !this.options.itemsAlwaysDraggable.range && this.dom.dragLeft) {
  266. // delete drag area
  267. if (this.dom.dragLeft.parentNode) {
  268. this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
  269. }
  270. this.dom.dragLeft = null;
  271. }
  272. };
  273. /**
  274. * Repaint a drag area on the right side of the range when the range is selected
  275. * @protected
  276. */
  277. RangeItem.prototype._repaintDragRight = function () {
  278. if ((this.selected || this.options.itemsAlwaysDraggable.range) && this.options.editable.updateTime && !this.dom.dragRight) {
  279. // create and show drag area
  280. var dragRight = document.createElement('div');
  281. dragRight.className = 'vis-drag-right';
  282. dragRight.dragRightItem = this;
  283. this.dom.box.appendChild(dragRight);
  284. this.dom.dragRight = dragRight;
  285. }
  286. else if (!this.selected && !this.options.itemsAlwaysDraggable.range && this.dom.dragRight) {
  287. // delete drag area
  288. if (this.dom.dragRight.parentNode) {
  289. this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);
  290. }
  291. this.dom.dragRight = null;
  292. }
  293. };
  294. module.exports = RangeItem;