app/assets/javascripts/index/search.js

   1 //= require jquery.simulate
   2
   3 OSM.Search = function(map) {
   4   $(".search_form input[name=query]")
   5     .on("input", function(e) {
   6       if ($(e.target).val() == "") {
   7         $(".describe_location").fadeIn(100);
   8       } else {
   9         $(".describe_location").fadeOut(100);
  10       }
  11     })
  12
  13   $("#sidebar_content")
  14     .on("click", ".search_more a", clickSearchMore)
  15     .on("mouseover", "p.search_results_entry:has(a.set_position)", showSearchResult)
  16     .on("mouseout", "p.search_results_entry:has(a.set_position)", hideSearchResult)
  17     .on("mousedown", "p.search_results_entry:has(a.set_position)", function () {
  18       var moved = false;
  19       $(this).one("click", function (e) {
  20         if (!moved && !$(e.target).is('a')) {
  21           clickSearchResult(this, e);
  22         }
  23       }).one("mousemove", function () {
  24         moved = true;
  25       });
  26     });
  27
  28   function clickSearchMore(e) {
  29     e.preventDefault();
  30     e.stopPropagation();
  31
  32     var div = $(this).parents(".search_more");
  33
  34     $(this).hide();
  35     div.find(".loader").show();
  36
  37     $.get($(this).attr("href"), function(data) {
  38       div.replaceWith(data);
  39     });
  40   }
  41
  42   function showSearchResult(e) {
  43     var marker = $(this).data("marker");
  44
  45     if (!marker) {
  46       var data = $(this).find("a.set_position").data();
  47
  48       marker = L.marker([data.lat, data.lon], {icon: getUserIcon()});
  49
  50       $(this).data("marker", marker);
  51     }
  52
  53     markers.addLayer(marker);
  54
  55     $(this).closest("li").addClass("selected");
  56   }
  57
  58   function hideSearchResult(e) {
  59     var marker = $(this).data("marker");
  60
  61     if (marker) {
  62       markers.removeLayer(marker);
  63     }
  64
  65     $(this).closest("li").removeClass("selected");
  66   }
  67
  68   function clickSearchResult(result, e) {
  69     var link = $(result).find("a.set_position"),
  70       data = link.data(),
  71       center = L.latLng(data.lat, data.lon);
  72
  73     if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
  74       map.fitBounds([[data.minLat, data.minLon], [data.maxLat, data.maxLon]]);
  75     } else {
  76       map.setView(center, data.zoom);
  77     }
  78
  79     e.preventDefault();
  80     e.stopPropagation();
  81
  82     // Let clicks to object browser links propagate.
  83     if (data.type && data.id) {
  84       link.simulate("click", e);
  85     }
  86   }
  87
  88   var markers = L.layerGroup().addTo(map);
  89
  90   var page = {};
  91
  92   page.pushstate = page.popstate = function(path) {
  93     var params = querystring.parse(path.substring(path.indexOf('?') + 1));
  94     $(".search_form input[name=query]").val(params.query);
  95     OSM.loadSidebarContent(path, page.load);
  96   };
  97
  98   page.load = function() {
  99     $(".search_results_entry").each(function() {
 100       var entry = $(this);
 101       $.ajax({
 102         url: entry.data("href"),
 103         method: 'GET',
 104         data: {
 105           zoom: map.getZoom(),
 106           minlon: map.getBounds().getWest(),
 107           minlat: map.getBounds().getSouth(),
 108           maxlon: map.getBounds().getEast(),
 109           maxlat: map.getBounds().getNorth()
 110         },
 111         success: function(html) {
 112           entry.html(html);
 113         }
 114       });
 115     });
 116
 117     return map.getState();
 118   };
 119
 120   page.unload = function() {
 121     markers.clearLayers();
 122     $(".search_form input[name=query]").val("");
 123     $(".describe_location").fadeIn(100);
 124   };
 125
 126   return page;
 127 };