app/assets/javascripts/index/search.js

   1 //= require qs/dist/qs
   2
   3 OSM.Search = function (map) {
   4   $(".search_form input[name=query]").on("input", function (e) {
   5     if ($(e.target).val() === "") {
   6       $(".describe_location").fadeIn(100);
   7     } else {
   8       $(".describe_location").fadeOut(100);
   9     }
  10   });
  11
  12   $(".search_form a.btn.switch_link").on("click", function (e) {
  13     e.preventDefault();
  14     var query = $(this).closest("form").find("input[name=query]").val();
  15     if (query) {
  16       OSM.router.route("/directions?from=" + encodeURIComponent(query) + OSM.formatHash(map));
  17     } else {
  18       OSM.router.route("/directions" + OSM.formatHash(map));
  19     }
  20   });
  21
  22   $(".search_form").on("submit", function (e) {
  23     e.preventDefault();
  24     $("header").addClass("closed");
  25     var query = $(this).find("input[name=query]").val();
  26     if (query) {
  27       OSM.router.route("/search?query=" + encodeURIComponent(query) + OSM.formatHash(map));
  28     } else {
  29       OSM.router.route("/" + OSM.formatHash(map));
  30     }
  31   });
  32
  33   $(".describe_location").on("click", function (e) {
  34     e.preventDefault();
  35     var center = map.getCenter().wrap(),
  36         precision = OSM.zoomPrecision(map.getZoom()),
  37         lat = center.lat.toFixed(precision),
  38         lng = center.lng.toFixed(precision);
  39
  40     OSM.router.route("/search?lat=" + encodeURIComponent(lat) + "&lon=" + encodeURIComponent(lng));
  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
  49   var markers = L.layerGroup().addTo(map);
  50
  51   function clickSearchMore(e) {
  52     e.preventDefault();
  53     e.stopPropagation();
  54
  55     var div = $(this).parents(".search_more"),
  56         csrf_param = $("meta[name=csrf-param]").attr("content"),
  57         csrf_token = $("meta[name=csrf-token]").attr("content"),
  58         params = {};
  59
  60     $(this).hide();
  61     div.find(".loader").show();
  62
  63     params[csrf_param] = csrf_token;
  64
  65     $.ajax({
  66       url: $(this).attr("href"),
  67       method: "POST",
  68       data: params,
  69       success: function (data) {
  70         div.replaceWith(data);
  71       }
  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
  89   function hideSearchResult() {
  90     var marker = $(this).data("marker");
  91
  92     if (marker) {
  93       markers.removeLayer(marker);
  94     }
  95   }
  96
  97   function panToSearchResult(data) {
  98     if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
  99       map.fitBounds([[data.minLat, data.minLon], [data.maxLat, data.maxLon]]);
 100     } else {
 101       map.setView([data.lat, data.lon], data.zoom);
 102     }
 103   }
 104
 105   function clickSearchResult(e) {
 106     var data = $(this).data();
 107
 108     panToSearchResult(data);
 109
 110     // Let clicks to object browser links propagate.
 111     if (data.type && data.id) return;
 112
 113     e.preventDefault();
 114     e.stopPropagation();
 115   }
 116
 117   var page = {};
 118
 119   page.pushstate = page.popstate = function (path) {
 120     var params = Qs.parse(path.substring(path.indexOf("?") + 1));
 121     if (params.query) {
 122       $(".search_form input[name=query]").val(params.query);
 123       $(".describe_location").hide();
 124     } else if (params.lat && params.lon) {
 125       $(".search_form input[name=query]").val(params.lat + ", " + params.lon);
 126       $(".describe_location").hide();
 127     }
 128     OSM.loadSidebarContent(path, page.load);
 129   };
 130
 131   page.load = function () {
 132     $(".search_results_entry").each(function (index) {
 133       var entry = $(this),
 134           csrf_param = $("meta[name=csrf-param]").attr("content"),
 135           csrf_token = $("meta[name=csrf-token]").attr("content"),
 136           params = {
 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       params[csrf_param] = csrf_token;
 144       $.ajax({
 145         url: entry.data("href"),
 146         method: "POST",
 147         data: params,
 148         success: function (html) {
 149           entry.html(html);
 150           // go to first result of first geocoder
 151           if (index === 0) {
 152             var firstResult = entry.find("*[data-lat][data-lon]:first").first();
 153             if (firstResult.length) {
 154               panToSearchResult(firstResult.data());
 155             }
 156           }
 157         }
 158       });
 159     });
 160
 161     return map.getState();
 162   };
 163
 164   page.unload = function () {
 165     markers.clearLayers();
 166     $(".search_form input[name=query]").val("");
 167     $(".describe_location").fadeIn(100);
 168   };
 169
 170   return page;
 171 };