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.

292 lines
7.0 KiB

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 util = require('../../../util');
  3. /**
  4. * @constructor Item
  5. * @param {Object} data Object containing (optional) parameters type,
  6. * start, end, content, group, className.
  7. * @param {{toScreen: function, toTime: function}} conversion
  8. * Conversion functions from time to screen and vice versa
  9. * @param {Object} options Configuration options
  10. * // TODO: describe available options
  11. */
  12. function Item (data, conversion, options) {
  13. this.id = null;
  14. this.parent = null;
  15. this.data = data;
  16. this.dom = null;
  17. this.conversion = conversion || {};
  18. this.options = options || {};
  19. this.selected = false;
  20. this.displayed = false;
  21. this.dirty = true;
  22. this.top = null;
  23. this.left = null;
  24. this.width = null;
  25. this.height = null;
  26. }
  27. Item.prototype.stack = true;
  28. /**
  29. * Select current item
  30. */
  31. Item.prototype.select = function() {
  32. this.selected = true;
  33. this.dirty = true;
  34. if (this.displayed) this.redraw();
  35. };
  36. /**
  37. * Unselect current item
  38. */
  39. Item.prototype.unselect = function() {
  40. this.selected = false;
  41. this.dirty = true;
  42. if (this.displayed) this.redraw();
  43. };
  44. /**
  45. * Set data for the item. Existing data will be updated. The id should not
  46. * be changed. When the item is displayed, it will be redrawn immediately.
  47. * @param {Object} data
  48. */
  49. Item.prototype.setData = function(data) {
  50. var groupChanged = data.group != undefined && this.data.group != data.group;
  51. if (groupChanged) {
  52. this.parent.itemSet._moveToGroup(this, data.group);
  53. }
  54. this.data = data;
  55. this.dirty = true;
  56. if (this.displayed) this.redraw();
  57. };
  58. /**
  59. * Set a parent for the item
  60. * @param {ItemSet | Group} parent
  61. */
  62. Item.prototype.setParent = function(parent) {
  63. if (this.displayed) {
  64. this.hide();
  65. this.parent = parent;
  66. if (this.parent) {
  67. this.show();
  68. }
  69. }
  70. else {
  71. this.parent = parent;
  72. }
  73. };
  74. /**
  75. * Check whether this item is visible inside given range
  76. * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  77. * @returns {boolean} True if visible
  78. */
  79. Item.prototype.isVisible = function(range) {
  80. // Should be implemented by Item implementations
  81. return false;
  82. };
  83. /**
  84. * Show the Item in the DOM (when not already visible)
  85. * @return {Boolean} changed
  86. */
  87. Item.prototype.show = function() {
  88. return false;
  89. };
  90. /**
  91. * Hide the Item from the DOM (when visible)
  92. * @return {Boolean} changed
  93. */
  94. Item.prototype.hide = function() {
  95. return false;
  96. };
  97. /**
  98. * Repaint the item
  99. */
  100. Item.prototype.redraw = function() {
  101. // should be implemented by the item
  102. };
  103. /**
  104. * Reposition the Item horizontally
  105. */
  106. Item.prototype.repositionX = function() {
  107. // should be implemented by the item
  108. };
  109. /**
  110. * Reposition the Item vertically
  111. */
  112. Item.prototype.repositionY = function() {
  113. // should be implemented by the item
  114. };
  115. /**
  116. * Repaint a delete button on the top right of the item when the item is selected
  117. * @param {HTMLElement} anchor
  118. * @protected
  119. */
  120. Item.prototype._repaintDeleteButton = function (anchor) {
  121. if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
  122. // create and show button
  123. var me = this;
  124. var deleteButton = document.createElement('div');
  125. deleteButton.className = 'vis-delete';
  126. deleteButton.title = 'Delete this item';
  127. // TODO: be able to destroy the delete button
  128. new Hammer(deleteButton).on('tap', function (event) {
  129. event.stopPropagation();
  130. me.parent.removeFromDataSet(me);
  131. });
  132. anchor.appendChild(deleteButton);
  133. this.dom.deleteButton = deleteButton;
  134. }
  135. else if (!this.selected && this.dom.deleteButton) {
  136. // remove button
  137. if (this.dom.deleteButton.parentNode) {
  138. this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
  139. }
  140. this.dom.deleteButton = null;
  141. }
  142. };
  143. /**
  144. * Set HTML contents for the item
  145. * @param {Element} element HTML element to fill with the contents
  146. * @private
  147. */
  148. Item.prototype._updateContents = function (element) {
  149. var content;
  150. if (this.options.template) {
  151. var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
  152. content = this.options.template(itemData);
  153. }
  154. else {
  155. content = this.data.content;
  156. }
  157. var changed = this._contentToString(this.content) !== this._contentToString(content);
  158. if (changed) {
  159. // only replace the content when changed
  160. if (content instanceof Element) {
  161. element.innerHTML = '';
  162. element.appendChild(content);
  163. }
  164. else if (content != undefined) {
  165. element.innerHTML = content;
  166. }
  167. else {
  168. if (!(this.data.type == 'background' && this.data.content === undefined)) {
  169. throw new Error('Property "content" missing in item ' + this.id);
  170. }
  171. }
  172. this.content = content;
  173. }
  174. };
  175. /**
  176. * Set HTML contents for the item
  177. * @param {Element} element HTML element to fill with the contents
  178. * @private
  179. */
  180. Item.prototype._updateTitle = function (element) {
  181. if (this.data.title != null) {
  182. element.title = this.data.title || '';
  183. }
  184. else {
  185. element.removeAttribute('vis-title');
  186. }
  187. };
  188. /**
  189. * Process dataAttributes timeline option and set as data- attributes on dom.content
  190. * @param {Element} element HTML element to which the attributes will be attached
  191. * @private
  192. */
  193. Item.prototype._updateDataAttributes = function(element) {
  194. if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
  195. var attributes = [];
  196. if (Array.isArray(this.options.dataAttributes)) {
  197. attributes = this.options.dataAttributes;
  198. }
  199. else if (this.options.dataAttributes == 'all') {
  200. attributes = Object.keys(this.data);
  201. }
  202. else {
  203. return;
  204. }
  205. for (var i = 0; i < attributes.length; i++) {
  206. var name = attributes[i];
  207. var value = this.data[name];
  208. if (value != null) {
  209. element.setAttribute('data-' + name, value);
  210. }
  211. else {
  212. element.removeAttribute('data-' + name);
  213. }
  214. }
  215. }
  216. };
  217. /**
  218. * Update custom styles of the element
  219. * @param element
  220. * @private
  221. */
  222. Item.prototype._updateStyle = function(element) {
  223. // remove old styles
  224. if (this.style) {
  225. util.removeCssText(element, this.style);
  226. this.style = null;
  227. }
  228. // append new styles
  229. if (this.data.style) {
  230. util.addCssText(element, this.data.style);
  231. this.style = this.data.style;
  232. }
  233. };
  234. /**
  235. * Stringify the items contents
  236. * @param {string | Element | undefined} content
  237. * @returns {string | undefined}
  238. * @private
  239. */
  240. Item.prototype._contentToString = function (content) {
  241. if (typeof content === 'string') return content;
  242. if (content && 'outerHTML' in content) return content.outerHTML;
  243. return content;
  244. };
  245. /**
  246. * Return the width of the item left from its start date
  247. * @return {number}
  248. */
  249. Item.prototype.getWidthLeft = function () {
  250. return 0;
  251. };
  252. /**
  253. * Return the width of the item right from the max of its start and end date
  254. * @return {number}
  255. */
  256. Item.prototype.getWidthRight = function () {
  257. return 0;
  258. };
  259. module.exports = Item;