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.

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