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") {
  45         const textarea = content.find("textarea");
  46         if (textarea.length) {
  47           data.set("text", textarea.val());
  48         }
  49       }
  50
  51       fetch(url, {
  52         method: method,
  53         headers: { ...OSM.oauth },
  54         body: data
  55       })
  56         .then(response => {
  57           if (response.ok) return response;
  58           return response.text().then(text => {
  59             throw new Error(text);
  60           });
  61         })
  62         .then(() => {
  63           OSM.loadSidebarContent(path, () => {
  64             initialize(path, id, false);
  65           });
  66         })
  67         .catch(error => {
  68           content.find("#comment-error")
  69             .text(error.message)
  70             .prop("hidden", false)
  71             .get(0).scrollIntoView({ block: "nearest" });
  72           updateButtons();
  73         });
  74     });
  75
  76     content.find("textarea").on("input", function (e) {
  77       updateButtons(e.target.form);
  78     });
  79
  80     content.find("textarea").val("").trigger("input");
  81
  82     const data = $(".details").data();
  83
  84     if (data) {
  85       const hashParams = OSM.parseHash();
  86       map.addObject({
  87         type: "note",
  88         id: parseInt(id, 10),
  89         latLng: L.latLng(data.coordinates.split(",")),
  90         icon: noteIcons[data.status]
  91       }, function () {
  92         if (!hashParams.center && !skipMoveToNote) {
  93           const latLng = L.latLng(data.coordinates.split(","));
  94           OSM.router.withoutMoveListener(function () {
  95             map.setView(latLng, 15, { reset: true });
  96           });
  97         }
  98       });
  99     }
 100   }
 101
 102   function updateButtons() {
 103     const resolveButton = content.find("button[name='close']");
 104     const commentButton = content.find("button[name='comment']");
 105
 106     content.find("button[name]").prop("disabled", false);
 107     if (content.find("textarea").val() === "") {
 108       resolveButton.text(resolveButton.data("defaultActionText"));
 109       commentButton.prop("disabled", true);
 110     } else {
 111       resolveButton.text(resolveButton.data("commentActionText"));
 112     }
 113   }
 114
 115   page.unload = function () {
 116     map.removeObject();
 117   };
 118
 119   return page;
 120 };