app/assets/javascripts/index_modules/export.js

   1 //= require download_util
   2
   3 export default function (map) {
   4   const page = {};
   5
   6   const locationFilter = new L.LocationFilter({
   7     enableButton: false,
   8     adjustButton: false
   9   }).on("change", update);
  10
  11   function getBounds() {
  12     return L.latLngBounds(
  13       { lat: $("#minlat").val(), lng: $("#minlon").val() },
  14       { lat: $("#maxlat").val(), lng: $("#maxlon").val() });
  15   }
  16
  17   function boundsChanged() {
  18     const bounds = getBounds();
  19     map.fitBounds(bounds);
  20     locationFilter.setBounds(bounds);
  21     locationFilter.enable();
  22     validateControls();
  23   }
  24
  25   function enableFilter(e) {
  26     e.preventDefault();
  27
  28     $("#drag_box").hide();
  29
  30     locationFilter.setBounds(map.getBounds().pad(-0.2));
  31     locationFilter.enable();
  32     validateControls();
  33   }
  34
  35   function update() {
  36     setBounds(locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds());
  37     validateControls();
  38   }
  39
  40   async function showConfirmationModal() {
  41     const $modal = $("#export_confirmation");
  42     const $downloadButton = $modal.find("[data-action=\"download\"]");
  43     $modal.appendTo("body").modal("show");
  44
  45     return new Promise(resolve => {
  46       const onOkClick = () => {
  47         resolve(true);
  48         $modal.modal("hide");
  49       };
  50
  51       const onModalHidden = () => {
  52         $downloadButton.off("click", onOkClick);
  53         $modal.off("hidden.bs.modal", onModalHidden);
  54         resolve(false);
  55       };
  56
  57       $downloadButton.on("click", onOkClick);
  58       $modal.on("hidden.bs.modal", onModalHidden);
  59     });
  60   }
  61
  62   function setBounds(bounds) {
  63     const sw = OSM.cropLocation(bounds.getSouthWest(), map.getZoom());
  64     $("#minlon").val(sw.lng);
  65     $("#minlat").val(sw.lat);
  66     const ne = OSM.cropLocation(bounds.getNorthEast(), map.getZoom());
  67     $("#maxlon").val(ne.lng);
  68     $("#maxlat").val(ne.lat);
  69
  70     $("#export_overpass").attr("href",
  71                                `https://overpass-api.de/api/map?bbox=${sw.lng},${sw.lat},${ne.lng},${ne.lat}`);
  72   }
  73
  74   function validateControls() {
  75     $("#export_osm_too_large").toggle(getBounds().getSize() > OSM.MAX_REQUEST_AREA);
  76     $("#export_commit").toggle(getBounds().getSize() < OSM.MAX_REQUEST_AREA);
  77   }
  78
  79   function checkSubmit(e) {
  80     if (getBounds().getSize() > OSM.MAX_REQUEST_AREA) e.preventDefault();
  81   }
  82
  83   page.pushstate = page.popstate = function (path) {
  84     OSM.loadSidebarContent(path)
  85       .then(page.load);
  86   };
  87
  88   page.load = function () {
  89     map
  90       .addLayer(locationFilter)
  91       .on("moveend", update);
  92
  93     $("#maxlat, #minlon, #maxlon, #minlat").change(boundsChanged);
  94     $("#drag_box").click(enableFilter);
  95     $(".export_form").on("submit", checkSubmit);
  96
  97     document.querySelector(".export_form")
  98       .addEventListener("turbo:submit-end", OSM.getTurboBlobHandler("map.osm"));
  99
 100     document.querySelector(".export_form")
 101       .addEventListener("turbo:before-fetch-response", OSM.turboHtmlResponseHandler);
 102
 103     document.querySelector(".export_form")
 104       .addEventListener("turbo:before-fetch-request", function (event) {
 105         event.detail.fetchOptions.headers.Accept = "application/xml";
 106       });
 107
 108     $("#export_overpass").on("click", async function (event) {
 109       event.preventDefault();
 110       const downloadUrl = $(this).attr("href");
 111       const confirmed = await showConfirmationModal();
 112       if (confirmed) {
 113         window.location.href = downloadUrl;
 114       }
 115     });
 116
 117     update();
 118     return map.getState();
 119   };
 120
 121   page.unload = function () {
 122     map
 123       .removeLayer(locationFilter)
 124       .off("moveend", update);
 125   };
 126
 127   return page;
 128 }