diff --git a/css/ol.css b/css/ol.css index 6672d9e46d..c5b94eb80b 100644 --- a/css/ol.css +++ b/css/ol.css @@ -120,12 +120,6 @@ .ol-zoom .ol-zoom-out { border-radius: 0 0 2px 2px; } -button.ol-full-screen-false:after { - content: "\2194"; -} -button.ol-full-screen-true:after { - content: "\00d7"; -} .ol-attribution { diff --git a/externs/olx.js b/externs/olx.js index 8a47680672..0d0130ba82 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -980,6 +980,8 @@ olx.control.DefaultsOptions.prototype.zoomOptions; /** * @typedef {{className: (string|undefined), + * label: (string|undefined), + * labelActive: (string|undefined), * tipLabel: (string|undefined), * keys: (boolean|undefined), * target: (Element|undefined)}} @@ -996,6 +998,23 @@ olx.control.FullScreenOptions; olx.control.FullScreenOptions.prototype.className; +/** + * Text label to use for the button. Default is `\u2194` (an arrow). + * @type {string|undefined} + * @api + */ +olx.control.FullScreenOptions.prototype.label; + + +/** + * Text label to use for the button when full-screen is active. + * Default is `\u00d7` (a cross). + * @type {string|undefined} + * @api + */ +olx.control.FullScreenOptions.prototype.labelActive; + + /** * Text label to use for the button tip. Default is `Toggle full-screen` * @type {string|undefined} diff --git a/src/ol/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js index 8b688e38f2..2088952804 100644 --- a/src/ol/control/fullscreencontrol.js +++ b/src/ol/control/fullscreencontrol.js @@ -3,7 +3,6 @@ goog.provide('ol.control.FullScreen'); goog.require('goog.asserts'); goog.require('goog.dom'); goog.require('goog.dom.TagName'); -goog.require('goog.dom.classlist'); goog.require('goog.dom.fullscreen'); goog.require('goog.dom.fullscreen.EventType'); goog.require('goog.events'); @@ -37,13 +36,33 @@ ol.control.FullScreen = function(opt_options) { this.cssClassName_ = goog.isDef(options.className) ? options.className : 'ol-full-screen'; + var label = goog.isDef(options.label) ? + options.label : '\u2194'; + + /** + * @private + * @type {Node} + */ + this.labelNode_ = /** @type {Node} */ (goog.isString(label) ? + goog.dom.createTextNode(label) : label); + + var labelActive = goog.isDef(options.labelActive) ? + options.labelActive : '\u00d7'; + + /** + * @private + * @type {Node} + */ + this.labelActiveNode_ = /** @type {Node} */ (goog.isString(labelActive) ? + goog.dom.createTextNode(labelActive) : labelActive); + var tipLabel = goog.isDef(options.tipLabel) ? options.tipLabel : 'Toggle full-screen'; var button = goog.dom.createDom(goog.dom.TagName.BUTTON, { 'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen(), 'type': 'button', 'title': tipLabel - }); + }, this.labelNode_); goog.events.listen(button, goog.events.EventType.CLICK, this.handleClick_, false, this); @@ -120,14 +139,11 @@ ol.control.FullScreen.prototype.handleFullScreen_ = function() { * @private */ ol.control.FullScreen.prototype.handleFullScreenChange_ = function() { - var opened = this.cssClassName_ + '-true'; - var closed = this.cssClassName_ + '-false'; - var anchor = goog.dom.getFirstElementChild(this.element); var map = this.getMap(); if (goog.dom.fullscreen.isFullScreen()) { - goog.dom.classlist.swap(anchor, closed, opened); + goog.dom.replaceNode(this.labelActiveNode_, this.labelNode_); } else { - goog.dom.classlist.swap(anchor, opened, closed); + goog.dom.replaceNode(this.labelNode_, this.labelActiveNode_); } if (!goog.isNull(map)) { map.updateSize(); diff --git a/src/ol/control/zoomtoextentcontrol.js b/src/ol/control/zoomtoextentcontrol.js index 1c592c7ec0..52053fecb2 100644 --- a/src/ol/control/zoomtoextentcontrol.js +++ b/src/ol/control/zoomtoextentcontrol.js @@ -32,8 +32,7 @@ ol.control.ZoomToExtent = function(opt_options) { var className = goog.isDef(options.className) ? options.className : 'ol-zoom-extent'; - var label = goog.isDef(options.label) ? - options.label : 'E'; + var label = goog.isDef(options.label) ? options.label : 'E'; var tipLabel = goog.isDef(options.tipLabel) ? options.tipLabel : 'Fit to extent'; var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {