FullscreenButtonViewModel.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import {
  2. defaultValue,
  3. defined,
  4. destroyObject,
  5. DeveloperError,
  6. Fullscreen,
  7. getElement,
  8. } from "@cesium/engine";
  9. import knockout from "../ThirdParty/knockout.js";
  10. import createCommand from "../createCommand.js";
  11. /**
  12. * The view model for {@link FullscreenButton}.
  13. * @alias FullscreenButtonViewModel
  14. * @constructor
  15. *
  16. * @param {Element|string} [fullscreenElement=document.body] The element or id to be placed into fullscreen mode.
  17. * @param {Element|string} [container] The DOM element or ID that will contain the widget.
  18. */
  19. function FullscreenButtonViewModel(fullscreenElement, container) {
  20. if (!defined(container)) {
  21. container = document.body;
  22. }
  23. container = getElement(container);
  24. const that = this;
  25. const tmpIsFullscreen = knockout.observable(Fullscreen.fullscreen);
  26. const tmpIsEnabled = knockout.observable(Fullscreen.enabled);
  27. const ownerDocument = container.ownerDocument;
  28. /**
  29. * Gets whether or not fullscreen mode is active. This property is observable.
  30. *
  31. * @type {boolean}
  32. */
  33. this.isFullscreen = undefined;
  34. knockout.defineProperty(this, "isFullscreen", {
  35. get: function () {
  36. return tmpIsFullscreen();
  37. },
  38. });
  39. /**
  40. * Gets or sets whether or not fullscreen functionality should be enabled. This property is observable.
  41. *
  42. * @type {boolean}
  43. * @see Fullscreen.enabled
  44. */
  45. this.isFullscreenEnabled = undefined;
  46. knockout.defineProperty(this, "isFullscreenEnabled", {
  47. get: function () {
  48. return tmpIsEnabled();
  49. },
  50. set: function (value) {
  51. tmpIsEnabled(value && Fullscreen.enabled);
  52. },
  53. });
  54. /**
  55. * Gets the tooltip. This property is observable.
  56. *
  57. * @type {string}
  58. */
  59. this.tooltip = undefined;
  60. knockout.defineProperty(this, "tooltip", function () {
  61. if (!this.isFullscreenEnabled) {
  62. return "Full screen unavailable";
  63. }
  64. return tmpIsFullscreen() ? "Exit full screen" : "Full screen";
  65. });
  66. this._command = createCommand(function () {
  67. if (Fullscreen.fullscreen) {
  68. Fullscreen.exitFullscreen();
  69. } else {
  70. Fullscreen.requestFullscreen(that._fullscreenElement);
  71. }
  72. }, knockout.getObservable(this, "isFullscreenEnabled"));
  73. this._fullscreenElement = defaultValue(
  74. getElement(fullscreenElement),
  75. ownerDocument.body
  76. );
  77. this._callback = function () {
  78. tmpIsFullscreen(Fullscreen.fullscreen);
  79. };
  80. ownerDocument.addEventListener(Fullscreen.changeEventName, this._callback);
  81. }
  82. Object.defineProperties(FullscreenButtonViewModel.prototype, {
  83. /**
  84. * Gets or sets the HTML element to place into fullscreen mode when the
  85. * corresponding button is pressed.
  86. * @memberof FullscreenButtonViewModel.prototype
  87. *
  88. * @type {Element}
  89. */
  90. fullscreenElement: {
  91. //TODO:@exception {DeveloperError} value must be a valid HTML Element.
  92. get: function () {
  93. return this._fullscreenElement;
  94. },
  95. set: function (value) {
  96. //>>includeStart('debug', pragmas.debug);
  97. if (!(value instanceof Element)) {
  98. throw new DeveloperError("value must be a valid Element.");
  99. }
  100. //>>includeEnd('debug');
  101. this._fullscreenElement = value;
  102. },
  103. },
  104. /**
  105. * Gets the Command to toggle fullscreen mode.
  106. * @memberof FullscreenButtonViewModel.prototype
  107. *
  108. * @type {Command}
  109. */
  110. command: {
  111. get: function () {
  112. return this._command;
  113. },
  114. },
  115. });
  116. /**
  117. * @returns {boolean} true if the object has been destroyed, false otherwise.
  118. */
  119. FullscreenButtonViewModel.prototype.isDestroyed = function () {
  120. return false;
  121. };
  122. /**
  123. * Destroys the view model. Should be called to
  124. * properly clean up the view model when it is no longer needed.
  125. */
  126. FullscreenButtonViewModel.prototype.destroy = function () {
  127. document.removeEventListener(Fullscreen.changeEventName, this._callback);
  128. destroyObject(this);
  129. };
  130. export default FullscreenButtonViewModel;