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