app/assets/javascripts/index/note.js

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