Add Quick-Switch modal

[cybrox]

This is the implementation for #1008. I have not yet added the version select functionality discussed in #1026, but want to do so once we have discussed possible changes required for this PR.

This PR adds a 'quick-switch' modal that is opened by pressing g and can be closed by pressing Esc, similar to the keyboard shortcut help modal. You can enter any term and hit enter, and it will directly take you to the corresponding docs on hexdocs.pm. Alternatively, if you stop typing for 300ms* it will load matching suggestions from the API and display an auto-complete list with the most accurate 10* results. The behaviour of the auto-complete list is pretty much the same as in the sidebar.

* These values felt good but are up for debate.

For testing, check out the Live Demo. (That is inconveniently hosted on a server that was just moved, if it doesn't load, try flushing your dns cache, sorry)

[josevalim]

This looks great @cybrox! ❤️

A couple things:

1. I think a more lean search would fit the website better. Here is as sketch that remove the borders:

I would also add the "search" icon at the beginning of the search input. But I am not a designer. :) @archdragon, do you have any thoughts here?

2. Today there is a supportsQuickSwitch value. When would it be set to true and when would it be set to false? We hardcode to hexdocs in many places in our docs already, so I would rather have this always as on. Maybe I would even make it clear that this is a go-to-package-on-Hexdocs feature. For example, by changing the title or description to: "Go to another package on HexDocs".

3. @ericmj/@wojtekmach currently elixir, mix, and friends are not listed in the search because they are not packages... is there something we can do about this? Could we have a search that is about the docs and their versions rather than about the packages?

[josevalim]

Oh, one more:

4. we also need a link at the bottom of the page with something like "Go to another package" or similar.

[archdragon]

Looks great!

Some suggestions from me:

1. Mouse click - I use touchpad + keyboard and would really like to be able to click on one of the result

2. Visuals
   a) Personally I really like the look of the one from Slack with full-width options. I think they look really sleek. What do you think about something like this? :)
   
   b) In relation to a) a slight background change (to highlight the item on hover/keyboard selection) would be great.

[cybrox]

I think a more lean search would fit the website better. Here is as sketch that remove the borders

Personally I really like the look of the one from Slack with full-width options. I think they look really sleek. What do you think about something like this? :)
b) In relation to a) a slight background change (to highlight the item on hover/keyboard selection) would be great.

I agree, a lighter design (in terms of less boder-y) looks better. Also light background would probably look very good, I will definitely change that. As for the full-width suggestion, I like it in slack but I don't think there's a real benefit here. The package names are very short, so it'd be lots of empty space, I guess.

Today there is a supportsQuickSwitch value. When would it be set to true and when would it be set to false?

It's set in the docs_config.js. The idea was to only have it shown on hexdocs.pm but not in docs that people use locally. I think, if we change the name to something hexdocs related, like you suggested, it would make sense to have it always-on, though.

we also need a link at the bottom of the page with something like "Go to another package" or similar.

Will add that!

Mouse click - I use touchpad + keyboard and would really like to be able to click on one of the result

Whoops, I completely forgot about that. I will definitely add that as well.

[wojtekmach]

The package names are very short,

Try searching for „nerves” :D

…

Wiadomość napisana przez Sven Gehring ***@***.***> w dniu 22.06.2019, o godz. 11:48: @cybrox commented on this pull request. In assets/js/quick-switch.js: > + prevResult.addClass('selected') + autoCompleteSelected -= 1 + } else { + selectLastAcResult() + } +} + +function deselectAcResult () { + $('.quick-switch-result.selected').removeClass('selected') + autoCompleteSelected = -1 +} + +// Public Methods +// -------------- + +export { openQuickSwichModal } ✏️ typo — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[cybrox]

Try searching for „nerves” :D
True, but even on 600px window width, there's easily enough space for those names :)

Changes

• Removed borders from search field
• Added search icon
• Changed quick-switch to always be usable
• Changed description to "go to another package on HexDocs"
• Added link in footer
• Added support for hovering & clicking results

I have updated the Demo as well.

Edit: I have no clue why the test for the dist file naming is failing 🤔

[josevalim]

Excellent! Three more notes:

1. If you do a mouse over to select something, then you use the keyboard to change the current selection, then you do a mouseover again, you end up with multiple selections

I am not sure if this issue also exists in #1031.

2. In the sidebar search, every time you type a new letter in the searchbar, it removes the current selection. Should we make those consistent?

3. Suggestion: get rid of body and just have a title:

Note I also replaced "another" by "a". That's because if we are going to make this available locally, then this will show up even if you don't have a package, so "another" could be misleading. We would have to change this on other places too.

[josevalim]

Edit: I have no clue why the test for the dist file naming is failing 🤔

You probably have multiple .dist files around because of a rebase or changes in master. To fix it, do another full rebase against master, call mix build, and make sure there are no duplicate assets.

[cybrox]

1. That's my fault. I uploaded the demo before I created 00aab03 and Fix: search autocomplete result hovering causes double selection #1031 to address that specific issue. I updated the demo and it should work as expected now

2. Did that only happen when deleting the search query to < 3 characters? Because the selection is reset every time the autocomplete is reloaded (which only happens > 3 characters)

3. Changed that.

[cybrox]

For 2. I noticed that when you hover an item and leave your mouse in place, the autocomplete suggestions will update "over" the mouse (you don't see it) but the item where your mouse is located will automatically be selected.

This happens on the sidebar search autocomplete as well. Could it be that this is what happened?

[josevalim]

@cybrox sounds like it. But FWIW I also don't mind the current behaviour of the sidebar and I would be OK with keeping both simple.

[cybrox]

For the sake of keeping things simple, I have closed #1031 and adjusted the code here to behave the same as the sidebar autocomplete.

(FYI: I'm not trying to re-use the sidebar autocomplete code, because if we add support for going to a specific version directly, the code will differ in quite a few places)

With this, all discussed issues should be solved 🎉

[josevalim]

❤️ 💚 💙 💛 💜