administrate-field-lat_lng 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: de3768c65e7d54cd9b914185502556f1f7459555
-  data.tar.gz: eabd37eddee8c3da13065e68dc6867081c745329
+  metadata.gz: d18138c50948b551f8f508f321fa2ab1b7176ff4
+  data.tar.gz: e0b5d83b6e52555ce882889e2cf3a461d2cfa78c
 SHA512:
-  metadata.gz: 0c14d45874ac4712006a04bcb815d1f58ace87311b25c203b62cd669d84b2254ca97759eb40af3f7c51cc3fe3c727a9733ac0af2c924f6a887b17da65c095012
-  data.tar.gz: 39b911797963b3c77aad09010fd65404d1fb2a317f4de7a37c362c5206a33bcb3c4e63ddb4e828719aafb87945496cba21d8ca9cf3bcc48c51c7d8412174c97d
+  metadata.gz: 4a052e9ad5f71668c3c3fb0fa2586843d08dbc5ec686347e3867c8c1daddfd4e2a0bb007b1c101e33204bcb5d124e82f78f1475a944731170e1dd0ca21e05677
+  data.tar.gz: 2f4c2a81600c7608b402348165c5959ace14b19adca170877cb67a568d56990bea03d9bbbd21d0f5f3ec89ac30f3e73de245113747d1d488a77dd7e25e0761f2

data/README.md

@@ -45,6 +45,8 @@ Additional options that are available:
 
 * `initial`: Set to an array like `[53.8003,-1.5519]`. Will cause the center of the map to be this point if the lat/lng have not yet been set (e.g. for new records). Defaults to Leeds, UK (because that's where the author is from).
 * `zoom`: Set the default zoom level for maps drawn (defaults to 11).
+* `search`: `true` (default) or `false`. Enable location search. Requires `google_api_key` option too.
+* `google_api_key`: A [key for the Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/get-api-key). Required for location search to work.
 
 ## Usage notes
 
@@ -59,4 +61,3 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/fishpe
 ## License
 
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
-

data/administrate-field-lat_lng.gemspec

@@ -4,7 +4,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 
 Gem::Specification.new do |spec|
   spec.name          = "administrate-field-lat_lng"
-  spec.version       = "1.1.0"
+  spec.version       = "1.2.0"
   spec.authors       = ["Rich Daley"]
   spec.email         = ["rich@fishpercolator.co.uk"]
 

data/app/views/fields/lat_lng/_map.html.erb

@@ -2,6 +2,7 @@
   <div id="latlngmap"></div>
 </div>
 <% content_for :javascript do %>
+  <%= content_tag(:script, '', src: "https://maps.googleapis.com/maps/api/js?key=#{field.google_api_key}&libraries=places") if field.search? %>
   <script type="text/javascript">
     // Attach a leaflet.js map to the div above
     var map = L.map('latlngmap');
@@ -9,7 +10,24 @@
       attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
     });
     map.addLayer(osm);
-    
+
+    var createMarker = function(latlng) {
+      var icon = new L.Icon.Default();
+      var options = { icon: icon };
+      marker = L.marker(latlng, options);
+      marker.addTo(map);
+    };
+
+    var setMarker = function (latlng) {
+      if (marker === undefined) {
+        createMarker(latlng);
+      } else {
+        marker.setLatLng(latlng);
+      }
+      $('.latlng-lat').val(latlng.lat);
+      $('.latlng-lng').val(latlng.lng);
+    };
+
     // Get the centre lat/lng from the field or the initial default if the field
     // hasn't been set yet
     var latlng = [];
@@ -19,28 +37,37 @@
       latlng = [lat, lng];
     }
     map.setView(latlng, <%= field.zoom %>);
-    
+
     // Add a marker if the field has been set already
     var marker;
     if (lng !== undefined) {
-      var icon = new L.Icon.Default();
-      var options = { icon: icon };
-      marker = L.marker(latlng, options);
-      marker.addTo(map);
+      createMarker(latlng);
     }
     <% if edit %>
     // In edit mode, move the marker and update the fields when a user clicks
     // inside the map
     map.on('click', function (e) {
-      if (marker === undefined) {
-        marker = L.marker(e.latlng);
-        marker.addTo(map);
-      } else {
-        marker.setLatLng(e.latlng);
-      }
-      $('.latlng-lat').val(e.latlng.lat);
-      $('.latlng-lng').val(e.latlng.lng);
+      setMarker(e.latlng);
     });
     <% end %>
+
+    <% if field.search? %>
+    new L.Control.GPlaceAutocomplete({
+        callback: function (place) {
+          map.panTo([
+              place.geometry.location.lat(),
+              place.geometry.location.lng()
+          ]);
+
+          <% if edit %>
+          setMarker({
+            lat: place.geometry.location.lat(),
+            lng: place.geometry.location.lng(),
+          });
+          <% end %>
+        },
+      })
+      .addTo(map);
+    <% end %>
   </script>
 <% end %>

