Cleanup ScaleLine code

src/ol/control/ScaleLine.js

@@ -334,12 +334,9 @@ class ScaleLine extends Control {
       previousDecimalCount = decimalCount;
       ++i;
     }
-    let html;
+    const html = this.scaleBar_
-    if (this.scaleBar_) {
+      ? this.createScaleBar(width, count, suffix)
-      html = this.createScaleBar(width, count, suffix);
+      : count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;
-    } else {
-      html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;
-    }
 
     if (this.renderedHTML_ != html) {
       this.innerElement_.innerHTML = html;
@@ -367,85 +364,49 @@ class ScaleLine extends Control {
   createScaleBar(width, scale, suffix) {
     const mapScale =
       '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
-    const scaleSteps = [];
+    const steps = this.scaleBarSteps_;
-    const stepWidth = width / this.scaleBarSteps_;
+    const stepWidth = width / steps;
-    let backgroundColor = 'ol-scale-singlebar-odd';
+    const scaleSteps = [this.createMarker('absolute')];
-    for (let i = 0; i < this.scaleBarSteps_; i++) {
+    for (let i = 0; i < steps; ++i) {
-      if (i === 0) {
+      const cls =
-        // create the first marker at position 0
+        i % 2 === 0 ? 'ol-scale-singlebar-odd' : 'ol-scale-singlebar-even';
-        scaleSteps.push(this.createMarker('absolute', i));
-      }
       scaleSteps.push(
         '<div>' +
           '<div ' +
-          'class="ol-scale-singlebar ' +
+          `class="ol-scale-singlebar ${cls}" ` +
-          backgroundColor +
+          `style="width: ${stepWidth}px;"` +
-          '" ' +
-          'style=' +
-          '"width: ' +
-          stepWidth +
-          'px;"' +
           '>' +
           '</div>' +
-          this.createMarker('relative', i) +
+          this.createMarker('relative') +
-          /*render text every second step, except when only 2 steps */
+          // render text every second step, except when only 2 steps
-          (i % 2 === 0 || this.scaleBarSteps_ === 2
+          (i % 2 === 0 || steps === 2
             ? this.createStepText(i, width, false, scale, suffix)
             : '') +
           '</div>'
       );
-      if (i === this.scaleBarSteps_ - 1) {
-        {
-          /*render text at the end */
-        }
-        scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix));
-      }
-      // switch style of steps
-      backgroundColor =
-        backgroundColor === 'ol-scale-singlebar-odd'
-          ? 'ol-scale-singlebar-even'
-          : 'ol-scale-singlebar-odd';
     }
+    // render text at the end
+    scaleSteps.push(this.createStepText(steps, width, true, scale, suffix));
 
-    let scaleBarText;
+    const scaleBarText = this.scaleBarText_
-    if (this.scaleBarText_) {
+      ? `<div class="ol-scale-text" style="width: ${width}px;">` +
-      scaleBarText =
-        '<div ' +
-        'class="ol-scale-text" ' +
-        'style="width: ' +
-        width +
-        'px;">' +
         mapScale +
-        '</div>';
+        '</div>'
-    } else {
+      : '';
-      scaleBarText = '';
+    return `<div>${scaleBarText}${scaleSteps.join('')}</div>`;
-    }
-    const container =
-      '<div ' +
-      'style="display: flex;">' +
-      scaleBarText +
-      scaleSteps.join('') +
-      '</div>';
-    return container;
   }
 
   /**
    * Creates a marker at given position
-   * @param {string} position The position, absolute or relative
+   * @param {'absolute'|'relative'} position The position, absolute or relative
-   * @param {number} i The iterator
    * @return {string} The stringified div containing the marker
    */
-  createMarker(position, i) {
+  createMarker(position) {
     const top = position === 'absolute' ? 3 : -10;
     return (
       '<div ' +
       'class="ol-scale-step-marker" ' +
-      'style="position: ' +
+      `style="position: ${position}; top: ${top}px;"` +
-      position +
-      ';' +
-      'top: ' +
-      top +
-      'px;"' +
       '></div>'
     );
   }
@@ -469,19 +430,11 @@ class ScaleLine extends Control {
       '<div ' +
       'class="ol-scale-step-text" ' +
       'style="' +
-      'margin-left: ' +
+      `margin-left: ${margin}px;` +
-      margin +
+      `text-align: ${i === 0 ? 'left' : 'center'};` +
-      'px;' +
+      `min-width: ${minWidth}px;` +
-      'text-align: ' +
+      `left: ${isLast ? width + 'px' : 'unset'};` +
-      (i === 0 ? 'left' : 'center') +
+      '">' +
-      '; ' +
-      'min-width: ' +
-      minWidth +
-      'px;' +
-      'left: ' +
-      (isLast ? width + 'px' : 'unset') +
-      ';"' +
-      '>' +
       lengthString +
       '</div>'
     );

src/ol/ol.css

@@ -41,20 +41,16 @@
   transition: all 0.25s;
 }
 
-.ol-scale-singlebar-even {
-  background-color: var(--ol-subtle-foreground-color);
-}
-
-.ol-scale-singlebar-odd {
-  background-color: var(--ol-background-color);
-}
-
 .ol-scale-bar {
   position: absolute;
   bottom: 8px;
   left: 8px;
 }
 
+.ol-scale-bar-inner > div {
+  display: flex;
+}
+
 .ol-scale-step-marker {
   width: 1px;
   height: 15px;
@@ -89,6 +85,14 @@
   border: 1px solid var(--ol-foreground-color);
 }
 
+.ol-scale-singlebar-even {
+  background-color: var(--ol-subtle-foreground-color);
+}
+
+.ol-scale-singlebar-odd {
+  background-color: var(--ol-background-color);
+}
+
 .ol-unsupported {
   display: none;
 }