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.

Sign up for GitHub

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

Jump to bottom

automatically focus in the textbox when you start a search #1426

Merged
merged 10 commits into from
Oct 16, 2024
Merged

automatically focus in the textbox when you start a search #1426

Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
84b606f
automatically focus in the textbox when you start a search
cellio Oct 9, 2024
7dbd996
Merge branch 'develop' into cellio/829-auto-focus-search
cellio Oct 10, 2024
3416db5
Merge branch 'develop' into cellio/829-auto-focus-search
Oaphi Oct 11, 2024
ebcb474
better way to do this JS suggested by reviewer; we might be able to e…
cellio Oct 11, 2024
762e27a
automatically focus in the textbox when you start a search
cellio Oct 9, 2024
d9d8d84
better way to do this JS suggested by reviewer; we might be able to e…
cellio Oct 11, 2024
4843709
formatting
cellio Oct 14, 2024
ce11a35
formatting
cellio Oct 14, 2024
ffad455
Merge branch 'develop' into cellio/829-auto-focus-search
Oaphi Oct 14, 2024
653b183
formatting again, because my editor suggested something goofy that I …
cellio Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions app/views/layouts/_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,20 @@
<% mobile_logo_path = SiteSetting['MobileLogoPath'] %>
<% sticky_header = user_preference('sticky_header', community: false) == 'true' %>

<script>
$(document).ready(function () {
$('a[data-header-slide="#search-slide"]').on('click', focusSearch);
});

var search = false;
function focusSearch() {
Copy link
Member

@Oaphi Oaphi Oct 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

A couple of notes:

  • avoid using var at all costs, const for unchangeable cariables and let for reassignable is a must:
  • the focusSearch function has a "scope bleed" - it should be called something like toggleSearchFocus and accept a single boolean parameter, which you then pass in the handler function. I'll provide example implementation a bit later;
  • avoid using function style of delaring pure functions, arrow syntax has better semantics in this context;

search = !search;
if (search) {
$('#search').focus();
}
}
</script>

<header class="header is-small has-margin-0<%=' is-dark' if SiteSetting['SiteHeaderIsDark'] %><%= ' sticky' if sticky_header %>">
<div class="container header--container">
<div class="header--brand">
Expand Down
Loading