app/assets/javascripts/index/note.js

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