X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/69437cf0ad12550ebfaadea56d074ac9996b8ca0..8d0472f2cade9739f3b60cda17afe8289322e2f4:/app/assets/javascripts/index.js diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 74ec05823..69e223b22 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -6,6 +6,8 @@ //= require leaflet.note //= require leaflet.share //= require leaflet.polyline +//= require leaflet.query +//= require leaflet.contextmenu //= require index/search //= require index/browse //= require index/export @@ -13,13 +15,17 @@ //= require index/history //= require index/note //= require index/new_note +//= require index/directions +//= require index/changeset +//= require index/query //= require router -//= require routing -(function() { +$(document).ready(function () { var loaderTimeout; OSM.loadSidebarContent = function(path, callback) { + map.setSidebarOverlaid(false); + clearTimeout(loaderTimeout); loaderTimeout = setTimeout(function() { @@ -29,9 +35,9 @@ // IE<10 doesn't respect Vary: X-Requested-With header, so // prevent caching the XHR response as a full-page URL. if (path.indexOf('?') >= 0) { - path += '&xhr=1' + path += '&xhr=1'; } else { - path += '?xhr=1' + path += '?xhr=1'; } $('#sidebar_content') @@ -49,7 +55,7 @@ if (xhr.getResponseHeader('X-Page-Title')) { var title = xhr.getResponseHeader('X-Page-Title'); - document.title = decodeURIComponent(escape(title)); + document.title = decodeURIComponent(title); } $('head') @@ -67,14 +73,84 @@ } }); }; -})(); -$(document).ready(function () { var params = OSM.mapParams(); + // TODO consider using a separate js file for the context menu additions + var context_describe = function(e){ + var precision = OSM.zoomPrecision(map.getZoom()); + OSM.router.route("/search?query=" + encodeURIComponent( + e.latlng.lat.toFixed(precision) + "," + e.latlng.lng.toFixed(precision) + )); + }; + + var context_directionsfrom = function(e){ + var precision = OSM.zoomPrecision(map.getZoom()); + OSM.router.route("/directions?" + querystring.stringify({ + route: e.latlng.lat.toFixed(precision) + ',' + e.latlng.lng.toFixed(precision) + ';' + $('#route_to').val() + })); + } + + var context_directionsto = function(e){ + var precision = OSM.zoomPrecision(map.getZoom()); + OSM.router.route("/directions?" + querystring.stringify({ + route: $('#route_from').val() + ';' + e.latlng.lat.toFixed(precision) + ',' + e.latlng.lng.toFixed(precision) + })); + } + + // TODO only allow this if zoomed in enough + var context_addnote = function(e){ + // TODO this currently doesn't work correctly - I think the "route" needs to be chained to ensure it comes once the pan has finished. + map.panTo(e.latlng, {animate: false}); + OSM.router.route('/note/new'); + } + + var context_centrehere = function(e){ + map.panTo(e.latlng); + } + + var context_queryhere = function(e) { + var precision = OSM.zoomPrecision(map.getZoom()), + latlng = e.latlng.wrap(), + lat = latlng.lat.toFixed(precision), + lng = latlng.lng.toFixed(precision); + + OSM.router.route("/query?lat=" + lat + "&lon=" + lng); + } + + // TODO internationalisation of the context menu strings var map = new L.OSM.Map("map", { zoomControl: false, - layerControl: false + layerControl: false, + contextmenu: true, + contextmenuWidth: 140, + contextmenuItems: [{ + text: 'Directions from here', + callback: context_directionsfrom + }, { + text: 'Directions to here', + callback: context_directionsto + }, '-', { + text: 'Add a note here', + callback: context_addnote + }, { + text: 'Show address', + callback: context_describe + }, { + text: 'Query features', + callback: context_queryhere + }, { + text: 'Centre map here', + callback: context_centrehere + }] + }); + + $(document).on('mousedown', function(e){ + if(e.shiftKey){ + map.contextmenu.disable(); // on firefox, shift disables our contextmenu. we explicitly do this for all browsers. + }else{ + map.contextmenu.enable(); + } }); map.attributionControl.setPrefix(''); @@ -125,22 +201,28 @@ $(document).ready(function () { sidebar: sidebar }).addTo(map); + L.OSM.query({ + position: position, + sidebar: sidebar + }).addTo(map); + L.control.scale() .addTo(map); - if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { - initializeNotes(map); + if (OSM.STATUS !== 'api_offline' && OSM.STATUS !== 'database_offline') { + OSM.initializeNotes(map); if (params.layers.indexOf(map.noteLayer.options.code) >= 0) { map.addLayer(map.noteLayer); } - initializeBrowse(map); + OSM.initializeBrowse(map); if (params.layers.indexOf(map.dataLayer.options.code) >= 0) { map.addLayer(map.dataLayer); } } - $('.leaflet-control .control-button').tooltip({placement: 'left', container: 'body'}); + var placement = $('html').attr('dir') === 'rtl' ? 'right' : 'left'; + $('.leaflet-control .control-button').tooltip({placement: placement, container: 'body'}); var expiry = new Date(); expiry.setYear(expiry.getFullYear() + 10); @@ -153,10 +235,10 @@ $(document).ready(function () { map._object); $.removeCookie("_osm_location"); - $.cookie("_osm_location", cookieContent(map), { expires: expiry, path: "/" }); + $.cookie("_osm_location", OSM.locationCookie(map), { expires: expiry, path: "/" }); }); - if ($.cookie('_osm_welcome') == 'hide') { + if ($.cookie('_osm_welcome') === 'hide') { $('.welcome').hide(); } @@ -183,7 +265,7 @@ $(document).ready(function () { map.setView([params.lat, params.lon], params.zoom); } - var marker = L.marker([0, 0], {icon: getUserIcon()}); + var marker = L.marker([0, 0], {icon: OSM.getUserIcon()}); if (params.marker) { marker.setLatLng([params.mlat, params.mlon]).addTo(map); @@ -199,6 +281,39 @@ $(document).ready(function () { marker.setLatLng(center).addTo(map); }); + function remoteEditHandler(bbox, object) { + var loaded = false, + url = document.location.protocol === "https:" ? + "https://127.0.0.1:8112/load_and_zoom?" : + "http://127.0.0.1:8111/load_and_zoom?", + query = { + left: bbox.getWest() - 0.0001, + top: bbox.getNorth() + 0.0001, + right: bbox.getEast() + 0.0001, + bottom: bbox.getSouth() - 0.0001 + }; + + if (object) query.select = object.type + object.id; + + var iframe = $('