X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/fec9dc84c05a496141d4e7fedd21765ddcceba06..8c82be0537e1bbdcbd7f20d5f26deaae09774281:/app/assets/javascripts/router.js diff --git a/app/assets/javascripts/router.js b/app/assets/javascripts/router.js index cbd418895..9657549b1 100644 --- a/app/assets/javascripts/router.js +++ b/app/assets/javascripts/router.js @@ -1,3 +1,50 @@ +/* + OSM.Router implements pushState-based navigation for the main page and + other pages that use a sidebar+map based layout (export, search results, + history, and browse pages). + + For browsers without pushState, it falls back to full page loads, which all + of the above pages support. + + The router is initialized with a set of routes: a mapping of URL path templates + 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 + times during routing: + + * The `load` method is called by the router when a path which matches the + route's path template is loaded via a normal full page load. It is passed + 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 `load`. + + * The `popstate` method is called when returning to a previously + pushState-loaded page via popstate (i.e. browser back/forward buttons). + + * The `unload` method is called on the exiting route controller when navigating + via pushState or popstate to another route. + + Note that while `load` 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. + + 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`: + + OSM.router.route('/way/1234'); + + If `route` is passed a path that matches one of the path templates, it performs + the appropriate actions and returns true. Otherwise it returns false. + + OSM.Router also handles updating the hash portion of the URL containing transient + map state such as the position and zoom level. Some route controllers may wish to + temporarily suppress updating the hash (for example, to omit the hash on pages + such as `/way/1234` unless the map is moved). This can be done by calling + `OSM.router.moveListenerOff` and `OSM.router.moveListenerOn`. + */ OSM.Router = function(map, rts) { var escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g; var optionalParam = /\((.*?)\)/g; @@ -44,11 +91,11 @@ OSM.Router = function(map, rts) { } }; - var currentPath = window.location.pathname + window.location.search, + var currentPath = window.location.pathname.replace(/(.)\/$/, '$1') + window.location.search, currentRoute = routes.recognize(currentPath), currentHash = location.hash || OSM.formatHash(map); - var router, stateChange; + var router = {}; if (window.history && window.history.pushState) { $(window).on('popstate', function(e) { @@ -59,19 +106,15 @@ OSM.Router = function(map, rts) { currentPath = path; currentRoute = routes.recognize(currentPath); currentRoute.run('popstate', currentPath); - var state = e.originalEvent.state; - if (state.center) { - map.setView(state.center, state.zoom, {animate: false}); - map.updateLayers(state.layers); - } + map.setState(e.originalEvent.state, {animate: false}); }); - router = function (url) { + router.route = function (url) { var path = url.replace(/#.*/, ''), route = routes.recognize(path); if (!route) return false; - window.history.pushState(OSM.parseHash(url) || {}, document.title, url); currentRoute.run('unload'); + window.history.pushState(OSM.parseHash(url), document.title, url); currentPath = path; currentRoute = route; currentRoute.run('pushstate', currentPath); @@ -86,7 +129,7 @@ OSM.Router = function(map, rts) { } }; } else { - router = function (url) { + router.route = function (url) { window.location.assign(url); }; @@ -107,9 +150,7 @@ OSM.Router = function(map, rts) { if (hash === currentHash) return; currentHash = hash; var state = OSM.parseHash(hash); - if (!state) return; - map.setView(state.center, state.zoom); - map.updateLayers(state.layers); + map.setState(state); router.stateChange(state, hash); }; @@ -126,6 +167,11 @@ OSM.Router = function(map, rts) { router.stateChange(loadState || {}); }; + router.setCurrentPath = function (path) { + currentPath = path; + currentRoute = routes.recognize(currentPath); + }; + map.on('moveend baselayerchange overlaylayerchange', router.updateHash); $(window).on('hashchange', router.hashUpdated);