fix css

Author: iBinh

README.md

@@ -1,8 +1,6 @@
-#Goong Geocoder
----
-
-A geocoder control for [goong-js](https://docs.goong.io/docs/api) using the [Goong Places API](https://docs.goong.io/docs/rest/place/).
+# Goong Geocoder
 
+A geocoder control for [goong-js](https://docs.goong.io/docs/javascript) using the [Goong Places API](https://docs.goong.io/docs/rest/place/).
 
 **If you are supporting older browsers, you will need a Promise polyfill.**
 [es6-promise](https://github.com/stefanpenner/es6-promise) is a good one, if you're uncertain.
@@ -20,9 +18,12 @@ var GoongGeocoder = require('@goongmaps/goong-geocoder');
 <script src='https://cdn.jsdelivr.net/npm/@goongmaps/goong-geocoder/dist/goong-geocoder.min.js'></script>
 <link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-geocoder/dist/goong-geocoder.css" rel="stylesheet" type="text/css"/>
 ```
-###  Using without a Map
+### Examples
+#### Using within Map
+https://docs.goong.io/docs/example/add-a-geocoder/
+#### Using without a Map
 It is possible to use the plugin without it being placed as a control on a goong-js map. 
-
+https://docs.goong.io/docs/example/goong-geocoder-without-map/
 ### Deeper dive
 
 #### API Documentation

lib/goong-geocoder.css

@@ -1,13 +1,13 @@
 
 /* Basics */
-.goongjs-ctrl-geocoder,
-.goongjs-ctrl-geocoder *,
-.goongjs-ctrl-geocoder *:after,
-.goongjs-ctrl-geocoder *:before {
+.mapboxgl-ctrl-geocoder,
+.mapboxgl-ctrl-geocoder *,
+.mapboxgl-ctrl-geocoder *:after,
+.mapboxgl-ctrl-geocoder *:before {
   box-sizing: border-box;
 }
 
-.goongjs-ctrl-geocoder {
+.mapboxgl-ctrl-geocoder {
   font-size: 18px;
   line-height: 24px;
   font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
@@ -20,7 +20,7 @@
   transition: width .25s, min-width .25s;
 }
 
-.goongjs-ctrl-geocoder--input {
+.mapboxgl-ctrl-geocoder--input {
   font: inherit;
   width: 100%;
   border: 0;
@@ -35,40 +35,40 @@
   overflow: hidden;
 }
 
-.goongjs-ctrl-geocoder--input::-ms-clear {
+.mapboxgl-ctrl-geocoder--input::-ms-clear {
   display: none; /* hide input clear button in IE */
 }
 
-.goongjs-ctrl-geocoder--input:focus {
+.mapboxgl-ctrl-geocoder--input:focus {
   color: #404040; /* fallback */
   color: rgba(0, 0, 0, 0.75);
   outline: 0;
   box-shadow: none;
   outline: thin dotted\8;
 }
 
-.goongjs-ctrl-geocoder .goongjs-ctrl-geocoder--pin-right > * {
+.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
   z-index: 2;
   position: absolute;
   right: 8px;
   top: 7px;
   display: none;
 }
 
-.goongjs-ctrl-geocoder,
-.goongjs-ctrl-geocoder .suggestions {
+.mapboxgl-ctrl-geocoder,
+.mapboxgl-ctrl-geocoder .suggestions {
   box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
 }
 
 /* Collapsed */
-.goongjs-ctrl-geocoder.goongjs-ctrl-geocoder--collapsed {
+.mapboxgl-ctrl-geocoder.mapboxgl-ctrl-geocoder--collapsed {
   width: 50px;
   min-width: 50px;
   transition: width .25s, min-width .25s;
 }
 
 /* Suggestions */
-.goongjs-ctrl-geocoder .suggestions {
+.mapboxgl-ctrl-geocoder .suggestions {
   background-color: #fff;
   border-radius: 4px;
   left: 0;
@@ -84,56 +84,56 @@
   font-size: 15px;
 }
 
-.goongjs-ctrl-bottom-left .suggestions,
-.goongjs-ctrl-bottom-right .suggestions {
+.mapboxgl-ctrl-bottom-left .suggestions,
+.mapboxgl-ctrl-bottom-right .suggestions {
   top: auto;
   bottom: 100%;
 }
 
-.goongjs-ctrl-geocoder .suggestions > li > a {
+.mapboxgl-ctrl-geocoder .suggestions > li > a {
   cursor: default;
   display: block;
   padding: 6px 12px;
   color: #404040;
 }
 
-.goongjs-ctrl-geocoder .suggestions > .active > a,
-.goongjs-ctrl-geocoder .suggestions > li > a:hover {
+.mapboxgl-ctrl-geocoder .suggestions > .active > a,
+.mapboxgl-ctrl-geocoder .suggestions > li > a:hover {
   color: #404040;
   background-color: #f3f3f3;
   text-decoration: none;
   cursor: pointer;
 }
 
-.goongjs-ctrl-geocoder--suggestion-title {
+.mapboxgl-ctrl-geocoder--suggestion-title {
   font-weight: bold;
 }
 
-.goongjs-ctrl-geocoder--suggestion-title,
-.goongjs-ctrl-geocoder--suggestion-address {
+.mapboxgl-ctrl-geocoder--suggestion-title,
+.mapboxgl-ctrl-geocoder--suggestion-address {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
 /* Icons */
-.goongjs-ctrl-geocoder--icon {
+.mapboxgl-ctrl-geocoder--icon {
   display: inline-block;
   vertical-align: middle;
   speak: none;
   fill: #757575;
   top: 15px;
 }
 
-.goongjs-ctrl-geocoder--icon-search {
+.mapboxgl-ctrl-geocoder--icon-search {
   position: absolute;
   top: 13px;
   left: 12px;
   width: 23px;
   height: 23px;
 }
 
-.goongjs-ctrl-geocoder--button {
+.mapboxgl-ctrl-geocoder--button {
   padding: 0;
   margin: 0;
   border: none;
@@ -142,18 +142,18 @@
   line-height: 1;
 }
 
-.goongjs-ctrl-geocoder--icon-close {
+.mapboxgl-ctrl-geocoder--icon-close {
   width: 20px;
   height: 20px;
   margin-top: 8px;
   margin-right: 3px;
 }
 
-.goongjs-ctrl-geocoder--button:hover .goongjs-ctrl-geocoder--icon-close {
+.mapboxgl-ctrl-geocoder--button:hover .mapboxgl-ctrl-geocoder--icon-close {
   fill: #909090;
 }
 
-.goongjs-ctrl-geocoder--icon-loading {
+.mapboxgl-ctrl-geocoder--icon-loading {
   width: 26px;
   height: 26px;
   margin-top: 5px;
@@ -189,44 +189,44 @@
 /* Media queries*/
 @media screen and (min-width: 640px) {
 
-  .goongjs-ctrl-geocoder.goongjs-ctrl-geocoder--collapsed {
+  .mapboxgl-ctrl-geocoder.mapboxgl-ctrl-geocoder--collapsed {
     width: 36px;
     min-width: 36px;
   }
 
-  .goongjs-ctrl-geocoder {
+  .mapboxgl-ctrl-geocoder {
     width: 33.3333%;
     font-size: 15px;
     line-height: 20px;
     max-width: 360px;
   }
-  .goongjs-ctrl-geocoder .suggestions {
+  .mapboxgl-ctrl-geocoder .suggestions {
     font-size: 13px;
   }
 
-  .goongjs-ctrl-geocoder--icon {
+  .mapboxgl-ctrl-geocoder--icon {
     top: 8px;
   }
 
-  .goongjs-ctrl-geocoder--icon-close {
+  .mapboxgl-ctrl-geocoder--icon-close {
     width: 16px;
     height: 16px;
     margin-top: 3px;
     margin-right: 0;
   }
 
-  .goongjs-ctrl-geocoder--icon-search {
+  .mapboxgl-ctrl-geocoder--icon-search {
     left: 7px;
     width: 20px;
     height: 20px;
   }
 
-  .goongjs-ctrl-geocoder--input {
+  .mapboxgl-ctrl-geocoder--input {
     height: 36px;
     padding: 6px 35px;
   }
 
-  .goongjs-ctrl-geocoder--icon-loading {
+  .mapboxgl-ctrl-geocoder--icon-loading {
     width: 26px;
     height: 26px;
     margin-top: -2px;

lib/index.js

@@ -72,7 +72,7 @@ GoongGeocoder.prototype = {
     },
     render: function render(item) {
       var placeName = item.structured_formatting;
-      return '<div class="goongjs-ctrl-geocoder--suggestion"><div class="goongjs-ctrl-geocoder--suggestion-title">' + placeName.main_text + '</div><div class="goongjs-ctrl-geocoder--suggestion-address">' + placeName.secondary_text + '</div></div>';
+      return '<div class="mapboxgl-ctrl-geocoder--suggestion"><div class="mapboxgl-ctrl-geocoder--suggestion-title">' + placeName.main_text + '</div><div class="mapboxgl-ctrl-geocoder--suggestion-address">' + placeName.secondary_text + '</div></div>';
     }
   },
   request: null,
@@ -144,11 +144,11 @@ GoongGeocoder.prototype = {
     this._clear = this._clear.bind(this);
     this._clearOnBlur = this._clearOnBlur.bind(this);
     var el = this.container = document.createElement('div');
-    el.className = 'goongjs-ctrl-geocoder goongjs-ctrl';
+    el.className = 'mapboxgl-ctrl-geocoder mapboxgl-ctrl';
     var searchIcon = this.createIcon('search', '<path d="M7.4 2.5c-2.7 0-4.9 2.2-4.9 4.9s2.2 4.9 4.9 4.9c1 0 1.8-.2 2.5-.8l3.7 3.7c.2.2.4.3.8.3.7 0 1.1-.4 1.1-1.1 0-.3-.1-.5-.3-.8L11.4 10c.4-.8.8-1.6.8-2.5.1-2.8-2.1-5-4.8-5zm0 1.6c1.8 0 3.2 1.4 3.2 3.2s-1.4 3.2-3.2 3.2-3.3-1.3-3.3-3.1 1.4-3.3 3.3-3.3z"/>');
     this._inputEl = document.createElement('input');
     this._inputEl.type = 'text';
-    this._inputEl.className = 'goongjs-ctrl-geocoder--input';
+    this._inputEl.className = 'mapboxgl-ctrl-geocoder--input';
     this.setPlaceholder();
 
     if (this.options.collapsed) {
@@ -177,14 +177,14 @@ GoongGeocoder.prototype = {
     }.bind(this));
 
     var actions = document.createElement('div');
-    actions.classList.add('goongjs-ctrl-geocoder--pin-right');
+    actions.classList.add('mapboxgl-ctrl-geocoder--pin-right');
     this._clearEl = document.createElement('button');
 
     this._clearEl.setAttribute('aria-label', 'Clear');
 
     this._clearEl.addEventListener('click', this.clear);
 
-    this._clearEl.className = 'goongjs-ctrl-geocoder--button';
+    this._clearEl.className = 'mapboxgl-ctrl-geocoder--button';
     var buttonIcon = this.createIcon('close', '<path d="M3.8 2.5c-.6 0-1.3.7-1.3 1.3 0 .3.2.7.5.8L7.2 9 3 13.2c-.3.3-.5.7-.5 1 0 .6.7 1.3 1.3 1.3.3 0 .7-.2 1-.5L9 10.8l4.2 4.2c.2.3.7.3 1 .3.6 0 1.3-.7 1.3-1.3 0-.3-.2-.7-.3-1l-4.4-4L15 4.6c.3-.2.5-.5.5-.8 0-.7-.7-1.3-1.3-1.3-.3 0-.7.2-1 .3L9 7.1 4.8 2.8c-.3-.1-.7-.3-1-.3z"/>');
 
     this._clearEl.appendChild(buttonIcon);
@@ -225,7 +225,7 @@ GoongGeocoder.prototype = {
   },
   createIcon: function (name, path) {
     var icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    icon.setAttribute('class', 'goongjs-ctrl-geocoder--icon goongjs-ctrl-geocoder--icon-' + name);
+    icon.setAttribute('class', 'mapboxgl-ctrl-geocoder--icon mapboxgl-ctrl-geocoder--icon-' + name);
     icon.setAttribute('viewBox', '0 0 18 18');
     icon.setAttribute('xml:space', 'preserve');
     icon.setAttribute('width', 18);
@@ -479,10 +479,10 @@ GoongGeocoder.prototype = {
   },
   _collapse: function () {
     // do not collapse if input is in focus
-    if (!this._inputEl.value && this._inputEl !== document.activeElement) this.container.classList.add('goongjs-ctrl-geocoder--collapsed');
+    if (!this._inputEl.value && this._inputEl !== document.activeElement) this.container.classList.add('mapboxgl-ctrl-geocoder--collapsed');
   },
   _unCollapse: function () {
-    this.container.classList.remove('goongjs-ctrl-geocoder--collapsed');
+    this.container.classList.remove('mapboxgl-ctrl-geocoder--collapsed');
   },
 
   /**
@@ -501,7 +501,7 @@ GoongGeocoder.prototype = {
     this._renderMessage(errorMessage);
   },
   _renderNoResults: function () {
-    var errorMessage = "<div class='goong-js-geocoder--error goongjs-gl-geocoder--no-results'>No results found</div>";
+    var errorMessage = "<div class='goong-js-geocoder--error mapboxgl-gl-geocoder--no-results'>No results found</div>";
 
     this._renderMessage(errorMessage);
   },
@@ -548,9 +548,9 @@ GoongGeocoder.prototype = {
    * Get input
    * @returns current input
    */
-   getInput: function() {
+  getInput: function() {
     return this._inputEl.value;
-   },
+  },
   /**
    * Set proximity
    * @param {Object} proximity The new `options.proximity` value. This is a geographical point given as an object with `latitude` and `longitude` properties.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goongmaps/goong-geocoder",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A geocoder control for Goong JS",
   "main": "lib/index.js",
   "unpkg": "dist/goong-geocoder.min.js",
@@ -20,6 +20,9 @@
     "node": ">=6"
   },
   "keywords": [
+    "geocoding",
+    "autocomplete-search",
+    "goong-io",
     "goong",
     "geocoder",
     "osm",

yarn.lock

@@ -1898,9 +1898,9 @@ camelcase@^5.0.0:
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
 caniuse-lite@^1.0.30001035:
-  version "1.0.30001035"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e"
-  integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==
+  version "1.0.30001232"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001232.tgz"
+  integrity sha512-e4Gyp7P8vqC2qV2iHA+cJNf/yqUKOShXQOJHQt81OHxlIZl/j/j3soEA0adAQi8CPUQgvOdDENyQ5kd6a6mNSg==
 
 caseless@~0.12.0:
   version "0.12.0"