graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show 'Press ESC to close' hint on map and weather pages

Browse source 
Subtle hint appears in top-right corner (desktop only) when the
detail panel is open. Fades in when panel shows, fades out on ESC.
Hidden on mobile where the X button is more appropriate.
This commit is contained in:
Graham McIntire 2026-04-07 17:05:14 -05:00
parent 33ebaf33a6
commit cdbb47bf1b
2 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/js/propagation_map_hook.js
View file

@ -569,6 +569,7 @@ export const PropagationMap = {
const merged = { ...basic, ...this.bandInfo, factors: null }
this.detailPanel.innerHTML = buildLoadingHTML(merged)
this.detailPanel.style.display = "block"
this.escHint.style.opacity = "1"
this.positionDetailPanel()
this.pushEvent("point_detail", { lat: e.latlng.lat, lon: e.latlng.lng })
}
@ -590,6 +591,7 @@ export const PropagationMap = {
this.lastDetail = merged
this.detailPanel.innerHTML = buildPopupHTML(merged, this.viewshedLoading)
this.detailPanel.style.display = "block"
this.escHint.style.opacity = "1"
this.positionDetailPanel()
// Draw propagation reach polygon based on contiguous good cells
@ -682,6 +684,13 @@ export const PropagationMap = {
L.DomEvent.disableScrollPropagation(this.timelineEl)
}
// ESC hint — shown on desktop when detail panel is visible
this.escHint = document.createElement("div")
this.escHint.className = "hidden md:block"
this.escHint.style.cssText = "position:absolute;top:12px;right:12px;z-index:1100;background:rgba(0,0,0,0.6);color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;opacity:0;transition:opacity 0.2s;pointer-events:none;"
this.escHint.textContent = "Press ESC to close"
this.el.appendChild(this.escHint)
// Escape key closes detail panel and range circles
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
@ -692,6 +701,7 @@ export const PropagationMap = {
this.rangeCircles.clearLayers()
this.clickedLatLng = null
this.lastDetail = null
this.escHint.style.opacity = "0"
}
})

9
assets/js/weather_map_hook.js
View file

@ -300,10 +300,18 @@ export const WeatherMap = {
L.DomEvent.disableScrollPropagation(this.detailPanel)
}
// ESC hint
this.escHint = document.createElement("div")
this.escHint.className = "hidden md:block"
this.escHint.style.cssText = "position:absolute;top:12px;right:12px;z-index:1100;background:rgba(0,0,0,0.6);color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;opacity:0;transition:opacity 0.2s;pointer-events:none;"
this.escHint.textContent = "Press ESC to close"
this.el.appendChild(this.escHint)
this.handleEvent("point_detail", (detail) => {
if (detail && detail.lat && this.detailPanel) {
this.detailPanel.innerHTML = buildDetailHTML(detail)
this.detailPanel.style.display = "block"
this.escHint.style.opacity = "1"
this.positionDetailPanel()
}
})
@ -324,6 +332,7 @@ export const WeatherMap = {
this.detailPanel.style.display = "none"
this.detailPanel.innerHTML = ""
this.clickMarker.clearLayers()
this.escHint.style.opacity = "0"
}
}
document.addEventListener("keydown", this._escHandler)