diff --git a/css/ol.css b/css/ol.css index 954b1e82a3..ca843c03bb 100644 --- a/css/ol.css +++ b/css/ol.css @@ -34,11 +34,6 @@ white-space: nowrap; } -.ol-full-screen a:hover { - /* IE <= 8 doesn't support rgba, fall back to a light blue */ - background: #4c6079; - background: rgba(0,60,136,0.7); -} .ol-logo { bottom: 0; left: 0; @@ -103,7 +98,7 @@ .ol-zoom:hover, .ol-zoom-extent:hover, .ol-full-screen:hover { - background-color: rgba(255,255,255,0.5); + background-color: rgba(255,255,255,0.6); } .ol-zoom { top: 8px; @@ -127,7 +122,7 @@ .ol-zoom button, .ol-zoom-extent button, -.ol-full-screen a { +.ol-full-screen button { display: block; margin: 1px; padding: 0; @@ -154,15 +149,16 @@ border-radius: 2px; } .ol-touch .ol-zoom button, -.ol-touch .ol-full-screen a, +.ol-touch .ol-full-screen button, .ol-touch .ol-zoom-extent button { font-size: 1.5em; } .ol-zoom button:hover, .ol-zoom button:focus, .ol-zoom-extent button:hover, -.ol-zoom-extent button:focus { - color: #fff; +.ol-zoom-extent button:focus, +.ol-full-screen button:hover, +.ol-full-screen button:focus { text-decoration: none; background-color: #4c6079; background-color: rgba(0,60,136,0.7); @@ -176,15 +172,12 @@ .ol-zoom-out { border-radius: 0 0 2px 2px; } -a.ol-full-screen-false:after { +button.ol-full-screen-false:after { content: "\2194"; } -a.ol-full-screen-true:after { +button.ol-full-screen-true:after { content: "\00d7"; } -.ol-full-screen a { - border-radius: 2px; -} /* invisible but not hidden */ .ol-has-tooltip [role=tooltip] { @@ -214,9 +207,9 @@ a.ol-full-screen-true:after { white-space: nowrap; display: inline-block; background: #FFF; - background: rgba(255,255,255,0.5); + background: rgba(255,255,255,0.6); color: #000; - border: 3px solid rgba(255, 255, 255, 0.0); + border: 3px solid rgba(255,255,255,0); border-left-width: 0; border-radius: 0 4px 4px 0; bottom: .3em; @@ -226,6 +219,12 @@ a.ol-full-screen-true:after { .ol-zoom .ol-has-tooltip:focus [role=tooltip] { bottom: 1.1em; } +.ol-full-screen .ol-has-tooltip:hover [role=tooltip], +.ol-full-screen .ol-has-tooltip:focus [role=tooltip] { + right: 2.2em; + left: auto; + border-radius: 4px 0 0 4px; +} .ol-zoomslider { position: absolute; @@ -256,7 +255,7 @@ a.ol-full-screen-true:after { } .ol-zoom-extent button, .ol-attribution, -.ol-full-screen a, +.ol-full-screen button, .ol-scale-line-inner, .ol-zoom button, .ol-has-tooltip [role=tooltip] { diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index a65026866c..dfe3058fe6 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -216,6 +216,7 @@ /** * @typedef {Object} olx.control.FullScreenOptions * @property {string|undefined} className CSS class name. Default is `ol-full-screen`. + * @property {string|undefined} tipLabel Text label to use for the full-screen tip. Default is `Fullscreen` * @property {boolean|undefined} keys Full keyboard access. * @property {Element|undefined} target Target. * @todo stability experimental diff --git a/src/ol/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js index a8f7de993a..444e3d0bc7 100644 --- a/src/ol/control/fullscreencontrol.js +++ b/src/ol/control/fullscreencontrol.js @@ -36,11 +36,18 @@ ol.control.FullScreen = function(opt_options) { this.cssClassName_ = goog.isDef(options.className) ? options.className : 'ol-full-screen'; - var aElement = goog.dom.createDom(goog.dom.TagName.A, { - 'href': '#fullScreen', - 'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen() + var tipLabel = goog.isDef(options.tipLabel) ? + options.tipLabel : 'Toggle full-screen'; + var tip = goog.dom.createDom(goog.dom.TagName.SPAN, { + 'role' : 'tooltip' + }, tipLabel); + + var button = goog.dom.createDom(goog.dom.TagName.BUTTON, { + 'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen() + + ' ol-has-tooltip' }); - goog.events.listen(aElement, [ + goog.dom.appendChild(button, tip); + goog.events.listen(button, [ goog.events.EventType.CLICK, goog.events.EventType.TOUCHEND ], this.handleClick_, false, this); @@ -51,7 +58,7 @@ ol.control.FullScreen = function(opt_options) { 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); + }, button); goog.base(this, { element: element, @@ -76,7 +83,6 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) { if (!goog.dom.fullscreen.isSupported()) { return; } - browserEvent.preventDefault(); var map = this.getMap(); if (goog.isNull(map)) { return;