OSM.NewNote = function (map) {
- var noteLayer = map.noteLayer,
- content = $("#sidebar_content"),
- page = {},
- addNoteButton = $(".control-note .control-button"),
- newNote,
- halo;
-
- var noteIcons = {
+ const noteLayer = map.noteLayer,
+ content = $("#sidebar_content"),
+ page = {},
+ addNoteButton = $(".control-note .control-button");
+ let newNoteMarker,
+ halo;
+
+ const noteIcons = {
"new": L.icon({
iconUrl: OSM.NEW_NOTE_MARKER,
iconSize: [25, 40],
OSM.router.route("/note/new");
});
- 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: {
+ function createNote(location, text, callback) {
+ fetch("/api/0.6/notes.json", {
+ method: "POST",
+ headers: { ...OSM.oauth },
+ body: new URLSearchParams({
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.router.route("/note/" + feature.properties.id);
- }
+ text
+ })
+ })
+ .then(response => response.json())
+ .then(callback);
}
- function updateMarker(feature) {
- var marker = L.marker(feature.geometry.coordinates.reverse(), {
+ function addCreatedNoteMarker(feature) {
+ const marker = L.marker(feature.geometry.coordinates.reverse(), {
icon: noteIcons[feature.properties.status],
opacity: 0.9,
interactive: true
});
marker.id = feature.properties.id;
marker.addTo(noteLayer);
- return marker;
}
- page.pushstate = page.popstate = function (path) {
- OSM.loadSidebarContent(path, function () {
- page.load(path);
+ function addHalo(latlng) {
+ if (halo) map.removeLayer(halo);
+
+ halo = L.circleMarker(latlng, {
+ weight: 2.5,
+ radius: 20,
+ fillOpacity: 0.5,
+ color: "#FF6200"
});
- };
- function newHalo(loc, a) {
- if (a === "dragstart" && map.hasLayer(halo)) {
- map.removeLayer(halo);
- } else {
- if (map.hasLayer(halo)) map.removeLayer(halo);
+ map.addLayer(halo);
+ }
- halo = L.circleMarker(loc, {
- weight: 2.5,
- radius: 20,
- fillOpacity: 0.5,
- color: "#FF6200"
- });
+ function removeHalo() {
+ if (halo) map.removeLayer(halo);
+ halo = null;
+ }
- map.addLayer(halo);
- }
+ function addNewNoteMarker(latlng) {
+ if (newNoteMarker) map.removeLayer(newNoteMarker);
+
+ newNoteMarker = L.marker(latlng, {
+ icon: noteIcons.new,
+ opacity: 0.9,
+ draggable: true
+ });
+
+ newNoteMarker.on("dragstart dragend", function (a) {
+ removeHalo();
+ if (a.type === "dragend") {
+ addHalo(newNoteMarker.getLatLng());
+ }
+ });
+
+ newNoteMarker.addTo(map);
+ addHalo(newNoteMarker.getLatLng());
+
+ newNoteMarker.on("dragend", function () {
+ content.find("textarea").focus();
+ });
}
- page.load = function (path) {
- if (addNoteButton.hasClass("disabled")) return;
- if (addNoteButton.hasClass("active")) return;
+ function removeNewNoteMarker() {
+ removeHalo();
+ if (newNoteMarker) map.removeLayer(newNoteMarker);
+ newNoteMarker = null;
+ }
+
+ function moveNewNotMarkerToClick(e) {
+ if (newNoteMarker) newNoteMarker.setLatLng(e.latlng);
+ if (halo) halo.setLatLng(e.latlng);
+ content.find("textarea").focus();
+ }
+ function updateControls() {
+ const zoomedOut = addNoteButton.hasClass("disabled");
+ const withoutText = content.find("textarea").val() === "";
+
+ content.find("#new-note-zoom-warning").prop("hidden", !zoomedOut);
+ content.find("input[type=submit]").prop("disabled", zoomedOut || withoutText);
+ if (newNoteMarker) newNoteMarker.setOpacity(zoomedOut ? 0.5 : 0.9);
+ }
+
+ page.pushstate = page.popstate = function (path) {
+ OSM.loadSidebarContent(path, function () {
+ page.load(path);
+ });
+ };
+
+ page.load = function (path) {
addNoteButton.addClass("active");
map.addLayer(noteLayer);
- var params = querystring.parse(path.substring(path.indexOf("?") + 1));
- var markerLatlng;
+ const params = new URLSearchParams(path.substring(path.indexOf("?")));
+ let markerLatlng;
- if (params.lat && params.lon) {
- markerLatlng = L.latLng(params.lat, params.lon);
+ if (params.has("lat") && params.has("lon")) {
+ markerLatlng = L.latLng(params.get("lat"), params.get("lon"));
} else {
markerLatlng = map.getCenter();
}
padding: [50, 50]
});
- newNote = L.marker(markerLatlng, {
- 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();
- });
+ addNewNoteMarker(markerLatlng);
content.find("textarea")
- .on("input", disableWhenBlank)
+ .on("input", updateControls)
.focus();
- function disableWhenBlank(e) {
- $(e.target.form.add).prop("disabled", $(e.target).val() === "");
- }
-
content.find("input[type=submit]").on("click", function (e) {
+ const location = newNoteMarker.getLatLng().wrap();
+ const text = content.find("textarea").val();
+
e.preventDefault();
- createNote(newNote, e.target.form, "/api/0.6/notes.json");
+ $(this).prop("disabled", true);
+ newNoteMarker.options.draggable = false;
+ newNoteMarker.dragging.disable();
+
+ createNote(location, text, (feature) => {
+ if (typeof OSM.user === "undefined") {
+ const anonymousNotesCount = Number(Cookies.get("_osm_anonymous_notes_count")) || 0;
+ Cookies.set("_osm_anonymous_notes_count", anonymousNotesCount + 1, { secure: true, expires: 30, path: "/", samesite: "lax" });
+ }
+ content.find("textarea").val("");
+ addCreatedNoteMarker(feature);
+ OSM.router.route("/note/" + feature.properties.id);
+ });
});
+ map.on("click", moveNewNotMarkerToClick);
+ addNoteButton.on("disabled enabled", updateControls);
+ updateControls();
+
return map.getState();
};
page.unload = function () {
- noteLayer.removeLayer(newNote);
- map.removeLayer(halo);
+ map.off("click", moveNewNotMarkerToClick);
+ addNoteButton.off("disabled enabled", updateControls);
+ removeNewNoteMarker();
addNoteButton.removeClass("active");
};
projects / rails.git / blobdiff