Hide dark mode context menu items when not applicable

openstreetmap · May 11, 2024 · 82f7386 · 82f7386
1 parent 0b774d7
commit 82f7386
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js
@@ -74,7 +74,7 @@ OSM.initializeContextMenu = function (map) {
     }
   });
 
-  L.OSM.colorSchemeWatcher.manageContextMenu(map.contextmenu);
+  L.OSM.colorSchemeWatcher.manageContextMenu(map);
 
   map.on("mousedown", function (e) {
     if (e.originalEvent.shiftKey) map.contextmenu.disable();

diff --git a/vendor/assets/leaflet/leaflet.osm.js b/vendor/assets/leaflet/leaflet.osm.js
@@ -2,15 +2,15 @@ L.OSM = {};
 
 L.OSM.colorSchemeWatcher = {
   darkFilter: 'brightness(.8)',
-  _managedContextMenuElements: [],
+  _managedContextMenuUpdateHandlers: [],
   _watchedLayers: [],
 
   enable: function() {
     var watcher = this;
     matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function() {
       var prefersDarkScheme = watcher._prefersDarkScheme();
-      watcher._managedContextMenuElements.forEach(function (element) {
-        element.hidden = !prefersDarkScheme;
+      watcher._managedContextMenuUpdateHandlers.forEach(function (handler) {
+        handler();
       });
       watcher._watchedLayers.forEach(function (watchedLayer) {
         if (prefersDarkScheme) {
@@ -23,13 +23,15 @@ L.OSM.colorSchemeWatcher = {
   },
 
   // requires Leaflet.contextmenu plugin
-  manageContextMenu: function (contextmenu) {
+  manageContextMenu: function (map) {
+    var managedContextMenuElements = [];
+
     var watcher = this;
     var prefersDarkScheme = watcher._prefersDarkScheme();
-    var separator = contextmenu.addItem({
+    var separator = map.contextmenu.addItem({
       separator: true
     });
-    watcher._managedContextMenuElements.push(separator);
+    managedContextMenuElements.push(separator);
     if (!prefersDarkScheme) {
       separator.hidden = true;
     }
@@ -52,11 +54,11 @@ L.OSM.colorSchemeWatcher = {
       },
     ];
     menuItems.forEach(function (menuItem) {
-      var menuElement = contextmenu.addItem({
+      var menuElement = map.contextmenu.addItem({
         text: menuItem.text,
         callback: function () {
           watcher.darkFilter = menuItem.filter;
-          watcher._managedContextMenuElements.forEach(function (menuElement) {
+          managedContextMenuElements.forEach(function (menuElement) {
             watcher._updateContextMenuElement(menuElement);
           });
           if (watcher._prefersDarkScheme()) {
@@ -68,11 +70,27 @@ L.OSM.colorSchemeWatcher = {
       });
       watcher._decorateContextMenuElement(menuElement, menuItem);
       watcher._updateContextMenuElement(menuElement);
-      watcher._managedContextMenuElements.push(menuElement);
-      if (!prefersDarkScheme) {
-        menuElement.hidden = true;
-      }
+      managedContextMenuElements.push(menuElement);
     });
+
+    var updateManagedContextMenuElements = function() {
+      var prefersDarkScheme = watcher._prefersDarkScheme();
+      var numberOfLayersWithApplicableFilter = 0;
+      map.eachLayer(function (layer) {
+        if (layer instanceof L.OSM.TileLayer) {
+          if (!layer.options.darkUrl) {
+            numberOfLayersWithApplicableFilter++;
+          }
+        }
+      });
+      managedContextMenuElements.forEach(function (element) {
+        element.hidden = !prefersDarkScheme || numberOfLayersWithApplicableFilter == 0;
+      });
+    };
+    updateManagedContextMenuElements();
+    watcher._managedContextMenuUpdateHandlers.push(updateManagedContextMenuElements);
+    map.on("layeradd", updateManagedContextMenuElements);
+    map.on("layerremove", updateManagedContextMenuElements);
   },
 
   addLayer: function (layer) {