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.

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