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

[Search] trigger 'focusin', 'focusout'. #3144

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

dreaming-augustin
Copy link
Contributor

@dreaming-augustin dreaming-augustin commented Dec 24, 2024

Trigger 'focusin' and 'focusout' whenever a search result item becomes active.

It allows websites to implement a solution for this:

[Search] Bring active result into view #3143

It allows websites to implement a solution for this:

[Search] Bring active result into view fomantic#3143
fomantic#3143
@dreaming-augustin
Copy link
Contributor Author

This patch at least allows for a partial solution to [Search] Bring active result into view #3143

It allows websites to implement their own solution, according to their needs.
A website in now able to implement something like the following on their own:

        // Scroll  search results into view.
        $('#search').on('focusin', '.result', function() {
                var offset = $(this).offset();
                var viewportTop    = $(window).scrollTop();
                var viewportHeight = $(window).height();
                var viewportBottom = viewportTop + viewportHeight;
                var elementTop     = $(this).offset().top;
                if (elementTop > (viewportBottom - 150)) {
                        offset.top = elementTop - (viewportHeight / 4);
                        $('html, body').animate({
                                scrollTop: offset.top,
                        }, 200);
                }
                if (elementTop < (viewportTop + 150)) {
                        offset.top = elementTop - (3 * viewportHeight / 4);
                        $('html, body').animate({
                                scrollTop: offset.top,
                        }, 200);
                }
        });

This feels a bit hackish and too specific. It can be discussed whether something more appropriate could be considered to be included within Fomantic.

At the very least, triggering focusin(), developers have more options to deal with their own business needs.

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.

1 participant