InfoBox.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. /*global define*/
  2. define([
  3. '../../Core/defined',
  4. '../../Core/defineProperties',
  5. '../../Core/destroyObject',
  6. '../../Core/DeveloperError',
  7. '../../ThirdParty/knockout',
  8. '../getElement',
  9. './InfoBoxViewModel'
  10. ], function(
  11. defined,
  12. defineProperties,
  13. destroyObject,
  14. DeveloperError,
  15. knockout,
  16. getElement,
  17. InfoBoxViewModel) {
  18. "use strict";
  19. /**
  20. * A widget for displaying information or a description.
  21. *
  22. * @alias InfoBox
  23. * @constructor
  24. *
  25. * @param {Element|String} container The DOM element or ID that will contain the widget.
  26. *
  27. * @exception {DeveloperError} Element with id "container" does not exist in the document.
  28. */
  29. var InfoBox = function(container) {
  30. //>>includeStart('debug', pragmas.debug);
  31. if (!defined(container)) {
  32. throw new DeveloperError('container is required.');
  33. }
  34. //>>includeEnd('debug')
  35. container = getElement(container);
  36. this._container = container;
  37. var infoElement = document.createElement('div');
  38. infoElement.className = 'cesium-infoBox';
  39. infoElement.setAttribute('data-bind', '\
  40. css: { "cesium-infoBox-visible" : showInfo, "cesium-infoBox-bodyless" : _bodyless }');
  41. container.appendChild(infoElement);
  42. this._element = infoElement;
  43. var titleElement = document.createElement('div');
  44. titleElement.className = 'cesium-infoBox-title';
  45. titleElement.setAttribute('data-bind', 'text: titleText');
  46. infoElement.appendChild(titleElement);
  47. var cameraElement = document.createElement('button');
  48. cameraElement.type = 'button';
  49. cameraElement.className = 'cesium-button cesium-infoBox-camera';
  50. cameraElement.setAttribute('data-bind', '\
  51. attr: { title: "Focus camera on object" },\
  52. click: function () { cameraClicked.raiseEvent(); },\
  53. enable: enableCamera,\
  54. cesiumSvgPath: { path: cameraIconPath, width: 32, height: 32 }');
  55. infoElement.appendChild(cameraElement);
  56. var closeElement = document.createElement('button');
  57. closeElement.type = 'button';
  58. closeElement.className = 'cesium-infoBox-close';
  59. closeElement.setAttribute('data-bind', '\
  60. click: function () { closeClicked.raiseEvent(); }');
  61. closeElement.innerHTML = '×';
  62. infoElement.appendChild(closeElement);
  63. var infoBodyElement = document.createElement('div');
  64. infoBodyElement.className = 'cesium-infoBox-body';
  65. infoElement.appendChild(infoBodyElement);
  66. var descriptionElement = document.createElement('div');
  67. descriptionElement.className = 'cesium-infoBox-description';
  68. descriptionElement.setAttribute('data-bind', '\
  69. html: descriptionSanitizedHtml,\
  70. style : { maxHeight : maxHeightOffset(40) }');
  71. infoBodyElement.appendChild(descriptionElement);
  72. var viewModel = new InfoBoxViewModel();
  73. this._viewModel = viewModel;
  74. knockout.applyBindings(this._viewModel, infoElement);
  75. };
  76. defineProperties(InfoBox.prototype, {
  77. /**
  78. * Gets the parent container.
  79. * @memberof InfoBox.prototype
  80. *
  81. * @type {Element}
  82. */
  83. container : {
  84. get : function() {
  85. return this._container;
  86. }
  87. },
  88. /**
  89. * Gets the view model.
  90. * @memberof InfoBox.prototype
  91. *
  92. * @type {SelectionIndicatorViewModel}
  93. */
  94. viewModel : {
  95. get : function() {
  96. return this._viewModel;
  97. }
  98. }
  99. });
  100. /**
  101. * @returns {Boolean} true if the object has been destroyed, false otherwise.
  102. */
  103. InfoBox.prototype.isDestroyed = function() {
  104. return false;
  105. };
  106. /**
  107. * Destroys the widget. Should be called if permanently
  108. * removing the widget from layout.
  109. */
  110. InfoBox.prototype.destroy = function() {
  111. var container = this._container;
  112. knockout.cleanNode(this._element);
  113. container.removeChild(this._element);
  114. return destroyObject(this);
  115. };
  116. return InfoBox;
  117. });