123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- /* *
- * (c) 2009-2021 Rafal Sebestjanski
- *
- * Full screen for Highcharts
- *
- * License: www.highcharts.com/license
- */
- 'use strict';
- import Chart from '../Core/Chart/Chart.js';
- import H from '../Core/Globals.js';
- var doc = H.doc;
- import AST from '../Core/Renderer/HTML/AST.js';
- import U from '../Core/Utilities.js';
- var addEvent = U.addEvent;
- /**
- * The module allows user to enable display chart in full screen mode.
- * Used in StockTools too.
- * Based on default solutions in browsers.
- *
- */
- /* eslint-disable no-invalid-this, valid-jsdoc */
- /**
- * Handles displaying chart's container in the fullscreen mode.
- *
- * **Note**: Fullscreen is not supported on iPhone due to iOS limitations.
- *
- * @class
- * @name Highcharts.Fullscreen
- * @hideconstructor
- * @requires modules/full-screen
- */
- var Fullscreen = /** @class */ (function () {
- /* *
- *
- * Constructors
- *
- * */
- function Fullscreen(chart) {
- /**
- * Chart managed by the fullscreen controller.
- * @name Highcharts.Fullscreen#chart
- * @type {Highcharts.Chart}
- */
- this.chart = chart;
- /**
- * The flag is set to `true` when the chart is displayed in
- * the fullscreen mode.
- *
- * @name Highcharts.Fullscreen#isOpen
- * @type {boolean|undefined}
- * @since 8.0.1
- */
- this.isOpen = false;
- var container = chart.renderTo;
- // Hold event and methods available only for a current browser.
- if (!this.browserProps) {
- if (typeof container.requestFullscreen === 'function') {
- this.browserProps = {
- fullscreenChange: 'fullscreenchange',
- requestFullscreen: 'requestFullscreen',
- exitFullscreen: 'exitFullscreen'
- };
- }
- else if (container.mozRequestFullScreen) {
- this.browserProps = {
- fullscreenChange: 'mozfullscreenchange',
- requestFullscreen: 'mozRequestFullScreen',
- exitFullscreen: 'mozCancelFullScreen'
- };
- }
- else if (container.webkitRequestFullScreen) {
- this.browserProps = {
- fullscreenChange: 'webkitfullscreenchange',
- requestFullscreen: 'webkitRequestFullScreen',
- exitFullscreen: 'webkitExitFullscreen'
- };
- }
- else if (container.msRequestFullscreen) {
- this.browserProps = {
- fullscreenChange: 'MSFullscreenChange',
- requestFullscreen: 'msRequestFullscreen',
- exitFullscreen: 'msExitFullscreen'
- };
- }
- }
- }
- /* *
- *
- * Functions
- *
- * */
- /**
- * Stops displaying the chart in fullscreen mode.
- * Exporting module required.
- *
- * @since 8.0.1
- *
- * @function Highcharts.Fullscreen#close
- * @return {void}
- * @requires modules/full-screen
- */
- Fullscreen.prototype.close = function () {
- var fullscreen = this, chart = fullscreen.chart, optionsChart = chart.options.chart;
- // Don't fire exitFullscreen() when user exited using 'Escape' button.
- if (fullscreen.isOpen &&
- fullscreen.browserProps &&
- chart.container.ownerDocument instanceof Document) {
- chart.container.ownerDocument[fullscreen.browserProps.exitFullscreen]();
- }
- // Unbind event as it's necessary only before exiting from fullscreen.
- if (fullscreen.unbindFullscreenEvent) {
- fullscreen.unbindFullscreenEvent = fullscreen.unbindFullscreenEvent();
- }
- chart.setSize(fullscreen.origWidth, fullscreen.origHeight, false);
- fullscreen.origWidth = void 0;
- fullscreen.origHeight = void 0;
- optionsChart.width = fullscreen.origWidthOption;
- optionsChart.height = fullscreen.origHeightOption;
- fullscreen.origWidthOption = void 0;
- fullscreen.origHeightOption = void 0;
- fullscreen.isOpen = false;
- fullscreen.setButtonText();
- };
- /**
- * Displays the chart in fullscreen mode.
- * When fired customly by user before exporting context button is created,
- * button's text will not be replaced - it's on the user side.
- * Exporting module required.
- *
- * @since 8.0.1
- *
- * @function Highcharts.Fullscreen#open
- * @return {void}
- * @requires modules/full-screen
- */
- Fullscreen.prototype.open = function () {
- var fullscreen = this, chart = fullscreen.chart, optionsChart = chart.options.chart;
- if (optionsChart) {
- fullscreen.origWidthOption = optionsChart.width;
- fullscreen.origHeightOption = optionsChart.height;
- }
- fullscreen.origWidth = chart.chartWidth;
- fullscreen.origHeight = chart.chartHeight;
- // Handle exitFullscreen() method when user clicks 'Escape' button.
- if (fullscreen.browserProps) {
- var unbindChange_1 = addEvent(chart.container.ownerDocument, // chart's document
- fullscreen.browserProps.fullscreenChange, function () {
- // Handle lack of async of browser's fullScreenChange event.
- if (fullscreen.isOpen) {
- fullscreen.isOpen = false;
- fullscreen.close();
- }
- else {
- chart.setSize(null, null, false);
- fullscreen.isOpen = true;
- fullscreen.setButtonText();
- }
- });
- var unbindDestroy_1 = addEvent(chart, 'destroy', unbindChange_1);
- fullscreen.unbindFullscreenEvent = function () {
- unbindChange_1();
- unbindDestroy_1();
- };
- var promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();
- if (promise) {
- // No dot notation because of IE8 compatibility
- promise['catch'](function () {
- alert(// eslint-disable-line no-alert
- 'Full screen is not supported inside a frame.');
- });
- }
- }
- };
- /**
- * Replaces the exporting context button's text when toogling the
- * fullscreen mode.
- *
- * @private
- *
- * @since 8.0.1
- *
- * @requires modules/full-screen
- * @return {void}
- */
- Fullscreen.prototype.setButtonText = function () {
- var chart = this.chart, exportDivElements = chart.exportDivElements, exportingOptions = chart.options.exporting, menuItems = (exportingOptions &&
- exportingOptions.buttons &&
- exportingOptions.buttons.contextButton.menuItems), lang = chart.options.lang;
- if (exportingOptions &&
- exportingOptions.menuItemDefinitions &&
- lang &&
- lang.exitFullscreen &&
- lang.viewFullscreen &&
- menuItems &&
- exportDivElements &&
- exportDivElements.length) {
- AST.setElementHTML(exportDivElements[menuItems.indexOf('viewFullscreen')], !this.isOpen ?
- (exportingOptions.menuItemDefinitions.viewFullscreen.text ||
- lang.viewFullscreen) : lang.exitFullscreen);
- }
- };
- /**
- * Toggles displaying the chart in fullscreen mode.
- * By default, when the exporting module is enabled, a context button with
- * a drop down menu in the upper right corner accesses this function.
- * Exporting module required.
- *
- * @since 8.0.1
- *
- * @sample highcharts/members/chart-togglefullscreen/
- * Toggle fullscreen mode from a HTML button
- *
- * @function Highcharts.Fullscreen#toggle
- * @requires modules/full-screen
- */
- Fullscreen.prototype.toggle = function () {
- var fullscreen = this;
- if (!fullscreen.isOpen) {
- fullscreen.open();
- }
- else {
- fullscreen.close();
- }
- };
- return Fullscreen;
- }());
- H.Fullscreen = Fullscreen;
- export default H.Fullscreen;
- // Initialize fullscreen
- addEvent(Chart, 'beforeRender', function () {
- /**
- * @name Highcharts.Chart#fullscreen
- * @type {Highcharts.Fullscreen}
- * @requires modules/full-screen
- */
- this.fullscreen = new H.Fullscreen(this);
- });
|