X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/1b19974b1209fdab6f35168290251572ca86f142..ca64b39e0d204e76bc4a3a0281bdee9f22fe0824:/app/assets/javascripts/index/new_note.js.erb

diff --git a/app/assets/javascripts/index/new_note.js.erb b/app/assets/javascripts/index/new_note.js.erb
index 34d8355a5..0541ba6e9 100644
--- a/app/assets/javascripts/index/new_note.js.erb
+++ b/app/assets/javascripts/index/new_note.js.erb
@@ -1,144 +1,163 @@
 OSM.NewNote = function(map) {
-    var noteLayer = map.noteLayer,
-        content = $('#sidebar_content'),
-        page = {},
-        addNoteButton = $(".control-note .control-button"),
-        newNote;
-
-    var noteIcons = {
-      "new": L.icon({
-        iconUrl: "<%= image_path 'new_note_marker.png' %>",
-        iconSize: [25, 40],
-        iconAnchor: [12, 40]
-      }),
-      "open": L.icon({
-        iconUrl: "<%= image_path 'open_note_marker.png' %>",
-        iconSize: [25, 40],
-        iconAnchor: [12, 40]
-      }),
-      "closed": L.icon({
-        iconUrl: "<%= image_path 'closed_note_marker.png' %>",
-        iconSize: [25, 40],
-        iconAnchor: [12, 40]
-      })
-    };
-
-    page.pushstate = page.popstate = function() {
-        page.load();
-    };
-
-    addNoteButton.on("click", function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      OSM.route('/new_note');
+  var noteLayer = map.noteLayer,
+    content = $('#sidebar_content'),
+    page = {},
+    addNoteButton = $(".control-note .control-button"),
+    newNote,
+    halo;
+
+  var noteIcons = {
+    "new": L.icon({
+      iconUrl: "<%= image_path 'new_note_marker.png' %>",
+      iconSize: [25, 40],
+      iconAnchor: [12, 40]
+    }),
+    "open": L.icon({
+      iconUrl: "<%= image_path 'open_note_marker.png' %>",
+      iconSize: [25, 40],
+      iconAnchor: [12, 40]
+    }),
+    "closed": L.icon({
+      iconUrl: "<%= image_path 'closed_note_marker.png' %>",
+      iconSize: [25, 40],
+      iconAnchor: [12, 40]
+    })
+  };
+
+  addNoteButton.on("click", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if ($(this).hasClass('disabled')) return;
+
+    OSM.router.route('/new_note');
+  });
+
+  function createNote(marker, form, url) {
+    var location = marker.getLatLng().wrap();
+
+    marker.options.draggable = false;
+    marker.dragging.disable();
+
+    $(form).find("input[type=submit]").prop("disabled", true);
+
+    $.ajax({
+      url: url,
+      type: "POST",
+      oauth: true,
+      data: {
+        lat: location.lat,
+        lon: location.lng,
+        text: $(form.text).val()
+      },
+      success: function (feature) {
+        noteCreated(feature, marker);
+      }
     });
 
-    function createNote(marker, form, url) {
-      var location = marker.getLatLng();
-
-      marker.options.draggable = false;
-      marker.dragging.disable();
-
-      $(form).find("input[type=submit]").prop("disabled", true);
-
-      $.ajax({
-        url: url,
-        type: "POST",
-        oauth: true,
-        data: {
-          lat: location.lat,
-          lon: location.lng,
-          text: $(form.text).val()
-        },
-        success: function(feature) {
-          noteCreated(feature, marker);
-        }
+    function noteCreated(feature, marker) {
+      content.find("textarea").val("");
+      updateMarker(feature);
+      newNote = null;
+      noteLayer.removeLayer(marker);
+      addNoteButton.removeClass("active");
+      OSM.route('/browse/note/' + feature.properties.id);
+    }
+  }
+
+  function updateMarker(feature) {
+    var marker = L.marker(feature.geometry.coordinates.reverse(), {
+      icon: noteIcons[feature.properties.status],
+      opacity: 0.9,
+      clickable: true
+    });
+    marker.id = feature.properties.id;
+    marker.addTo(noteLayer);
+    return marker;
+  }
+
+  page.pushstate = page.popstate = function (path) {
+    OSM.loadSidebarContent(path, page.load);
+  };
+
+  function newHalo(loc, a) {
+    if (a == 'dragstart' && map.hasLayer(halo)) {
+      map.removeLayer(halo);
+    } else {
+      if (map.hasLayer(halo)) map.removeLayer(halo);
+
+      halo = L.circleMarker(loc, {
+        weight: 2.5,
+        radius: 20,
+        fillOpacity: 0.5,
+        color: "#FF6200"
       });
 
-      function noteCreated(feature, marker) {
-        content.find("textarea").val("");
-        updateMarker(feature);
-        newNote = null;
-        noteLayer.removeLayer(marker);
-        addNoteButton.removeClass("active");
-        OSM.route('/browse/note/' + feature.properties.id);
-      }
+      map.addLayer(halo);
     }
+  }
 
-    function updateMarker(feature) {
-        marker = L.marker(feature.geometry.coordinates.reverse(), {
-            icon: noteIcons[feature.properties.status],
-            opacity: 0.9,
-            clickable: true
-        });
-        marker.id = feature.properties.id;
-        marker.addTo(noteLayer);
-        return marker;
-    }
+  page.load = function () {
+    if (addNoteButton.hasClass("disabled")) return;
+    if (addNoteButton.hasClass("active")) return;
 
-    function initialize() {
-        if (addNoteButton.hasClass("disabled")) return;
-        if (addNoteButton.hasClass("active")) return;
-
-        addNoteButton.addClass("active");
-
-        map.addLayer(noteLayer);
-
-        var mapSize = map.getSize();
-        var markerPosition;
-
-        if (mapSize.y > 800) {
-          markerPosition = [mapSize.x / 2, mapSize.y / 2];
-        } else if (mapSize.y > 400) {
-          markerPosition = [mapSize.x / 2, 400];
-        } else {
-          markerPosition = [mapSize.x / 2, mapSize.y];
-        }
-
-        newNote = L.marker(map.containerPointToLatLng(markerPosition), {
-          icon: noteIcons["new"],
-          opacity: 0.9,
-          draggable: true
-        });
-
-        newNote.addTo(noteLayer)
-
-        newNote.on("remove", function (e) {
-          addNoteButton.removeClass("active");
-        }).on("dragstart", function (e) {
-          $(newNote).stopTime("removenote");
-        }).on("dragend", function (e) {
-          content.find("textarea").focus();
-        });
-
-        content.find("textarea")
-            .on("input", disableWhenBlank)
-            .focus();
-
-        function disableWhenBlank(e) {
-          $(e.target.form.add).prop("disabled", $(e.target).val() === "");
-        }
-
-        content.find('input[type=submit]').on('click', function(e) {
-            e.preventDefault();
-            createNote(newNote, e.target.form, '/api/0.6/notes.json');
-        });
-    }
+    addNoteButton.addClass("active");
 
-    page.load = function() {
-        content.load(window.location.pathname + "?xhr=1", function(a, b, xhr) {
-            if (xhr.getResponseHeader('X-Page-Title')) {
-                document.title = xhr.getResponseHeader('X-Page-Title');
-            }
-            initialize();
-        });
+    map.addLayer(noteLayer);
+
+    var mapSize = map.getSize();
+    var markerPosition;
+
+    if (mapSize.y > 800) {
+      markerPosition = [mapSize.x / 2, mapSize.y / 2];
+    } else if (mapSize.y > 400) {
+      markerPosition = [mapSize.x / 2, 400];
+    } else {
+      markerPosition = [mapSize.x / 2, mapSize.y];
     }
 
-    page.unload = function() {
-        noteLayer.removeLayer(newNote);
-        addNoteButton.removeClass("active");
+    newNote = L.marker(map.containerPointToLatLng(markerPosition), {
+      icon: noteIcons["new"],
+      opacity: 0.9,
+      draggable: true
+    });
+
+    newNote.on("dragstart dragend", function(a) {
+      newHalo(newNote.getLatLng(), a.type);
+    });
+
+    newNote.addTo(noteLayer);
+    newHalo(newNote.getLatLng());
+
+    newNote.on("remove", function () {
+      addNoteButton.removeClass("active");
+    }).on("dragstart",function () {
+      $(newNote).stopTime("removenote");
+    }).on("dragend", function () {
+      content.find("textarea").focus();
+    });
+
+    content.find("textarea")
+      .on("input", disableWhenBlank)
+      .focus();
+
+    function disableWhenBlank(e) {
+      $(e.target.form.add).prop("disabled", $(e.target).val() === "");
     }
 
-    return page;
-}
+    content.find('input[type=submit]').on('click', function (e) {
+      e.preventDefault();
+      createNote(newNote, e.target.form, '/api/0.6/notes.json');
+    });
+
+    return map.getState();
+  };
+
+  page.unload = function () {
+    noteLayer.removeLayer(newNote);
+    map.removeLayer(halo);
+    addNoteButton.removeClass("active");
+  };
+
+  return page;
+};