Netsyms/PackageHelper
2
0
Fork 1
Code Issues 9 Pull Requests Releases 12 Wiki Activity

Fix bug where selected icon loses highlight after alert sound, add alert class to icons

Browse Source
This commit is contained in:
Skylar Ittner 2020-06-02 22:47:22 -06:00
parent a11a342454
commit 647139ce40
4 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
www/assets/css/app.css
View File

@ -50,7 +50,12 @@ Framework7 and FontAwesome both have a .fab class
}
#mapbox .package-marker.selected {
border: 4px solid #2196f3;
border: 4px solid #2196F3;
border-radius: 50%;
}
#mapbox .package-marker.alerted {
border: 4px solid #FF9800;
border-radius: 50%;
}

2
www/assets/js/map.js
View File

@ -77,6 +77,7 @@ $("#app").on("click", "#package-info-sheet #package-info-sheet-inner .list ul li
});
$("#app").on("sheet:close", "#package-info-sheet", function () {
map.openedPanelIconID = null;
$(".package-marker").removeClass("selected");
});
@ -96,6 +97,7 @@ $("#app").on("click", "#package-info-sheet #package-info-deliver-all", function
});
function openPackageInfoSheet(coordid, refreshOnly) {
map.openedPanelIconID = coordid;
if (typeof refreshOnly == "undefined") {
refreshOnly = false;
}

18
www/assets/js/map_leaflet.js
View File

@ -64,6 +64,8 @@ function leafletMap() {
});
}
map.openedPanelIconID = null;
map.updatePackageLayer = function (data) {
map.packagelayer.clearLayers();
@ -77,10 +79,21 @@ function leafletMap() {
var iconName = getMapIconForItems(datai.items);
//console.log(iconName);
var classes = "package-marker package-marker-leaflet";
// Prevent selection highlight from going away after map refresh
if (map.openedPanelIconID != null && map.openedPanelIconID == datai.id) {
classes += " selected";
}
// Show different color highlight when nearby
if (packages[i].distance * 1 < getStorage("alertradius") * 1) {
classes += " alerted";
}
var icon = L.icon({
iconUrl: "assets/images/" + iconName + ".png",
iconSize: [25, 25],
iconAnchor: [12.5, 12.5]
iconAnchor: [12.5, 12.5],
className: classes
});
var marker = L.marker(
@ -93,12 +106,11 @@ function leafletMap() {
})
.on("click", function () {
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]);
}

11
www/assets/js/map_mapbox.js
View File

@ -84,6 +84,8 @@ function mapboxMap() {
});
}
map.openedPanelIconID = null;
map.updatePackageLayer = function (data) {
var oldmarkers = document.getElementsByClassName("package-marker");
if (oldmarkers.length > 0) {
@ -102,7 +104,16 @@ function mapboxMap() {
//console.log(iconName);
var el = document.createElement("div");
el.className = "package-marker package-marker-mapbox";
// Prevent selection highlight from going away after map refresh
if (map.openedPanelIconID != null && map.openedPanelIconID == datai.id) {
el.className += " selected";
}
// Show different color highlight when nearby
if (packages[i].distance * 1 < getStorage("alertradius") * 1) {
el.className += " alerted";
}
el.id = "marker-" + datai.id;