FullScreen.js 8.3 KB

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