app/assets/javascripts/index/history.js

   1 OSM.History = function(map) {
   2   var page = {};
   3
   4   $("#sidebar_content")
   5     .on("click", ".changeset_more a", loadMore)
   6     .on("mouseover", "[data-changeset]", function () {
   7       highlightChangeset($(this).data("changeset").id);
   8     })
   9     .on("mouseout", "[data-changeset]", function () {
  10       unHighlightChangeset($(this).data("changeset").id);
  11     })
  12     .on("click", "[data-changeset]", function (e) {
  13       if (!$(e.target).is('a')) {
  14         clickChangeset($(this).data("changeset").id, e);
  15       }
  16     });
  17
  18   var group = L.featureGroup()
  19     .on("mouseover", function (e) {
  20       highlightChangeset(e.layer.id);
  21     })
  22     .on("mouseout", function (e) {
  23       unHighlightChangeset(e.layer.id);
  24     })
  25     .on("click", function (e) {
  26       clickChangeset(e.layer.id, e);
  27     });
  28
  29   group.getLayerId = function(layer) {
  30     return layer.id;
  31   };
  32
  33   function highlightChangeset(id) {
  34     group.getLayer(id).setStyle({fillOpacity: 0.3});
  35     $("#changeset_" + id).addClass("selected");
  36   }
  37
  38   function unHighlightChangeset(id) {
  39     group.getLayer(id).setStyle({fillOpacity: 0});
  40     $("#changeset_" + id).removeClass("selected");
  41   }
  42
  43   function clickChangeset(id, e) {
  44     var evt, el = $("#changeset_" + id).find("a.changeset_id")[0];
  45     if ('createEvent' in document) {
  46       evt = document.createEvent('MouseEvents');
  47       evt.initMouseEvent('click',
  48         true, // canBubble
  49         true, // cancelable
  50         window, // 'AbstractView'
  51         e.clicks, // click count
  52         e.screenX, // screenX
  53         e.screenY, // screenY
  54         e.clientX, // clientX
  55         e.clientY, // clientY
  56         e.ctrlKey, // ctrl
  57         e.altKey, // alt
  58         e.shiftKey, // shift
  59         e.metaKey, // meta
  60         e.button, // mouse button
  61         e.relatedTarget // relatedTarget
  62       );
  63       el.dispatchEvent(evt);
  64     } else {
  65       evt = document.createEventObject();
  66       el.fireEvent('onclick', evt);
  67     }
  68   }
  69
  70   function loadData() {
  71     var data = {list: '1'};
  72
  73     if (window.location.pathname === '/history') {
  74       data.bbox = map.getBounds().wrap().toBBoxString();
  75     }
  76
  77     $.ajax({
  78       url: window.location.pathname,
  79       method: "GET",
  80       data: data,
  81       success: function(html, status, xhr) {
  82         $('#sidebar_content .changesets').html(html);
  83         updateMap();
  84       }
  85     });
  86   }
  87
  88   function loadMore(e) {
  89     e.preventDefault();
  90     e.stopPropagation();
  91
  92     var div = $(this).parents(".changeset_more");
  93
  94     $(this).hide();
  95     div.find(".loader").show();
  96
  97     $.get($(this).attr("href"), function(data) {
  98       div.replaceWith(data);
  99       updateMap();
 100     });
 101   }
 102
 103   function updateMap() {
 104     group.clearLayers();
 105
 106     var changesets = [];
 107
 108     $("[data-changeset]").each(function () {
 109       var changeset = $(this).data('changeset');
 110       if (changeset.bbox) {
 111         changeset.bounds = L.latLngBounds(
 112           [changeset.bbox.minlat, changeset.bbox.minlon],
 113           [changeset.bbox.maxlat, changeset.bbox.maxlon]);
 114         changesets.push(changeset);
 115       }
 116     });
 117
 118     changesets.sort(function (a, b) {
 119       return b.bounds.getSize() - a.bounds.getSize();
 120     });
 121
 122     for (var i = 0; i < changesets.length; ++i) {
 123       var changeset = changesets[i],
 124         rect = L.rectangle(changeset.bounds,
 125           {weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFBF", fillOpacity: 0});
 126       rect.id = changeset.id;
 127       rect.addTo(group);
 128     }
 129
 130     if (window.location.pathname !== '/history') {
 131       var bounds = group.getBounds();
 132       if (bounds.isValid()) map.fitBounds(bounds);
 133     }
 134   }
 135
 136   page.pushstate = page.popstate = function(path) {
 137     $("#history_tab").addClass("current");
 138     OSM.loadSidebarContent(path, page.load);
 139   };
 140
 141   page.load = function() {
 142     map.addLayer(group);
 143
 144     if (window.location.pathname === '/history') {
 145       map.on("moveend", loadData)
 146     }
 147
 148     loadData();
 149   };
 150
 151   page.unload = function() {
 152     map.removeLayer(group);
 153
 154     if (window.location.pathname === '/history') {
 155       map.off("moveend", loadData)
 156     }
 157
 158     $("#history_tab").removeClass("current");
 159   };
 160
 161   return page;
 162 };