Add fullscreen API support to IE11

examples/full-screen.html

@@ -15,6 +15,9 @@
       .map:-webkit-full-screen {
         height: 100%;
       }
+      .map:-ms-fullscreen {
+        height: 100%;
+      }
       .map:full-screen {
         height: 100%;
       }

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;

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();
+};

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();
 
 
 /**

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()) {
+  if (googx.dom.fullscreen.isFullScreen()) {
-    goog.dom.fullscreen.exitFullScreen();
+    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);