diff --git a/css/ol.css b/css/ol.css index 448735abf7..44bfbd35fe 100644 --- a/css/ol.css +++ b/css/ol.css @@ -24,6 +24,50 @@ position: absolute; border: 2px solid red; } +.ol-full-screen { + background: rgba(255,255,255,0.4); + border-radius: 4px; + padding: 2px; + position: absolute; + right: 8px; + top: 8px; +} +@media print { + .ol-full-screen { + display: none; + } +} +.ol-full-screen a { + background: rgba(0,60,136,0.5); + color: white; + display: block; + font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif; + font-size: 18px; + font-weight: bold; + height: 22px; + line-height: 19px; + margin: 1px; + padding: 0; + text-align: center; + text-decoration: none; + width: 22px; +} +a.ol-full-screen-false:after { + content: "\2194"; +} +a.ol-full-screen-true:after { + content: "\00d7"; +} + +.ol-full-screen div { + border-radius: 2px; +} +.ol-full-screen div a { + border-radius: 2px; +} +.ol-full-screen a:hover { + background: rgba(0,60,136,0.7); +} .ol-logo { bottom: 0; left: 0; @@ -55,6 +99,9 @@ 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 6526bc2d6b..3e642b630c 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -4,24 +4,64 @@ - Full-Screen example - + Full screen control example -
- -
-
Full-screen example
-
Example of a full-screen map.
-
fullscreen, mapquest, openaerial, tile, tilelayer
+
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Full screen control example

+

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.

+

If there is no button on the map, your browser does not support the Full Screen API.

+
+

See the full-screen.js source to see how this is done.

+
+
full-screen, bing, bing-maps
+
+ +
+ +
+ + + + diff --git a/examples/full-screen.js b/examples/full-screen.js index db48e57a27..9af6fd0c20 100644 --- a/examples/full-screen.js +++ b/examples/full-screen.js @@ -1,24 +1,30 @@ goog.require('ol.Map'); goog.require('ol.RendererHints'); goog.require('ol.View2D'); +goog.require('ol.control.FullScreen'); +goog.require('ol.control.defaults'); goog.require('ol.layer.TileLayer'); -goog.require('ol.source.MapQuestOpenAerial'); +goog.require('ol.source.BingMaps'); -var layer = new ol.layer.TileLayer({ - source: new ol.source.MapQuestOpenAerial() +var view = new ol.View2D({ + center: [-9101767, 2822912], + zoom: 14 }); -var view = new ol.View2D(); - var map = new ol.Map({ - layers: [layer], + controls: ol.control.defaults({}, [ + new ol.control.FullScreen() + ]), + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.BingMaps({ + key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R', + style: 'Aerial' + }) + }) + ], renderers: ol.RendererHints.createFromQueryData(), target: 'map', view: view }); - -var mapSize = map.getSize(); -if (mapSize) { - view.fitExtent(view.getProjection().getExtent(), mapSize); -} diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 2a10058c7a..a98eadda99 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -112,6 +112,13 @@ * @property {ol.control.ZoomOptions|undefined} zoomOptions Zoom options. */ +/** + * @typedef {Object} ol.control.FullScreenOptions + * @property {boolean|undefined} keys Full keyboard access. + * @property {ol.Map|undefined} map Map. + * @property {Element|undefined} target Target. + */ + /** * @typedef {Object} ol.control.LogoOptions * @property {ol.Map|undefined} map Map. diff --git a/src/ol/control/fullscreencontrol.exports b/src/ol/control/fullscreencontrol.exports new file mode 100644 index 0000000000..ab662df885 --- /dev/null +++ b/src/ol/control/fullscreencontrol.exports @@ -0,0 +1 @@ +@exportClass ol.control.FullScreen ol.control.FullScreenOptions diff --git a/src/ol/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js new file mode 100644 index 0000000000..126997fff1 --- /dev/null +++ b/src/ol/control/fullscreencontrol.js @@ -0,0 +1,103 @@ +goog.provide('ol.control.FullScreen'); + +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('ol.control.Control'); +goog.require('ol.css'); + + + +/** + * @constructor + * @extends {ol.control.Control} + * @param {ol.control.FullScreenOptions=} opt_options Options. + */ +ol.control.FullScreen = function(opt_options) { + + var options = goog.isDef(opt_options) ? opt_options : {}; + + /** + * @private + * @type {string} + */ + this.cssClassName_ = 'ol-full-screen'; + + var aElement = goog.dom.createDom(goog.dom.TagName.A, { + 'href': '#fullScreen', + 'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen() + }); + goog.events.listen(aElement, [ + goog.events.EventType.CLICK, + goog.events.EventType.TOUCHEND + ], this.handleClick_, false, this); + + goog.events.listen(goog.global.document, goog.dom.fullscreen.EventType.CHANGE, + this.handleFullScreenChange_, false, this); + + var element = goog.dom.createDom(goog.dom.TagName.DIV, { + 'class': this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE + + (!goog.dom.fullscreen.isSupported() ? ol.css.CLASS_UNSUPPORTED : '') + }, aElement); + + goog.base(this, { + element: element, + map: options.map, + target: options.target + }); + + /** + * @private + * @type {boolean} + */ + this.keys_ = goog.isDef(options.keys) ? options.keys : false; + +}; +goog.inherits(ol.control.FullScreen, ol.control.Control); + + +/** + * @param {goog.events.BrowserEvent} browserEvent Browser event. + * @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.isFullScreen()) { + goog.dom.fullscreen.exitFullScreen(); + } else { + var element = map.getTarget(); + goog.asserts.assert(!goog.isNull(element)); + if (this.keys_) { + goog.dom.fullscreen.requestFullScreenWithKeys(element); + } else { + goog.dom.fullscreen.requestFullScreen(element); + } + } +}; + + +/** + * @private + */ +ol.control.FullScreen.prototype.handleFullScreenChange_ = function() { + var opened = this.cssClassName_ + '-true'; + var closed = this.cssClassName_ + '-false'; + var anchor = goog.dom.getFirstElementChild(this.element); + if (goog.dom.fullscreen.isFullScreen()) { + goog.dom.classes.swap(anchor, closed, opened); + } else { + goog.dom.classes.swap(anchor, opened, closed); + } +}; 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';