Add label option to FullScreen control

This commit is contained in:
tsauerwein
2015-01-15 10:59:59 +01:00
parent 0d26a9aa87
commit 7679069520
4 changed files with 43 additions and 15 deletions
-6
View File
@@ -120,12 +120,6 @@
.ol-zoom .ol-zoom-out { .ol-zoom .ol-zoom-out {
border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
} }
button.ol-full-screen-false:after {
content: "\2194";
}
button.ol-full-screen-true:after {
content: "\00d7";
}
.ol-attribution { .ol-attribution {
+19
View File
@@ -980,6 +980,8 @@ olx.control.DefaultsOptions.prototype.zoomOptions;
/** /**
* @typedef {{className: (string|undefined), * @typedef {{className: (string|undefined),
* label: (string|undefined),
* labelActive: (string|undefined),
* tipLabel: (string|undefined), * tipLabel: (string|undefined),
* keys: (boolean|undefined), * keys: (boolean|undefined),
* target: (Element|undefined)}} * target: (Element|undefined)}}
@@ -996,6 +998,23 @@ olx.control.FullScreenOptions;
olx.control.FullScreenOptions.prototype.className; 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` * Text label to use for the button tip. Default is `Toggle full-screen`
* @type {string|undefined} * @type {string|undefined}
+23 -7
View File
@@ -3,7 +3,6 @@ goog.provide('ol.control.FullScreen');
goog.require('goog.asserts'); goog.require('goog.asserts');
goog.require('goog.dom'); goog.require('goog.dom');
goog.require('goog.dom.TagName'); goog.require('goog.dom.TagName');
goog.require('goog.dom.classlist');
goog.require('goog.dom.fullscreen'); goog.require('goog.dom.fullscreen');
goog.require('goog.dom.fullscreen.EventType'); goog.require('goog.dom.fullscreen.EventType');
goog.require('goog.events'); goog.require('goog.events');
@@ -37,13 +36,33 @@ ol.control.FullScreen = function(opt_options) {
this.cssClassName_ = goog.isDef(options.className) ? this.cssClassName_ = goog.isDef(options.className) ?
options.className : 'ol-full-screen'; 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) ? var tipLabel = goog.isDef(options.tipLabel) ?
options.tipLabel : 'Toggle full-screen'; options.tipLabel : 'Toggle full-screen';
var button = goog.dom.createDom(goog.dom.TagName.BUTTON, { var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen(), 'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen(),
'type': 'button', 'type': 'button',
'title': tipLabel 'title': tipLabel
}); }, this.labelNode_);
goog.events.listen(button, goog.events.EventType.CLICK, goog.events.listen(button, goog.events.EventType.CLICK,
this.handleClick_, false, this); this.handleClick_, false, this);
@@ -120,14 +139,11 @@ ol.control.FullScreen.prototype.handleFullScreen_ = function() {
* @private * @private
*/ */
ol.control.FullScreen.prototype.handleFullScreenChange_ = function() { 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(); var map = this.getMap();
if (goog.dom.fullscreen.isFullScreen()) { if (goog.dom.fullscreen.isFullScreen()) {
goog.dom.classlist.swap(anchor, closed, opened); goog.dom.replaceNode(this.labelActiveNode_, this.labelNode_);
} else { } else {
goog.dom.classlist.swap(anchor, opened, closed); goog.dom.replaceNode(this.labelNode_, this.labelActiveNode_);
} }
if (!goog.isNull(map)) { if (!goog.isNull(map)) {
map.updateSize(); map.updateSize();
+1 -2
View File
@@ -32,8 +32,7 @@ ol.control.ZoomToExtent = function(opt_options) {
var className = goog.isDef(options.className) ? options.className : var className = goog.isDef(options.className) ? options.className :
'ol-zoom-extent'; 'ol-zoom-extent';
var label = goog.isDef(options.label) ? var label = goog.isDef(options.label) ? options.label : 'E';
options.label : 'E';
var tipLabel = goog.isDef(options.tipLabel) ? var tipLabel = goog.isDef(options.tipLabel) ?
options.tipLabel : 'Fit to extent'; options.tipLabel : 'Fit to extent';
var button = goog.dom.createDom(goog.dom.TagName.BUTTON, { var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {