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.

98 lines
2.3 KiB

  1. /**
  2. * Popup is a class to create a popup window with some text
  3. * @param {Element} container The container object.
  4. * @param {Number} [x]
  5. * @param {Number} [y]
  6. * @param {String} [text]
  7. * @param {Object} [style] An object containing borderColor,
  8. * backgroundColor, etc.
  9. */
  10. class Popup {
  11. constructor(container) {
  12. this.container = container;
  13. this.x = 0;
  14. this.y = 0;
  15. this.padding = 5;
  16. this.hidden = false;
  17. // create the frame
  18. this.frame = document.createElement('div');
  19. this.frame.className = 'vis-tooltip';
  20. this.container.appendChild(this.frame);
  21. }
  22. /**
  23. * @param {number} x Horizontal position of the popup window
  24. * @param {number} y Vertical position of the popup window
  25. */
  26. setPosition(x, y) {
  27. this.x = parseInt(x);
  28. this.y = parseInt(y);
  29. }
  30. /**
  31. * Set the content for the popup window. This can be HTML code or text.
  32. * @param {string | Element} content
  33. */
  34. setText(content) {
  35. if (content instanceof Element) {
  36. this.frame.innerHTML = '';
  37. this.frame.appendChild(content);
  38. }
  39. else {
  40. this.frame.innerHTML = content; // string containing text or HTML
  41. }
  42. }
  43. /**
  44. * Show the popup window
  45. * @param {boolean} [doShow] Show or hide the window
  46. */
  47. show(doShow) {
  48. if (doShow === undefined) {
  49. doShow = true;
  50. }
  51. if (doShow === true) {
  52. var height = this.frame.clientHeight;
  53. var width = this.frame.clientWidth;
  54. var maxHeight = this.frame.parentNode.clientHeight;
  55. var maxWidth = this.frame.parentNode.clientWidth;
  56. var top = (this.y - height);
  57. if (top + height + this.padding > maxHeight) {
  58. top = maxHeight - height - this.padding;
  59. }
  60. if (top < this.padding) {
  61. top = this.padding;
  62. }
  63. var left = this.x;
  64. if (left + width + this.padding > maxWidth) {
  65. left = maxWidth - width - this.padding;
  66. }
  67. if (left < this.padding) {
  68. left = this.padding;
  69. }
  70. this.frame.style.left = left + "px";
  71. this.frame.style.top = top + "px";
  72. this.frame.style.visibility = "visible";
  73. this.hidden = false;
  74. }
  75. else {
  76. this.hide();
  77. }
  78. }
  79. /**
  80. * Hide the popup window
  81. */
  82. hide() {
  83. this.hidden = true;
  84. this.frame.style.visibility = "hidden";
  85. }
  86. }
  87. export default Popup;