full-screen.src.js 7.4 KB

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