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     $(this).closest("li").addClass("selected");
  99   }
 100
 101   function hideSearchResult() {
 102     var marker = $(this).data("marker");
 103
 104     if (marker) {
 105       markers.removeLayer(marker);
 106     }
 107
 108     $(this).closest("li").removeClass("selected");
 109   }
 110
 111   function panToSearchResult(data) {
 112     if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
 113       map.fitBounds([[data.minLat, data.minLon], [data.maxLat, data.maxLon]]);
 114     } else {
 115       map.setView([data.lat, data.lon], data.zoom);
 116     }
 117   }
 118
 119   function clickSearchResult(e) {
 120     var data = $(this).data();
 121
 122     panToSearchResult(data);
 123
 124     // Let clicks to object browser links propagate.
 125     if (data.type && data.id) return;
 126
 127     e.preventDefault();
 128     e.stopPropagation();
 129   }
 130
 131   var page = {};
 132
 133   page.pushstate = page.popstate = function (path) {
 134     var params = Qs.parse(path.substring(path.indexOf("?") + 1));
 135     $(".search_form input[name=query]").val(params.query);
 136     $(".describe_location").hide();
 137     OSM.loadSidebarContent(path, page.load);
 138   };
 139
 140   page.load = function () {
 141     $(".search_results_entry").each(function (index) {
 142       var entry = $(this),
 143           csrf_param = $("meta[name=csrf-param]").attr("content"),
 144           csrf_token = $("meta[name=csrf-token]").attr("content"),
 145           params = {
 146             zoom: map.getZoom(),
 147             minlon: map.getBounds().getWest(),
 148             minlat: map.getBounds().getSouth(),
 149             maxlon: map.getBounds().getEast(),
 150             maxlat: map.getBounds().getNorth()
 151           };
 152       params[csrf_param] = csrf_token;
 153       $.ajax({
 154         url: entry.data("href"),
 155         method: "POST",
 156         data: params,
 157         success: function (html) {
 158           entry.html(html);
 159           // go to first result of first geocoder
 160           if (index === 0) {
 161             var firstResult = entry.find("*[data-lat][data-lon]:first").first();
 162             if (firstResult.length) {
 163               panToSearchResult(firstResult.data());
 164             }
 165           }
 166         }
 167       });
 168     });
 169
 170     return map.getState();
 171   };
 172
 173   page.unload = function () {
 174     markers.clearLayers();
 175     $(".search_form input[name=query]").val("");
 176     $(".describe_location").fadeIn(100);
 177   };
 178
 179   return page;
 180 };