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.

259 lines
6.2 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. this.data = data;
  51. this.dirty = true;
  52. if (this.displayed) this.redraw();
  53. };
  54. /**
  55. * Set a parent for the item
  56. * @param {ItemSet | Group} parent
  57. */
  58. Item.prototype.setParent = function(parent) {
  59. if (this.displayed) {
  60. this.hide();
  61. this.parent = parent;
  62. if (this.parent) {
  63. this.show();
  64. }
  65. }
  66. else {
  67. this.parent = parent;
  68. }
  69. };
  70. /**
  71. * Check whether this item is visible inside given range
  72. * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  73. * @returns {boolean} True if visible
  74. */
  75. Item.prototype.isVisible = function(range) {
  76. // Should be implemented by Item implementations
  77. return false;
  78. };
  79. /**
  80. * Show the Item in the DOM (when not already visible)
  81. * @return {Boolean} changed
  82. */
  83. Item.prototype.show = function() {
  84. return false;
  85. };
  86. /**
  87. * Hide the Item from the DOM (when visible)
  88. * @return {Boolean} changed
  89. */
  90. Item.prototype.hide = function() {
  91. return false;
  92. };
  93. /**
  94. * Repaint the item
  95. */
  96. Item.prototype.redraw = function() {
  97. // should be implemented by the item
  98. };
  99. /**
  100. * Reposition the Item horizontally
  101. */
  102. Item.prototype.repositionX = function() {
  103. // should be implemented by the item
  104. };
  105. /**
  106. * Reposition the Item vertically
  107. */
  108. Item.prototype.repositionY = function() {
  109. // should be implemented by the item
  110. };
  111. /**
  112. * Repaint a delete button on the top right of the item when the item is selected
  113. * @param {HTMLElement} anchor
  114. * @protected
  115. */
  116. Item.prototype._repaintDeleteButton = function (anchor) {
  117. if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
  118. // create and show button
  119. var me = this;
  120. var deleteButton = document.createElement('div');
  121. deleteButton.className = 'delete';
  122. deleteButton.title = 'Delete this item';
  123. // TODO: be able to destroy the delete button
  124. new Hammer(deleteButton).on('tap', function (event) {
  125. me.parent.removeFromDataSet(me);
  126. event.stopPropagation();
  127. event.preventDefault();
  128. });
  129. anchor.appendChild(deleteButton);
  130. this.dom.deleteButton = deleteButton;
  131. }
  132. else if (!this.selected && this.dom.deleteButton) {
  133. // remove button
  134. if (this.dom.deleteButton.parentNode) {
  135. this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
  136. }
  137. this.dom.deleteButton = null;
  138. }
  139. };
  140. /**
  141. * Set HTML contents for the item
  142. * @param {Element} element HTML element to fill with the contents
  143. * @private
  144. */
  145. Item.prototype._updateContents = function (element) {
  146. var content;
  147. if (this.options.template) {
  148. var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
  149. content = this.options.template(itemData);
  150. }
  151. else {
  152. content = this.data.content;
  153. }
  154. if(content !== this.content) {
  155. // only replace the content when changed
  156. if (content instanceof Element) {
  157. element.innerHTML = '';
  158. element.appendChild(content);
  159. }
  160. else if (content != undefined) {
  161. element.innerHTML = content;
  162. }
  163. else {
  164. if (!(this.data.type == 'background' && this.data.content === undefined)) {
  165. throw new Error('Property "content" missing in item ' + this.id);
  166. }
  167. }
  168. this.content = content;
  169. }
  170. };
  171. /**
  172. * Set HTML contents for the item
  173. * @param {Element} element HTML element to fill with the contents
  174. * @private
  175. */
  176. Item.prototype._updateTitle = function (element) {
  177. if (this.data.title != null) {
  178. element.title = this.data.title || '';
  179. }
  180. else {
  181. element.removeAttribute('title');
  182. }
  183. };
  184. /**
  185. * Process dataAttributes timeline option and set as data- attributes on dom.content
  186. * @param {Element} element HTML element to which the attributes will be attached
  187. * @private
  188. */
  189. Item.prototype._updateDataAttributes = function(element) {
  190. if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
  191. var attributes = [];
  192. if (Array.isArray(this.options.dataAttributes)) {
  193. attributes = this.options.dataAttributes;
  194. }
  195. else if (this.options.dataAttributes == 'all') {
  196. attributes = Object.keys(this.data);
  197. }
  198. else {
  199. return;
  200. }
  201. for (var i = 0; i < attributes.length; i++) {
  202. var name = attributes[i];
  203. var value = this.data[name];
  204. if (value != null) {
  205. element.setAttribute('data-' + name, value);
  206. }
  207. else {
  208. element.removeAttribute('data-' + name);
  209. }
  210. }
  211. }
  212. };
  213. /**
  214. * Update custom styles of the element
  215. * @param element
  216. * @private
  217. */
  218. Item.prototype._updateStyle = function(element) {
  219. // remove old styles
  220. if (this.style) {
  221. util.removeCssText(element, this.style);
  222. this.style = null;
  223. }
  224. // append new styles
  225. if (this.data.style) {
  226. util.addCssText(element, this.data.style);
  227. this.style = this.data.style;
  228. }
  229. };
  230. module.exports = Item;