randy
708c08259b
GPX tracks were silently failing to render for large real-world files: point_extensions used REXML's "extensions//*" XPath, and the // descendant axis costs low-single-digit milliseconds per call regardless of subtree size. Run once per point, that's negligible on small files but ~30s on a real 8000-point track — long enough to hit a proxy timeout in production, so the file just never appeared with no error. Replaced with plain recursive child traversal (~40x faster on the same file, confirmed 29.9s -> 3.16s); test_parsing_many_points_with_extensions_stays_fast guards against reintroducing it. Also adds support for <rte> routes (not just <trk> tracks and <wpt> waypoints), sharing the track/route conversion logic via a new line_feature helper. Routes get their own "route" kind and a dashed ROUTE_ICON in the file tree so the type is visible at a glance.
579 lines
21 KiB
JavaScript
579 lines
21 KiB
JavaScript
import { Popup } from "/vendor/maplibre-gl/maplibre-gl.mjs";
|
||
import { GPX_ICON, NEW_FOLDER_ICON, UPLOAD_ICON, WAYPOINT_ICON, TRACK_ICON, ROUTE_ICON } from "/js/icons.js";
|
||
import { notifySidePanelOpen, onlyOneSidePanelOpen } from "/js/panels.js";
|
||
import { formatActivityType } from "/js/track_profile.js";
|
||
|
||
const TREE_URL = "/api/gpx/tree";
|
||
const UPLOAD_URL = "/api/gpx";
|
||
const FOLDER_URL = "/api/gpx/folder";
|
||
const MOVE_URL = "/api/gpx/move";
|
||
const TRACK_COLOR = "#e63946";
|
||
|
||
// Custom drag payload MIME type for moving an already-uploaded file between
|
||
// folders, as opposed to an OS file drag (type "Files") for uploading a new
|
||
// one — both land on the same drop targets, told apart by this.
|
||
const MOVE_MIME = "application/x-gpx-path";
|
||
|
||
// A sidebar icon that opens a side panel for uploading GPX files (via
|
||
// drag & drop, stored server-side in a folder hierarchy the user can add to
|
||
// and reorganize by dragging), and toggling their tracks/waypoints on and
|
||
// off the map.
|
||
export class GpxPanelControl {
|
||
constructor(map, profilePanel) {
|
||
this._map = map;
|
||
this._profilePanel = profilePanel;
|
||
this._visible = new Set(); // file paths currently shown on the map
|
||
this._interactiveLayers = new Set(); // point layer ids with click/hover wired up
|
||
|
||
// setStyle() (switching the Online/Offline base map) tears down all
|
||
// custom sources and layers — put visible GPX layers back afterwards.
|
||
map.on("style.load", () => {
|
||
this._visible.forEach((path) => this._addLayers(path));
|
||
});
|
||
}
|
||
|
||
mount(sidebar) {
|
||
this._container = document.createElement("div");
|
||
this._container.className = "sidebar-item";
|
||
this._container.innerHTML = `<button type="button" class="sidebar-icon" title="Tracks" aria-label="Tracks">${GPX_ICON}</button>`;
|
||
this._icon = this._container.querySelector(".sidebar-icon");
|
||
this._icon.addEventListener("click", () => this._togglePanel());
|
||
|
||
this._panel = document.getElementById("gpx-panel");
|
||
this._treeContainer = this._panel.querySelector(".gpx-tree");
|
||
this._uploadStatus = this._panel.querySelector(".gpx-upload__status");
|
||
this._panel.querySelector('[data-action="new-folder"]').innerHTML = NEW_FOLDER_ICON;
|
||
this._panel.querySelector('[data-action="upload"]').innerHTML = UPLOAD_ICON;
|
||
this._panel
|
||
.querySelector(".gpx-panel__close")
|
||
.addEventListener("click", () => this._togglePanel(false));
|
||
|
||
onlyOneSidePanelOpen(this._panel, () => this._icon.classList.remove("active"));
|
||
|
||
this._setupToolbarActions();
|
||
this._setupRootDropTarget();
|
||
this._setupMapDropTarget();
|
||
|
||
this._loadTree();
|
||
|
||
sidebar.appendChild(this._container);
|
||
}
|
||
|
||
_togglePanel(force) {
|
||
const open = force === undefined ? this._panel.hidden : force;
|
||
this._panel.hidden = !open;
|
||
this._icon.classList.toggle("active", open);
|
||
if (open) notifySidePanelOpen(this._panel);
|
||
}
|
||
|
||
// Both toolbar actions are icon buttons now (matching OsmAnd's tracks
|
||
// panel) rather than an always-visible dropzone/form: upload triggers the
|
||
// native file picker, new folder prompts for a path.
|
||
_setupToolbarActions() {
|
||
const fileInput = this._panel.querySelector(".gpx-file-input");
|
||
fileInput.addEventListener("change", () => {
|
||
this._uploadFiles(fileInput.files, "");
|
||
fileInput.value = "";
|
||
});
|
||
|
||
this._panel.querySelector('[data-action="upload"]').addEventListener("click", () => fileInput.click());
|
||
this._panel.querySelector('[data-action="new-folder"]').addEventListener("click", async () => {
|
||
const path = window.prompt("New folder name (e.g. Hiking/2026):");
|
||
if (!path || !path.trim()) return;
|
||
|
||
const response = await fetch(FOLDER_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||
body: `path=${encodeURIComponent(path.trim())}`,
|
||
});
|
||
if (redirectIfUnauthorized(response)) return;
|
||
if (response.ok) {
|
||
const { tree } = await response.json();
|
||
this._renderTree(tree);
|
||
}
|
||
});
|
||
}
|
||
|
||
// The tree itself is the drop target for both an OS file drag (upload to
|
||
// the top level) and, for anywhere that isn't a folder (blank space, or
|
||
// onto another file — folder drop targets call stopPropagation() so this
|
||
// only fires then), an internal file drag (move back to the top level).
|
||
_setupRootDropTarget() {
|
||
this._treeContainer.addEventListener("dragover", (event) => {
|
||
if (!event.dataTransfer.types.includes("Files") && !event.dataTransfer.types.includes(MOVE_MIME)) return;
|
||
event.preventDefault();
|
||
this._treeContainer.classList.add("gpx-drop-hover");
|
||
});
|
||
this._treeContainer.addEventListener("dragleave", (event) => {
|
||
if (event.target === this._treeContainer) this._treeContainer.classList.remove("gpx-drop-hover");
|
||
});
|
||
this._treeContainer.addEventListener("drop", (event) => {
|
||
event.preventDefault();
|
||
this._treeContainer.classList.remove("gpx-drop-hover");
|
||
if (event.dataTransfer.files?.length > 0) {
|
||
this._uploadFiles(event.dataTransfer.files, "");
|
||
return;
|
||
}
|
||
const from = event.dataTransfer.getData(MOVE_MIME);
|
||
if (from) this._moveFile(from, "");
|
||
});
|
||
}
|
||
|
||
// Dropping a GPX file straight onto the map (not just the panel) uploads
|
||
// it to the top level too.
|
||
_setupMapDropTarget() {
|
||
const mapContainer = this._map.getContainer();
|
||
mapContainer.addEventListener("dragover", (event) => {
|
||
if (!event.dataTransfer.types.includes("Files")) return;
|
||
event.preventDefault();
|
||
mapContainer.classList.add("gpx-drop-hover");
|
||
});
|
||
mapContainer.addEventListener("dragleave", (event) => {
|
||
if (event.target === mapContainer) mapContainer.classList.remove("gpx-drop-hover");
|
||
});
|
||
mapContainer.addEventListener("drop", (event) => {
|
||
mapContainer.classList.remove("gpx-drop-hover");
|
||
if (event.dataTransfer.files?.length > 0) {
|
||
event.preventDefault();
|
||
this._uploadFiles(event.dataTransfer.files, "");
|
||
}
|
||
});
|
||
}
|
||
|
||
async _loadTree() {
|
||
const response = await fetch(TREE_URL);
|
||
const tree = await response.json();
|
||
this._renderTree(tree);
|
||
}
|
||
|
||
_renderTree(node) {
|
||
this._treeContainer.innerHTML = "";
|
||
this._treeContainer.appendChild(this._renderChildren(node.children));
|
||
}
|
||
|
||
_renderChildren(children) {
|
||
const ul = document.createElement("ul");
|
||
if (children.length === 0) {
|
||
const li = document.createElement("li");
|
||
li.className = "gpx-tree__empty";
|
||
li.textContent = "No files yet";
|
||
ul.appendChild(li);
|
||
return ul;
|
||
}
|
||
|
||
children.forEach((child) => {
|
||
const li = document.createElement("li");
|
||
if (child.type === "folder") {
|
||
li.appendChild(this._renderFolder(child));
|
||
} else {
|
||
li.appendChild(this._renderFile(child));
|
||
}
|
||
ul.appendChild(li);
|
||
});
|
||
|
||
return ul;
|
||
}
|
||
|
||
_renderFolder(folder) {
|
||
const details = document.createElement("details");
|
||
details.open = true;
|
||
|
||
const summary = document.createElement("summary");
|
||
const row = document.createElement("span");
|
||
row.className = "gpx-tree__folder-row";
|
||
const name = document.createElement("span");
|
||
name.textContent = folder.name;
|
||
row.appendChild(name);
|
||
row.appendChild(this._deleteButton(() => this._deleteFolder(folder.path)));
|
||
summary.appendChild(row);
|
||
this._wireFolderDropTarget(summary, folder.path);
|
||
|
||
details.appendChild(summary);
|
||
details.appendChild(this._renderChildren(folder.children));
|
||
return details;
|
||
}
|
||
|
||
_renderFile(file) {
|
||
const row = document.createElement("div");
|
||
row.className = "gpx-tree__file";
|
||
row.draggable = true;
|
||
row.addEventListener("dragstart", (event) => {
|
||
event.dataTransfer.setData(MOVE_MIME, file.path);
|
||
event.dataTransfer.effectAllowed = "move";
|
||
});
|
||
|
||
const label = document.createElement("label");
|
||
const checkbox = document.createElement("input");
|
||
checkbox.type = "checkbox";
|
||
checkbox.checked = this._visible.has(file.path);
|
||
checkbox.addEventListener("change", () => this._toggleFile(file.path, checkbox.checked, checkbox));
|
||
const name = document.createElement("span");
|
||
name.className = "gpx-tree__file-name";
|
||
name.textContent = file.name;
|
||
name.title = file.name;
|
||
label.appendChild(checkbox);
|
||
(file.kinds || []).forEach((kind) => label.appendChild(this._kindIcon(kind)));
|
||
label.appendChild(name);
|
||
row.appendChild(label);
|
||
row.appendChild(this._deleteButton(() => this._deleteFile(file.path)));
|
||
|
||
return row;
|
||
}
|
||
|
||
_kindIcon(kind) {
|
||
const icon = document.createElement("span");
|
||
icon.className = "gpx-tree__kind-icon";
|
||
if (kind === "waypoint") {
|
||
icon.innerHTML = WAYPOINT_ICON;
|
||
icon.title = "Has waypoints";
|
||
} else if (kind === "route") {
|
||
icon.innerHTML = ROUTE_ICON;
|
||
icon.title = "Has a route";
|
||
} else {
|
||
icon.innerHTML = TRACK_ICON;
|
||
icon.title = "Has a track";
|
||
}
|
||
return icon;
|
||
}
|
||
|
||
_deleteButton(onClick) {
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.className = "gpx-tree__delete";
|
||
button.title = "Delete";
|
||
button.textContent = "×";
|
||
button.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
onClick();
|
||
});
|
||
return button;
|
||
}
|
||
|
||
// A folder accepts both an OS file drag (upload straight into it) and an
|
||
// internal file drag (move into it).
|
||
_wireFolderDropTarget(summary, folderPath) {
|
||
summary.addEventListener("dragover", (event) => {
|
||
if (!event.dataTransfer.types.includes("Files") && !event.dataTransfer.types.includes(MOVE_MIME)) return;
|
||
event.preventDefault();
|
||
summary.classList.add("gpx-drop-hover");
|
||
});
|
||
summary.addEventListener("dragleave", () => summary.classList.remove("gpx-drop-hover"));
|
||
summary.addEventListener("drop", (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
summary.classList.remove("gpx-drop-hover");
|
||
if (event.dataTransfer.files?.length > 0) {
|
||
this._uploadFiles(event.dataTransfer.files, folderPath);
|
||
return;
|
||
}
|
||
const from = event.dataTransfer.getData(MOVE_MIME);
|
||
if (from) this._moveFile(from, folderPath);
|
||
});
|
||
}
|
||
|
||
async _toggleFile(path, visible, checkbox) {
|
||
if (visible) {
|
||
this._visible.add(path);
|
||
const ok = await this._addLayers(path);
|
||
if (!ok) {
|
||
// Loading failed (see _addLayers) — don't leave the box checked
|
||
// for a file that isn't actually showing anything.
|
||
this._visible.delete(path);
|
||
if (checkbox) checkbox.checked = false;
|
||
}
|
||
} else {
|
||
this._visible.delete(path);
|
||
this._removeLayers(path);
|
||
}
|
||
}
|
||
|
||
// Fetches the file's GeoJSON itself (rather than handing maplibre a URL
|
||
// to fetch internally) so a parse failure — a real GPX a device/app
|
||
// wrote in some way REXML doesn't like, say — surfaces as an alert
|
||
// instead of the layer just silently never appearing. Returns whether it
|
||
// succeeded.
|
||
async _addLayers(path) {
|
||
const id = sourceId(path);
|
||
if (this._map.getSource(id)) return true;
|
||
|
||
let geojson;
|
||
try {
|
||
const response = await fetch(gpxFileUrl(path));
|
||
if (!response.ok) {
|
||
const { error } = await response.json().catch(() => ({}));
|
||
window.alert(error || `Could not load "${path}".`);
|
||
return false;
|
||
}
|
||
geojson = await response.json();
|
||
} catch (err) {
|
||
window.alert(`Could not load "${path}": ${err.message}`);
|
||
return false;
|
||
}
|
||
|
||
if (this._map.getSource(id)) return true; // added concurrently (e.g. a style.load race) while this was fetching
|
||
|
||
this._map.addSource(id, { type: "geojson", data: geojson });
|
||
this._map.addLayer({
|
||
id: `${id}-line`,
|
||
type: "line",
|
||
source: id,
|
||
filter: ["==", ["geometry-type"], "LineString"],
|
||
layout: { "line-cap": "round", "line-join": "round" },
|
||
paint: { "line-color": TRACK_COLOR, "line-width": 3 },
|
||
});
|
||
this._map.addLayer({
|
||
id: `${id}-points`,
|
||
type: "circle",
|
||
source: id,
|
||
filter: ["==", ["geometry-type"], "Point"],
|
||
paint: {
|
||
"circle-radius": 5,
|
||
"circle-color": TRACK_COLOR,
|
||
"circle-stroke-color": "#fff",
|
||
"circle-stroke-width": 1.5,
|
||
},
|
||
});
|
||
|
||
this._registerPointInteractivity(`${id}-points`);
|
||
this._registerLineInteractivity(`${id}-line`);
|
||
return true;
|
||
}
|
||
|
||
// Registered once per layer id, ever — map.on(type, layerId, fn) is a
|
||
// delegated listener that lives on the map itself and keeps matching
|
||
// that layer id after setStyle() removes and (via _addLayers) re-adds
|
||
// it, so re-registering on every re-add would stack duplicate popups.
|
||
_registerPointInteractivity(layerId) {
|
||
if (this._interactiveLayers.has(layerId)) return;
|
||
this._interactiveLayers.add(layerId);
|
||
|
||
this._map.on("click", layerId, (event) => {
|
||
const feature = event.features[0];
|
||
if (!feature) return;
|
||
new Popup({ closeButton: true, maxWidth: "260px" })
|
||
.setLngLat(event.lngLat)
|
||
.setHTML(popupHtml(feature.properties))
|
||
.addTo(this._map);
|
||
});
|
||
this._map.on("mouseenter", layerId, () => {
|
||
this._map.getCanvas().style.cursor = "pointer";
|
||
});
|
||
this._map.on("mouseleave", layerId, () => {
|
||
this._map.getCanvas().style.cursor = "";
|
||
});
|
||
}
|
||
|
||
// Hover shows a quick summary (unlike a waypoint popup, which is
|
||
// click-triggered — a track's summary describes the whole line, not
|
||
// whatever point along it happens to get hovered, so there's no single
|
||
// right anchor point worth waiting for a click on). Click opens the full
|
||
// profile panel, which does need the click gesture to avoid flashing
|
||
// open on every casual hover.
|
||
_registerLineInteractivity(layerId) {
|
||
if (this._interactiveLayers.has(layerId)) return;
|
||
this._interactiveLayers.add(layerId);
|
||
|
||
let popup = null;
|
||
this._map.on("mouseenter", layerId, (event) => {
|
||
this._map.getCanvas().style.cursor = "pointer";
|
||
const feature = event.features[0];
|
||
if (!feature) return;
|
||
popup = new Popup({ closeButton: false, closeOnClick: false, maxWidth: "260px" })
|
||
.setLngLat(event.lngLat)
|
||
.setHTML(trackPopupHtml(feature.properties))
|
||
.addTo(this._map);
|
||
});
|
||
this._map.on("mouseleave", layerId, () => {
|
||
this._map.getCanvas().style.cursor = "";
|
||
popup?.remove();
|
||
popup = null;
|
||
});
|
||
this._map.on("click", layerId, (event) => {
|
||
const feature = event.features[0];
|
||
if (feature) this._profilePanel?.show(feature.properties);
|
||
});
|
||
}
|
||
|
||
_removeLayers(path) {
|
||
const id = sourceId(path);
|
||
[`${id}-line`, `${id}-points`].forEach((layerId) => {
|
||
if (this._map.getLayer(layerId)) this._map.removeLayer(layerId);
|
||
});
|
||
if (this._map.getSource(id)) this._map.removeSource(id);
|
||
}
|
||
|
||
async _uploadFiles(fileList, folder) {
|
||
// .zip: Garmin's bulk/FIT export format — the server expands it into
|
||
// its .gpx/.fit entries, so it's accepted here even though the tree
|
||
// never shows a .zip itself.
|
||
const files = [...fileList].filter((file) => /\.(gpx|fit|zip)$/i.test(file.name));
|
||
if (files.length === 0) return;
|
||
|
||
this._setStatus(files.length === 1 ? "Uploading…" : `Uploading ${files.length} files…`);
|
||
let tree = null;
|
||
let failed = 0;
|
||
|
||
for (const file of files) {
|
||
const formData = new FormData();
|
||
formData.append("file", file);
|
||
formData.append("folder", folder);
|
||
try {
|
||
const response = await fetch(UPLOAD_URL, { method: "POST", body: formData });
|
||
if (redirectIfUnauthorized(response)) return;
|
||
if (!response.ok) throw new Error("upload failed");
|
||
({ tree } = await response.json());
|
||
} catch (err) {
|
||
failed += 1;
|
||
}
|
||
}
|
||
|
||
if (tree) this._renderTree(tree);
|
||
this._setStatus(failed > 0 ? `${failed} of ${files.length} uploads failed.` : "Uploaded.");
|
||
}
|
||
|
||
async _deleteFile(path) {
|
||
if (!window.confirm(`Delete "${path}"?`)) return;
|
||
|
||
const response = await fetch(gpxFileUrl(path), { method: "DELETE" });
|
||
if (redirectIfUnauthorized(response)) return;
|
||
if (!response.ok) return;
|
||
|
||
if (this._visible.has(path)) {
|
||
this._visible.delete(path);
|
||
this._removeLayers(path);
|
||
}
|
||
const { tree } = await response.json();
|
||
this._renderTree(tree);
|
||
}
|
||
|
||
async _deleteFolder(path) {
|
||
if (!window.confirm(`Delete "${path}" and everything in it?`)) return;
|
||
|
||
const response = await fetch(`/api/gpx/folder/${path.split("/").map(encodeURIComponent).join("/")}`, {
|
||
method: "DELETE",
|
||
});
|
||
if (redirectIfUnauthorized(response)) return;
|
||
if (!response.ok) return;
|
||
|
||
const prefix = `${path}/`;
|
||
[...this._visible].forEach((visiblePath) => {
|
||
if (visiblePath === path || visiblePath.startsWith(prefix)) {
|
||
this._visible.delete(visiblePath);
|
||
this._removeLayers(visiblePath);
|
||
}
|
||
});
|
||
|
||
const { tree } = await response.json();
|
||
this._renderTree(tree);
|
||
}
|
||
|
||
async _moveFile(from, toFolder) {
|
||
if (from === toFolder) return;
|
||
|
||
const response = await fetch(MOVE_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||
body: `from=${encodeURIComponent(from)}&to_folder=${encodeURIComponent(toFolder)}`,
|
||
});
|
||
if (redirectIfUnauthorized(response)) return;
|
||
if (!response.ok) return;
|
||
|
||
const { path: newPath, tree } = await response.json();
|
||
if (this._visible.has(from)) {
|
||
this._visible.delete(from);
|
||
this._removeLayers(from);
|
||
this._visible.add(newPath);
|
||
this._addLayers(newPath);
|
||
}
|
||
this._renderTree(tree);
|
||
}
|
||
|
||
_setStatus(text) {
|
||
this._uploadStatus.hidden = false;
|
||
this._uploadStatus.textContent = text;
|
||
}
|
||
}
|
||
|
||
// Write endpoints require login (see app.rb); a 401 means the session
|
||
// expired or was never established — send the user to log in rather than
|
||
// silently failing.
|
||
function redirectIfUnauthorized(response) {
|
||
if (response.status !== 401) return false;
|
||
window.location.href = "/login";
|
||
return true;
|
||
}
|
||
|
||
function sourceId(path) {
|
||
return `gpx-${path}`;
|
||
}
|
||
|
||
function gpxFileUrl(path) {
|
||
return `/api/gpx/file/${path.split("/").map(encodeURIComponent).join("/")}`;
|
||
}
|
||
|
||
// properties come straight from an uploaded GPX file — untrusted input —
|
||
// so every value is escaped before landing in the popup's HTML.
|
||
function popupHtml({ name, description, time }) {
|
||
const parts = [];
|
||
if (name) parts.push(`<strong>${escapeHtml(name)}</strong>`);
|
||
if (description) parts.push(`<p>${linkify(description).replace(/\n/g, "<br>")}</p>`);
|
||
if (time) {
|
||
const parsed = new Date(time);
|
||
if (!Number.isNaN(parsed.getTime())) {
|
||
parts.push(`<p class="gpx-popup__time">${escapeHtml(parsed.toLocaleString())}</p>`);
|
||
}
|
||
}
|
||
return parts.length > 0 ? parts.join("") : "<em>No details</em>";
|
||
}
|
||
|
||
// properties come straight from an uploaded GPX/FIT file — untrusted input.
|
||
function trackPopupHtml({ name, activity_type, distance_meters, elevation_gain_meters, duration_secs }) {
|
||
const parts = [];
|
||
if (name) parts.push(`<strong>${escapeHtml(name)}</strong>`);
|
||
|
||
const stats = [];
|
||
if (activity_type) stats.push(escapeHtml(formatActivityType(activity_type)));
|
||
if (typeof distance_meters === "number") stats.push(`${(distance_meters / 1000).toFixed(1)} km`);
|
||
if (typeof elevation_gain_meters === "number") stats.push(`↑ ${Math.round(elevation_gain_meters)} m`);
|
||
if (typeof duration_secs === "number") stats.push(formatDuration(duration_secs));
|
||
if (stats.length > 0) parts.push(`<p>${stats.join(" · ")}</p>`);
|
||
parts.push(`<p class="gpx-popup__time">Click for the full profile</p>`);
|
||
|
||
return parts.length > 0 ? parts.join("") : "<em>No details</em>";
|
||
}
|
||
|
||
function formatDuration(totalSeconds) {
|
||
const hours = Math.floor(totalSeconds / 3600);
|
||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||
return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
|
||
}
|
||
|
||
function escapeHtml(text) {
|
||
const div = document.createElement("div");
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// Turns bare URLs in untrusted text into safe <a> links: the string is
|
||
// split on the URL pattern and every piece is escaped — including the URL
|
||
// itself, both as href and as link text — before any HTML is assembled, so
|
||
// nothing bypasses escaping. The URL pattern excludes quote characters, so
|
||
// a matched URL can never break out of the href="..." attribute.
|
||
const URL_PATTERN = /(https?:\/\/[^\s<>"']+)/g;
|
||
|
||
function linkify(text) {
|
||
return text
|
||
.split(URL_PATTERN)
|
||
.map((part, i) => (i % 2 === 1 ? urlToLink(part) : escapeHtml(part)))
|
||
.join("");
|
||
}
|
||
|
||
function urlToLink(url) {
|
||
// Keep trailing sentence punctuation (e.g. "...place/1234.") out of the
|
||
// link itself.
|
||
const [, core, trailing] = url.match(/^(.*?)([.,;:!?]*)$/);
|
||
const href = escapeHtml(core);
|
||
return `<a href="${href}" target="_blank" rel="noopener noreferrer">${href}</a>${escapeHtml(trailing)}`;
|
||
}
|