FullscreenButtonViewModel.js 4.0 KB

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