FullScreen.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. /* *
  2. * (c) 2009-2020 Rafal Sebestjanski
  3. *
  4. * Full screen for Highcharts
  5. *
  6. * License: www.highcharts.com/license
  7. */
  8. 'use strict';
  9. import Chart from '../Core/Chart/Chart.js';
  10. import H from '../Core/Globals.js';
  11. import U from '../Core/Utilities.js';
  12. var addEvent = U.addEvent;
  13. /**
  14. * The module allows user to enable display chart in full screen mode.
  15. * Used in StockTools too.
  16. * Based on default solutions in browsers.
  17. *
  18. */
  19. /* eslint-disable no-invalid-this, valid-jsdoc */
  20. /**
  21. * Handles displaying chart's container in the fullscreen mode.
  22. *
  23. * **Note**: Fullscreen is not supported on iPhone due to iOS limitations.
  24. *
  25. * @class
  26. * @name Highcharts.Fullscreen
  27. * @hideconstructor
  28. * @requires modules/full-screen
  29. */
  30. var Fullscreen = /** @class */ (function () {
  31. /* *
  32. *
  33. * Constructors
  34. *
  35. * */
  36. function Fullscreen(chart) {
  37. /**
  38. * Chart managed by the fullscreen controller.
  39. * @name Highcharts.Fullscreen#chart
  40. * @type {Highcharts.Chart}
  41. */
  42. this.chart = chart;
  43. /**
  44. * The flag is set to `true` when the chart is displayed in
  45. * the fullscreen mode.
  46. *
  47. * @name Highcharts.Fullscreen#isOpen
  48. * @type {boolean|undefined}
  49. * @since 8.0.1
  50. */
  51. this.isOpen = false;
  52. var container = chart.renderTo;
  53. // Hold event and methods available only for a current browser.
  54. if (!this.browserProps) {
  55. if (typeof container.requestFullscreen === 'function') {
  56. this.browserProps = {
  57. fullscreenChange: 'fullscreenchange',
  58. requestFullscreen: 'requestFullscreen',
  59. exitFullscreen: 'exitFullscreen'
  60. };
  61. }
  62. else if (container.mozRequestFullScreen) {
  63. this.browserProps = {
  64. fullscreenChange: 'mozfullscreenchange',
  65. requestFullscreen: 'mozRequestFullScreen',
  66. exitFullscreen: 'mozCancelFullScreen'
  67. };
  68. }
  69. else if (container.webkitRequestFullScreen) {
  70. this.browserProps = {
  71. fullscreenChange: 'webkitfullscreenchange',
  72. requestFullscreen: 'webkitRequestFullScreen',
  73. exitFullscreen: 'webkitExitFullscreen'
  74. };
  75. }
  76. else if (container.msRequestFullscreen) {
  77. this.browserProps = {
  78. fullscreenChange: 'MSFullscreenChange',
  79. requestFullscreen: 'msRequestFullscreen',
  80. exitFullscreen: 'msExitFullscreen'
  81. };
  82. }
  83. }
  84. }
  85. /* *
  86. *
  87. * Functions
  88. *
  89. * */
  90. /**
  91. * Stops displaying the chart in fullscreen mode.
  92. * Exporting module required.
  93. *
  94. * @since 8.0.1
  95. *
  96. * @function Highcharts.Fullscreen#close
  97. * @return {void}
  98. * @requires modules/full-screen
  99. */
  100. Fullscreen.prototype.close = function () {
  101. var fullscreen = this, chart = fullscreen.chart;
  102. // Don't fire exitFullscreen() when user exited using 'Escape' button.
  103. if (fullscreen.isOpen &&
  104. fullscreen.browserProps &&
  105. chart.container.ownerDocument instanceof Document) {
  106. chart.container.ownerDocument[fullscreen.browserProps.exitFullscreen]();
  107. }
  108. // Unbind event as it's necessary only before exiting from fullscreen.
  109. if (fullscreen.unbindFullscreenEvent) {
  110. fullscreen.unbindFullscreenEvent();
  111. }
  112. fullscreen.isOpen = false;
  113. fullscreen.setButtonText();
  114. };
  115. /**
  116. * Displays the chart in fullscreen mode.
  117. * When fired customly by user before exporting context button is created,
  118. * button's text will not be replaced - it's on the user side.
  119. * Exporting module required.
  120. *
  121. * @since 8.0.1
  122. *
  123. * @function Highcharts.Fullscreen#open
  124. * @return {void}
  125. * @requires modules/full-screen
  126. */
  127. Fullscreen.prototype.open = function () {
  128. var fullscreen = this, chart = fullscreen.chart;
  129. // Handle exitFullscreen() method when user clicks 'Escape' button.
  130. if (fullscreen.browserProps) {
  131. fullscreen.unbindFullscreenEvent = addEvent(chart.container.ownerDocument, // chart's document
  132. fullscreen.browserProps.fullscreenChange, function () {
  133. // Handle lack of async of browser's fullScreenChange event.
  134. if (fullscreen.isOpen) {
  135. fullscreen.isOpen = false;
  136. fullscreen.close();
  137. }
  138. else {
  139. fullscreen.isOpen = true;
  140. fullscreen.setButtonText();
  141. }
  142. });
  143. var promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();
  144. if (promise) {
  145. // No dot notation because of IE8 compatibility
  146. promise['catch'](function () {
  147. alert(// eslint-disable-line no-alert
  148. 'Full screen is not supported inside a frame.');
  149. });
  150. }
  151. addEvent(chart, 'destroy', fullscreen.unbindFullscreenEvent);
  152. }
  153. };
  154. /**
  155. * Replaces the exporting context button's text when toogling the
  156. * fullscreen mode.
  157. *
  158. * @private
  159. *
  160. * @since 8.0.1
  161. *
  162. * @requires modules/full-screen
  163. * @return {void}
  164. */
  165. Fullscreen.prototype.setButtonText = function () {
  166. var _a;
  167. var chart = this.chart, exportDivElements = chart.exportDivElements, exportingOptions = chart.options.exporting, menuItems = (_a = exportingOptions === null || exportingOptions === void 0 ? void 0 : exportingOptions.buttons) === null || _a === void 0 ? void 0 : _a.contextButton.menuItems, lang = chart.options.lang;
  168. if ((exportingOptions === null || exportingOptions === void 0 ? void 0 : exportingOptions.menuItemDefinitions) && (lang === null || lang === void 0 ? void 0 : lang.exitFullscreen) &&
  169. lang.viewFullscreen &&
  170. menuItems &&
  171. exportDivElements &&
  172. exportDivElements.length) {
  173. exportDivElements[menuItems.indexOf('viewFullscreen')]
  174. .innerHTML = !this.isOpen ?
  175. (exportingOptions.menuItemDefinitions.viewFullscreen.text ||
  176. lang.viewFullscreen) : lang.exitFullscreen;
  177. }
  178. };
  179. /**
  180. * Toggles displaying the chart in fullscreen mode.
  181. * By default, when the exporting module is enabled, a context button with
  182. * a drop down menu in the upper right corner accesses this function.
  183. * Exporting module required.
  184. *
  185. * @since 8.0.1
  186. *
  187. * @sample highcharts/members/chart-togglefullscreen/
  188. * Toggle fullscreen mode from a HTML button
  189. *
  190. * @function Highcharts.Fullscreen#toggle
  191. * @requires modules/full-screen
  192. */
  193. Fullscreen.prototype.toggle = function () {
  194. var fullscreen = this;
  195. if (!fullscreen.isOpen) {
  196. fullscreen.open();
  197. }
  198. else {
  199. fullscreen.close();
  200. }
  201. };
  202. return Fullscreen;
  203. }());
  204. H.Fullscreen = Fullscreen;
  205. export default H.Fullscreen;
  206. // Initialize fullscreen
  207. addEvent(Chart, 'beforeRender', function () {
  208. /**
  209. * @name Highcharts.Chart#fullscreen
  210. * @type {Highcharts.Fullscreen}
  211. * @requires modules/full-screen
  212. */
  213. this.fullscreen = new H.Fullscreen(this);
  214. });