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]);
  49
  50       $(this).data("marker", marker);
  51     }
  52
  53     map.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       map.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     } else {
  86       marker.setLatLng(center).addTo(map);
  87     }
  88   }
  89
  90   var marker = L.marker([0, 0], {icon: getUserIcon()});
  91
  92   var page = {};
  93
  94   page.pushstate = page.popstate = function(path) {
  95     var params = querystring.parse(path.substring(path.indexOf('?') + 1));
  96     $(".search_form input[name=query]").val(params.query);
  97     OSM.loadSidebarContent(path, page.load);
  98   };
  99
 100   page.load = function() {
 101     $(".search_results_entry").each(function() {
 102       var entry = $(this);
 103       $.ajax({
 104         url: entry.data("href"),
 105         method: 'GET',
 106         data: {
 107           zoom: map.getZoom(),
 108           minlon: map.getBounds().getWest(),
 109           minlat: map.getBounds().getSouth(),
 110           maxlon: map.getBounds().getEast(),
 111           maxlat: map.getBounds().getNorth()
 112         },
 113         success: function(html) {
 114           entry.html(html);
 115         }
 116       });
 117     });
 118
 119     return map.getState();
 120   };
 121
 122   page.unload = function() {
 123     map.removeLayer(marker);
 124     map.removeObject();
 125     $(".search_form input[name=query]").val("");
 126     $(".describe_location").fadeIn(100);
 127   };
 128
 129   return page;
 130 };