From 27ded8546f00a70636f99352c83d7dd04a83f0b4 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 02:34:58 +0300 Subject: [PATCH 1/7] Add dark mode filters map context menu --- app/assets/javascripts/index/contextmenu.js | 24 +++++++++++++++++++++ config/locales/en.yml | 5 +++++ 2 files changed, 29 insertions(+) diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index ea284f29b9..152ad9ca29 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -74,6 +74,30 @@ OSM.initializeContextMenu = function (map) { } }); + map.contextmenu.addItem({ + separator: true + }); + + const darkModeMenuItems = [ + { + name: "brightness100" + }, + { + name: "brightness80" + }, + { + name: "brightness60" + }, + { + name: "invert" + } + ]; + darkModeMenuItems.forEach((menuItem) => { + map.contextmenu.addItem({ + text: I18n.t("javascripts.map.filters." + menuItem.name), + }); + }); + map.on("mousedown", function (e) { if (e.originalEvent.shiftKey) map.contextmenu.disable(); else map.contextmenu.enable(); diff --git a/config/locales/en.yml b/config/locales/en.yml index f68488c09c..8ac959316c 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -3073,6 +3073,11 @@ en: tracestrack: Tracestrack hotosm_credit: "Tiles style by %{hotosm_link} hosted by %{osm_france_link}" hotosm_name: Humanitarian OpenStreetMap Team + filters: + brightness100: 100% brightness + brightness80: 80% brightness + brightness60: 60% brightness + invert: Invert site: edit_tooltip: Edit the map edit_disabled_tooltip: Zoom in to edit the map From 12909e43fadfa28c6fe6dd23e7a2bec6085b9d7e Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 02:55:10 +0300 Subject: [PATCH 2/7] Show/hide dark mode menu depending on prefers-color-scheme --- app/assets/javascripts/index/contextmenu.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index 152ad9ca29..c0d57d4b49 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -74,9 +74,9 @@ OSM.initializeContextMenu = function (map) { } }); - map.contextmenu.addItem({ + let darkModeMenuElements = $(map.contextmenu.addItem({ separator: true - }); + })); const darkModeMenuItems = [ { @@ -93,10 +93,21 @@ OSM.initializeContextMenu = function (map) { } ]; darkModeMenuItems.forEach((menuItem) => { - map.contextmenu.addItem({ + const darkModeMenuElement = $(map.contextmenu.addItem({ text: I18n.t("javascripts.map.filters." + menuItem.name), - }); + })); + darkModeMenuElements = darkModeMenuElements.add(darkModeMenuElement); + }); + + const prefersDarkQuery = matchMedia("(prefers-color-scheme: dark)"); + L.DomEvent.on(prefersDarkQuery, 'change', () => { + updateDarkModeMenu(); }); + updateDarkModeMenu(); + + function updateDarkModeMenu() { + darkModeMenuElements.toggle(prefersDarkQuery.matches); + } map.on("mousedown", function (e) { if (e.originalEvent.shiftKey) map.contextmenu.disable(); From 5d27d55d5986f4b3f67f03f2aac7a2d1efa302a4 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 03:39:26 +0300 Subject: [PATCH 3/7] Mark selected dark mode filter --- app/assets/javascripts/index/contextmenu.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index c0d57d4b49..5fd155b3ff 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -74,6 +74,7 @@ OSM.initializeContextMenu = function (map) { } }); + let selectedDarkModeFilter = "brightness80"; let darkModeMenuElements = $(map.contextmenu.addItem({ separator: true })); @@ -95,7 +96,16 @@ OSM.initializeContextMenu = function (map) { darkModeMenuItems.forEach((menuItem) => { const darkModeMenuElement = $(map.contextmenu.addItem({ text: I18n.t("javascripts.map.filters." + menuItem.name), + callback: () => { + selectedDarkModeFilter = menuItem.name; + updateDarkModeMenu(); + } })); + darkModeMenuElement.prepend( + $("") + .data("filter", menuItem.name) + .css("transform", "scale(80%)") + ); darkModeMenuElements = darkModeMenuElements.add(darkModeMenuElement); }); @@ -107,6 +117,9 @@ OSM.initializeContextMenu = function (map) { function updateDarkModeMenu() { darkModeMenuElements.toggle(prefersDarkQuery.matches); + darkModeMenuElements.find("input[type='radio']").each(function () { + $(this).prop("checked", $(this).data("filter") == selectedDarkModeFilter); + }); } map.on("mousedown", function (e) { From bd178da6f2d157f0ce1507711017b8b76f947293 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 03:46:20 +0300 Subject: [PATCH 4/7] Store dark mode filter in a cookie --- app/assets/javascripts/index/contextmenu.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index 5fd155b3ff..5bd6278830 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -74,7 +74,10 @@ OSM.initializeContextMenu = function (map) { } }); - let selectedDarkModeFilter = "brightness80"; + const expiry = new Date(); + expiry.setYear(expiry.getFullYear() + 10); + let selectedDarkModeFilter = Cookies.get("_osm_dark_mode_filter") || "brightness80"; + let darkModeMenuElements = $(map.contextmenu.addItem({ separator: true })); @@ -98,6 +101,7 @@ OSM.initializeContextMenu = function (map) { text: I18n.t("javascripts.map.filters." + menuItem.name), callback: () => { selectedDarkModeFilter = menuItem.name; + Cookies.set("_osm_dark_mode_filter", menuItem.name, { secure: true, expires: expiry, path: "/", samesite: "lax" }); updateDarkModeMenu(); } })); From be660ec2f555a6b73bc9a1a29c8c45f96c162071 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 04:04:16 +0300 Subject: [PATCH 5/7] Enable css filters --- app/assets/javascripts/index/contextmenu.js | 16 ++++++++++++---- app/assets/stylesheets/common.scss | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index 5bd6278830..e60d467a14 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -84,24 +84,32 @@ OSM.initializeContextMenu = function (map) { const darkModeMenuItems = [ { - name: "brightness100" + name: "brightness100", + filter: "none" }, { - name: "brightness80" + name: "brightness80", + filter: "brightness(.8)" }, { - name: "brightness60" + name: "brightness60", + filter: "brightness(.6)" }, { - name: "invert" + name: "invert", + filter: "invert(.8) hue-rotate(180deg)" } ]; darkModeMenuItems.forEach((menuItem) => { + if (selectedDarkModeFilter === menuItem.name) { + $(":root").css("--dark-mode-filter", menuItem.filter); + } const darkModeMenuElement = $(map.contextmenu.addItem({ text: I18n.t("javascripts.map.filters." + menuItem.name), callback: () => { selectedDarkModeFilter = menuItem.name; Cookies.set("_osm_dark_mode_filter", menuItem.name, { secure: true, expires: expiry, path: "/", samesite: "lax" }); + $(":root").css("--dark-mode-filter", menuItem.filter); updateDarkModeMenu(); } })); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 31ce7dd28a..10ce596e29 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -504,7 +504,7 @@ body.small-nav { @include color-mode(dark) { .leaflet-tile-container .leaflet-tile, .mapkey-table-entry td:first-child > * { - filter: brightness(.8); + filter: var(--dark-mode-filter, brightness(.8)); } .leaflet-control-attribution a { From 79c7c95aa256ba9e0bbf9893f69d459f26593739 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 04:25:44 +0300 Subject: [PATCH 6/7] fixup! Mark selected dark mode filter --- app/assets/javascripts/index/contextmenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index e60d467a14..5924d48aae 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -130,7 +130,7 @@ OSM.initializeContextMenu = function (map) { function updateDarkModeMenu() { darkModeMenuElements.toggle(prefersDarkQuery.matches); darkModeMenuElements.find("input[type='radio']").each(function () { - $(this).prop("checked", $(this).data("filter") == selectedDarkModeFilter); + $(this).prop("checked", $(this).data("filter") === selectedDarkModeFilter); }); } From e7a22cd658b6c9f478cb3403f81265c78f3e124d Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Sat, 16 Nov 2024 04:27:07 +0300 Subject: [PATCH 7/7] fixup! Show/hide dark mode menu depending on prefers-color-scheme --- app/assets/javascripts/index/contextmenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index 5924d48aae..60257291d5 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -122,7 +122,7 @@ OSM.initializeContextMenu = function (map) { }); const prefersDarkQuery = matchMedia("(prefers-color-scheme: dark)"); - L.DomEvent.on(prefersDarkQuery, 'change', () => { + L.DomEvent.on(prefersDarkQuery, "change", () => { updateDarkModeMenu(); }); updateDarkModeMenu();