diff --git a/examples/full-screen.html b/examples/full-screen.html index 38ab98a834..a1cf2a3c38 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -15,6 +15,9 @@ .map:-webkit-full-screen { height: 100%; } + .map:-ms-fullscreen { + height: 100%; + } .map:full-screen { height: 100%; } diff --git a/externs/closure-compiler.js b/externs/closure-compiler.js index 7632dd8368..a48a5827b0 100644 --- a/externs/closure-compiler.js +++ b/externs/closure-compiler.js @@ -36,3 +36,19 @@ DeviceOrientationEvent.prototype.webkitCompassAccuracy; /** @type {?number} */ DeviceOrientationEvent.prototype.webkitCompassHeading; + + +// IE 11 fullscreen API +// http://msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx + +/** @return {void} */ +Element.prototype.msRequestFullscreen = function() {}; + +/** @return {void} */ +Element.prototype.msExitFullscreen = function() {}; + +/** @type {boolean} */ +Document.prototype.msFullscreenEnabled; + +/** @type {Element} */ +Document.prototype.msFullscreenElement; diff --git a/src/googx/dom/fullscreen.js b/src/googx/dom/fullscreen.js new file mode 100644 index 0000000000..31c2b12007 --- /dev/null +++ b/src/googx/dom/fullscreen.js @@ -0,0 +1,144 @@ +// Copyright 2012 The Closure Library Authors. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS-IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +/** + * @fileoverview Functions for managing full screen status of the DOM. + * + */ + +goog.provide('googx.dom.fullscreen'); +goog.provide('googx.dom.fullscreen.EventType'); + +goog.require('goog.dom'); +goog.require('goog.userAgent'); + + +/** + * Event types for full screen. + * @enum {string} + */ +googx.dom.fullscreen.EventType = { + /** Dispatched by the Document when the fullscreen status changes. */ + CHANGE: (function() { + if (goog.userAgent.WEBKIT) { + return 'webkitfullscreenchange'; + } + if (goog.userAgent.GECKO) { + return 'mozfullscreenchange'; + } + if (goog.userAgent.IE) { + return 'MSFullscreenChange'; + } + // Opera 12-14, and W3C standard (Draft): + // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html + return 'fullscreenchange'; + })() +}; + + +/** + * Determines if full screen is supported. + * @param {!goog.dom.DomHelper=} opt_domHelper The DomHelper for the DOM being + * queried. If not provided, use the current DOM. + * @return {boolean} True iff full screen is supported. + */ +googx.dom.fullscreen.isSupported = function(opt_domHelper) { + var doc = googx.dom.fullscreen.getDocument_(opt_domHelper); + var body = doc.body; + return !!(body.webkitRequestFullscreen || + (body.mozRequestFullScreen && doc.mozFullScreenEnabled) || + (body.msRequestFullscreen && doc.msFullscreenEnabled) || + (body.requestFullscreen && doc.fullscreenEnabled)); +}; + + +/** + * Requests putting the element in full screen. + * @param {!Element} element The element to put full screen. + */ +googx.dom.fullscreen.requestFullScreen = function(element) { + if (element.webkitRequestFullscreen) { + element.webkitRequestFullscreen(); + } else if (element.mozRequestFullScreen) { + element.mozRequestFullScreen(); + } else if (element.msRequestFullscreen) { + element.msRequestFullscreen(); + } else if (element.requestFullscreen) { + element.requestFullscreen(); + } +}; + + +/** + * Requests putting the element in full screen with full keyboard access. + * @param {!Element} element The element to put full screen. + */ +googx.dom.fullscreen.requestFullScreenWithKeys = function( + element) { + if (element.mozRequestFullScreenWithKeys) { + element.mozRequestFullScreenWithKeys(); + } else if (element.webkitRequestFullscreen) { + element.webkitRequestFullscreen(); + } else { + googx.dom.fullscreen.requestFullScreen(element); + } +}; + + +/** + * Exits full screen. + * @param {!goog.dom.DomHelper=} opt_domHelper The DomHelper for the DOM being + * queried. If not provided, use the current DOM. + */ +googx.dom.fullscreen.exitFullScreen = function(opt_domHelper) { + var doc = googx.dom.fullscreen.getDocument_(opt_domHelper); + if (doc.webkitCancelFullScreen) { + doc.webkitCancelFullScreen(); + } else if (doc.mozCancelFullScreen) { + doc.mozCancelFullScreen(); + } else if (doc.msExitFullscreen) { + doc.msExitFullscreen(); + } else if (doc.exitFullscreen) { + doc.exitFullscreen(); + } +}; + + +/** + * Determines if the document is full screen. + * @param {!goog.dom.DomHelper=} opt_domHelper The DomHelper for the DOM being + * queried. If not provided, use the current DOM. + * @return {boolean} Whether the document is full screen. + */ +googx.dom.fullscreen.isFullScreen = function(opt_domHelper) { + var doc = googx.dom.fullscreen.getDocument_(opt_domHelper); + // IE 11 doesn't have similar boolean property, so check whether + // document.msFullscreenElement is null instead. + return !!(doc.webkitIsFullScreen || doc.mozFullScreen || + doc.msFullscreenElement || doc.fullscreenElement); +}; + + +/** + * Gets the document object of the dom. + * @param {!goog.dom.DomHelper=} opt_domHelper The DomHelper for the DOM being + * queried. If not provided, use the current DOM. + * @return {!Document} The dom document. + * @private + */ +googx.dom.fullscreen.getDocument_ = function(opt_domHelper) { + return opt_domHelper ? + opt_domHelper.getDocument() : + goog.dom.getDomHelper().getDocument(); +}; diff --git a/src/ol/browserfeature.js b/src/ol/browserfeature.js index 423fb93fa0..4958c590f6 100644 --- a/src/ol/browserfeature.js +++ b/src/ol/browserfeature.js @@ -2,8 +2,8 @@ goog.provide('ol.BrowserFeature'); goog.require('goog.dom'); goog.require('goog.dom.TagName'); -goog.require('goog.dom.fullscreen'); goog.require('goog.userAgent'); +goog.require('googx.dom.fullscreen'); goog.require('ol.webgl'); @@ -148,7 +148,7 @@ ol.BrowserFeature.HAS_DOM = ol.ENABLE_DOM; * @type {boolean} * @todo stability experimental */ -ol.BrowserFeature.HAS_FULLSCREEN = goog.dom.fullscreen.isSupported(); +ol.BrowserFeature.HAS_FULLSCREEN = googx.dom.fullscreen.isSupported(); /** diff --git a/src/ol/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js index 8ce034cc08..92004f5fa7 100644 --- a/src/ol/control/fullscreencontrol.js +++ b/src/ol/control/fullscreencontrol.js @@ -4,10 +4,10 @@ goog.require('goog.asserts'); goog.require('goog.dom'); goog.require('goog.dom.TagName'); goog.require('goog.dom.classes'); -goog.require('goog.dom.fullscreen'); -goog.require('goog.dom.fullscreen.EventType'); goog.require('goog.events'); goog.require('goog.events.EventType'); +goog.require('googx.dom.fullscreen'); +goog.require('googx.dom.fullscreen.EventType'); goog.require('ol.BrowserFeature'); goog.require('ol.control.Control'); goog.require('ol.css'); @@ -44,7 +44,7 @@ ol.control.FullScreen = function(opt_options) { }, tipLabel); var button = goog.dom.createDom(goog.dom.TagName.BUTTON, { - 'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen() + + 'class': this.cssClassName_ + '-' + googx.dom.fullscreen.isFullScreen() + ' ol-has-tooltip' }); goog.dom.appendChild(button, tip); @@ -60,7 +60,8 @@ ol.control.FullScreen = function(opt_options) { this.blur(); }, false); - goog.events.listen(goog.global.document, goog.dom.fullscreen.EventType.CHANGE, + goog.events.listen(goog.global.document, + googx.dom.fullscreen.EventType.CHANGE, this.handleFullScreenChange_, false, this); var element = goog.dom.createDom(goog.dom.TagName.DIV, { @@ -96,17 +97,17 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) { if (goog.isNull(map)) { return; } - if (goog.dom.fullscreen.isFullScreen()) { - goog.dom.fullscreen.exitFullScreen(); + if (googx.dom.fullscreen.isFullScreen()) { + googx.dom.fullscreen.exitFullScreen(); } else { var target = map.getTarget(); goog.asserts.assert(goog.isDefAndNotNull(target)); var element = goog.dom.getElement(target); goog.asserts.assert(goog.isDefAndNotNull(element)); if (this.keys_) { - goog.dom.fullscreen.requestFullScreenWithKeys(element); + googx.dom.fullscreen.requestFullScreenWithKeys(element); } else { - goog.dom.fullscreen.requestFullScreen(element); + googx.dom.fullscreen.requestFullScreen(element); } } }; @@ -120,7 +121,7 @@ ol.control.FullScreen.prototype.handleFullScreenChange_ = function() { var closed = this.cssClassName_ + '-false'; var anchor = goog.dom.getFirstElementChild(this.element); var map = this.getMap(); - if (goog.dom.fullscreen.isFullScreen()) { + if (googx.dom.fullscreen.isFullScreen()) { goog.dom.classes.swap(anchor, closed, opened); } else { goog.dom.classes.swap(anchor, opened, closed);