data/lib/administrate/field/lat_lng.rb

@@ -6,10 +6,16 @@ module Administrate
   module Field
     class LatLng < Base
       class Engine < ::Rails::Engine
-        config.assets.precompile << %w(lat_lng.js lat_lng.css) if config.respond_to? :assets
+        if config.respond_to? :assets
+          config.assets.precompile << %w(lat_lng.js lat_lng.css)
+          config.assets.precompile << %w(leaflet-gplaces-autocomplete-0.0.8.css leaflet-gplaces-autocomplete-0.0.8.js)
+        end
+
         if defined?(Administrate::Engine)
           Administrate::Engine.add_javascript 'lat_lng.js'
           Administrate::Engine.add_stylesheet 'lat_lng.css'
+          Administrate::Engine.add_javascript 'leaflet-gplaces-autocomplete-0.0.8.js'
+          Administrate::Engine.add_stylesheet 'leaflet-gplaces-autocomplete-0.0.8.css'
         end
       end
 
@@ -17,31 +23,40 @@ module Administrate
       def lat?
         options.fetch(:lat, attribute == :lat)
       end
-  
+
       # True if the :lng option has been provided, or field is called :lng
       def lng?
         options.fetch(:lng, attribute == :lng)
       end
-      
+
+      # Return wether or not search should be enabled (defaults to true)
+      def search?
+        options.fetch(:search, true) && google_api_key.present?
+      end
+
+      # Get Google API Key. How to obtain one: https://developers.google.com/maps/documentation/javascript/get-api-key
+      def google_api_key
+        options.fetch(:google_api_key, nil)
+      end
+
       # Returns :lat or :lng depending on which type this is
       def which
         lat? ? :lat : :lng
       end
-      
+
       # Returns the initial co-ordinates of blank maps (defaults to Leeds, UK)
       def initial
         options.fetch(:initial, [53.8003,-1.5519])
       end
-      
+
       # Returns the initial zoom level for maps (defaults to 11)
       def zoom
         options.fetch(:zoom, 11)
       end
-      
+
       def to_s
         data
       end
-      
     end
   end
 end

data/vendor/assets/javascripts/leaflet-gplaces-autocomplete-0.0.8.js

@@ -0,0 +1,144 @@
+(function () {
+    L.GPlaceAutocomplete = {};
+
+    L.Control.GPlaceAutocomplete = L.Control.extend({
+        options: {
+            position: "topright",
+            prepend: true,
+            collapsed_mode: false,
+            autocomplete_options: {}
+        },
+
+        collapsedModeIsExpanded: true,
+
+        autocomplete: null,
+        icon: null,
+        searchBox: null,
+
+        initialize: function (options) {
+            if (options) {
+                L.Util.setOptions(this, options);
+            }
+            if (!this.options.callback) {
+                this.options.callback = this.onLocationComplete;
+            }
+            this._buildContainer();
+        },
+
+        _buildContainer: function () {
+
+            // build structure
+            this.container = L.DomUtil.create("div", "leaflet-gac-container leaflet-bar");
+            var searchWrapper = L.DomUtil.create("div", "leaflet-gac-wrapper");
+            this.searchBox = L.DomUtil.create("input", "leaflet-gac-control");
+            this.autocomplete = new google.maps.places.Autocomplete(this.searchBox, this.options.autocomplete_options);
+
+            // if collapse mode set - create icon and register events
+            if (this.options.collapsed_mode) {
+                this.collapsedModeIsExpanded = false;
+
+                this.icon = L.DomUtil.create("div", "leaflet-gac-search-btn");
+                L.DomEvent
+                    .on(this.icon, "click", this._showSearchBar, this);
+
+                this.icon.appendChild(
+                    L.DomUtil.create("div", "leaflet-gac-search-icon")
+                );
+
+                searchWrapper.appendChild(
+                    this.icon
+                );
+                L.DomUtil.addClass(this.searchBox, "leaflet-gac-hidden");
+            }
+
+            searchWrapper.appendChild(
+                this.searchBox
+            );
+            // create and bind autocomplete
+            this.container.appendChild(
+                searchWrapper
+            );
+
+        },
+
+        //***
+        // Collapse mode callbacks
+        //***
+
+        _showSearchBar: function () {
+            this._toggleSearch(true);
+        },
+
+        _hideSearchBar: function () {
+            // if element is expanded, we need to change expanded flag and call collapse handler
+            if (this.collapsedModeIsExpanded) {
+                this._toggleSearch(false);
+            }
+        },
+
+        _toggleSearch: function (shouldDisplaySearch) {
+            if (shouldDisplaySearch) {
+                L.DomUtil.removeClass(this.searchBox, "leaflet-gac-hidden");
+                L.DomUtil.addClass(this.icon, "leaflet-gac-hidden");
+                this.searchBox.focus();
+            } else {
+                L.DomUtil.addClass(this.searchBox, "leaflet-gac-hidden");
+                L.DomUtil.removeClass(this.icon, "leaflet-gac-hidden");
+            }
+            this.collapsedModeIsExpanded = shouldDisplaySearch;
+        },
+
+        //***
+        // Default success callback
+        //***
+
+        onLocationComplete: function (place, map) {
+            // default callback
+            if (!place.geometry) {
+                alert("Location not found");
+                return;
+            }
+            map.panTo([
+                place.geometry.location.lat(),
+                place.geometry.location.lng()
+            ]);
+
+        },
+
+        onAdd: function () {
+            // stop propagation of click events
+            L.DomEvent.addListener(this.container, 'click', L.DomEvent.stop);
+            L.DomEvent.disableClickPropagation(this.container);
+            if (this.options.collapsed_mode) {
+                // if collapse mode - register handler
+                this._map.on('dragstart click', this._hideSearchBar, this);
+            }
+            return this.container;
+        },
+
+        addTo: function (map) {
+            this._map = map;
+
+            var container = this._container = this.onAdd(map),
+                pos = this.options.position,
+                corner = map._controlCorners[pos];
+
+            L.DomUtil.addClass(container, 'leaflet-control');
+            if (this.options.prepend) {
+                corner.insertBefore(container, corner.firstChild);
+            } else {
+                corner.appendChild(container)
+            }
+
+            var callback = this.options.callback;
+            var _this = this;
+            google.maps.event.addListener(this.autocomplete, "place_changed", function () {
+                callback(_this.autocomplete.getPlace(), map);
+            });
+
+            return this;
+        }
+
+
+    });
+})();

