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       L.latLng($("#minlat").val(), $("#minlon").val()),
  14       L.latLng($("#maxlat").val(), $("#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 truncated = [bounds.getSouthWest(), bounds.getNorthEast()]
  64       .map(c => OSM.cropLocation(c, map.getZoom()));
  65     $("#minlon").val(truncated[0][1]);
  66     $("#minlat").val(truncated[0][0]);
  67     $("#maxlon").val(truncated[1][1]);
  68     $("#maxlat").val(truncated[1][0]);
  69
  70     $("#export_overpass").attr("href",
  71                                "https://overpass-api.de/api/map?bbox=" +
  72                                truncated.map(p => p.reverse()).join());
  73   }
  74
  75   function validateControls() {
  76     $("#export_osm_too_large").toggle(getBounds().getSize() > OSM.MAX_REQUEST_AREA);
  77     $("#export_commit").toggle(getBounds().getSize() < OSM.MAX_REQUEST_AREA);
  78   }
  79
  80   function checkSubmit(e) {
  81     if (getBounds().getSize() > OSM.MAX_REQUEST_AREA) e.preventDefault();
  82   }
  83
  84   page.pushstate = page.popstate = function (path) {
  85     OSM.loadSidebarContent(path, 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 };