app/assets/javascripts/index/search.js

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