FullScreen.js 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  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 = fullscreen.unbindFullscreenEvent();
  113. }
  114. chart.setSize(fullscreen.origWidth, fullscreen.origHeight, false);
  115. fullscreen.origWidth = void 0;
  116. fullscreen.origHeight = void 0;
  117. optionsChart.width = fullscreen.origWidthOption;
  118. optionsChart.height = fullscreen.origHeightOption;
  119. fullscreen.origWidthOption = void 0;
  120. fullscreen.origHeightOption = void 0;
  121. fullscreen.isOpen = false;
  122. fullscreen.setButtonText();
  123. };
  124. /**
  125. * Displays the chart in fullscreen mode.
  126. * When fired customly by user before exporting context button is created,
  127. * button's text will not be replaced - it's on the user side.
  128. * Exporting module required.
  129. *
  130. * @since 8.0.1
  131. *
  132. * @function Highcharts.Fullscreen#open
  133. * @return {void}
  134. * @requires modules/full-screen
  135. */
  136. Fullscreen.prototype.open = function () {
  137. var fullscreen = this, chart = fullscreen.chart, optionsChart = chart.options.chart;
  138. if (optionsChart) {
  139. fullscreen.origWidthOption = optionsChart.width;
  140. fullscreen.origHeightOption = optionsChart.height;
  141. }
  142. fullscreen.origWidth = chart.chartWidth;
  143. fullscreen.origHeight = chart.chartHeight;
  144. // Handle exitFullscreen() method when user clicks 'Escape' button.
  145. if (fullscreen.browserProps) {
  146. var unbindChange_1 = addEvent(chart.container.ownerDocument, // chart's document
  147. fullscreen.browserProps.fullscreenChange, function () {
  148. // Handle lack of async of browser's fullScreenChange event.
  149. if (fullscreen.isOpen) {
  150. fullscreen.isOpen = false;
  151. fullscreen.close();
  152. }
  153. else {
  154. chart.setSize(null, null, false);
  155. fullscreen.isOpen = true;
  156. fullscreen.setButtonText();
  157. }
  158. });
  159. var unbindDestroy_1 = addEvent(chart, 'destroy', unbindChange_1);
  160. fullscreen.unbindFullscreenEvent = function () {
  161. unbindChange_1();
  162. unbindDestroy_1();
  163. };
  164. var promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();
  165. if (promise) {
  166. // No dot notation because of IE8 compatibility
  167. promise['catch'](function () {
  168. alert(// eslint-disable-line no-alert
  169. 'Full screen is not supported inside a frame.');
  170. });
  171. }
  172. }
  173. };
  174. /**
  175. * Replaces the exporting context button's text when toogling the
  176. * fullscreen mode.
  177. *
  178. * @private
  179. *
  180. * @since 8.0.1
  181. *
  182. * @requires modules/full-screen
  183. * @return {void}
  184. */
  185. Fullscreen.prototype.setButtonText = function () {
  186. var chart = this.chart, exportDivElements = chart.exportDivElements, exportingOptions = chart.options.exporting, menuItems = (exportingOptions &&
  187. exportingOptions.buttons &&
  188. exportingOptions.buttons.contextButton.menuItems), lang = chart.options.lang;
  189. if (exportingOptions &&
  190. exportingOptions.menuItemDefinitions &&
  191. lang &&
  192. lang.exitFullscreen &&
  193. lang.viewFullscreen &&
  194. menuItems &&
  195. exportDivElements &&
  196. exportDivElements.length) {
  197. AST.setElementHTML(exportDivElements[menuItems.indexOf('viewFullscreen')], !this.isOpen ?
  198. (exportingOptions.menuItemDefinitions.viewFullscreen.text ||
  199. lang.viewFullscreen) : lang.exitFullscreen);
  200. }
  201. };
  202. /**
  203. * Toggles displaying the chart in fullscreen mode.
  204. * By default, when the exporting module is enabled, a context button with
  205. * a drop down menu in the upper right corner accesses this function.
  206. * Exporting module required.
  207. *
  208. * @since 8.0.1
  209. *
  210. * @sample highcharts/members/chart-togglefullscreen/
  211. * Toggle fullscreen mode from a HTML button
  212. *
  213. * @function Highcharts.Fullscreen#toggle
  214. * @requires modules/full-screen
  215. */
  216. Fullscreen.prototype.toggle = function () {
  217. var fullscreen = this;
  218. if (!fullscreen.isOpen) {
  219. fullscreen.open();
  220. }
  221. else {
  222. fullscreen.close();
  223. }
  224. };
  225. return Fullscreen;
  226. }());
  227. H.Fullscreen = Fullscreen;
  228. export default H.Fullscreen;
  229. // Initialize fullscreen
  230. addEvent(Chart, 'beforeRender', function () {
  231. /**
  232. * @name Highcharts.Chart#fullscreen
  233. * @type {Highcharts.Fullscreen}
  234. * @requires modules/full-screen
  235. */
  236. this.fullscreen = new H.Fullscreen(this);
  237. });