app/assets/javascripts/index/note.js

   1 OSM.Note = function (map) {
   2   var content = $("#sidebar_content"),
   3       page = {};
   4
   5   var noteIcons = {
   6     "new": L.icon({
   7       iconUrl: OSM.NEW_NOTE_MARKER,
   8       iconSize: [25, 40],
   9       iconAnchor: [12, 40]
  10     }),
  11     "open": L.icon({
  12       iconUrl: OSM.OPEN_NOTE_MARKER,
  13       iconSize: [25, 40],
  14       iconAnchor: [12, 40]
  15     }),
  16     "closed": L.icon({
  17       iconUrl: OSM.CLOSED_NOTE_MARKER,
  18       iconSize: [25, 40],
  19       iconAnchor: [12, 40]
  20     })
  21   };
  22
  23   page.pushstate = page.popstate = function (path, id) {
  24     OSM.loadSidebarContent(path, function () {
  25       initialize(path, id);
  26
  27       var data = $(".details").data();
  28       if (!data) return;
  29       var latLng = L.latLng(data.coordinates.split(","));
  30       if (!map.getBounds().contains(latLng)) moveToNote();
  31     });
  32   };
  33
  34   page.load = function (path, id) {
  35     initialize(path, id);
  36     moveToNote();
  37   };
  38
  39   function initialize(path, id) {
  40     content.find("button[name]").on("click", function (e) {
  41       e.preventDefault();
  42       var data = $(e.target).data();
  43       var name = $(e.target).attr("name");
  44       var ajaxSettings = {
  45         url: data.url,
  46         type: data.method,
  47         oauth: true,
  48         success: () => {
  49           OSM.loadSidebarContent(path, () => {
  50             initialize(path, id);
  51             moveToNote();
  52           });
  53         },
  54         error: (xhr) => {
  55           content.find("#comment-error")
  56             .text(xhr.responseText)
  57             .prop("hidden", false)
  58             .get(0).scrollIntoView({ block: "nearest" });
  59           updateButtons();
  60         }
  61       };
  62
  63       if (name !== "subscribe" && name !== "unsubscribe") {
  64         ajaxSettings.data = { text: $("textarea").val() };
  65       }
  66
  67       content.find("button[name]").prop("disabled", true);
  68       $.ajax(ajaxSettings);
  69     });
  70
  71     content.find("textarea").on("input", function (e) {
  72       updateButtons(e.target.form);
  73     });
  74
  75     content.find("textarea").val("").trigger("input");
  76
  77     var data = $(".details").data();
  78
  79     if (data) {
  80       map.addObject({
  81         type: "note",
  82         id: parseInt(id, 10),
  83         latLng: L.latLng(data.coordinates.split(",")),
  84         icon: noteIcons[data.status]
  85       });
  86     }
  87   }
  88
  89   function updateButtons() {
  90     var resolveButton = content.find("button[name='close']");
  91     var commentButton = content.find("button[name='comment']");
  92
  93     content.find("button[name]").prop("disabled", false);
  94     if (content.find("textarea").val() === "") {
  95       resolveButton.text(resolveButton.data("defaultActionText"));
  96       commentButton.prop("disabled", true);
  97     } else {
  98       resolveButton.text(resolveButton.data("commentActionText"));
  99     }
 100   }
 101
 102   function moveToNote() {
 103     var data = $(".details").data();
 104     if (!data) return;
 105     var latLng = L.latLng(data.coordinates.split(","));
 106
 107     if (!window.location.hash || window.location.hash.match(/^#?c[0-9]+$/)) {
 108       OSM.router.withoutMoveListener(function () {
 109         map.setView(latLng, 15, { reset: true });
 110       });
 111     }
 112   }
 113
 114   page.unload = function () {
 115     map.removeObject();
 116   };
 117
 118   return page;
 119 };