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
  67     $(this).hide();
  68     div.find(".loader").show();
  69
  70     $.get($(this).attr("href"), function (data) {
  71       div.replaceWith(data);
  72     });
  73   }
  74
  75   function showSearchResult() {
  76     var marker = $(this).data("marker");
  77
  78     if (!marker) {
  79       var data = $(this).find("a.set_position").data();
  80
  81       marker = L.marker([data.lat, data.lon], { icon: OSM.getUserIcon() });
  82
  83       $(this).data("marker", marker);
  84     }
  85
  86     markers.addLayer(marker);
  87
  88     $(this).closest("li").addClass("selected");
  89   }
  90
  91   function hideSearchResult() {
  92     var marker = $(this).data("marker");
  93
  94     if (marker) {
  95       markers.removeLayer(marker);
  96     }
  97
  98     $(this).closest("li").removeClass("selected");
  99   }
 100
 101   function panToSearchResult(data) {
 102     if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
 103       map.fitBounds([[data.minLat, data.minLon], [data.maxLat, data.maxLon]]);
 104     } else {
 105       map.setView([data.lat, data.lon], data.zoom);
 106     }
 107   }
 108
 109   function clickSearchResult(e) {
 110     var data = $(this).data();
 111
 112     panToSearchResult(data);
 113
 114     // Let clicks to object browser links propagate.
 115     if (data.type && data.id) return;
 116
 117     e.preventDefault();
 118     e.stopPropagation();
 119   }
 120
 121   var page = {};
 122
 123   page.pushstate = page.popstate = function (path) {
 124     var params = Qs.parse(path.substring(path.indexOf("?") + 1));
 125     $(".search_form input[name=query]").val(params.query);
 126     $(".describe_location").hide();
 127     OSM.loadSidebarContent(path, page.load);
 128   };
 129
 130   page.load = function () {
 131     $(".search_results_entry").each(function (index) {
 132       var entry = $(this);
 133       $.ajax({
 134         url: entry.data("href"),
 135         method: "GET",
 136         data: {
 137           zoom: map.getZoom(),
 138           minlon: map.getBounds().getWest(),
 139           minlat: map.getBounds().getSouth(),
 140           maxlon: map.getBounds().getEast(),
 141           maxlat: map.getBounds().getNorth()
 142         },
 143         success: function (html) {
 144           entry.html(html);
 145           // go to first result of first geocoder
 146           if (index === 0) {
 147             var firstResult = entry.find("*[data-lat][data-lon]:first").first();
 148             if (firstResult.length) {
 149               panToSearchResult(firstResult.data());
 150             }
 151           }
 152         }
 153       });
 154     });
 155
 156     return map.getState();
 157   };
 158
 159   page.unload = function () {
 160     markers.clearLayers();
 161     $(".search_form input[name=query]").val("");
 162     $(".describe_location").fadeIn(100);
 163   };
 164
 165   return page;
 166 };