From c81cc87e91fb091a6db529aa22e09e8639550da0 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Fri, 29 May 2020 16:47:55 -0600
Subject: [PATCH] Highlight selected map icon (close #55)

---
 www/assets/css/app.css       | 17 ++++++++++++++++-
 www/assets/js/map.js         |  7 +++++++
 www/assets/js/map_leaflet.js |  8 ++++++--
 www/assets/js/map_mapbox.js  |  4 +++-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/www/assets/css/app.css b/www/assets/css/app.css
index 40d48a2..fbbf6d9 100644
--- a/www/assets/css/app.css
+++ b/www/assets/css/app.css
@@ -49,13 +49,28 @@ Framework7 and FontAwesome both have a .fab class
     font-size: var(--f7-block-font-size);
 }
 
-#mapbox .package-marker {
+#mapbox .package-marker.selected {
+    border: 4px solid #2196f3;
+    border-radius: 50%;
+}
+
+#mapbox .package-marker-mapbox {
     width: 25px;
     height: 25px;
     background-image: url(../images/box.png);
     background-size: contain;
 }
 
+#mapbox .package-marker-leaflet {
+
+}
+
+#mapbox .package-marker-leaflet.selected {
+    /* Keep the icons from shifting when they have a border */
+    margin-top: -16.5px !important;
+    margin-left: -16.5px !important;
+}
+
 /* Allow tapping/clicking on package markers
  * when the location dot is overlapping them
  */
diff --git a/www/assets/js/map.js b/www/assets/js/map.js
index 5557e7a..c826aa1 100644
--- a/www/assets/js/map.js
+++ b/www/assets/js/map.js
@@ -76,6 +76,10 @@ $("#app").on("click", "#package-info-sheet #package-info-sheet-inner .list ul li
     openPackageInfoSheet($(this).data("coordid"), true);
 });
 
+$("#app").on("sheet:close", "#package-info-sheet", function () {
+    $(".package-marker").removeClass("selected");
+});
+
 function openPackageInfoSheet(coordid, refreshOnly) {
     if (typeof refreshOnly == "undefined") {
         refreshOnly = false;
@@ -83,6 +87,9 @@ function openPackageInfoSheet(coordid, refreshOnly) {
 
     //console.log("Packages array: ", packages);
 
+    $(".package-marker").removeClass("selected"); // prevent multiple highlights when switching icons in tablet mode
+    $(".package-marker#marker-" + coordid).addClass("selected");
+
     for (var i = 0; i < packages.length; i++) {
         if (packages[i].id == coordid) {
             package = packages[i];
diff --git a/www/assets/js/map_leaflet.js b/www/assets/js/map_leaflet.js
index 2937eb7..ffbf3e5 100644
--- a/www/assets/js/map_leaflet.js
+++ b/www/assets/js/map_leaflet.js
@@ -89,13 +89,17 @@ function leafletMap() {
                             datai.coords[1]
                         ],
                         {
-                            icon: icon
+                            icon: icon,
                         })
                         .on("click", function () {
-                            openPackageInfoSheet(datai.id)
+                            marker._icon.id = "marker-" + datai.id;
+                            marker._icon.classList.add('package-marker');
+                            marker._icon.classList.add('package-marker-leaflet');
+                            openPackageInfoSheet(datai.id);
                         });
 
                 map.packagelayer.addLayer(marker);
+                //L.DomUtil.addClass(marker._icon, 'package-marker'); // enable selected CSS to work correctly
             })(data[i]);
         }
     }
diff --git a/www/assets/js/map_mapbox.js b/www/assets/js/map_mapbox.js
index d7e192c..8b64aa8 100644
--- a/www/assets/js/map_mapbox.js
+++ b/www/assets/js/map_mapbox.js
@@ -102,7 +102,9 @@ function mapboxMap() {
                 //console.log(iconName);
 
                 var el = document.createElement("div");
-                el.className = "package-marker";
+                el.className = "package-marker package-marker-mapbox";
+
+                el.id = "marker-" + datai.id;
 
                 el.style = "background-image: url(assets/images/" + iconName + ".png);";