From 7b0e036b830dfe9aa0c90b112cd32fc607ca878f Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Wed, 10 Apr 2013 10:59:38 +0200
Subject: [PATCH] Hide the control if the Fullscreen API is not supported

---
 css/ol.css                          | 3 +++
 examples/full-screen.html           | 1 +
 src/ol/control/fullscreencontrol.js | 9 +++++----
 src/ol/css.js                       | 8 ++++++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/css/ol.css b/css/ol.css
index 9f7f54350c..44bfbd35fe 100644
--- a/css/ol.css
+++ b/css/ol.css
@@ -99,6 +99,9 @@ a.ol-full-screen-true:after {
   margin: 1px;
   padding: 0px 2px;
 }
+.ol-unsupported {
+  display: none;
+}
 .ol-viewport .ol-unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
diff --git a/examples/full-screen.html b/examples/full-screen.html
index 4b51a67432..3e642b630c 100644
--- a/examples/full-screen.html
+++ b/examples/full-screen.html
@@ -49,6 +49,7 @@
         <div class="span4">
           <h4 id="title">Full screen control example</h4>
           <p id="shortdesc">Example of a full screen control.  Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
+          <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
           <div id="docs">
             <p>See the <a href="full-screen.js" target="_blank">full-screen.js source</a> to see how this is done.</p>
           </div>
diff --git a/src/ol/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js
index a3da48d31d..126997fff1 100644
--- a/src/ol/control/fullscreencontrol.js
+++ b/src/ol/control/fullscreencontrol.js
@@ -41,7 +41,8 @@ ol.control.FullScreen = function(opt_options) {
       this.handleFullScreenChange_, false, this);
 
   var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE
+    'class': this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE +
+        (!goog.dom.fullscreen.isSupported() ? ol.css.CLASS_UNSUPPORTED : '')
   }, aElement);
 
   goog.base(this, {
@@ -65,14 +66,14 @@ goog.inherits(ol.control.FullScreen, ol.control.Control);
  * @private
  */
 ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) {
+  if (!goog.dom.fullscreen.isSupported()) {
+    return;
+  }
   browserEvent.preventDefault();
   var map = this.getMap();
   if (goog.isNull(map)) {
     return;
   }
-  if (!goog.dom.fullscreen.isSupported()) {
-    return;
-  }
   if (goog.dom.fullscreen.isFullScreen()) {
     goog.dom.fullscreen.exitFullScreen();
   } else {
diff --git a/src/ol/css.js b/src/ol/css.js
index b717b3d0d4..5dbbddd11d 100644
--- a/src/ol/css.js
+++ b/src/ol/css.js
@@ -7,3 +7,11 @@ goog.provide('ol.css');
  * @const {string}
  */
 ol.css.CLASS_UNSELECTABLE = 'ol-unselectable';
+
+
+/**
+ * The CSS class for unsupported feature.
+ *
+ * @const {string}
+ */
+ol.css.CLASS_UNSUPPORTED = 'ol-unsupported';