From cef6fe4930184a30a07f2e76a0890b6e79fbf9e7 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 9 Apr 2013 22:00:43 +0200 Subject: [PATCH] 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); + } + } +};