From 8c396e5afbc0e3f4357ae86343b3df5b994772a2 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:17:13 +0200 Subject: [PATCH 01/11] Add className option to ol.control.Attribution --- src/objectliterals.jsdoc | 1 + src/ol/control/attributioncontrol.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 0daa8e4243..9a3a155a51 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. */ 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, { From f08814250ef5d9e6c84727debe6466a66ad29f1b Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:17:35 +0200 Subject: [PATCH 02/11] Add className option to ol.control.FullScreen --- src/objectliterals.jsdoc | 1 + src/ol/control/fullscreencontrol.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 9a3a155a51..25599fe8db 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -122,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. 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', From 525d5c53370c87683fb1c222ef8f2779a86643b3 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:17:51 +0200 Subject: [PATCH 03/11] Add className option to ol.control.Logo --- src/objectliterals.jsdoc | 1 + src/ol/control/logocontrol.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 25599fe8db..4b0b332387 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -130,6 +130,7 @@ /** * @typedef {Object} ol.control.LogoOptions + * @property {string|undefined} className Class name. * @property {ol.Map|undefined} map Map. * @property {Element|undefined} target Target. */ 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, { From f31a4f8549ebd1d7908480d0081063cf9fd032b2 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:18:05 +0200 Subject: [PATCH 04/11] Add className option to ol.control.MousePosition --- src/objectliterals.jsdoc | 1 + src/ol/control/mousepositioncontrol.js | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 4b0b332387..91868cd9a4 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -137,6 +137,7 @@ /** * @typedef {Object} ol.control.MousePositionOptions + * @property {string|undefined} className Class name. * @property {ol.CoordinateFormatType|undefined} coordinateFormat Coordinate * format. * @property {ol.Map|undefined} map Map. diff --git a/src/ol/control/mousepositioncontrol.js b/src/ol/control/mousepositioncontrol.js index b4ce9361b9..3e77966ebe 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-mouseposition'; + var element = goog.dom.createDom(goog.dom.TagName.DIV, { - 'class': 'ol-mouseposition' + 'class': className }); goog.base(this, { From 09feaedd00eddb7b9db4fdc68ed74536ccb30072 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:19:21 +0200 Subject: [PATCH 05/11] Add className option to ol.control.ScaleLine --- src/objectliterals.jsdoc | 1 + src/ol/control/scalelinecontrol.js | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 91868cd9a4..fa2369f390 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -148,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. 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_); /** From b7e2a9b40eaabd80e0c2249ad70bb8072aa0954f Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:19:50 +0200 Subject: [PATCH 06/11] Add className option to ol.control.Zoom --- src/objectliterals.jsdoc | 1 + src/ol/control/zoomcontrol.js | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index fa2369f390..25d1eb3a79 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -157,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. 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); From ab9fc9cc710dba16d628bb38e9f7f8890c927323 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:28:22 +0200 Subject: [PATCH 07/11] Inline simple function that is only called once --- src/ol/control/zoomslidercontrol.js | 35 +++++++++-------------------- 1 file changed, 10 insertions(+), 25 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 5af6be81e6..a4281cfed1 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -58,17 +58,23 @@ ol.control.ZoomSlider = function(options) { */ this.draggerListenerKeys_ = null; - var elem = this.createDom_(); - this.dragger_ = this.createDraggable_(elem); + var sliderCssCls = ol.control.ZoomSlider.CSS_CLASS_CONTAINER + ' ' + + ol.css.CLASS_UNSELECTABLE; + var thumbCssCls = ol.control.ZoomSlider.CSS_CLASS_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 }); }; @@ -299,24 +305,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; -}; From 9c59116dd193034d9fabb6059353674423aa64e5 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:31:39 +0200 Subject: [PATCH 08/11] Make zoom slider control options optional --- src/ol/control/zoomslidercontrol.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index a4281cfed1..3aeaf275fc 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. From b698b1736f058226e32685a9220bcb71cdfd1f10 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 16:36:25 +0200 Subject: [PATCH 09/11] Add className option to ol.control.ZoomSlider --- src/objectliterals.jsdoc | 1 + src/ol/control/zoomslidercontrol.js | 25 ++++--------------------- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 25d1eb3a79..d4423fa0f5 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -165,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/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 3aeaf275fc..4c6908d2c6 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -60,10 +60,10 @@ ol.control.ZoomSlider = function(opt_options) { */ this.draggerListenerKeys_ = null; - var sliderCssCls = ol.control.ZoomSlider.CSS_CLASS_CONTAINER + ' ' + - ol.css.CLASS_UNSELECTABLE; - var thumbCssCls = ol.control.ZoomSlider.CSS_CLASS_THUMB + ' ' + - ol.css.CLASS_UNSELECTABLE; + 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)); @@ -94,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 */ From 2ad5dea737d12b5649477cc29cf28ccd4f5e684e Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 17:31:26 +0200 Subject: [PATCH 10/11] Rename ol-mouseposition to ol-mouse-position --- css/ol.css | 2 +- examples/mouse-position.html | 4 ++-- src/ol/control/mousepositioncontrol.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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..4bcd30b47f 100644 --- a/examples/mouse-position.html +++ b/examples/mouse-position.html @@ -9,8 +9,8 @@ Mouse position example diff --git a/src/ol/control/mousepositioncontrol.js b/src/ol/control/mousepositioncontrol.js index 3e77966ebe..5b3c5575ed 100644 --- a/src/ol/control/mousepositioncontrol.js +++ b/src/ol/control/mousepositioncontrol.js @@ -28,7 +28,7 @@ ol.control.MousePosition = function(opt_options) { var options = goog.isDef(opt_options) ? opt_options : {}; var className = goog.isDef(options.className) ? - options.className : 'ol-mouseposition'; + options.className : 'ol-mouse-position'; var element = goog.dom.createDom(goog.dom.TagName.DIV, { 'class': className From 97510ba0be665c3431b3f2f0fdafef2130909323 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Tue, 7 May 2013 17:33:33 +0200 Subject: [PATCH 11/11] Use className in mouse position example --- examples/mouse-position.html | 6 ------ examples/mouse-position.js | 3 ++- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/examples/mouse-position.html b/examples/mouse-position.html index 4bcd30b47f..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: ' ' })