From 47c92e657dc2e6c9b91dddcc99fd337fa4b71fbe Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 5 Mar 2025 16:35:07 +0100 Subject: [PATCH] Unify active control button behaviour --- app/assets/javascripts/index/new_note.js | 7 ++++--- app/assets/javascripts/index/query.js | 13 +++++++------ app/assets/javascripts/leaflet.sidebar.js | 2 ++ app/assets/stylesheets/common.scss | 9 ++++----- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index ff4a44126..d852d7482 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -2,7 +2,8 @@ OSM.NewNote = function (map) { const noteLayer = map.noteLayer, content = $("#sidebar_content"), page = {}, - addNoteButton = $(".control-note .control-button"); + control = $(".control-note"), + addNoteButton = control.find(".control-button"); let newNoteMarker, halo; @@ -109,7 +110,7 @@ OSM.NewNote = function (map) { }; page.load = function (path) { - addNoteButton.addClass("active"); + control.addClass("active"); map.addLayer(noteLayer); @@ -165,7 +166,7 @@ OSM.NewNote = function (map) { map.off("click", moveNewNoteMarkerToClick); addNoteButton.off("disabled enabled", updateControls); removeNewNoteMarker(); - addNoteButton.removeClass("active"); + control.removeClass("active"); }; return page; diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js index 790057400..0864418ea 100644 --- a/app/assets/javascripts/index/query.js +++ b/app/assets/javascripts/index/query.js @@ -1,7 +1,8 @@ OSM.Query = function (map) { const url = OSM.OVERPASS_URL, credentials = OSM.OVERPASS_CREDENTIALS, - queryButton = $(".control-query .control-button"), + control = $(".control-query"), + queryButton = control.find(".control-button"), uninterestingTags = ["source", "source_ref", "source:ref", "history", "attribution", "created_by", "tiger:county", "tiger:tlid", "tiger:upload_uuid", "KSJ2:curve_id", "KSJ2:lat", "KSJ2:lon", "KSJ2:coordinate", "KSJ2:filename", "note:ja"]; let marker; @@ -17,19 +18,19 @@ OSM.Query = function (map) { e.preventDefault(); e.stopPropagation(); - if (queryButton.hasClass("active")) { + if (control.hasClass("active")) { disableQueryMode(); } else if (!queryButton.hasClass("disabled")) { enableQueryMode(); } }).on("disabled", function () { - if (queryButton.hasClass("active")) { + if (control.hasClass("active")) { map.off("click", clickHandler); $(map.getContainer()).removeClass("query-active").addClass("query-disabled"); $(this).tooltip("show"); } }).on("enabled", function () { - if (queryButton.hasClass("active")) { + if (control.hasClass("active")) { map.on("click", clickHandler); $(map.getContainer()).removeClass("query-disabled").addClass("query-active"); $(this).tooltip("hide"); @@ -304,7 +305,7 @@ OSM.Query = function (map) { } function enableQueryMode() { - queryButton.addClass("active"); + control.addClass("active"); map.on("click", clickHandler); $(map.getContainer()).addClass("query-active"); } @@ -313,7 +314,7 @@ OSM.Query = function (map) { if (marker) map.removeLayer(marker); $(map.getContainer()).removeClass("query-active").removeClass("query-disabled"); map.off("click", clickHandler); - queryButton.removeClass("active"); + control.removeClass("active"); } const page = {}; diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js index f16156b72..f6b2b67f8 100644 --- a/app/assets/javascripts/leaflet.sidebar.js +++ b/app/assets/javascripts/leaflet.sidebar.js @@ -26,6 +26,7 @@ L.OSM.sidebar = function (selector) { .trigger("hide"); currentButton + .parent() .removeClass("active"); if (current === pane) { @@ -56,6 +57,7 @@ L.OSM.sidebar = function (selector) { .trigger("show"); currentButton + .parent() .addClass("active"); }; diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 07128de47..5d598d9db 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -33,7 +33,6 @@ time[title] { .icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; } .icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; } .icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; } -.active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; } .icon.layers { /*rtl:ignore*/ background-position: -100px 0; } .icon.key { /*rtl:ignore*/ background-position: -120px 0; } .icon.share { /*rtl:ignore*/ background-position: -140px 0; } @@ -299,10 +298,6 @@ body.small-nav { cursor: default; } - &.active { - background-color: $vibrant-green; - } - &-first { border-start-start-radius: 4px; } @@ -317,6 +312,10 @@ body.small-nav { } } +.leaflet-control.active .control-button { + background-color: $vibrant-green; +} + /* Rules for the sidebar and main map area */ .map-layout { -- 2.39.5