diff options
| author | Martin Fischer <martin@push-f.com> | 2025-03-14 08:22:25 +0100 |
|---|---|---|
| committer | Martin Fischer <martin@push-f.com> | 2025-03-14 08:35:51 +0100 |
| commit | ddbab65241d2dcc6cd3c12866fc88e9a8d357014 (patch) | |
| tree | 2ea496021a5d11a6db064275fa8c8e464f3bf665 | |
| parent | abc9c9b3f48b6eae4c44c44589f91a490ae9bb72 (diff) | |
feat: implement sharing UI
| -rw-r--r-- | index.html | 6 | ||||
| -rw-r--r-- | script.js | 27 |
2 files changed, 32 insertions, 1 deletions
@@ -1,3 +1,4 @@ +<!doctype html> <html> <meta charset="utf-8"> <title>Share a geographic position</title> @@ -10,11 +11,16 @@ body { max-width: 40ch; margin: 1em auto; + padding: 0 0.5em; font-size: 1.2em; } li { padding: 1em; } + .input-group { display: flex; gap: 0.2em; margin-bottom: 1em; } + .input-group input { flex-grow: 1; } + input, button { font-size: inherit; } + .error { color: darkred; } </style> </body> </html> @@ -28,7 +28,32 @@ function route() { if (!latLon) { document.title = 'Share a location'; - content.append(createEl('h1', {}, ['not yet implemented'])); + content.append(createEl('h1', {}, [document.title])); + const input = createEl('input'); + const button = createEl('button', {}, ['Share']); + const inputGroup = createEl('div', { class: 'input-group' }, [input, button]); + const errorDiv = createEl('div', { class: 'error' }); + content.append(createEl('label', {}, ['Latitude, longitude', inputGroup])); + content.append(errorDiv); + function share() { + if (!input.value.trim()) { + return; + } + try { + let [lat, lon] = parseLatLon(input.value); + // TODO: use navigator.share if supported + window.location = `#${lat},${lon}`; + } catch (error) { + errorDiv.textContent = error; + } + } + input.addEventListener('keydown', (e) => { + if (e.key == 'Enter') { + share(); + } + }); + button.addEventListener('click', share); + // TODO: provide a button to share the current position via navigator.geolocation.getCurrentPosition if supported } else { document.title = 'Open location'; |