diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index 5ebb54d2d8a..0aa46d0e613 100644 --- 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 index 99809266ebd..88eb5501e6f 100644 --- 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) {