app/assets/javascripts/index/note.js.erb

   1 OSM.Note = function (map) {
   2   var noteLayer = map.noteLayer,
   3     content = $('#sidebar_content'),
   4     page = {},
   5     halo, currentNote;
   6
   7   var noteIcons = {
   8     "new": L.icon({
   9       iconUrl: "<%= image_path('new_note_marker.png') %>",
  10       iconSize: [25, 40],
  11       iconAnchor: [12, 40]
  12     }),
  13     "open": L.icon({
  14       iconUrl: "<%= image_path('open_note_marker.png') %>",
  15       iconSize: [25, 40],
  16       iconAnchor: [12, 40]
  17     }),
  18     "closed": L.icon({
  19       iconUrl: "<%= image_path('closed_note_marker.png') %>",
  20       iconSize: [25, 40],
  21       iconAnchor: [12, 40]
  22     })
  23   };
  24
  25   function updateNote(form, method, url) {
  26     $(form).find("input[type=submit]").prop("disabled", true);
  27
  28     $.ajax({
  29       url: url,
  30       type: method,
  31       oauth: true,
  32       data: {text: $(form.text).val()},
  33       success: function () {
  34         OSM.loadSidebarContent(window.location.pathname, page.load);
  35       }
  36     });
  37   }
  38
  39   page.pushstate = page.popstate = function (path) {
  40     OSM.loadSidebarContent(path, function() {
  41       initialize(function() {
  42         var data = $('.details').data(),
  43           latLng = L.latLng(data.coordinates.split(','));
  44         if (!map.getBounds().contains(latLng)) moveToNote();
  45       });
  46     });
  47   };
  48
  49   page.load = function() {
  50     initialize(moveToNote);
  51   };
  52
  53   function initialize(callback) {
  54     content.find("input[type=submit]").on("click", function (e) {
  55       e.preventDefault();
  56       var data = $(e.target).data();
  57       updateNote(e.target.form, data.method, data.url);
  58     });
  59
  60     content.find("textarea").on("input", function (e) {
  61       var form = e.target.form;
  62
  63       if ($(e.target).val() == "") {
  64         $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
  65         $(form.comment).prop("disabled", true);
  66       } else {
  67         $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
  68         $(form.comment).prop("disabled", false);
  69       }
  70     });
  71
  72     content.find("textarea").val('').trigger("input");
  73
  74     var data = $('.details').data(),
  75       latLng = L.latLng(data.coordinates.split(','));
  76
  77     if (!map.hasLayer(halo)) {
  78       halo = L.circleMarker(latLng, {
  79         weight: 2.5,
  80         radius: 20,
  81         fillOpacity: 0.5,
  82         color: "#FF6200"
  83       });
  84       map.addLayer(halo);
  85     }
  86
  87     if (map.hasLayer(currentNote)) map.removeLayer(currentNote);
  88     currentNote = L.marker(latLng, {
  89       icon: noteIcons[data.status],
  90       opacity: 1,
  91       clickable: true
  92     });
  93
  94     map.addLayer(currentNote);
  95
  96     if (callback) callback();
  97   };
  98
  99   function moveToNote() {
 100     var data = $('.details').data(),
 101       latLng = L.latLng(data.coordinates.split(','));
 102
 103     if (!window.location.hash || window.location.hash.match(/^#?c[0-9]+$/)) {
 104       OSM.router.moveListenerOff();
 105       map.once('moveend', OSM.router.moveListenerOn);
 106       map.setView(latLng, 15, {reset: true});
 107     }
 108   }
 109
 110   page.unload = function () {
 111     if (map.hasLayer(halo)) map.removeLayer(halo);
 112     if (map.hasLayer(currentNote)) map.removeLayer(currentNote);
 113   };
 114
 115   return page;
 116 };