[v4] create collapsed option

API.md

@@ -28,6 +28,7 @@ A geocoder component using Mapbox Geocoding API
         properties. Search results closer to this point will be given
         higher priority.
     -   `options.trackProximity` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** If true, the geocoder proximity will automatically update based on the map view. (optional, default `true`)
+    -   `options.collapsed` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** If true, the geocoder control will collapse unless until hovered or in focus. (optional, default `false`)
     -   `options.bbox` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)?** a bounding box argument: this is
         a bounding box given as an array in the format [minX, minY, maxX, maxY].
         Search results will be limited to the bounding box.

CHANGELOG.md

@@ -4,6 +4,7 @@
 - `trackProximity` turned on by default [#195](https://github.com/mapbox/mapbox-gl-geocoder/issues/195)
 - Bump suggestions to v1.3.4
 - Fix duplicate event bug
+- Add `collapsed` option to collapse the geocoder controller into a button until hovered or focused [#222](https://github.com/mapbox/mapbox-gl-geocoder/issues/222)
 
 ## v3.1.4
 

lib/index.js

@@ -26,6 +26,7 @@ var geocoderService;
  * properties. Search results closer to this point will be given
  * higher priority.
  * @param {Boolean} [options.trackProximity=true] If true, the geocoder proximity will automatically update based on the map view.
+ * @param {Boolean} [options.collapsed=false] If true, the geocoder control will collapse unless until hovered or in focus.
  * @param {Array} [options.bbox] a bounding box argument: this is
  * a bounding box given as an array in the format [minX, minY, maxX, maxY].
  * Search results will be limited to the bounding box.
@@ -65,7 +66,8 @@ MapboxGeocoder.prototype = {
     minLength: 2,
     reverseGeocode: false,
     limit: 5,
-    origin: 'https://api.mapbox.com'
+    origin: 'https://api.mapbox.com',
+    collapsed: false
   },
 
   onAdd: function(map) {
@@ -87,6 +89,8 @@ MapboxGeocoder.prototype = {
     this._onQueryResult = this._onQueryResult.bind(this);
     this._clear = this._clear.bind(this);
     this._updateProximity = this._updateProximity.bind(this);
+    this._collapse = this._collapse.bind(this);
+    this._unCollapse = this._unCollapse.bind(this);
 
     var el = (this.container = document.createElement('div'));
     el.className = 'mapboxgl-ctrl-geocoder mapboxgl-ctrl';
@@ -98,6 +102,14 @@ MapboxGeocoder.prototype = {
     this._inputEl.type = 'text';
     this._inputEl.placeholder = this._getPlaceholderText();
 
+    if (this.options.collapsed) {
+      this._collapse();
+      this.container.addEventListener('mouseenter', this._unCollapse);
+      this.container.addEventListener('mouseleave', this._collapse);
+      this._inputEl.addEventListener('focus', this._unCollapse);
+      this._inputEl.addEventListener('focusout', this._collapse);
+    }
+
     this._inputEl.addEventListener('keydown', this._onKeyDown);
     this._inputEl.addEventListener('change', this._onChange);
 
@@ -149,7 +161,7 @@ MapboxGeocoder.prototype = {
   },
 
   _onKeyDown: debounce(function(e) {
-    
+
     // if target has shadowRoot, then get the actual active element inside the shadowRoot
     var target = e.target.shadowRoot
       ? e.target.shadowRoot.activeElement
@@ -353,6 +365,15 @@ MapboxGeocoder.prototype = {
     }
   },
 
+  _collapse: function() {
+    // do not collapse if input is in focus
+    if (!this._inputEl.value && this._inputEl !== document.activeElement) this.container.classList.add('geocoder-collapsed');
+  },
+
+  _unCollapse: function() {
+    this.container.classList.remove('geocoder-collapsed');
+  },
+
   /**
    * Set & query the input
    * @param {string} searchInput location name or other search input
@@ -397,23 +418,23 @@ MapboxGeocoder.prototype = {
 
   /**
    * Get the language to use in UI elements and when making search requests
-   * 
+   *
    * Look first at the explicitly set options otherwise use the browser's language settings
-   * 
+   *
    * @returns {String} The language used by the geocoder
    */
   getLanguage: function(){
     var browserLocale = navigator.language || navigator.userLanguage || navigator.browserLanguage;
     return this.options.language || browserLocale;
   },
 
-  /** 
+  /**
   * Get the text to use as the search bar placeholder
-   * 
+   *
    * If placeholder is provided in options, then use options.placeholder
    * Otherwise, if language is provided in options, then use the localized string of the first language if available
    * Otherwise use the default
-   * 
+   *
    * @returns {String} the value to use as the search bar placeholder
    * @private
    */

lib/mapbox-gl-geocoder.css

@@ -16,17 +16,17 @@
   max-width:360px;
   z-index:1;
   border-radius:3px;
+  transition: width .25s, min-width .25s;
   }
 
 .mapboxgl-ctrl-geocoder input[type='text'] {
   font-size:12px;
   width:100%;
   border:0;
   background-color:transparent;
-  height:40px;
   margin:0;
   color:rgba(0,0,0,.5);
-  padding:10px 10px 10px 40px;
+  padding:10px 10px 10px 35px;
   text-overflow:ellipsis;
   white-space:nowrap;
   overflow:hidden;
@@ -40,8 +40,8 @@
 
 .mapboxgl-ctrl-geocoder .geocoder-icon-search {
   position:absolute;
-  top:10px;
-  left:10px;
+  top: 7px;
+  left: 5px;
   }
 .mapboxgl-ctrl-geocoder button {
   padding:0;
@@ -54,8 +54,8 @@
   background-color:#fff;
   z-index:2;
   position:absolute;
-  right:10px;
-  top:10px;
+  right: 5px;
+  top: 7px;
   display:none;
   }
 
@@ -64,6 +64,13 @@
   box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
   }
 
+/* Collapsed */
+.geocoder-collapsed {
+  width: 30px;
+  min-width: 30px;
+  transition: width .25s, min-width .25s;
+}
+
 /* Suggestions */
 .mapboxgl-ctrl-geocoder ul {
   background-color:#fff;

test/test.geocoder.js

@@ -133,11 +133,11 @@ test('geocoder', function(tt) {
       once(function(e) {
         t.equal(e.features.length, 1, 'One result returned');
         t.ok(
-          e.features[0].place_name.indexOf('Tanzania') > -1, 
+          e.features[0].place_name.indexOf('Tanzania') > -1,
           'returns expected result'
         );
         t.ok(
-          e.features[0].place_name.indexOf('Singida') > -1, 
+          e.features[0].place_name.indexOf('Singida') > -1,
           'returns expected result'
         );
         t.equal(e.config.limit, 1, 'sets limit to 1 for reverse geocodes');
@@ -454,5 +454,54 @@ test('geocoder', function(tt) {
     t.end();
   });
 
+  tt.test('options.collapsed=true', function(t) {
+    t.plan(1);
+    setup({
+      collapsed: true
+    });
+    var wrapper = container.querySelector('.mapboxgl-ctrl-geocoder');
+    t.equal(wrapper.classList.contains('geocoder-collapsed'), true, 'mapboxgl-ctrl-geocoder has `geocoder-collapsed` class');
+    t.end();
+  });
+
+  tt.test('options.collapsed=true, focus', function(t) {
+    t.plan(1);
+    setup({
+      collapsed: true
+    });
+    var wrapper = container.querySelector('.mapboxgl-ctrl-geocoder');
+    var inputEl = container.querySelector('.mapboxgl-ctrl-geocoder input');
+    // focus input, remove geocoder-collapsed
+    var focusEvent = document.createEvent('Event');
+    focusEvent.initEvent("focus", true, true);
+    inputEl.dispatchEvent(focusEvent);
+    t.equal(wrapper.classList.contains('geocoder-collapsed'), false, 'mapboxgl-ctrl-geocoder does not have `geocoder-collapsed` class when inputEl in focus');
+    t.end();
+  });
+
+  tt.test('options.collapsed=true, hover', function(t) {
+    t.plan(1);
+    setup({
+      collapsed: true
+    });
+    var wrapper = container.querySelector('.mapboxgl-ctrl-geocoder');
+    // hover input, remove geocoder-collapsed
+    var hoverEvent = document.createEvent('Event');
+    hoverEvent.initEvent("mouseenter", true, true);
+    wrapper.dispatchEvent(hoverEvent);
+    t.equal(wrapper.classList.contains('geocoder-collapsed'), false, 'mapboxgl-ctrl-geocoder does not have `geocoder-collapsed` class when wrapper hovered');
+    t.end();
+  });
+
+  tt.test('options.collapsed=false', function(t) {
+    t.plan(1);
+    setup({
+      collapsed: false
+    });
+    var wrapper = container.querySelector('.mapboxgl-ctrl-geocoder');
+    t.equal(wrapper.classList.contains('geocoder-collapsed'), false, 'mapboxgl-ctrl-geocoder does not have `geocoder-collapsed` class');
+    t.end();
+  });
+
   tt.end();
 });