app/assets/javascripts/index/new_note.js

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