From 032bbaee35fdd0877eaa28f355a801f3cad18188 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Sun, 19 Jul 2026 15:10:58 +0200 Subject: [PATCH] Simplify page state management --- .../javascripts/index_modules/changeset.js | 2 +- .../javascripts/index_modules/directions.js | 2 +- .../javascripts/index_modules/element.js | 2 +- .../javascripts/index_modules/export.js | 2 +- .../javascripts/index_modules/history.js | 2 +- app/assets/javascripts/index_modules/home.js | 2 +- app/assets/javascripts/index_modules/index.js | 2 +- .../javascripts/index_modules/new_note.js | 2 +- app/assets/javascripts/index_modules/note.js | 2 +- app/assets/javascripts/index_modules/query.js | 2 +- .../javascripts/index_modules/search.js | 2 +- app/assets/javascripts/router.js | 19 ++++++++----------- 12 files changed, 19 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/index_modules/changeset.js b/app/assets/javascripts/index_modules/changeset.js index c448eb86c..6f8538af1 100644 --- a/app/assets/javascripts/index_modules/changeset.js +++ b/app/assets/javascripts/index_modules/changeset.js @@ -10,7 +10,7 @@ export default function (map) { $(this).find(".numbered_pagination").trigger("numbered_pagination:enable"); }); - page.pushstate = page.popstate = function (path) { + page.load = function (path) { OSM.loadSidebarContent(path) .then(page.init); }; diff --git a/app/assets/javascripts/index_modules/directions.js b/app/assets/javascripts/index_modules/directions.js index 89b03a9ff..b8b4f37b0 100644 --- a/app/assets/javascripts/index_modules/directions.js +++ b/app/assets/javascripts/index_modules/directions.js @@ -253,7 +253,7 @@ export default function (map) { return sidebarReadyPromise ??= OSM.loadSidebarContent("/directions"); } - page.pushstate = page.popstate = page.init = function () { + page.load = page.init = function () { initializeFromParams(); $(".search_form").hide(); diff --git a/app/assets/javascripts/index_modules/element.js b/app/assets/javascripts/index_modules/element.js index 2369aa1d6..b48e068f8 100644 --- a/app/assets/javascripts/index_modules/element.js +++ b/app/assets/javascripts/index_modules/element.js @@ -7,7 +7,7 @@ export function element(type) { return function () { const page = {}; - page.pushstate = page.popstate = function (path, id, version) { + page.load = function (path, id, version) { OSM.loadSidebarContent(path) .then(() => page.init(path, id, version, true)); }; diff --git a/app/assets/javascripts/index_modules/export.js b/app/assets/javascripts/index_modules/export.js index a3ab0c538..5b6c3e1e0 100644 --- a/app/assets/javascripts/index_modules/export.js +++ b/app/assets/javascripts/index_modules/export.js @@ -80,7 +80,7 @@ export default function (map) { if (getBounds().getSize() > OSM.MAX_REQUEST_AREA) e.preventDefault(); } - page.pushstate = page.popstate = function (path) { + page.load = function (path) { OSM.loadSidebarContent(path) .then(page.init); }; diff --git a/app/assets/javascripts/index_modules/history.js b/app/assets/javascripts/index_modules/history.js index 356ad17e8..1f1bb62ec 100644 --- a/app/assets/javascripts/index_modules/history.js +++ b/app/assets/javascripts/index_modules/history.js @@ -287,7 +287,7 @@ export default function (map) { } } - page.pushstate = page.popstate = function (path) { + page.load = function (path) { OSM.loadSidebarContent(path) .then(page.init); }; diff --git a/app/assets/javascripts/index_modules/home.js b/app/assets/javascripts/index_modules/home.js index 13510fae0..80274c892 100644 --- a/app/assets/javascripts/index_modules/home.js +++ b/app/assets/javascripts/index_modules/home.js @@ -8,7 +8,7 @@ export default function (map) { const page = {}; - page.pushstate = page.popstate = page.init = function () { + page.load = page.init = function () { map.setSidebarOverlaid(true); clearMarker(); diff --git a/app/assets/javascripts/index_modules/index.js b/app/assets/javascripts/index_modules/index.js index 0f60ca335..98ea66b14 100644 --- a/app/assets/javascripts/index_modules/index.js +++ b/app/assets/javascripts/index_modules/index.js @@ -1,7 +1,7 @@ export default function (map) { const page = {}; - page.pushstate = page.popstate = function () { + page.load = function () { map.setSidebarOverlaid(true); document.title = OSM.i18n.t("layouts.project_name.title"); }; diff --git a/app/assets/javascripts/index_modules/new_note.js b/app/assets/javascripts/index_modules/new_note.js index 60f4767c7..7204f87c3 100644 --- a/app/assets/javascripts/index_modules/new_note.js +++ b/app/assets/javascripts/index_modules/new_note.js @@ -97,7 +97,7 @@ export default function (map) { if (newNoteMarker) newNoteMarker.setOpacity(zoomedOut ? 0.5 : 0.9); } - page.pushstate = page.popstate = function (path) { + page.load = function (path) { OSM.loadSidebarContent(path) .then(() => page.init(path)); }; diff --git a/app/assets/javascripts/index_modules/note.js b/app/assets/javascripts/index_modules/note.js index a143801be..006d7be31 100644 --- a/app/assets/javascripts/index_modules/note.js +++ b/app/assets/javascripts/index_modules/note.js @@ -2,7 +2,7 @@ export default function (map) { const content = $("#sidebar_content"), page = {}; - page.pushstate = page.popstate = function (path, id) { + page.load = function (path, id) { OSM.loadSidebarContent(path).then(function () { const data = $(".details").data(); if (!data) return; diff --git a/app/assets/javascripts/index_modules/query.js b/app/assets/javascripts/index_modules/query.js index eb8fd56d4..c17cd430c 100644 --- a/app/assets/javascripts/index_modules/query.js +++ b/app/assets/javascripts/index_modules/query.js @@ -198,7 +198,7 @@ export default function (map) { const page = {}; - page.pushstate = page.popstate = function (path) { + page.load = function (path) { OSM.loadSidebarContent(path) .then(() => page.init(path, true)); }; diff --git a/app/assets/javascripts/index_modules/search.js b/app/assets/javascripts/index_modules/search.js index 49034fa87..1046acee7 100644 --- a/app/assets/javascripts/index_modules/search.js +++ b/app/assets/javascripts/index_modules/search.js @@ -71,7 +71,7 @@ export default function (map) { const page = {}; - page.pushstate = page.popstate = function (path) { + page.load = function (path) { const params = new URLSearchParams(path.substring(path.indexOf("?"))); if (params.has("query")) { $(".search_form input[name=query]").val(params.get("query")); diff --git a/app/assets/javascripts/router.js b/app/assets/javascripts/router.js index 222e8b6a4..058835fda 100644 --- a/app/assets/javascripts/router.js +++ b/app/assets/javascripts/router.js @@ -10,7 +10,7 @@ to route controller objects. Path templates can contain placeholders (`/note/:id`) and optional segments (`/:type/:id(/history)`). - Route controller objects can define four methods that are called at defined + Route controller objects can define three methods that are called at defined times during routing: * The `init` method is called by the router when a path which matches the @@ -18,18 +18,15 @@ as arguments the URL path plus any matching arguments for placeholders in the path template. - * The `pushstate` method is called when a page which matches the route's path - template is loaded via pushState. It is passed the same arguments as `init`. - - * The `popstate` method is called when returning to a previously - pushState-loaded page via popstate (i.e. browser back/forward buttons). + * The `load` method is called when a supported and matching page is + loaded via pushState or popstate. It is passed the same arguments as `init`. * The `unload` method is called on the exiting route controller when navigating via pushState or popstate to another route. Note that while `init` is not called by the router for pushState-based loads, it's frequently useful for route controllers to call it manually inside their - definition of the `pushstate` and `popstate` methods. + definition of the `load` method. An instance of OSM.Router is assigned to `OSM.router`. To navigate to a new page via pushState (with automatic full-page load fallback), call `OSM.router.route`: @@ -116,7 +113,7 @@ OSM.Router = function (map, rts) { }); } - function transition(action, path, route, beforeEnter = () => {}) { + function transition(path, route, beforeEnter = () => {}) { if (!route) return false; routingInProgress = routingInProgress .catch(() => {}) @@ -125,7 +122,7 @@ OSM.Router = function (map, rts) { beforeEnter(); currentPath = path; currentRoute = route; - await currentRoute.run(action, currentPath); + await currentRoute.run("load", currentPath); updateSecondaryNav(); }); return routingInProgress; @@ -136,7 +133,7 @@ OSM.Router = function (map, rts) { const path = location.pathname + location.search, route = routes.recognize(path); if (path === currentPath) return; - const done = transition("popstate", path, route); + const done = transition(path, route); if (done) done.then(() => map.setState(e.originalEvent.state, { animate: false })); }); @@ -144,7 +141,7 @@ OSM.Router = function (map, rts) { const path = url.replace(/#.*/, ""), route = routes.recognize(path); const state = OSM.parseHash(url); - return Boolean(transition("pushstate", path, route, () => { + return Boolean(transition(path, route, () => { map.setState(state); window.history.pushState(state, document.title, url); })); -- 2.47.3