app/assets/javascripts/index/new_note.js

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