Make dynamic search configurable

Addresses #150

app/assets/javascripts/geoblacklight/modules/geosearch.js

@@ -22,38 +22,71 @@
   L.Control.GeoSearch = L.Control.extend({
 
     options: {
-      button: false
+      dynamic: true,
+      baseUrl: '',
+      searcher: function() {
+        History.pushState(null, document.title, this.getSearchUrl());
+      },
+      delay: 800,
+      staticButton: '<a class="btn btn-primary">Redo Search Here <span class="glyphicon glyphicon-repeat"></span></a>',
+      dynamicButton: '<label><input type="checkbox" checked> Search When I Move the Map</label>'
     },
 
-    initialize: function(searcher, options) {
+    initialize: function(options) {
       L.Util.setOptions(this, options);
-      this._searcher = L.Util.bind(searcher, this);
+      this.$staticButton = $(this.options.staticButton);
+      this.$dynamicButton = $(this.options.dynamicButton);
     },
 
     onAdd: function(map) {
-      var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+      var $container = $('<div class="leaflet-control search-control"></div>'),
+          staticSearcher, dynamicSearcher;
       this._map = map;
 
-      if (this.options.button === true) {
-        this.link = L.DomUtil.create('a', 'leaflet-bar-part search-control',
-          container);
-        this.link.href = '';
-        this.icon = L.DomUtil.create('i', 'glyphicon glyphicon-search',
-          this.link);
+      staticSearcher = L.Util.bind(function() {
+        this.$staticButton.hide();
+        this.$dynamicButton.show();
+        this.options.searcher.apply(this);
+      }, this);
+
+      dynamicSearcher = GeoBlacklight.debounce(function() {
+        if (this.options.dynamic) {
+          this.options.searcher.apply(this);
+        }
+      }, this.options.delay);
+
+      this.$staticButton.on('click', staticSearcher);
+
+      $container.on("change", "input[type=checkbox]",
+        L.Util.bind(function() {
+          this.options.dynamic = !this.options.dynamic;
+        }, this)
+      );
+
+      if (this.options.dynamic) {
+        this.$staticButton.hide();
+      } else {
+        this.$dynamicButton.hide();
       }
 
-      map.on("moveend", this._search, this);
+      map.on("moveend", dynamicSearcher, this);
+      map.on("movestart", function() {
+        if (!this.options.dynamic) {
+          this.$dynamicButton.hide();
+          this.$staticButton.show();
+        }
+      }, this);
 
-      return container;
+      $container.append(this.$staticButton, this.$dynamicButton);
+      return $container.get(0);
     },
 
-    _search: function() {
+    getSearchUrl: function() {
       var params = this.filterParams(['bbox', 'page']),
           bounds = L.boundsToBbox(this._map.getBounds());
 
       params.push('bbox=' + encodeURIComponent(bounds.join(' ')));
-
-      this._searcher(params.join('&'));
+      return this.options.baseUrl + '?' + params.join('&');
     },
 
     filterParams: function(filterList) {
@@ -74,4 +107,8 @@
 
   });
 
+  L.control.geosearch = function(options) {
+    return new L.Control.GeoSearch(options);
+  };
+
 }(this);

app/assets/javascripts/geoblacklight/modules/home.js

@@ -1,11 +1,14 @@
 Blacklight.onLoad(function () {
   $('[data-map="home"]').each(function(i, element) {
     var geoblacklight = new GeoBlacklight(this),
-        data = $(this).data(),
-        search;
-    search = new L.Control.GeoSearch(function(querystring) {
-      this.link.href = data.catalogPath + '?' + querystring;
-    }, { button: true });
-    geoblacklight.map.addControl(search);
+        data = $(this).data();
+    geoblacklight.map.addControl(L.control.geosearch({
+      baseUrl: data.catalogPath,
+      dynamic: false,
+      searcher: function() {
+        window.location.href = this.getSearchUrl();
+      },
+      staticButton: '<a class="btn btn-primary">Search Here</a>'
+    }));
   });
 });

app/assets/javascripts/geoblacklight/modules/results.js

@@ -1,13 +1,17 @@
 Blacklight.onLoad(function() {
+  var historySupported = !!(window.history && window.history.pushState);
 
-  History.Adapter.bind(window, 'statechange', function() {
-    var state = History.getState();
-    updatePage(state.url);
-  });
+  if (historySupported) {
+    History.Adapter.bind(window, 'statechange', function() {
+      var state = History.getState();
+      updatePage(state.url);
+    });
+  }
 
   $('[data-map="index"]').each(function() {
     var data = $(this).data(),
-        dynamicSearcher, geoblacklight, search, bbox;
+        opts = { baseUrl: data.catalogPath },
+        geoblacklight, bbox;
 
     if (typeof data.mapBbox === "string") {
       bbox = L.bboxToBounds(data.mapBbox);
@@ -21,12 +25,17 @@ Blacklight.onLoad(function() {
       });
     }
 
-    dynamicSearcher = GeoBlacklight.debounce(function(querystring) {
-      History.pushState(null, null, data.catalogPath + '?' + querystring);
-    }, 800);
+    if (!historySupported) {
+      $.extend(opts, {
+        dynamic: false,
+        searcher: function() {
+          window.location.href = this.getSearchUrl();
+        }
+      });
+    }
+
     geoblacklight = new GeoBlacklight(this, { bbox: bbox }).setHoverListeners();
-    search = new L.Control.GeoSearch(dynamicSearcher);
-    geoblacklight.map.addControl(search);
+    geoblacklight.map.addControl(L.control.geosearch(opts));
   });
 
   function updatePage(url) {

app/assets/stylesheets/geoblacklight/_geoblacklight.css.scss

@@ -20,3 +20,4 @@
 @import 'modules/item';
 @import 'modules/layer_opacity';
 @import 'modules/results';
+@import 'modules/geosearch';

app/assets/stylesheets/geoblacklight/modules/geosearch.css.scss

@@ -0,0 +1,29 @@
+.search-control {
+  background-color: #FFF;
+  border-radius: 4px;
+  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+}
+
+.search-control a {
+  color: #FFF
+}
+
+.search-control label {
+  margin: 6px 12px;
+  font-size: 14px;
+  display: block;
+  padding-left: 15px;
+  text-indent: -15px;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+.search-control input[type="checkbox"] {
+  width: 13px;
+  height: 13px;
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}

spec/features/home_page_spec.rb

@@ -26,9 +26,8 @@
     end
   end
   scenario 'clicking map search should create a spatial search' do
-    find('#map').double_click
     within '#map' do
-      find('a.search-control').click
+      find('.search-control a').click
       expect(page.current_url).to match /bbox=/
     end
     expect(page).to have_css '#documents'

spec/features/saved_searches_spec.rb

@@ -3,9 +3,8 @@
 feature 'saved searches' do
   scenario 'list spatial search', js: true do
     visit root_path
-    find('#map').double_click
     within '#map' do
-      find('a.search-control').click
+      find('.search-control a').click
       expect(page.current_url).to match /bbox=/
     end
     visit search_history_path