show dropdown only with route extras

Author: digitaltom

app/javascript/controllers/feature/modal_controller.js

@@ -73,6 +73,9 @@ export default class extends Controller {
 
     dom.hideElements(['.edit-point', '.edit-line', '.edit-polygon'])
 
+    // Hide stroke color mode dropdown by default (only shown for LineStrings with route extras)
+    document.querySelector('#stroke-color-mode')?.classList.add('hidden')
+
     // transparent stroke
     if (feature.properties.stroke === 'transparent') {
       document.querySelector('#stroke-color').setAttribute('disabled', 'true')
@@ -131,16 +134,13 @@ export default class extends Controller {
         // Only show dropdown if there are extras options (more than just the default "Color" option)
         if (colorModeSelect.options.length > 1) {
           colorModeSelect.classList.remove('hidden')
-        } else {
-          colorModeSelect.classList.add('hidden')
         }
         if (feature.properties['show-route-extras']) {
           document.querySelector('#stroke-color').setAttribute('disabled', 'true')
         }
       } else {
         // Clear any extra options from previously selected routed features
         colorModeSelect.options.length = 1
-        colorModeSelect.classList.add('hidden')
         colorModeSelect.value = ''
       }
 

app/javascript/maplibre/routing/directions.js

@@ -57,7 +57,9 @@ class CustomMapLibreGlDirections extends MapLibreGlDirections {
         "type": "WAYPOINT",
         "id": functions.featureId(),
         "index": index,
-        "label": String.fromCharCode(64 + index+1),
+        "label": index < 26
+          ? String.fromCharCode(65 + index)      // A-Z
+          : String.fromCharCode(97 + index - 26), // a-z
         "highlight": false
       }
     }