app/assets/javascripts/index/new_note.js

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