app/assets/javascripts/index_modules/export.js

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