search

redimp / otterwiki

A minimalistic wiki powered by python, markdown and git.
https://otterwiki.com
MIT License
252 stars 23 forks source link

feature request: shortcut for search bar toggle #93

Closed Jocho-Smith closed 6 months ago

Jocho-Smith commented 7 months ago

I use otterwiki almost daily and one thing I've noticed is that when I search for something I know is captured in the wiki (and I know in which article it is), it takes a relatively long time to get to it (compared to other software I use).

When I could use a shortcut for the searching bar and stay with the cursor in the middle of the screen, it would go a lot faster.

If the search bar would already show me the 3 'closest' results it would be even faster. This 'closeness' would be already perfect if it would just be a grep -i wrapper, so no fancy 'taking typos into consideration' stuff.

Let me know if I can support the feature development somehow.

redimp commented 7 months ago

Thanks for opening this request.

To be clear: a) Handling the UI is what slows you down? Or does b) the search in the filesystem take too long?

if a): A shortcut like the Ctrl-K in Linux/Windows or Cmd-K in MacOS that focuses the search bar might help you? I have some hotkeys on my roadmap, will push this up on my list.

I personally don't the like pop up windows showig the search results, that are common in most modern web applications. In my experience they are too often not as useful as a well organizied result page. However, I would be happy to look at a pull request that implements this feature.

Jocho-Smith commented 7 months ago

I would say b), but it's not like it is too long, I just know that I slight tweak will speed it up substantially for me.

I don't know how to do it with Flask, but the functionality I'm asking for is implemented in JS in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Search Bar</title>
</head>
<body>
<h1>Test:</h1>

<!-- Search bar -->
<input type="text" id="searchBar" class="search-bar" placeholder="Search...">

<script>
    document.addEventListener("keydown", function(event) {
        var searchBar = document.getElementById("searchBar");
        if (event.ctrlKey && event.key === "/") {
            searchBar.focus(); 
            event.preventDefault(); // Prevent the default action of the key combination (usually opening the browser's search)
        }
    });
</script>

</body>
</html>

if you press CTRL + / is does the thing. Forget about the search results :D

Jocho-Smith commented 7 months ago

I looked at it a bit now. I think the following should do it:

  1. in otterwiki/templates/layout.html adding the id="searchBar"
  2. somewhere in the templates or in the static/js just adding the script in the code I just provided.

Can you tell me how to do step 2.? Than I would try to do a pull request.

redimp commented 6 months ago

Got a solution in the queue:

I'm testing / is the the hotkey of choice, even if it overwrite the search in some browsers (in my tests, there Ctrl-F or CMD-F was still an option)

redimp commented 6 months ago

/ added as icon in the search bar:

image

Browser Test:

image

Jocho-Smith commented 6 months ago

uuh, nice!