app/assets/javascripts/index/new_note.js

   1 OSM.NewNote = function (map) {
   2   const noteLayer = map.noteLayer,
   3         content = $("#sidebar_content"),
   4         page = {},
   5         addNoteButton = $(".control-note .control-button");
   6   let newNoteMarker,
   7       halo;
   8
   9   addNoteButton.on("click", function (e) {
  10     e.preventDefault();
  11     e.stopPropagation();
  12
  13     if ($(this).hasClass("disabled")) return;
  14
  15     OSM.router.route("/note/new");
  16   });
  17
  18   function createNote(location, text, callback) {
  19     fetch("/api/0.6/notes.json", {
  20       method: "POST",
  21       headers: { ...OSM.oauth },
  22       body: new URLSearchParams({
  23         lat: location.lat,
  24         lon: location.lng,
  25         text
  26       })
  27     })
  28       .then(response => response.json())
  29       .then(callback);
  30   }
  31
  32   function addCreatedNoteMarker(feature) {
  33     const marker = L.marker(feature.geometry.coordinates.reverse(), {
  34       icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }),
  35       opacity: 0.9,
  36       interactive: true
  37     });
  38     marker.id = feature.properties.id;
  39     marker.addTo(noteLayer);
  40   }
  41
  42   function addHalo(latlng) {
  43     if (halo) map.removeLayer(halo);
  44
  45     halo = L.circleMarker(latlng, {
  46       weight: 2.5,
  47       radius: 20,
  48       fillOpacity: 0.5,
  49       color: "#FF6200"
  50     });
  51
  52     map.addLayer(halo);
  53   }
  54
  55   function removeHalo() {
  56     if (halo) map.removeLayer(halo);
  57     halo = null;
  58   }
  59
  60   function addNewNoteMarker(latlng) {
  61     if (newNoteMarker) map.removeLayer(newNoteMarker);
  62
  63     newNoteMarker = L.marker(latlng, {
  64       icon: OSM.getMarker({ icon: "NEW_NOTE_MARKER", shadow: false, height: 40 }),
  65       opacity: 0.9,
  66       draggable: true
  67     });
  68
  69     newNoteMarker.on("dragstart dragend", function (a) {
  70       removeHalo();
  71       if (a.type === "dragend") {
  72         addHalo(newNoteMarker.getLatLng());
  73       }
  74     });
  75
  76     newNoteMarker.addTo(map);
  77     addHalo(newNoteMarker.getLatLng());
  78
  79     newNoteMarker.on("dragend", function () {
  80       content.find("textarea").focus();
  81     });
  82   }
  83
  84   function removeNewNoteMarker() {
  85     removeHalo();
  86     if (newNoteMarker) map.removeLayer(newNoteMarker);
  87     newNoteMarker = null;
  88   }
  89
  90   function moveNewNotMarkerToClick(e) {
  91     if (newNoteMarker) newNoteMarker.setLatLng(e.latlng);
  92     if (halo) halo.setLatLng(e.latlng);
  93     content.find("textarea").focus();
  94   }
  95
  96   function updateControls() {
  97     const zoomedOut = addNoteButton.hasClass("disabled");
  98     const withoutText = content.find("textarea").val() === "";
  99
 100     content.find("#new-note-zoom-warning").prop("hidden", !zoomedOut);
 101     content.find("input[type=submit]").prop("disabled", zoomedOut || withoutText);
 102     if (newNoteMarker) newNoteMarker.setOpacity(zoomedOut ? 0.5 : 0.9);
 103   }
 104
 105   page.pushstate = page.popstate = function (path) {
 106     OSM.loadSidebarContent(path, function () {
 107       page.load(path);
 108     });
 109   };
 110
 111   page.load = function (path) {
 112     addNoteButton.addClass("active");
 113
 114     map.addLayer(noteLayer);
 115
 116     const params = new URLSearchParams(path.substring(path.indexOf("?")));
 117     let markerLatlng;
 118
 119     if (params.has("lat") && params.has("lon")) {
 120       markerLatlng = L.latLng(params.get("lat"), params.get("lon"));
 121     } else {
 122       markerLatlng = map.getCenter();
 123     }
 124
 125     map.panInside(markerLatlng, {
 126       padding: [50, 50]
 127     });
 128
 129     addNewNoteMarker(markerLatlng);
 130
 131     content.find("textarea")
 132       .on("input", updateControls)
 133       .focus();
 134
 135     content.find("input[type=submit]").on("click", function (e) {
 136       const location = newNoteMarker.getLatLng().wrap();
 137       const text = content.find("textarea").val();
 138
 139       e.preventDefault();
 140       $(this).prop("disabled", true);
 141       newNoteMarker.options.draggable = false;
 142       newNoteMarker.dragging.disable();
 143
 144       createNote(location, text, (feature) => {
 145         if (typeof OSM.user === "undefined") {
 146           const anonymousNotesCount = Number(Cookies.get("_osm_anonymous_notes_count")) || 0;
 147           Cookies.set("_osm_anonymous_notes_count", anonymousNotesCount + 1, { secure: true, expires: 30, path: "/", samesite: "lax" });
 148         }
 149         content.find("textarea").val("");
 150         addCreatedNoteMarker(feature);
 151         OSM.router.route("/note/" + feature.properties.id);
 152       });
 153     });
 154
 155     map.on("click", moveNewNotMarkerToClick);
 156     addNoteButton.on("disabled enabled", updateControls);
 157     updateControls();
 158
 159     return map.getState();
 160   };
 161
 162   page.unload = function () {
 163     map.off("click", moveNewNotMarkerToClick);
 164     addNoteButton.off("disabled enabled", updateControls);
 165     removeNewNoteMarker();
 166     addNoteButton.removeClass("active");
 167   };
 168
 169   return page;
 170 };