From 22d6633114d02af0e543afbb23cc05e33d1a1c9d Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Mon, 10 Jun 2013 13:22:51 -0700 Subject: [PATCH] Start refactoring notes layer --- app/assets/javascripts/application.js | 1 + app/assets/javascripts/index.js | 4 + app/assets/javascripts/index/notes.js.erb | 115 ++++++++---------- app/assets/javascripts/leaflet.note.js | 27 ++++ app/assets/javascripts/leaflet.share.js | 2 - .../javascripts/templates/map/share.jst.ejs | 7 -- 6 files changed, 82 insertions(+), 74 deletions(-) create mode 100644 app/assets/javascripts/leaflet.note.js delete mode 100644 app/assets/javascripts/templates/map/share.jst.ejs diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index a9c76d17f..2ea378787 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -7,6 +7,7 @@ //= require leaflet.osm //= require leaflet.locationfilter //= require leaflet.locate +//= require leaflet.note //= require i18n/translations //= require oauth //= require osm diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 8d3a043d6..9f5c9d1ac 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -30,6 +30,10 @@ $(document).ready(function () { } }).addTo(map); + L.control.note({ + position: 'topright' + }).addTo(map); + L.control.locate({ position: 'topright' }).addTo(map); diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb index e540826ec..54e0d5df7 100644 --- a/app/assets/javascripts/index/notes.js.erb +++ b/app/assets/javascripts/index/notes.js.erb @@ -2,7 +2,10 @@ //= require templates/notes/new $(document).ready(function () { - var params = OSM.mapParams(); + var params = OSM.mapParams(), + noteLayer = new L.LayerGroup(), + notes = {}, + newNote; var noteIcons = { "new": L.icon({ @@ -22,52 +25,40 @@ $(document).ready(function () { }) }; - var noteLayer = new L.LayerGroup(); - var notes = {}; - var newNote; - layers.push({ layer: noteLayer, layerCode: "N" }); + map.noteLayer = noteLayer; + map.on("layeradd", function (e) { if (e.layer == noteLayer) { loadNotes(); map.on("moveend", loadNotes); } - }); - - map.on("layerremove", function (e) { + }).on("layerremove", function (e) { if (e.layer == noteLayer) { map.off("moveend", loadNotes); noteLayer.clearLayers(); notes = {}; } - }); - - // Don't focus the text area on touch devices to avoid flashing the keyboard - if (!('ontouchstart' in document.documentElement)) { - map.on("popupopen", function (e) { - $(e.popup._container).find(".comment").focus(); - }); - } - - map.on("popupclose", function (e) { + }).on("popupclose", function (e) { if (newNote && e.popup == newNote._popup) { $(newNote).oneTime(10, "removenote", function () { map.removeLayer(newNote); newNote = null; }); } + }).on("popupopen", function (e) { + if (!('ontouchstart' in document.documentElement)) { + $(e.popup._container).find(".comment").focus(); + } }); if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { -// map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name")); - if (params.layers) setMapLayers(params.layers); if (params.notes) map.addLayer(noteLayer); - if (params.note) { $.ajax({ url: "/api/" + OSM.API_VERSION + "/notes/" + params.note + ".json", @@ -84,16 +75,13 @@ $(document).ready(function () { } function updateMarker(marker, feature) { - if (marker) - { + if (marker) { marker.setIcon(noteIcons[feature.properties.status]); marker.setPopupContent(createPopupContent( - marker, feature.properties, + marker, feature.properties, $(marker._popup._content).find("textarea").val() )); - } - else - { + } else { marker = L.marker(feature.geometry.coordinates.reverse(), { icon: noteIcons[feature.properties.status], opacity: 0.9 @@ -121,26 +109,28 @@ $(document).ready(function () { noteLoader = $.ajax({ url: url, - success: function (json) { - var oldNotes = notes; + success: success + }); + } - notes = {}; + function success(json) { + var oldNotes = notes; - json.features.forEach(function (feature) { - var marker = oldNotes[feature.properties.id]; + notes = {}; - delete oldNotes[feature.properties.id]; + json.features.forEach(updateMarkers); - notes[feature.properties.id] = updateMarker(marker, feature); - }); + function updateMarkers(feature) { + var marker = oldNotes[feature.properties.id]; + delete oldNotes[feature.properties.id]; + notes[feature.properties.id] = updateMarker(marker, feature); + } - for (id in oldNotes) { - noteLayer.removeLayer(oldNotes[id]); - } + for (id in oldNotes) { + noteLayer.removeLayer(oldNotes[id]); + } - noteLoader = null; - } - }); + noteLoader = null; } }; @@ -201,15 +191,17 @@ $(document).ready(function () { lon: location.lng, text: $(form.text).val() }, - success: function (feature) { - $(marker._popup._content).find("textarea").val(""); + success: noteCreated + }); - notes[feature.properties.id] = updateMarker(marker, feature); - newNote = null; + function noteCreated(feature) { + $(marker._popup._content).find("textarea").val(""); - $("#createnoteanchor").removeClass("disabled").addClass("geolink"); - } - }); + notes[feature.properties.id] = updateMarker(marker, feature); + newNote = null; + + $("#createnoteanchor").removeClass("disabled").addClass("geolink"); + } } function updateNote(marker, form, method, url) { @@ -249,16 +241,11 @@ $(document).ready(function () { var mapSize = map.getSize(); var markerPosition; - if (mapSize.y > 800) - { + if (mapSize.y > 800) { markerPosition = [mapSize.x / 2, mapSize.y / 2]; - } - else if (mapSize.y > 400) - { + } else if (mapSize.y > 400) { markerPosition = [mapSize.x / 2, 400]; - } - else - { + } else { markerPosition = [mapSize.x / 2, mapSize.y]; } @@ -268,17 +255,15 @@ $(document).ready(function () { draggable: true }); - var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") })); + var popupContent = $(JST["templates/notes/new"]({ + create_url: $(e.target).attr("href") + })); - popupContent.find("textarea").on("input", function (e) { - var form = e.target.form; + popupContent.find("textarea").on("input", disableWhenBlank); - if ($(e.target).val() == "") { - $(form.add).prop("disabled", true); - } else { - $(form.add).prop("disabled", false); - } - }); + function disableWhenBlank(e) { + $(e.target.form).prop("disabled", $(e.target).val() === ""); + } popupContent.find("input[type=submit]").on("click", function (e) { e.preventDefault(); diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js new file mode 100644 index 000000000..14a33640a --- /dev/null +++ b/app/assets/javascripts/leaflet.note.js @@ -0,0 +1,27 @@ +L.Control.Note = L.Control.extend({ + options: { + position: 'topright', + title: 'Notes', + }, + + onAdd: function (map) { + var className = 'leaflet-control-locate', + classNames = className + ' leaflet-control-zoom leaflet-bar leaflet-control', + container = L.DomUtil.create('div', classNames); + + var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container); + link.href = '#'; + link.title = this.options.title; + + L.DomEvent + .on(link, 'click', L.DomEvent.stopPropagation) + .on(link, 'click', L.DomEvent.preventDefault) + .on(link, 'dblclick', L.DomEvent.stopPropagation); + + return container; + } +}); + +L.control.note = function(options) { + return new L.Control.Note(options); +}; diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index 7d5eb0cc9..83cc035f9 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -1,5 +1,3 @@ -//= require templates/map/share - L.Control.Share = L.Control.extend({ options: { position: 'topright', diff --git a/app/assets/javascripts/templates/map/share.jst.ejs b/app/assets/javascripts/templates/map/share.jst.ejs deleted file mode 100644 index b86c04e12..000000000 --- a/app/assets/javascripts/templates/map/share.jst.ejs +++ /dev/null @@ -1,7 +0,0 @@ -

<%- I18n.t('javascripts.share.title') %>

- - - - -- 2.43.2