total rewrite, rewritten in es6, added tests, improved decoupling

.babelrc

@@ -0,0 +1,22 @@
+{
+  "presets": ["es2015", "stage-0", "power-assert"],
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "preact.h"}],
+    "transform-async-to-generator",
+    ["babel-plugin-espower", {
+      "embedAst": true,
+      "patterns": [
+        "t.truthy(value, [message])",
+        "t.falsy(value, [message])",
+        "t.true(value, [message])",
+        "t.false(value, [message])",
+        "t.is(value, expected, [message])",
+        "t.not(value, expected, [message])",
+        "t.deepEqual(value, expected, [message])",
+        "t.notDeepEqual(value, expected, [message])",
+        "t.regex(contents, regex, [message])",
+        "t.notRegex(contents, regex, [message])"
+      ]
+    }]
+  ]
+}

.editorconfig

@@ -0,0 +1,13 @@
+# @see http://editorconfig.org/
+
+# This is the top-most .editorconfig file; do not search in parent directories.
+root = true
+
+# All files.
+[*]
+end_of_line = LF
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.env

@@ -0,0 +1,2 @@
+BING_API_KEY=AtUDjSVEBxo8BwgYUPdfnzHpznaYwDdjjS27jyFDj18nhTUDUjrhc0NwMndZvrXs
+GOOGLE_API_KEY=AIzaSyDigZ5WMPoTj_gnkUn3p1waYPDa5oE8WOw

.eslintrc.yml

@@ -0,0 +1,55 @@
+extends: "airbnb"
+
+env:
+  browser: true
+
+parser: "babel-eslint"
+parserOptions:
+  ecmaVersion: 6
+  ecmaFeatures:
+    experimentalObjectRestSpread: true
+    jsx: true
+  sourceType: "module"
+
+rules:
+  # we need this to test leaflet private vars
+  no-underscore-dangle: "off"
+
+  # force else and catch to a new line
+  brace-style:
+   - "error"
+   - "stroustrup"
+   - allowSingleLine: true
+
+  quote-props:
+    - "error"
+    - "consistent-as-needed"
+    - keywords: true
+
+  class-methods-use-this: "off"
+
+  import/no-extraneous-dependencies:
+    - "error"
+    - devDependencies:
+      - "**/*.spec.js"
+      - "**/test_helpers/**/*.js"
+      - "example/**/*.js"
+
+  react/jsx-filename-extension:
+    - "error"
+    - extensions:
+      - ".js"
+
+  react/prop-types: "off"
+
+  jsx-a11y/anchor-has-content: "off"
+
+globals:
+  L: false
+  fetch: false
+  document: false
+  location: false
+
+settings:
+  react:
+    pragma: "preact"

.gitignore

@@ -165,3 +165,6 @@ pip-log.txt
 *.sublime-project
 *.sublime-workspace
 .idea
+dist/
+lib/
+node_modules/

.npmignore

@@ -0,0 +1 @@
+src/

src/css/l.geosearch.css → assets/css/leaflet.css

@@ -1,52 +1,45 @@
-.displayNone {
-	display: none;
+.geosearch.leaflet-bar form,
+.geosearch.leaflet-bar .message {
+  display: none;
 }
 
-.leaflet-control-geosearch {
-	position: relative;
+.geosearch.leaflet-bar.active form {
+  display: block;
 }
 
-.leaflet-control-geosearch a {
-	-webkit-border-radius: 4px;
-			border-radius: 4px;
+.geosearch a.leaflet-bar-part {
+	border-radius: 4px;
 	border-bottom: none;
-}
-
-.leaflet-control-geosearch a.glass {
 	background-image: url(../img/geosearch.png);
+  background-position: center center;
 	background-size: 100% 100%;
 }
 
-.leaflet-control-geosearch a.spinner {
+.geosearch.pending a.leaflet-bar-part {
 	background-image: url(../img/spinner.gif);
-	background-position: 50% 50%;
+  background-size: 12px 12px;
 }
 
-.leaflet-control-geosearch a.alert {
+.geosearch.error a.leaflet-bar-part {
 	background-image: url(../img/alert.png);
-	background-size: 64% 64%;
+	background-size: 18px 18px;
 }
 
-.leaflet-control-geosearch a:hover {
-	border-bottom: none;
+.leaflet-control-geosearch {
+  position: relative;
 }
 
 .leaflet-control-geosearch form {
 	position: absolute;
 	top: 0;
 	left: 22px;
 	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
-	-webkit-border-radius: 4px;
-			border-radius: 0px 4px 4px 0px;
+	border-radius: 0 4px 4px 0;
 	z-index: -1;
 	background: #FFF;
-	height: 26px;
-	padding: 0 6px 0 6px;
-}
-
-.leaflet-touch .leaflet-control-geosearch form {
-	padding: 2px 6px 2px 8px;
-	line-height: 28px;
+	height: auto;
+	margin: 0;
+  padding: 0;
 }
 
 .leaflet-control-geosearch form input {
@@ -56,7 +49,9 @@
 	margin: 0;
 	padding: 0;
 	font-size: 12px;
-	margin-top: 5px;
+  height: 30px;
+  border-radius: 0 4px 4px 0;
+
 }
 
 .leaflet-control-geosearch .message {

example/Layout.js

@@ -0,0 +1,54 @@
+import preact, { Component } from 'preact';
+import Search from './Search';
+
+class Layout extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hash: window.location.hash.slice(1),
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('hashchange', this.changePage, false);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('hashchange', this.changePage, false);
+  }
+
+  changePage = () => {
+    this.setState({
+      hash: window.location.hash.slice(1),
+    });
+  };
+
+  render() {
+    const { pages } = this.props;
+    const { hash } = this.state;
+    const page = pages.find(p => p.slug === (hash || 'search'));
+
+    return (
+      <div>
+        <div className="header">
+          <h1>{`GeoSearch / ${page.title}`}</h1>
+
+          <ul>
+            {pages.map((p, idx) => (
+              <li key={idx} className={p.slug === hash ? 'active' : ''}>
+                <a href={`#${p.slug}`}>{p.title}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className={`content ${hash}`}>
+          {page && page.view()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Layout;

example/Map.js

@@ -0,0 +1,55 @@
+import preact, { Component } from 'preact';
+import merge from 'lodash.merge';
+import { GeoSearchControl, OpenStreetMapProvider, Provider as BaseProvider } from '../src';
+
+const L = window.L;
+
+// eslint-disable-next-line no-confusing-arrow
+const ensureInstance = Provider => Provider instanceof BaseProvider ? Provider : new Provider();
+
+const mapOptions = () => ({
+  layers: [
+    new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 18,
+    }),
+  ],
+  center: new L.LatLng(53.2, 5.8),
+  zoom: 12,
+});
+
+class Map extends Component {
+  componentDidMount() {
+    const { options, Provider } = this.props;
+
+    this.map = new L.Map(this.container, merge(mapOptions(), options));
+
+    const provider = (Provider) ? ensureInstance(Provider) : new OpenStreetMapProvider();
+
+    this.searchControl = new GeoSearchControl({
+      provider,
+    }).addTo(this.map);
+  }
+
+  componentDidUpdate() {
+    const Provider = this.props.Provider || OpenStreetMapProvider;
+    this.searchControl.options.provider = ensureInstance(Provider);
+  }
+
+  componentWillUnmount() {
+    this.map.remove();
+  }
+
+  bindContainer = (container) => {
+    this.container = container;
+  };
+
+  render() {
+    const { style } = this.props;
+
+    return (
+      <div className="leaflet-map" style={style} ref={this.bindContainer} />
+    );
+  }
+}
+
+export default Map;