From cef6fe4930184a30a07f2e76a0890b6e79fbf9e7 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 9 Apr 2013 22:00:43 +0200 Subject: [PATCH 1/5] Add full screen control --- css/ol.css | 37 ++++++++++++ src/objectliterals.jsdoc | 7 +++ src/ol/control/fullscreencontrol.exports | 1 + src/ol/control/fullscreencontrol.js | 75 ++++++++++++++++++++++++ 4 files changed, 120 insertions(+) create mode 100644 src/ol/control/fullscreencontrol.exports create mode 100644 src/ol/control/fullscreencontrol.js diff --git a/css/ol.css b/css/ol.css index 448735abf7..f239b22d94 100644 --- a/css/ol.css +++ b/css/ol.css @@ -24,6 +24,43 @@ 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; +} +.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; 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..f1c1cf82b9 --- /dev/null +++ b/src/ol/control/fullscreencontrol.js @@ -0,0 +1,75 @@ +goog.provide('ol.control.FullScreen'); + +goog.require('goog.asserts'); +goog.require('goog.dom'); +goog.require('goog.dom.TagName'); +goog.require('goog.dom.fullscreen'); +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 : {}; + + var aElement = goog.dom.createDom(goog.dom.TagName.A, { + 'href': '#fullScreen' + }, '\u00d7'); + goog.events.listen(aElement, [ + goog.events.EventType.CLICK, + goog.events.EventType.TOUCHEND + ], this.handleClick_, false, this); + + var element = goog.dom.createDom(goog.dom.TagName.DIV, { + 'class': 'ol-full-screen ' + ol.css.CLASS_UNSELECTABLE + }, 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) { + 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 { + var element = map.getTarget(); + goog.asserts.assert(!goog.isNull(element)); + if (this.keys_) { + goog.dom.fullscreen.requestFullScreenWithKeys(element); + } else { + goog.dom.fullscreen.requestFullScreen(element); + } + } +}; From 0bd11d0a7024303a9305b5493bdd94b1ac6b1040 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 9 Apr 2013 22:02:10 +0200 Subject: [PATCH 2/5] Use full screen control in full screen example --- examples/full-screen.html | 63 +++++++++++++++++++++++++++++++-------- examples/full-screen.js | 28 ++++++++++------- 2 files changed, 68 insertions(+), 23 deletions(-) diff --git a/examples/full-screen.html b/examples/full-screen.html index 6526bc2d6b..4b51a67432 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -4,24 +4,63 @@ - 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.

+
+

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); -} From 93041becbe13d770c35259245be7e8a912c4fb86 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 9 Apr 2013 15:47:33 -0600 Subject: [PATCH 3/5] Toggle css class and use css content for anchor --- css/ol.css | 7 +++++++ src/ol/control/fullscreencontrol.js | 19 ++++++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/css/ol.css b/css/ol.css index f239b22d94..9f7f54350c 100644 --- a/css/ol.css +++ b/css/ol.css @@ -52,6 +52,13 @@ 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; } diff --git a/src/ol/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js index f1c1cf82b9..42106a1904 100644 --- a/src/ol/control/fullscreencontrol.js +++ b/src/ol/control/fullscreencontrol.js @@ -3,6 +3,7 @@ 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.events'); goog.require('goog.events.EventType'); @@ -20,16 +21,23 @@ 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' - }, '\u00d7'); + '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); var element = goog.dom.createDom(goog.dom.TagName.DIV, { - 'class': 'ol-full-screen ' + ol.css.CLASS_UNSELECTABLE + 'class': this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE }, aElement); goog.base(this, { @@ -61,11 +69,16 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) { if (!goog.dom.fullscreen.isSupported()) { return; } + 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, opened, closed); goog.dom.fullscreen.exitFullScreen(); } else { var element = map.getTarget(); goog.asserts.assert(!goog.isNull(element)); + goog.dom.classes.swap(anchor, closed, opened); if (this.keys_) { goog.dom.fullscreen.requestFullScreenWithKeys(element); } else { From 8206cf111fb8d5d9aa21ee0c8f61b0b52b98109a Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Wed, 10 Apr 2013 10:05:08 +0200 Subject: [PATCH 4/5] Fix full screen button state --- src/ol/control/fullscreencontrol.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/ol/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js index 42106a1904..a3da48d31d 100644 --- a/src/ol/control/fullscreencontrol.js +++ b/src/ol/control/fullscreencontrol.js @@ -5,6 +5,7 @@ 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'); @@ -36,6 +37,9 @@ ol.control.FullScreen = function(opt_options) { 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 }, aElement); @@ -69,16 +73,11 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) { if (!goog.dom.fullscreen.isSupported()) { return; } - 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, opened, closed); goog.dom.fullscreen.exitFullScreen(); } else { var element = map.getTarget(); goog.asserts.assert(!goog.isNull(element)); - goog.dom.classes.swap(anchor, closed, opened); if (this.keys_) { goog.dom.fullscreen.requestFullScreenWithKeys(element); } else { @@ -86,3 +85,18 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) { } } }; + + +/** + * @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); + } +}; From 7b0e036b830dfe9aa0c90b112cd32fc607ca878f Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Wed, 10 Apr 2013 10:59:38 +0200 Subject: [PATCH 5/5] 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 @@

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.

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';