ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #693 from twpayne/class-name

Browse Source 
Add className option to control options
This commit is contained in:
Tom Payne
2013-05-08 05:35:37 -07:00
parent 96c3a86314 97510ba0be
commit 9286d63133
11 changed files with 46 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/ol.css
+1 -1
View File
@@ -82,7 +82,7 @@ a.ol-full-screen-true:after {
list-style: none; list-style: none;
} }
.ol-mouseposition { .ol-mouse-position {
top: 8px; top: 8px;
right: 8px; right: 8px;
position: absolute; position: absolute;
examples/mouse-position.html
-6
View File
@@ -8,12 +8,6 @@
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Mouse position example</title> <title>Mouse position example</title>
<style type="text/css">
/* Nullify the default .ol-mouseposition rule */
#mouse-position .ol-mouseposition {
position: static;
}
</style>
</head> </head>
<body> <body>
examples/mouse-position.js
+2 -1
View File
@@ -13,8 +13,9 @@ var map = new ol.Map({
new ol.control.MousePosition({ new ol.control.MousePosition({
coordinateFormat: ol.coordinate.toStringHDMS, coordinateFormat: ol.coordinate.toStringHDMS,
projection: 'EPSG:4326', projection: 'EPSG:4326',
// comment the following line to have the mouse position // comment the following two lines to have the mouse position
// be placed within the map. // be placed within the map.
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'), target: document.getElementById('mouse-position'),
undefinedHTML: '&nbsp;' undefinedHTML: '&nbsp;'
}) })
src/objectliterals.jsdoc
+7
View File
@@ -104,6 +104,7 @@
/** /**
* @typedef {Object} ol.control.AttributionOptions * @typedef {Object} ol.control.AttributionOptions
* @property {string|undefined} className Class name.
* @property {ol.Map|undefined} map Map. * @property {ol.Map|undefined} map Map.
* @property {Element|undefined} target Target. * @property {Element|undefined} target Target.
*/ */
@@ -121,6 +122,7 @@
/** /**
* @typedef {Object} ol.control.FullScreenOptions * @typedef {Object} ol.control.FullScreenOptions
* @property {string|undefined} className Class name.
* @property {boolean|undefined} keys Full keyboard access. * @property {boolean|undefined} keys Full keyboard access.
* @property {ol.Map|undefined} map Map. * @property {ol.Map|undefined} map Map.
* @property {Element|undefined} target Target. * @property {Element|undefined} target Target.
@@ -128,12 +130,14 @@
/** /**
* @typedef {Object} ol.control.LogoOptions * @typedef {Object} ol.control.LogoOptions
* @property {string|undefined} className Class name.
* @property {ol.Map|undefined} map Map. * @property {ol.Map|undefined} map Map.
* @property {Element|undefined} target Target. * @property {Element|undefined} target Target.
*/ */
/** /**
* @typedef {Object} ol.control.MousePositionOptions * @typedef {Object} ol.control.MousePositionOptions
* @property {string|undefined} className Class name.
* @property {ol.CoordinateFormatType|undefined} coordinateFormat Coordinate * @property {ol.CoordinateFormatType|undefined} coordinateFormat Coordinate
* format. * format.
* @property {ol.Map|undefined} map Map. * @property {ol.Map|undefined} map Map.
@@ -144,6 +148,7 @@
/** /**
* @typedef {Object} ol.control.ScaleLineOptions * @typedef {Object} ol.control.ScaleLineOptions
* @property {string|undefined} className Class name.
* @property {ol.Map|undefined} map Map. * @property {ol.Map|undefined} map Map.
* @property {number|undefined} minWidth Minimum width in pixels. * @property {number|undefined} minWidth Minimum width in pixels.
* @property {Element|undefined} target Target. * @property {Element|undefined} target Target.
@@ -152,6 +157,7 @@
/** /**
* @typedef {Object} ol.control.ZoomOptions * @typedef {Object} ol.control.ZoomOptions
* @property {string|undefined} className Class name.
* @property {number|undefined} delta Delta. * @property {number|undefined} delta Delta.
* @property {ol.Map|undefined} map Map. * @property {ol.Map|undefined} map Map.
* @property {Element|undefined} target Target. * @property {Element|undefined} target Target.
@@ -159,6 +165,7 @@
/** /**
* @typedef {Object} ol.control.ZoomSliderOptions * @typedef {Object} ol.control.ZoomSliderOptions
* @property {string|undefined} className Class name.
* @property {ol.Map|undefined} map Map. * @property {ol.Map|undefined} map Map.
* @property {number|undefined} maxResolution Maximum resolution. * @property {number|undefined} maxResolution Maximum resolution.
* @property {number|undefined} minResolution Minimum resolution. * @property {number|undefined} minResolution Minimum resolution.
src/ol/control/attributioncontrol.js
+3 -1
View File
@@ -32,8 +32,10 @@ ol.control.Attribution = function(opt_options) {
*/ */
this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL); this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL);
var className = goog.isDef(options.className) ?
options.className : 'ol-attribution';
var element = goog.dom.createDom(goog.dom.TagName.DIV, { var element = goog.dom.createDom(goog.dom.TagName.DIV, {
'class': 'ol-attribution ' + ol.css.CLASS_UNSELECTABLE 'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
}, this.ulElement_); }, this.ulElement_);
goog.base(this, { goog.base(this, {
src/ol/control/fullscreencontrol.js
+2 -1
View File
@@ -26,7 +26,8 @@ ol.control.FullScreen = function(opt_options) {
* @private * @private
* @type {string} * @type {string}
*/ */
this.cssClassName_ = 'ol-full-screen'; this.cssClassName_ = goog.isDef(options.className) ?
options.className : 'ol-full-screen';
var aElement = goog.dom.createDom(goog.dom.TagName.A, { var aElement = goog.dom.createDom(goog.dom.TagName.A, {
'href': '#fullScreen', 'href': '#fullScreen',
src/ol/control/logocontrol.js
+3 -1
View File
@@ -25,8 +25,10 @@ ol.control.Logo = function(opt_options) {
*/ */
this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL); this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL);
var className = goog.isDef(options.className) ? options.className : 'ol-logo';
var element = goog.dom.createDom(goog.dom.TagName.DIV, { var element = goog.dom.createDom(goog.dom.TagName.DIV, {
'class': 'ol-logo ' + ol.css.CLASS_UNSELECTABLE 'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
}, this.ulElement_); }, this.ulElement_);
goog.base(this, { goog.base(this, {
src/ol/control/mousepositioncontrol.js
+4 -1
View File
@@ -27,8 +27,11 @@ ol.control.MousePosition = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {}; var options = goog.isDef(opt_options) ? opt_options : {};
var className = goog.isDef(options.className) ?
options.className : 'ol-mouse-position';
var element = goog.dom.createDom(goog.dom.TagName.DIV, { var element = goog.dom.createDom(goog.dom.TagName.DIV, {
'class': 'ol-mouseposition' 'class': className
}); });
goog.base(this, { goog.base(this, {
src/ol/control/scalelinecontrol.js
+5 -2
View File
@@ -38,12 +38,15 @@ ol.control.ScaleLine = function(opt_options) {
var options = opt_options || {}; var options = opt_options || {};
var className = goog.isDef(options.className) ?
options.className : 'ol-scale-line';
/** /**
* @private * @private
* @type {Element} * @type {Element}
*/ */
this.innerElement_ = goog.dom.createDom(goog.dom.TagName.DIV, { this.innerElement_ = goog.dom.createDom(goog.dom.TagName.DIV, {
'class': 'ol-scale-line-inner' 'class': className + '-inner'
}); });
/** /**
@@ -51,7 +54,7 @@ ol.control.ScaleLine = function(opt_options) {
* @type {Element} * @type {Element}
*/ */
this.element_ = goog.dom.createDom(goog.dom.TagName.DIV, { this.element_ = goog.dom.createDom(goog.dom.TagName.DIV, {
'class': 'ol-scale-line ' + ol.css.CLASS_UNSELECTABLE 'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
}, this.innerElement_); }, this.innerElement_);
/** /**
src/ol/control/zoomcontrol.js
+5 -3
View File
@@ -28,9 +28,11 @@ ol.control.Zoom = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {}; var options = goog.isDef(opt_options) ? opt_options : {};
var className = goog.isDef(options.className) ? options.className : 'ol-zoom';
var inElement = goog.dom.createDom(goog.dom.TagName.A, { var inElement = goog.dom.createDom(goog.dom.TagName.A, {
'href': '#zoomIn', 'href': '#zoomIn',
'class': 'ol-zoom-in' 'class': className + '-in'
}); });
goog.events.listen(inElement, [ goog.events.listen(inElement, [
goog.events.EventType.TOUCHEND, goog.events.EventType.TOUCHEND,
@@ -39,14 +41,14 @@ ol.control.Zoom = function(opt_options) {
var outElement = goog.dom.createDom(goog.dom.TagName.A, { var outElement = goog.dom.createDom(goog.dom.TagName.A, {
'href': '#zoomOut', 'href': '#zoomOut',
'class': 'ol-zoom-out' 'class': className + '-out'
}); });
goog.events.listen(outElement, [ goog.events.listen(outElement, [
goog.events.EventType.TOUCHEND, goog.events.EventType.TOUCHEND,
goog.events.EventType.CLICK goog.events.EventType.CLICK
], this.handleOut_, false, this); ], this.handleOut_, false, this);
var cssClasses = 'ol-zoom ' + ol.css.CLASS_UNSELECTABLE; var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE;
var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, inElement, var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, inElement,
outElement); outElement);
src/ol/control/zoomslidercontrol.js
+14 -44
View File
@@ -31,9 +31,11 @@ ol.control.ZOOMSLIDER_ANIMATION_DURATION = 200;
/** /**
* @constructor * @constructor
* @extends {ol.control.Control} * @extends {ol.control.Control}
* @param {ol.control.ZoomSliderOptions} options Zoom slider options. * @param {ol.control.ZoomSliderOptions=} opt_options Zoom slider options.
*/ */
ol.control.ZoomSlider = function(options) { ol.control.ZoomSlider = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
/** /**
* Will hold the current resolution of the view. * Will hold the current resolution of the view.
@@ -58,17 +60,23 @@ ol.control.ZoomSlider = function(options) {
*/ */
this.draggerListenerKeys_ = null; this.draggerListenerKeys_ = null;
var elem = this.createDom_(); var className = goog.isDef(options.className) ?
this.dragger_ = this.createDraggable_(elem); options.className : 'ol-zoomslider';
var sliderCssCls = className + ' ' + ol.css.CLASS_UNSELECTABLE;
var thumbCssCls = className + '-thumb' + ' ' + ol.css.CLASS_UNSELECTABLE;
var element = goog.dom.createDom(goog.dom.TagName.DIV, sliderCssCls,
goog.dom.createDom(goog.dom.TagName.DIV, thumbCssCls));
this.dragger_ = this.createDraggable_(element);
// FIXME currently only a do nothing function is bound. // FIXME currently only a do nothing function is bound.
goog.events.listen(elem, [ goog.events.listen(element, [
goog.events.EventType.TOUCHEND, goog.events.EventType.TOUCHEND,
goog.events.EventType.CLICK goog.events.EventType.CLICK
], this.handleContainerClick_, false, this); ], this.handleContainerClick_, false, this);
goog.base(this, { goog.base(this, {
element: elem, element: element,
map: options.map map: options.map
}); });
}; };
@@ -86,23 +94,6 @@ ol.control.ZoomSlider.direction = {
}; };
/**
* The CSS class that we'll give the zoomslider container.
*
* @const {string}
*/
ol.control.ZoomSlider.CSS_CLASS_CONTAINER = 'ol-zoomslider';
/**
* The CSS class that we'll give the zoomslider thumb.
*
* @const {string}
*/
ol.control.ZoomSlider.CSS_CLASS_THUMB =
ol.control.ZoomSlider.CSS_CLASS_CONTAINER + '-thumb';
/** /**
* @inheritDoc * @inheritDoc
*/ */
@@ -299,24 +290,3 @@ ol.control.ZoomSlider.prototype.createDraggable_ = function(elem) {
]; ];
return dragger; return dragger;
}; };
/**
* Setup the DOM-structure we need for the zoomslider.
*
* @param {Element=} opt_elem The element for the slider.
* @return {Element} The correctly set up DOMElement.
* @private
*/
ol.control.ZoomSlider.prototype.createDom_ = function(opt_elem) {
var elem,
sliderCssCls = ol.control.ZoomSlider.CSS_CLASS_CONTAINER + ' ' +
ol.css.CLASS_UNSELECTABLE,
thumbCssCls = ol.control.ZoomSlider.CSS_CLASS_THUMB + ' ' +
ol.css.CLASS_UNSELECTABLE;
elem = goog.dom.createDom(goog.dom.TagName.DIV, sliderCssCls,
goog.dom.createDom(goog.dom.TagName.DIV, thumbCssCls));
return elem;
};