Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[v4] create collapsed option #222

Merged
merged 10 commits into from
Mar 21, 2019
Merged

[v4] create collapsed option #222

merged 10 commits into from
Mar 21, 2019

Conversation

katydecorah
Copy link
Contributor

@katydecorah katydecorah commented Mar 19, 2019

  • briefly describe the changes in this PR
  • write tests for all new functionality
  • update CHANGELOG.md with changes under master heading before merging

This PR adds a collapsed option that will collapse the geocoder controller into a button. When hovered or focused, the controller will open up. It will collapse once the user focuses or hovers away from the controller, but only if they have cleared the search.

refs #89 (comment)

@katydecorah katydecorah changed the title [work in progress][v4] create collapsed option [blocked][v4] create collapsed option Mar 19, 2019
API.md Outdated
@@ -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`)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"unless until", maybe just "until"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you!

Katy DeCorah added 2 commits March 20, 2019 13:59
* version4: (25 commits)
  fix focus trap (#220)
  add `npm run docs` step to template (#221)
  Fix typo in documentation
  additional properties existance check
  Ensure properties exist prior to checking id
  update changelog
  remove use of hardcoded feature IDs
  update outdated packages with npm update
  update changelog
  Bump insecure dev dependencies
  tests for options.flyTo
  Update changelog
  update jsdoc and api docs
  pass flyTo options to map upon selection
  extend eslint, add precommit hook (#210)
  replace sha.js with nanoid reduce bundle size to 42kb (13kb gzipped)
  [docs] update deploy process (#198)
  prepare to publish v3.1.6
  update package-lock
  bump package version to v3.1.5
  ...
@katydecorah katydecorah changed the title [blocked][v4] create collapsed option [v4] create collapsed option Mar 20, 2019
@andrewharvey andrewharvey added this to the v4.0.0 milestone Mar 21, 2019
Copy link

@scottsfarley93 scottsfarley93 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing! This looks great. So smooth animating between collapsed and uncollapsed states. Great work!

Left one small comment about tests.

@@ -513,5 +513,54 @@ test('geocoder', function(tt) {
t.end();
});

tt.test('options.collapsed=true', function(t) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: these tests look good, but should we move them to test.ui.js since they generally handle the testing of UI elements?

Katy DeCorah added 3 commits March 21, 2019 15:05
* version4:
  Update documentation with documentation@9.3.0
  suggestions@v1.4.0
  Update jsdoc strings
  add get/set functions
  expose render and getItemValue functions as constructor options
@katydecorah katydecorah merged commit ca51e90 into version4 Mar 21, 2019
@katydecorah katydecorah deleted the v4-collapse-option branch March 21, 2019 19:18
katydecorah pushed a commit that referenced this pull request Mar 22, 2019
* version4:
  reset this.lastSelected on clear (#224)
  [v4] style updates (#211)
  [v4] create collapsed option (#222)
  fixes double moveend event #131
@jayenashar
Copy link

the collapsed option doesn't seem to work when more than 640px. Found this in the CSS overriding the width:

/* Media queries*/
@media screen and (min-width: 640px) {
  .mapboxgl-ctrl-geocoder {
    width: 33.3333%;

Also, if it's in a block of text, it may wrap to the next line when expanded, causing it to be unhovered, causing it to collapse, causing it to be hovered, causing it to expand, ...

Not sure how to take a video on my computer, but here's some screenshots. I can't stay hovered over both versions.
collapsed
expanded

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants