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

   1 OSM.Note = function (map) {
   2   var noteLayer = map.noteLayer,
   3     content = $('#sidebar_content'),
   4     page = {},
   5     noteState = map.hasLayer(noteLayer),
   6     halo;
   7
   8   var noteIcons = {
   9     "new": L.icon({
  10       iconUrl: "<%= image_path('new_note_marker.png') %>",
  11       iconSize: [25, 40],
  12       iconAnchor: [12, 40]
  13     }),
  14     "open": L.icon({
  15       iconUrl: "<%= image_path('open_note_marker.png') %>",
  16       iconSize: [25, 40],
  17       iconAnchor: [12, 40]
  18     }),
  19     "closed": L.icon({
  20       iconUrl: "<%= image_path('closed_note_marker.png') %>",
  21       iconSize: [25, 40],
  22       iconAnchor: [12, 40]
  23     })
  24   };
  25
  26   function updateNote(marker, form, method, url) {
  27     $(form).find("input[type=submit]").prop("disabled", true);
  28
  29     $.ajax({
  30       url: url,
  31       type: method,
  32       oauth: true,
  33       data: {text: $(form.text).val()},
  34       success: function (feature) {
  35         marker = noteLayer.getLayer(marker);
  36         if (feature.properties.status == "hidden") {
  37           noteLayer.removeLayer(marker);
  38         } else {
  39           marker.setIcon(noteIcons[feature.properties.status]);
  40           page.load();
  41         }
  42       }
  43     });
  44   }
  45
  46   function bind() {
  47     content.find("input[type=submit]").on("click", function (e) {
  48       e.preventDefault();
  49       var data = $(e.target).data();
  50       updateNote(data.noteId, e.target.form, data.method, data.url);
  51     });
  52
  53     content.find("textarea").on("input", function (e) {
  54       var form = e.target.form;
  55
  56       if ($(e.target).val() == "") {
  57         $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
  58         $(form.comment).prop("disabled", true);
  59       } else {
  60         $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
  61         $(form.comment).prop("disabled", false);
  62       }
  63     });
  64
  65     content.find("textarea").val('').trigger("input");
  66   }
  67
  68   page.pushstate = page.popstate = function () {
  69     page.load();
  70   };
  71
  72   page.load = function () {
  73     var loadTimer = setTimeout(setLoading, 250);
  74     $('#sidebar_content').load(window.location.pathname + "?xhr=1", function (a, b, xhr) {
  75       if (xhr.getResponseHeader('X-Page-Title')) {
  76         document.title = xhr.getResponseHeader('X-Page-Title');
  77       }
  78       bind();
  79       clearTimeout(loadTimer);
  80       clearLoading();
  81
  82       var data = $('.details').data();
  83       if (!noteState) map.addLayer(noteLayer);
  84       if (window.location.hash == "") map.panTo(data.coordinates.split(','));
  85
  86       if (!map.hasLayer(halo)) {
  87           halo = L.circleMarker(data.coordinates.split(','), {
  88             weight: 2.5,
  89             radius: 20
  90           });
  91         map.addLayer(halo);
  92       }
  93   });
  94   };
  95
  96   page.unload = function () {
  97     if (map.hasLayer(halo)) map.removeLayer(halo);
  98     if (!noteState) map.removeLayer(noteLayer);
  99   };
 100
 101   function setLoading() {
 102     if ($('#browse_status').is(':empty')) {
 103       $('#browse_status').append($('<p></p>').text(I18n.t('browse.start_rjs.loading')));
 104     }
 105   }
 106
 107   function clearLoading() {
 108     $('#browse_status').empty();
 109   }
 110
 111   return page;
 112 };