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)) {
  31         OSM.router.withoutMoveListener(function () {
  32           map.setView(latLng, 15, { reset: true });
  33         });
  34       }
  35     });
  36   };
  37
  38   page.load = function (path, id) {
  39     initialize(path, id);
  40   };
  41
  42   function initialize(path, id) {
  43     content.find("button[name]").on("click", function (e) {
  44       e.preventDefault();
  45       var data = $(e.target).data();
  46       var name = $(e.target).attr("name");
  47       var ajaxSettings = {
  48         url: data.url,
  49         type: data.method,
  50         oauth: true,
  51         success: () => {
  52           OSM.loadSidebarContent(path, () => {
  53             initialize(path, id);
  54           });
  55         },
  56         error: (xhr) => {
  57           content.find("#comment-error")
  58             .text(xhr.responseText)
  59             .prop("hidden", false)
  60             .get(0).scrollIntoView({ block: "nearest" });
  61           updateButtons();
  62         }
  63       };
  64
  65       if (name !== "subscribe" && name !== "unsubscribe" && name !== "reopen") {
  66         ajaxSettings.data = { text: content.find("textarea").val() };
  67       }
  68
  69       content.find("button[name]").prop("disabled", true);
  70       $.ajax(ajaxSettings);
  71     });
  72
  73     content.find("textarea").on("input", function (e) {
  74       updateButtons(e.target.form);
  75     });
  76
  77     content.find("textarea").val("").trigger("input");
  78
  79     var data = $(".details").data();
  80
  81     if (data) {
  82       var hashParams = OSM.parseHash(window.location.hash);
  83       map.addObject({
  84         type: "note",
  85         id: parseInt(id, 10),
  86         latLng: L.latLng(data.coordinates.split(",")),
  87         icon: noteIcons[data.status]
  88       }, function () {
  89         if (!hashParams.center) {
  90           var latLng = L.latLng(data.coordinates.split(","));
  91           OSM.router.withoutMoveListener(function () {
  92             map.setView(latLng, 15, { reset: true });
  93           });
  94         }
  95       });
  96     }
  97   }
  98
  99   function updateButtons() {
 100     var resolveButton = content.find("button[name='close']");
 101     var commentButton = content.find("button[name='comment']");
 102
 103     content.find("button[name]").prop("disabled", false);
 104     if (content.find("textarea").val() === "") {
 105       resolveButton.text(resolveButton.data("defaultActionText"));
 106       commentButton.prop("disabled", true);
 107     } else {
 108       resolveButton.text(resolveButton.data("commentActionText"));
 109     }
 110   }
 111
 112   page.unload = function () {
 113     map.removeObject();
 114   };
 115
 116   return page;
 117 };