Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

[feature] ArrowKeys to navigate between image results #2724

Merged
merged 3 commits into from
Sep 12, 2023

Conversation

BernieHuang2008
Copy link
Contributor

@BernieHuang2008 BernieHuang2008 commented Sep 7, 2023

What does this PR do?

Improved PR #2721.

Why is this change important?

How to test this PR locally?

Author's checklist

I use Switch-case to make the code more readable and flexible, it's completely same as the example @return42 gived in #2721.

Related issues

Closes #2720
Closes #2736

@BernieHuang2008 BernieHuang2008 changed the title Fxed #2720, improved #2721 Arrow to nagetive between image results - Fxed #2720, improved #2721 Sep 7, 2023
@BernieHuang2008
Copy link
Contributor Author

Local check passed, require check approvals.

@Austin-Olacsi
Copy link
Contributor

good job. i tried the code and it seems to work well. IMO what you mentioned in the video is not an important detail, you shouldn't stress it. i think the code is ready.

@BernieHuang2008
Copy link
Contributor Author

Thank you, i think it's ready too.

@BernieHuang2008 BernieHuang2008 changed the title Arrow to nagetive between image results - Fxed #2720, improved #2721 [fix] ArrowKeys to nagetive between image results Sep 9, 2023
@BernieHuang2008 BernieHuang2008 changed the title [fix] ArrowKeys to nagetive between image results [fix] ArrowKeys to navigate between image results Sep 9, 2023
@BernieHuang2008 BernieHuang2008 changed the title [fix] ArrowKeys to navigate between image results [feature] ArrowKeys to navigate between image results Sep 9, 2023
@BernieHuang2008
Copy link
Contributor Author

@return42 @dalf @bonswouar @Hackurei
Code is ready, please review.

@bonswouar
Copy link
Contributor

Looks good to me!
Although we should figure out what to do about #2736

As you said the easy fix would be to bind on document, but I feel like this is not very clean (we would have the event catch everywhere on the site every time a key is pressed, with a check for existing div). And I don't really know why binding on .detail doesn't work in that edge case..

If someone with more knowledge about js good practises can share it's thought he's more than welcome :)

@dalf
Copy link
Member

dalf commented Sep 9, 2023

With all your tests and comments, I've been able to fix the issue when the user clicks on empty space like described in #2736 :
https://github.com/dalf/searxng/tree/left-right-images

@BernieHuang2008
Copy link
Contributor Author

BernieHuang2008 commented Sep 9, 2023

With all your tests and comments, I've been able to fix the issue when the user clicks on empty space like described in #2736 :
https://github.com/dalf/searxng/tree/left-right-images

That's cool and beautiful, I like it.

@Austin-Olacsi
Copy link
Contributor

With all your tests and comments, I've been able to fix the issue when the user clicks on empty space like described in #2736 :
https://github.com/dalf/searxng/tree/left-right-images

That's cool and beautiful, I like it. Shall I close this PR now, or waiting for your new PR?

why not make the changes here?

@BernieHuang2008
Copy link
Contributor Author

i've updated @dalf 's changes, to this PR.

@dalf
Copy link
Member

dalf commented Sep 9, 2023

@BernieHuang2008 can you squash your commits and call make static.build.commit to add the build files (searxng.min.js) ?

@BernieHuang2008
Copy link
Contributor Author

BernieHuang2008 commented Sep 9, 2023

@dalf i've squashed and built.
what should i do next?

@Austin-Olacsi
Copy link
Contributor

Austin-Olacsi commented Sep 9, 2023

@BernieHuang2008 can you possibly squash to 1 commit?

@BernieHuang2008
Copy link
Contributor Author

BernieHuang2008 commented Sep 9, 2023

ok, squashed into 1 commit, you can now merge the PR if nothing wrong.

@return42
Copy link
Member

ok, squashed into 1 commit, you can now merge the PR if nothing wrong.

Hy @BernieHuang2008, thanks a lot for your work on this topic 👍 .. and sorry for my absent the last days ..

and call make static.build.commit to add the build files (searxng.min.js) ?

Don't worry about .. I will do it in my review I started right now.

@return42
Copy link
Member

FYI I removed the build files from your commit and rebased your commit on SearXNG's master branch / I'm still in review .. to be continued

- KeyboardEvent: keyCode property is depricated, replaced by key property [2]

- the check for ifDetailOpened is not necessary, because the hotkeys are not
  only applicable to image-results, by example:

   `!goi !go !scc hello`

- Key bindings like h for help are to be used in general (not only in vim-mode)

[1] https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
[2] https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
@return42
Copy link
Member

return42 commented Sep 11, 2023

[feature] ArrowKeys to navigate between image results

the hotkeys should not only applicable to image-results / I pushed 3eff63f on top of your branch .. read commit message for more details.

The hotkeys now are ...

image


Related:


But there is more work to do, there is an old issue:

I will fix it in a follow up PR.

@return42
Copy link
Member

@BernieHuang2008 @bonswouar can you please test my modifications .. if you think everything is OK, we should merge this PR.

@BernieHuang2008
Copy link
Contributor Author

@BernieHuang2008 @bonswouar can you please test my modifications .. if you think everything is OK, we should merge this PR.

Sure,please wait a moment ...

@BernieHuang2008
Copy link
Contributor Author

BernieHuang2008 commented Sep 12, 2023

Something wrong with my codespaces, please wait

@return42
Copy link
Member

Well, that's something wrong with my codespaces, so I'm sorry that I can't test it until I found out what's happened.

May be you have to checkout your master branch again since I forced pushed to your master branch when I removed the build files from your commit.

@BernieHuang2008
Copy link
Contributor Author

Thank you I've found it.

I think it works well.

But i still have the question, mentioned in the review --- using e.key is imprecise, an upper case or lower case letter could make it failed. Are you really sure to use key name instead of key code? May I have the reason?

@return42
Copy link
Member

May I have the reason?

I wrote it down in the commit message: 3eff63f

@BernieHuang2008
Copy link
Contributor Author

BernieHuang2008 commented Sep 12, 2023

I wrote it down in the commit message: 3eff63f

sorry i missed it.

I agree with you now.

@bonswouar
Copy link
Contributor

Looks good!
Although a side effect is that even if no result is selected when you press the arrow keys it will highlight it, but that can be a feature :)

@BernieHuang2008
Copy link
Contributor Author

Looks good!
Although a side effect is that even if no result is selected when you press the arrow keys it will highlight it, but that can be a feature :)

I think we sometimes need this, especially in the "general" mode.
Although we can improve it by smoothing the animation or else.

@bonswouar
Copy link
Contributor

bonswouar commented Sep 12, 2023

Although we can improve it by smoothing the animation or else.

Personally I don't mind no animation!

@return42
Copy link
Member

Thanks to all who had worked on this topic 👍 .. and made SearXNG better and better :)

I'm going to merge the PR now ..

@return42 return42 merged commit aa1453d into searxng:master Sep 12, 2023
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEATURE REQUEST] use the left and right arrow keys to switch between images when the image preview is open
5 participants