Last active
May 13, 2016 06:14
-
-
Save herejia/dfdfb570027e5afe5da7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name leboncoin-distance | |
| // @namespace net.herezia | |
| // @description Affiche la distance en mn et km avec le lieu d'une offre | |
| // @include http://*.leboncoin.fr/*/offres/* | |
| // @version 2 | |
| // @grant GM_getValue | |
| // @grant GM_setValue | |
| // ==/UserScript== | |
| const DEFAULT_FETCH_OPTIONS = { | |
| method: 'GET', | |
| mode: 'cors', | |
| cache: 'force-cache' | |
| }; | |
| const DEFAULT_PLACE = { | |
| name: 'Lyon', | |
| longitude: '4.8324803', | |
| latitude: '45.7575286' | |
| }; | |
| const LOCATION_NAME_KEY = 'fromLocationName'; | |
| const LONGITUDE_KEY = 'fromLocationLongitude'; | |
| const LATITUDE_KEY = 'fromLocationLatitude'; | |
| const coordinates = { | |
| getLongitude: function() { | |
| return GM_getValue(LONGITUDE_KEY) || DEFAULT_PLACE.longitude; | |
| }, | |
| setLongitude: function(lon) { | |
| GM_setValue(LONGITUDE_KEY, lon); | |
| document.querySelector('#start-location-longitude').value = lon; | |
| return this; | |
| }, | |
| getLatitude: function() { | |
| return GM_getValue(LATITUDE_KEY) || DEFAULT_PLACE.latitude; | |
| }, | |
| setLatitude: function(lat) { | |
| GM_setValue(LATITUDE_KEY, lat); | |
| document.querySelector('#start-location-latitude').value = lat; | |
| return this; | |
| } | |
| }; | |
| function insertUI() { | |
| var startLocationHtml = '<div class="from-location">' + | |
| ' <fieldset><legend>Afficher les distances</legend>' + | |
| ' <input id="start-location-city" placeholder="Ville" type="text"/><input value="☉" title="Géolocaliser" id="geolocate-button" type="button"/>' + | |
| ' <input id="start-location-longitude" placeholder="Longitude" type="text"/>' + | |
| ' <input id="start-location-latitude" placeholder="Latitude" type="text"/>' + | |
| ' </fieldset>' + | |
| '</div>'; | |
| document.querySelector('.location').innerHTML += startLocationHtml; | |
| Array.from(document.querySelectorAll('.lbc .detail')).forEach(detailDiv => { | |
| detailDiv.insertAdjacentHTML("afterbegin", '<div class="hrz-distance" style="float: right"></div>'); | |
| }); | |
| function bindInputToGMValue(inputSelector, gmValueKey, defaultValue) { | |
| var input = document.querySelector(inputSelector); | |
| input.value = GM_getValue(gmValueKey) || defaultValue; | |
| input.addEventListener('change', function() { | |
| GM_setValue(gmValueKey, input.value); | |
| }); | |
| } | |
| bindInputToGMValue('#start-location-city', LOCATION_NAME_KEY, DEFAULT_PLACE.name); | |
| bindInputToGMValue('#start-location-longitude', LONGITUDE_KEY, DEFAULT_PLACE.longitude); | |
| bindInputToGMValue('#start-location-latitude', LATITUDE_KEY, DEFAULT_PLACE.latitude); | |
| const cityInput = document.querySelector('#start-location-city'); | |
| cityInput.addEventListener('change', function() { | |
| getCoordinates(cityInput.value).then(city => { | |
| coordinates.setLongitude(city.lon).setLatitude(city.lat); | |
| return showDistances(); | |
| }); | |
| }); | |
| document.querySelector('#geolocate-button').addEventListener('click', function() { | |
| navigator.geolocation.getCurrentPosition( | |
| position => { | |
| const coords = position.coords; | |
| cityInput.value = 'Ma position'; | |
| GM_setValue(LOCATION_NAME_KEY, cityInput.value); | |
| coordinates.setLatitude(coords.latitude).setLongitude(coords.longitude); | |
| showDistances(); | |
| }, | |
| () => alert('Localisation impossible')); | |
| }); | |
| } | |
| function getDistance(destinationLon, destinationLat) { | |
| var distanceUrl = 'http://api-osrm-routed-production.tilestream.net/viaroute?output=json&z=14' | |
| // http://api-osrm-routed-production.tilestream.net or http://router.project-osrm.org | |
| + '&loc=' + coordinates.getLatitude() + ',' + coordinates.getLongitude() | |
| + '&loc=' + destinationLat + ',' + destinationLon; | |
| return fetch(distanceUrl, DEFAULT_FETCH_OPTIONS) | |
| .then(function(response) { | |
| return response.json(); | |
| }) | |
| .then(function(json) { | |
| return { | |
| time: Math.round(json.route_summary.total_time / 60), | |
| distance: Math.round(json.route_summary.total_distance / 1000) | |
| }; | |
| }); | |
| } | |
| function getCoordinates(locationName) { | |
| var locationByNameUrl = 'http://nominatim.openstreetmap.org/search?q=' + encodeURI(locationName) + '&format=json'; | |
| return fetch(locationByNameUrl, DEFAULT_FETCH_OPTIONS) | |
| .then(response => response.json()) | |
| .then(json => json[0]); | |
| } | |
| function showDistances() { | |
| Array.from(document.querySelectorAll('.lbc .detail .placement')).forEach(function(placementDiv) { | |
| const cityLocation = placementDiv.innerHTML; | |
| const cityName = cityLocation.replace(/\s/gm, '').replace('/', ', '); | |
| getCoordinates(cityName) | |
| .then(function(city) { | |
| return getDistance(city.lon, city.lat) | |
| .then(travelData => { | |
| let distanceHolder = Array.from(placementDiv.parentNode.children) | |
| .find(child => child.classList.contains('hrz-distance')); | |
| distanceHolder.innerHTML = '⌚ ' + travelData.time + ' mn ⛟ ' + travelData.distance + 'km'; | |
| }); | |
| }) | |
| .catch(); | |
| }); | |
| } | |
| insertUI(); | |
| showDistances(); |
Author
herejia
commented
Jan 6, 2016
v2 choix de la ville de départ et geolocalisation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment