app/assets/javascripts/index/export.js

   1 //= require download_util
   2
   3 OSM.Export = 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, page.load);
  85   };
  86
  87   page.load = function () {
  88     map
  89       .addLayer(locationFilter)
  90       .on("moveend", update);
  91
  92     $("#maxlat, #minlon, #maxlon, #minlat").change(boundsChanged);
  93     $("#drag_box").click(enableFilter);
  94     $(".export_form").on("submit", checkSubmit);
  95
  96     document.querySelector(".export_form")
  97       .addEventListener("turbo:submit-end", OSM.getTurboBlobHandler("map.osm"));
  98
  99     document.querySelector(".export_form")
 100       .addEventListener("turbo:before-fetch-response", OSM.turboHtmlResponseHandler);
 101
 102     document.querySelector(".export_form")
 103       .addEventListener("turbo:before-fetch-request", function (event) {
 104         event.detail.fetchOptions.headers.Accept = "application/xml";
 105       });
 106
 107     $("#export_overpass").on("click", async function (event) {
 108       event.preventDefault();
 109       const downloadUrl = $(this).attr("href");
 110       const confirmed = await showConfirmationModal();
 111       if (confirmed) {
 112         window.location.href = downloadUrl;
 113       }
 114     });
 115
 116     update();
 117     return map.getState();
 118   };
 119
 120   page.unload = function () {
 121     map
 122       .removeLayer(locationFilter)
 123       .off("moveend", update);
 124   };
 125
 126   return page;
 127 };