source option added to ol.control.FullScreen including an example

examples/full-screen-source.css

@@ -0,0 +1,44 @@
+.fullscreen:-moz-full-screen {
+  height: 100%;
+}
+.fullscreen:-webkit-full-screen {
+  height: 100%;
+}
+.fullscreen:-ms-fullscreen {
+  height: 100%;
+}
+
+.fullscreen:fullscreen {
+  height: 100%;
+}
+
+.fullscreen {
+  margin-bottom: 10px;
+  width: 100%;
+  height: 400px;
+}
+
+.ol-rotate {
+  top: 3em;
+}
+
+.map {
+  width: 80%;
+  height: 100%;
+  float: left;
+}
+
+.sidepanel {
+  background: #1F6B75;
+  width: 20%;
+  height: 100%;
+  float: left;
+}
+
+.sidepanel-title {
+  width: 100%;
+  font-size: 3em;
+  color: #ffffff;
+  display: block;
+  text-align: center;
+}

examples/full-screen-source.html

@@ -0,0 +1,16 @@
+---
+layout: example.html
+title: Full Screen Control with extended source element
+shortdesc: Example of a full screen control with a source option definition.
+docs: >
+  <p>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>
+tags: "full-screen, source, fullScreenSource, osm, osm-maps"
+---
+<div id="fullscreen" class="fullscreen">
+  <div id="map" class="map"></div>
+  <div class="sidepanel">
+    <span class="sidepanel-title">Side Panel</span>
+  </div>
+</div>
+

examples/full-screen-source.js

@@ -0,0 +1,28 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.control.FullScreen');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+var view = new ol.View({
+  center: [-9101767, 2822912],
+  zoom: 14
+});
+
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    new ol.control.FullScreen({
+      source: 'fullscreen'
+    })
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: common.getRendererFromQueryString(),
+  target: 'map',
+  view: view
+});

externs/olx.js

@@ -1054,7 +1054,8 @@ olx.control.DefaultsOptions.prototype.zoomOptions;
  *     labelActive: (string|Node|undefined),
  *     tipLabel: (string|undefined),
  *     keys: (boolean|undefined),
- *     target: (Element|undefined)}}
+ *     target: (Element|undefined),
+ *     source: (Element|string|undefined)}}
  * @api
  */
 olx.control.FullScreenOptions;
@@ -1110,6 +1111,12 @@ olx.control.FullScreenOptions.prototype.keys;
  */
 olx.control.FullScreenOptions.prototype.target;
 
+/**
+ * The element to be displayed fullscreen. When not provided, the element containing the map viewport will be displayed fullscreen.
+ * @type {Element|string|undefined}
+ * @api
+ */
+olx.control.FullScreenOptions.prototype.source;
 
 /**
  * @typedef {{className: (string|undefined),
@@ -4244,7 +4251,6 @@ olx.source.TileImageOptions.prototype.wrapX;
 olx.source.VectorTileOptions;
 
 
-/**
 /**
  * Attributions.
  * @type {Array.<ol.Attribution>|undefined}
@@ -6317,10 +6323,10 @@ olx.style.RegularShapeOptions.prototype.radius;
 
 
 /**
-* Inner radius of a star.
-* @type {number|undefined}
-* @api
-*/
+ * Inner radius of a star.
+ * @type {number|undefined}
+ * @api
+ */
 olx.style.RegularShapeOptions.prototype.radius1;
 
 

src/ol/control/fullscreencontrol.js

@@ -15,6 +15,10 @@ goog.require('ol.css');
 /**
  * @classdesc
  * Provides a button that when clicked fills up the full screen with the map.
+ * The full screen source element is by default the element containing the map viewport unless
+ * overriden by providing the `source` option. In which case, the dom
+ * element introduced using this parameter will be displayed in full screen.
+ *
  * When in full screen mode, a close button is shown to exit full screen mode.
  * The [Fullscreen API](http://www.w3.org/TR/fullscreen/) is used to
  * toggle the map in full screen mode.
@@ -83,6 +87,12 @@ ol.control.FullScreen = function(opt_options) {
    */
   this.keys_ = options.keys !== undefined ? options.keys : false;
 
+  /**
+   * @private
+   * @type {Element|string|undefined}
+   */
+  this.source_ = options.source;
+
 };
 goog.inherits(ol.control.FullScreen, ol.control.Control);
 
@@ -111,7 +121,8 @@ ol.control.FullScreen.prototype.handleFullScreen_ = function() {
   if (goog.dom.fullscreen.isFullScreen()) {
     goog.dom.fullscreen.exitFullScreen();
   } else {
-    var element = map.getTargetElement();
+    var element = this.source_ ?
+        goog.dom.getElement(this.source_) : map.getTargetElement();
     goog.asserts.assert(element, 'element should be defined');
     if (this.keys_) {
       goog.dom.fullscreen.requestFullScreenWithKeys(element);