app/assets/javascripts/index/search.js

   1 //= require jquery-simulate/jquery.simulate
   2 //= require qs/dist/qs
   3
   4 OSM.Search = function (map) {
   5   $(".search_form input[name=query]").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   $(".search_form a.button.switch_link").on("click", function (e) {
  14     e.preventDefault();
  15     var query = $(e.target).parent().parent().find("input[name=query]").val();
  16     if (query) {
  17       OSM.router.route("/directions?from=" + encodeURIComponent(query) + OSM.formatHash(map));
  18     } else {
  19       OSM.router.route("/directions" + OSM.formatHash(map));
  20     }
  21   });
  22
  23   $(".search_form").on("submit", function (e) {
  24     e.preventDefault();
  25     $("header").addClass("closed");
  26     var query = $(this).find("input[name=query]").val();
  27     if (query) {
  28       OSM.router.route("/search?query=" + encodeURIComponent(query) + OSM.formatHash(map));
  29     } else {
  30       OSM.router.route("/" + OSM.formatHash(map));
  31     }
  32   });
  33
  34   $(".describe_location").on("click", function (e) {
  35     e.preventDefault();
  36     var center = map.getCenter().wrap(),
  37         precision = OSM.zoomPrecision(map.getZoom());
  38     OSM.router.route("/search?whereami=1&query=" + encodeURIComponent(
  39       center.lat.toFixed(precision) + "," + center.lng.toFixed(precision)
  40     ));
  41   });
  42
  43   $("#sidebar_content")
  44     .on("click", ".search_more a", clickSearchMore)
  45     .on("click", ".search_results_entry a.set_position", clickSearchResult)
  46     .on("mouseover", "li.search_results_entry:has(a.set_position)", showSearchResult)
  47     .on("mouseout", "li.search_results_entry:has(a.set_position)", hideSearchResult)
  48     .on("mousedown", "li.search_results_entry:has(a.set_position)", function () {
  49       var moved = false;
  50       $(this).one("click", function (e) {
  51         if (!moved && !$(e.target).is("a")) {
  52           $(this).find("a.set_position").simulate("click", e);
  53         }
  54       }).one("mousemove", function () {
  55         moved = true;
  56       });
  57     });
  58
  59   var markers = L.layerGroup().addTo(map);
  60
  61   function clickSearchMore(e) {
  62     e.preventDefault();
  63     e.stopPropagation();
  64
  65     var div = $(this).parents(".search_more"),
  66         csrf_param = $("meta[name=csrf-param]").attr("content"),
  67         csrf_token = $("meta[name=csrf-token]").attr("content"),
  68         params = {};
  69
  70     $(this).hide();
  71     div.find(".loader").show();
  72
  73     params[csrf_param] = csrf_token;
  74
  75     $.ajax({
  76       url: $(this).attr("href"),
  77       method: "POST",
  78       data: params,
  79       success: function (data) {
  80         div.replaceWith(data);
  81       }
  82     });
  83   }
  84
  85   function showSearchResult() {
  86     var marker = $(this).data("marker");
  87
  88     if (!marker) {
  89       var data = $(this).find("a.set_position").data();
  90
  91       marker = L.marker([data.lat, data.lon], { icon: OSM.getUserIcon() });
  92
  93       $(this).data("marker", marker);
  94     }
  95
  96     markers.addLayer(marker);
  97   }
  98
  99   function hideSearchResult() {
 100     var marker = $(this).data("marker");
 101
 102     if (marker) {
 103       markers.removeLayer(marker);
 104     }
 105   }
 106
 107   function panToSearchResult(data) {
 108     if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
 109       map.fitBounds([[data.minLat, data.minLon], [data.maxLat, data.maxLon]]);
 110     } else {
 111       map.setView([data.lat, data.lon], data.zoom);
 112     }
 113   }
 114
 115   function clickSearchResult(e) {
 116     var data = $(this).data();
 117
 118     panToSearchResult(data);
 119
 120     // Let clicks to object browser links propagate.
 121     if (data.type && data.id) return;
 122
 123     e.preventDefault();
 124     e.stopPropagation();
 125   }
 126
 127   var page = {};
 128
 129   page.pushstate = page.popstate = function (path) {
 130     var params = Qs.parse(path.substring(path.indexOf("?") + 1));
 131     $(".search_form input[name=query]").val(params.query);
 132     $(".describe_location").hide();
 133     OSM.loadSidebarContent(path, page.load);
 134   };
 135
 136   page.load = function () {
 137     $(".search_results_entry").each(function (index) {
 138       var entry = $(this),
 139           csrf_param = $("meta[name=csrf-param]").attr("content"),
 140           csrf_token = $("meta[name=csrf-token]").attr("content"),
 141           params = {
 142             zoom: map.getZoom(),
 143             minlon: map.getBounds().getWest(),
 144             minlat: map.getBounds().getSouth(),
 145             maxlon: map.getBounds().getEast(),
 146             maxlat: map.getBounds().getNorth()
 147           };
 148       params[csrf_param] = csrf_token;
 149       $.ajax({
 150         url: entry.data("href"),
 151         method: "POST",
 152         data: params,
 153         success: function (html) {
 154           entry.html(html);
 155           // go to first result of first geocoder
 156           if (index === 0) {
 157             var firstResult = entry.find("*[data-lat][data-lon]:first").first();
 158             if (firstResult.length) {
 159               panToSearchResult(firstResult.data());
 160             }
 161           }
 162         }
 163       });
 164     });
 165
 166     return map.getState();
 167   };
 168
 169   page.unload = function () {
 170     markers.clearLayers();
 171     $(".search_form input[name=query]").val("");
 172     $(".describe_location").fadeIn(100);
 173   };
 174
 175   return page;
 176 };