From 1aa33085c17e1af6fcc2918fbfd8c24c402af91b Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 16:15:59 +0300 Subject: [PATCH 01/12] add CSS class name support for zoom buttons --- src/ol/control/Zoom.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index b2ac5dae04..cfc3e16414 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -10,6 +10,8 @@ import {easeOut} from '../easing.js'; * @typedef {Object} Options * @property {number} [duration=250] Animation duration in milliseconds. * @property {string} [className='ol-zoom'] CSS class name. + * @property {string} [zoomInClassName=className + '-in'] CSS class name for the zoom-in button. + * @property {string} [zoomOutClassName=className + '-out'] CSS class name for the zoom-out button. * @property {string|HTMLElement} [zoomInLabel='+'] Text label to use for the zoom-in * button. Instead of text, also an element (e.g. a `span` element) can be used. * @property {string|HTMLElement} [zoomOutLabel='-'] Text label to use for the zoom-out button. @@ -46,6 +48,11 @@ class Zoom extends Control { const delta = options.delta !== undefined ? options.delta : 1; + const zoomInClassName = + options.zoomInClassName !== undefined ? options.zoomInClassName : className + '-in'; + const zoomOutClassName = + options.zoomOutClassName !== undefined ? options.zoomOutClassName : className + '-out'; + const zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+'; const zoomOutLabel = @@ -59,7 +66,7 @@ class Zoom extends Control { : 'Zoom out'; const inElement = document.createElement('button'); - inElement.className = className + '-in'; + inElement.className = zoomInClassName; inElement.setAttribute('type', 'button'); inElement.title = zoomInTipLabel; inElement.appendChild( @@ -75,7 +82,7 @@ class Zoom extends Control { ); const outElement = document.createElement('button'); - outElement.className = className + '-out'; + outElement.className = zoomOutClassName; outElement.setAttribute('type', 'button'); outElement.title = zoomOutTipLabel; outElement.appendChild( From 763629382ee809f24ecf6aca44b426650284c807 Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 16:36:08 +0300 Subject: [PATCH 02/12] format code --- src/ol/control/Zoom.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index cfc3e16414..b420508daa 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -49,9 +49,13 @@ class Zoom extends Control { const delta = options.delta !== undefined ? options.delta : 1; const zoomInClassName = - options.zoomInClassName !== undefined ? options.zoomInClassName : className + '-in'; + options.zoomInClassName !== undefined + ? options.zoomInClassName + : className + '-in'; const zoomOutClassName = - options.zoomOutClassName !== undefined ? options.zoomOutClassName : className + '-out'; + options.zoomOutClassName !== undefined + ? options.zoomOutClassName + : className + '-out'; const zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+'; From fe3295b46940d0aae9066f245c2ae5126f7c9aaa Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 16:40:45 +0300 Subject: [PATCH 03/12] format code --- src/ol/control/Zoom.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index b420508daa..27a37db573 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -50,11 +50,11 @@ class Zoom extends Control { const zoomInClassName = options.zoomInClassName !== undefined - ? options.zoomInClassName + ? options.zoomInClassName : className + '-in'; const zoomOutClassName = - options.zoomOutClassName !== undefined - ? options.zoomOutClassName + options.zoomOutClassName !== undefined + ? options.zoomOutClassName : className + '-out'; const zoomInLabel = From ebf0d87aa8661155fcc5c5e398dc5a223f744e0f Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 20:06:28 +0300 Subject: [PATCH 04/12] add CSS class name support for attribution button --- src/ol/control/Attribution.js | 16 ++++++++++++++++ src/ol/control/Zoom.js | 4 ++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index 12eb3c570d..9405c58193 100644 --- a/src/ol/control/Attribution.js +++ b/src/ol/control/Attribution.js @@ -23,9 +23,13 @@ import {removeChildren, replaceNode} from '../dom.js'; * @property {string} [label='i'] Text label to use for the * collapsed attributions button. * Instead of text, also an element (e.g. a `span` element) can be used. + * @property {string} [expandClassName==className + '-expand'] CSS class name for the + * collapsed attributions button. * @property {string|HTMLElement} [collapseLabel='»'] Text label to use * for the expanded attributions button. * Instead of text, also an element (e.g. a `span` element) can be used. + * @property {string} [collapseClassName==className + '-collapse'] CSS class name for the + * expanded attributions button. * @property {function(import("../MapEvent.js").default):void} [render] Function called when * the control should be re-rendered. This is called in a `requestAnimationFrame` * callback. @@ -89,9 +93,19 @@ class Attribution extends Control { const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Attributions'; + const expandClassName = + options.expandClassName !== undefined + ? options.expandClassName + : (className + '-expand'); + const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB'; + const collapseClassName = + options.collapseClassName !== undefined + ? options.collapseClassName + : (className + '-collpase'); + if (typeof collapseLabel === 'string') { /** * @private @@ -99,6 +113,7 @@ class Attribution extends Control { */ this.collapseLabel_ = document.createElement('span'); this.collapseLabel_.textContent = collapseLabel; + this.collapseLabel_.className = collapseClassName; } else { this.collapseLabel_ = collapseLabel; } @@ -112,6 +127,7 @@ class Attribution extends Control { */ this.label_ = document.createElement('span'); this.label_.textContent = label; + this.label_.className = expandClassName; } else { this.label_ = label; } diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index 27a37db573..886dca9e86 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -51,11 +51,11 @@ class Zoom extends Control { const zoomInClassName = options.zoomInClassName !== undefined ? options.zoomInClassName - : className + '-in'; + : (className + '-in'); const zoomOutClassName = options.zoomOutClassName !== undefined ? options.zoomOutClassName - : className + '-out'; + : (className + '-out'); const zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+'; From ec1a87443d99c8f7ed71b433d3438437f40bc825 Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 20:09:27 +0300 Subject: [PATCH 05/12] format code --- src/ol/control/Attribution.js | 4 ++-- src/ol/control/Zoom.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index 9405c58193..ddc6146f76 100644 --- a/src/ol/control/Attribution.js +++ b/src/ol/control/Attribution.js @@ -96,7 +96,7 @@ class Attribution extends Control { const expandClassName = options.expandClassName !== undefined ? options.expandClassName - : (className + '-expand'); + : className + '-expand'; const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB'; @@ -104,7 +104,7 @@ class Attribution extends Control { const collapseClassName = options.collapseClassName !== undefined ? options.collapseClassName - : (className + '-collpase'); + : className + '-collpase'; if (typeof collapseLabel === 'string') { /** diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index 886dca9e86..27a37db573 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -51,11 +51,11 @@ class Zoom extends Control { const zoomInClassName = options.zoomInClassName !== undefined ? options.zoomInClassName - : (className + '-in'); + : className + '-in'; const zoomOutClassName = options.zoomOutClassName !== undefined ? options.zoomOutClassName - : (className + '-out'); + : className + '-out'; const zoomInLabel = options.zoomInLabel !== undefined ? options.zoomInLabel : '+'; From fd264f86a6cf5a47951a99ede38b8db84962074a Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 20:11:37 +0300 Subject: [PATCH 06/12] format code --- src/ol/control/Attribution.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index ddc6146f76..d87707e81b 100644 --- a/src/ol/control/Attribution.js +++ b/src/ol/control/Attribution.js @@ -95,16 +95,16 @@ class Attribution extends Control { const expandClassName = options.expandClassName !== undefined - ? options.expandClassName - : className + '-expand'; + ? options.expandClassName + : className + '-expand'; const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB'; const collapseClassName = options.collapseClassName !== undefined - ? options.collapseClassName - : className + '-collpase'; + ? options.collapseClassName + : className + '-collpase'; if (typeof collapseLabel === 'string') { /** From 97568b21cd2776a6f16b37cb94fca2ca41bb2f37 Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 20:14:16 +0300 Subject: [PATCH 07/12] remove typos --- src/ol/control/Attribution.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index d87707e81b..49cb323246 100644 --- a/src/ol/control/Attribution.js +++ b/src/ol/control/Attribution.js @@ -23,12 +23,12 @@ import {removeChildren, replaceNode} from '../dom.js'; * @property {string} [label='i'] Text label to use for the * collapsed attributions button. * Instead of text, also an element (e.g. a `span` element) can be used. - * @property {string} [expandClassName==className + '-expand'] CSS class name for the + * @property {string} [expandClassName=className + '-expand'] CSS class name for the * collapsed attributions button. * @property {string|HTMLElement} [collapseLabel='»'] Text label to use * for the expanded attributions button. * Instead of text, also an element (e.g. a `span` element) can be used. - * @property {string} [collapseClassName==className + '-collapse'] CSS class name for the + * @property {string} [collapseClassName=className + '-collapse'] CSS class name for the * expanded attributions button. * @property {function(import("../MapEvent.js").default):void} [render] Function called when * the control should be re-rendered. This is called in a `requestAnimationFrame` From c53ff622f2c92a655b8e455a01cababf09a34099 Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 20:32:26 +0300 Subject: [PATCH 08/12] add CSS class name support for rotate button --- src/ol/control/Rotate.js | 10 ++++++++-- src/ol/control/Zoom.js | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/ol/control/Rotate.js b/src/ol/control/Rotate.js index 3c4043451a..b1a3a0161b 100644 --- a/src/ol/control/Rotate.js +++ b/src/ol/control/Rotate.js @@ -12,6 +12,7 @@ import {easeOut} from '../easing.js'; * @property {string|HTMLElement} [label='⇧'] Text label to use for the rotate button. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [tipLabel='Reset rotation'] Text label to use for the rotate tip. + * @property {string} [compassClassName='ol-compass'] CSS class name for the compass. * @property {number} [duration=250] Animation duration in milliseconds. * @property {boolean} [autoHide=true] Hide the control when rotation is 0. * @property {function(import("../MapEvent.js").default):void} [render] Function called when the control should @@ -48,6 +49,11 @@ class Rotate extends Control { const label = options.label !== undefined ? options.label : '\u21E7'; + const compassClassName = + options.compassClassName !== undefined + ? options.compassClassName + : 'ol-comapss'; + /** * @type {HTMLElement} * @private @@ -56,11 +62,11 @@ class Rotate extends Control { if (typeof label === 'string') { this.label_ = document.createElement('span'); - this.label_.className = 'ol-compass'; + this.label_.className = compassClassName; this.label_.textContent = label; } else { this.label_ = label; - this.label_.classList.add('ol-compass'); + this.label_.classList.add(compassClassName); } const tipLabel = options.tipLabel ? options.tipLabel : 'Reset rotation'; diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index 27a37db573..f386f3b9b6 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -52,6 +52,7 @@ class Zoom extends Control { options.zoomInClassName !== undefined ? options.zoomInClassName : className + '-in'; + const zoomOutClassName = options.zoomOutClassName !== undefined ? options.zoomOutClassName From 7cbdf16a6437af24e0e83fa6d1bbbc0582515f11 Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 20:34:54 +0300 Subject: [PATCH 09/12] format code --- src/ol/control/Zoom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index f386f3b9b6..268c293c14 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -52,7 +52,7 @@ class Zoom extends Control { options.zoomInClassName !== undefined ? options.zoomInClassName : className + '-in'; - + const zoomOutClassName = options.zoomOutClassName !== undefined ? options.zoomOutClassName From bd22d427ab3596c979c518d64e7b350067612eb9 Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 21:23:16 +0300 Subject: [PATCH 10/12] add CSS class name support for full-screen button --- src/ol/control/FullScreen.js | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js index 0cd11711e2..eb915f40d6 100644 --- a/src/ol/control/FullScreen.js +++ b/src/ol/control/FullScreen.js @@ -39,6 +39,10 @@ const FullScreenEventType = { * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string|Text} [labelActive='\u00d7'] Text label to use for the * button when full-screen is active. + * @property {string} [activeClassName=className + '-true'] CSS class name for the button + * when full-screen is active. + * @property {string} [inactiveClassName=className + '-false'] CSS class name for the button + * when full-screen is inactive. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [tipLabel='Toggle full-screen'] Text label to use for the button tip. * @property {boolean} [keys=false] Full keyboard access. @@ -83,6 +87,24 @@ class FullScreen extends Control { this.cssClassName_ = options.className !== undefined ? options.className : 'ol-full-screen'; + /** + * @private + * @type {string} + */ + this.activeClassName_ = + options.activeClassName !== undefined + ? options.activeClassName.split(' ') + : [this.cssClassName_ + '-true']; + + /** + * @private + * @type {string} + */ + this.inactiveClassName_ = + options.inactiveClassName !== undefined + ? options.inactiveClassName.split(' ') + : [this.cssClassName_ + '-false']; + const label = options.label !== undefined ? options.label : '\u2922'; /** @@ -212,12 +234,12 @@ class FullScreen extends Control { * @private */ setClassName_(element, fullscreen) { - const activeClassName = this.cssClassName_ + '-true'; - const inactiveClassName = this.cssClassName_ + '-false'; + const activeClassName = this.activeClassName_; + const inactiveClassName = this.inactiveClassName_; const nextClassName = fullscreen ? activeClassName : inactiveClassName; - element.classList.remove(activeClassName); - element.classList.remove(inactiveClassName); - element.classList.add(nextClassName); + element.classList.remove(...activeClassName); + element.classList.remove(...inactiveClassName); + element.classList.add(...nextClassName); } /** From 2a683a26729611c5dfd5ce4f2f6d35a390e7512a Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 21:27:13 +0300 Subject: [PATCH 11/12] format code --- src/ol/control/FullScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js index eb915f40d6..ad84c83168 100644 --- a/src/ol/control/FullScreen.js +++ b/src/ol/control/FullScreen.js @@ -102,8 +102,8 @@ class FullScreen extends Control { */ this.inactiveClassName_ = options.inactiveClassName !== undefined - ? options.inactiveClassName.split(' ') - : [this.cssClassName_ + '-false']; + ? options.inactiveClassName.split(' ') + : [this.cssClassName_ + '-false']; const label = options.label !== undefined ? options.label : '\u2922'; From 49f883664ae6677e2dd3a49eec47d0688ccf7c84 Mon Sep 17 00:00:00 2001 From: Mihai CAZACU Date: Thu, 6 Aug 2020 21:30:10 +0300 Subject: [PATCH 12/12] fix comments --- src/ol/control/FullScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js index ad84c83168..05002b01a4 100644 --- a/src/ol/control/FullScreen.js +++ b/src/ol/control/FullScreen.js @@ -89,7 +89,7 @@ class FullScreen extends Control { /** * @private - * @type {string} + * @type {Array} */ this.activeClassName_ = options.activeClassName !== undefined @@ -98,7 +98,7 @@ class FullScreen extends Control { /** * @private - * @type {string} + * @type {Array} */ this.inactiveClassName_ = options.inactiveClassName !== undefined