智慧水务管理系统 - 精河县供水工程综合管理平台

FullscreenButtonViewModel.js 3.8KB

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