app/assets/javascripts/index_modules/note.js

   1 export default function (map) {
   2   const content = $("#sidebar_content");
   3
   4   function initialize(path, id, skipMoveToNote) {
   5     content.find("button[name]").on("click", function (e) {
   6       e.preventDefault();
   7       const { url, method } = $(e.target).data(),
   8             name = $(e.target).attr("name"),
   9             data = new URLSearchParams();
  10       content.find("button[name]").prop("disabled", true);
  11
  12       if (name !== "subscribe" && name !== "unsubscribe") {
  13         const textarea = content.find("textarea");
  14         if (textarea.length) {
  15           data.set("text", textarea.val());
  16         }
  17       }
  18
  19       fetch(url, {
  20         method: method,
  21         headers: { ...OSM.oauth },
  22         body: data
  23       })
  24         .then(response => {
  25           if (response.ok) return response;
  26           return response.text().then(text => {
  27             throw new Error(text || `HTTP Error ${response.status} ${response.statusText}`);
  28           });
  29         })
  30         .then(() => OSM.loadSidebarContent(path))
  31         .then(() => initialize(path, id, false))
  32         .catch(error => {
  33           content.find("#comment-error")
  34             .text(error.message)
  35             .prop("hidden", false)
  36             .get(0).scrollIntoView({ block: "nearest" });
  37           updateButtons();
  38         });
  39     });
  40
  41     content.find("textarea").on("input", function (e) {
  42       updateButtons(e.target.form);
  43     });
  44
  45     content.find("textarea").val("").trigger("input");
  46
  47     const data = $(".details").data();
  48
  49     if (data) {
  50       const hashParams = OSM.parseHash();
  51       map.addObject({
  52         type: "note",
  53         id: parseInt(id, 10),
  54         latLng: L.latLng(data.coordinates.split(",")),
  55         icon: OSM.noteMarkers[data.status]
  56       }, function () {
  57         if (!hashParams.center && !skipMoveToNote) {
  58           const latLng = L.latLng(data.coordinates.split(","));
  59           OSM.router.withoutMoveListener(function () {
  60             map.setView(latLng, 15, { reset: true });
  61           });
  62         }
  63       });
  64     }
  65   }
  66
  67   function updateButtons() {
  68     const resolveButton = content.find("button[name='close']");
  69     const commentButton = content.find("button[name='comment']");
  70
  71     content.find("button[name]").prop("disabled", false);
  72     if (content.find("textarea").val() === "") {
  73       resolveButton.text(resolveButton.data("defaultActionText"));
  74       commentButton.prop("disabled", true);
  75     } else {
  76       resolveButton.text(resolveButton.data("commentActionText"));
  77     }
  78   }
  79
  80   return {
  81     load(path, id) {
  82       OSM.loadSidebarContent(path).then(function () {
  83         const data = $(".details").data();
  84         if (!data) return;
  85         const [lat, lng] = data.coordinates.split(",").map(parseFloat);
  86         initialize(path, id, map.getBounds().contains({ lat, lng }));
  87       });
  88     },
  89
  90     init(path, id) {
  91       initialize(path, id);
  92     },
  93
  94     unload() {
  95       map.removeObject();
  96     }
  97   };
  98 }