data/vendor/assets/stylesheets/leaflet-gplaces-autocomplete-0.0.8.css

@@ -0,0 +1,43 @@
+.leaflet-gac-wrapper {
+    height: 30px;
+}
+
+.leaflet-control-container .leaflet-gac-control {
+    width: 300px;
+    height: 30px;
+    padding: 0 7px;
+    border-radius: 5px;
+    border: 1px #d0d0d0 solid;
+}
+
+.leaflet-control-container .leaflet-right .leaflet-gac-control {
+    position: absolute;
+    right: 0;
+    transition: width .3s ease .15s;
+}
+
+.leaflet-control-container .leaflet-gac-control:focus {
+    outline: none;
+}
+
+.leaflet-control-container .leaflet-gac-search-btn {
+    background: #fff;
+    width: 30px;
+    height: 30px;
+    border-radius: 4px;
+}
+
+.leaflet-control-container .leaflet-gac-search-btn .leaflet-gac-search-icon {
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABOUlEQVQ4T6XTLUgmQRgH8N+Ligd+FOu1ww+wKPhxlwxXxHYnqCAGQZtgMBgU4eWaXLhyCgYxiAYVk6igJotgEaNiNYgGL6kHJwOzsO+yGzw3zszzm5nnP1vyzq+UU9+JUbTiCWdYw13eXmmgCr8wlbPwERPYys6lgVA8jSvM4RQfMIQF1KIfR2kkAdpxiRv04CGzUx9OcI02/EvmE+AH5jGG9YK+bmMQ3TjPApsYQXPcJc+Ywc/Y4I0ssIpxdOCi4ATl2Ivv2M0Ck1jBImZzgOrYoxZ8xG0WqI9Hb4pX2UkhNViKMe5jIC+FMPYVezGu4xhjHb7hUyx6wXDeFRK0C79jlMnYX4SmhZfZiwok7ymHwpBGyPs5RnaPRhzicxopAop+sYAc4Av+BPStQIAbsByffPl/gIrTvQLbJDoR8K3H6QAAAABJRU5ErkJggg==") no-repeat center center;
+}
+
+.leaflet-control-container .leaflet-gac-hidden {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    transition: width .3s ease .15s;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: administrate-field-lat_lng
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
 - Rich Daley
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-02-28 00:00:00.000000000 Z
+date: 2017-03-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate
@@ -125,6 +125,8 @@ files:
 - app/views/fields/lat_lng/_show.html.erb
 - app/views/fields/lat_lng/_var.html.erb
 - lib/administrate/field/lat_lng.rb
+- vendor/assets/javascripts/leaflet-gplaces-autocomplete-0.0.8.js
+- vendor/assets/stylesheets/leaflet-gplaces-autocomplete-0.0.8.css
 homepage: https://github.com/fishpercolator/administrate-field-lat_lng
 licenses:
 - MIT