FullscreenButtonViewModel.js 4.5 KB

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