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.

156 lines
4.0 KiB

  1. var keycharm = require('keycharm');
  2. var Emitter = require('emitter-component');
  3. var Hammer = require('../module/hammer');
  4. var util = require('../util');
  5. /**
  6. * Turn an element into an clickToUse element.
  7. * When not active, the element has a transparent overlay. When the overlay is
  8. * clicked, the mode is changed to active.
  9. * When active, the element is displayed with a blue border around it, and
  10. * the interactive contents of the element can be used. When clicked outside
  11. * the element, the elements mode is changed to inactive.
  12. * @param {Element} container
  13. * @constructor
  14. */
  15. function Activator(container) {
  16. this.active = false;
  17. this.dom = {
  18. container: container
  19. };
  20. this.dom.overlay = document.createElement('div');
  21. this.dom.overlay.className = 'vis-overlay';
  22. this.dom.container.appendChild(this.dom.overlay);
  23. this.hammer = Hammer(this.dom.overlay);
  24. this.hammer.on('tap', this._onTapOverlay.bind(this));
  25. // block all touch events (except tap)
  26. var me = this;
  27. var events = [
  28. 'tap', 'doubletap', 'press',
  29. 'pinch',
  30. 'pan', 'panstart', 'panmove', 'panend'
  31. ];
  32. events.forEach(function (event) {
  33. me.hammer.on(event, function (event) {
  34. event.stopPropagation();
  35. });
  36. });
  37. // attach a click event to the window, in order to deactivate when clicking outside the timeline
  38. if (document && document.body) {
  39. this.onClick = function (event) {
  40. if (!_hasParent(event.target, container)) {
  41. me.deactivate();
  42. }
  43. };
  44. document.body.addEventListener('click', this.onClick);
  45. }
  46. if (this.keycharm !== undefined) {
  47. this.keycharm.destroy();
  48. }
  49. this.keycharm = keycharm();
  50. // keycharm listener only bounded when active)
  51. this.escListener = this.deactivate.bind(this);
  52. }
  53. // turn into an event emitter
  54. Emitter(Activator.prototype);
  55. // The currently active activator
  56. Activator.current = null;
  57. /**
  58. * Destroy the activator. Cleans up all created DOM and event listeners
  59. */
  60. Activator.prototype.destroy = function () {
  61. this.deactivate();
  62. // remove dom
  63. this.dom.overlay.parentNode.removeChild(this.dom.overlay);
  64. // remove global event listener
  65. if (this.onClick) {
  66. document.body.removeEventListener('click', this.onClick);
  67. }
  68. // cleanup hammer instances
  69. this.hammer.destroy();
  70. this.hammer = null;
  71. // FIXME: cleaning up hammer instances doesn't work (Timeline not removed from memory)
  72. };
  73. /**
  74. * Activate the element
  75. * Overlay is hidden, element is decorated with a blue shadow border
  76. */
  77. Activator.prototype.activate = function () {
  78. // we allow only one active activator at a time
  79. if (Activator.current) {
  80. Activator.current.deactivate();
  81. }
  82. Activator.current = this;
  83. this.active = true;
  84. this.dom.overlay.style.display = 'none';
  85. util.addClassName(this.dom.container, 'vis-active');
  86. this.emit('change');
  87. this.emit('activate');
  88. // ugly hack: bind ESC after emitting the events, as the Network rebinds all
  89. // keyboard events on a 'change' event
  90. this.keycharm.bind('esc', this.escListener);
  91. };
  92. /**
  93. * Deactivate the element
  94. * Overlay is displayed on top of the element
  95. */
  96. Activator.prototype.deactivate = function () {
  97. this.active = false;
  98. this.dom.overlay.style.display = '';
  99. util.removeClassName(this.dom.container, 'vis-active');
  100. this.keycharm.unbind('esc', this.escListener);
  101. this.emit('change');
  102. this.emit('deactivate');
  103. };
  104. /**
  105. * Handle a tap event: activate the container
  106. * @param event
  107. * @private
  108. */
  109. Activator.prototype._onTapOverlay = function (event) {
  110. // activate the container
  111. this.activate();
  112. event.stopPropagation();
  113. };
  114. /**
  115. * Test whether the element has the requested parent element somewhere in
  116. * its chain of parent nodes.
  117. * @param {HTMLElement} element
  118. * @param {HTMLElement} parent
  119. * @returns {boolean} Returns true when the parent is found somewhere in the
  120. * chain of parent nodes.
  121. * @private
  122. */
  123. function _hasParent(element, parent) {
  124. while (element) {
  125. if (element === parent) {
  126. return true
  127. }
  128. element = element.parentNode;
  129. }
  130. return false;
  131. }
  132. module.exports = Activator;