diff --git a/css/ol.css b/css/ol.css index 4e73a667ef..5fdca84a9e 100644 --- a/css/ol.css +++ b/css/ol.css @@ -82,7 +82,7 @@ a.ol-full-screen-true:after { list-style: none; } -.ol-mouseposition { +.ol-mouse-position { top: 8px; right: 8px; position: absolute; diff --git a/examples/mouse-position.html b/examples/mouse-position.html index 5cdf3e36b1..74f85c76f1 100644 --- a/examples/mouse-position.html +++ b/examples/mouse-position.html @@ -8,12 +8,6 @@ Mouse position example - diff --git a/examples/mouse-position.js b/examples/mouse-position.js index dc3a2163f7..36d6615ec4 100644 --- a/examples/mouse-position.js +++ b/examples/mouse-position.js @@ -13,8 +13,9 @@ var map = new ol.Map({ new ol.control.MousePosition({ coordinateFormat: ol.coordinate.toStringHDMS, 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. + className: 'custom-mouse-position', target: document.getElementById('mouse-position'), undefinedHTML: ' ' }) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 0daa8e4243..d4423fa0f5 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -104,6 +104,7 @@ /** * @typedef {Object} ol.control.AttributionOptions + * @property {string|undefined} className Class name. * @property {ol.Map|undefined} map Map. * @property {Element|undefined} target Target. */ @@ -121,6 +122,7 @@ /** * @typedef {Object} ol.control.FullScreenOptions + * @property {string|undefined} className Class name. * @property {boolean|undefined} keys Full keyboard access. * @property {ol.Map|undefined} map Map. * @property {Element|undefined} target Target. @@ -128,12 +130,14 @@ /** * @typedef {Object} ol.control.LogoOptions + * @property {string|undefined} className Class name. * @property {ol.Map|undefined} map Map. * @property {Element|undefined} target Target. */ /** * @typedef {Object} ol.control.MousePositionOptions + * @property {string|undefined} className Class name. * @property {ol.CoordinateFormatType|undefined} coordinateFormat Coordinate * format. * @property {ol.Map|undefined} map Map. @@ -144,6 +148,7 @@ /** * @typedef {Object} ol.control.ScaleLineOptions + * @property {string|undefined} className Class name. * @property {ol.Map|undefined} map Map. * @property {number|undefined} minWidth Minimum width in pixels. * @property {Element|undefined} target Target. @@ -152,6 +157,7 @@ /** * @typedef {Object} ol.control.ZoomOptions + * @property {string|undefined} className Class name. * @property {number|undefined} delta Delta. * @property {ol.Map|undefined} map Map. * @property {Element|undefined} target Target. @@ -159,6 +165,7 @@ /** * @typedef {Object} ol.control.ZoomSliderOptions + * @property {string|undefined} className Class name. * @property {ol.Map|undefined} map Map. * @property {number|undefined} maxResolution Maximum resolution. * @property {number|undefined} minResolution Minimum resolution. diff --git a/src/ol/control/attributioncontrol.js b/src/ol/control/attributioncontrol.js index b9a77aafb9..701cf77095 100644 --- a/src/ol/control/attributioncontrol.js +++ b/src/ol/control/attributioncontrol.js @@ -32,8 +32,10 @@ ol.control.Attribution = function(opt_options) { */ 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, { - 'class': 'ol-attribution ' + ol.css.CLASS_UNSELECTABLE + 'class': className + ' ' + ol.css.CLASS_UNSELECTABLE }, this.ulElement_); goog.base(this, { diff --git a/src/ol/control/fullscreencontrol.js b/src/ol/control/fullscreencontrol.js index 0f552aba63..e35049c532 100644 --- a/src/ol/control/fullscreencontrol.js +++ b/src/ol/control/fullscreencontrol.js @@ -26,7 +26,8 @@ ol.control.FullScreen = function(opt_options) { * @private * @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, { 'href': '#fullScreen', diff --git a/src/ol/control/logocontrol.js b/src/ol/control/logocontrol.js index a58da6c44a..7638846cc8 100644 --- a/src/ol/control/logocontrol.js +++ b/src/ol/control/logocontrol.js @@ -25,8 +25,10 @@ ol.control.Logo = function(opt_options) { */ 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, { - 'class': 'ol-logo ' + ol.css.CLASS_UNSELECTABLE + 'class': className + ' ' + ol.css.CLASS_UNSELECTABLE }, this.ulElement_); goog.base(this, { diff --git a/src/ol/control/mousepositioncontrol.js b/src/ol/control/mousepositioncontrol.js index b4ce9361b9..5b3c5575ed 100644 --- a/src/ol/control/mousepositioncontrol.js +++ b/src/ol/control/mousepositioncontrol.js @@ -27,8 +27,11 @@ ol.control.MousePosition = function(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, { - 'class': 'ol-mouseposition' + 'class': className }); goog.base(this, { diff --git a/src/ol/control/scalelinecontrol.js b/src/ol/control/scalelinecontrol.js index 37f779a2f0..292de41ac3 100644 --- a/src/ol/control/scalelinecontrol.js +++ b/src/ol/control/scalelinecontrol.js @@ -38,12 +38,15 @@ ol.control.ScaleLine = function(opt_options) { var options = opt_options || {}; + var className = goog.isDef(options.className) ? + options.className : 'ol-scale-line'; + /** * @private * @type {Element} */ 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} */ 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_); /** diff --git a/src/ol/control/zoomcontrol.js b/src/ol/control/zoomcontrol.js index c4a7422f01..89b5edc30a 100644 --- a/src/ol/control/zoomcontrol.js +++ b/src/ol/control/zoomcontrol.js @@ -28,9 +28,11 @@ ol.control.Zoom = function(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, { 'href': '#zoomIn', - 'class': 'ol-zoom-in' + 'class': className + '-in' }); goog.events.listen(inElement, [ goog.events.EventType.TOUCHEND, @@ -39,14 +41,14 @@ ol.control.Zoom = function(opt_options) { var outElement = goog.dom.createDom(goog.dom.TagName.A, { 'href': '#zoomOut', - 'class': 'ol-zoom-out' + 'class': className + '-out' }); goog.events.listen(outElement, [ goog.events.EventType.TOUCHEND, goog.events.EventType.CLICK ], 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, outElement); diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 5af6be81e6..4c6908d2c6 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -31,9 +31,11 @@ ol.control.ZOOMSLIDER_ANIMATION_DURATION = 200; /** * @constructor * @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. @@ -58,17 +60,23 @@ ol.control.ZoomSlider = function(options) { */ this.draggerListenerKeys_ = null; - var elem = this.createDom_(); - this.dragger_ = this.createDraggable_(elem); + var className = goog.isDef(options.className) ? + 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. - goog.events.listen(elem, [ + goog.events.listen(element, [ goog.events.EventType.TOUCHEND, goog.events.EventType.CLICK ], this.handleContainerClick_, false, this); goog.base(this, { - element: elem, + element: element, 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 */ @@ -299,24 +290,3 @@ ol.control.ZoomSlider.prototype.createDraggable_ = function(elem) { ]; 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; -};